カスタム コンソール クラスを共有すると、JS_javascript スキルのデバッグ コードの互換性を心配する必要がなくなります。

问题的产生

　　在写JS的过程中，为了调试我们常常会写很多 console.log、console.info、console.group、console.warn、console.error代码来查看JS的运行情况，但发布时又因为IE不支持console，又要去掉这些代码，一不小心就会出错。

　　本文分享自己昨晚写的一个console类来试图解决这一问题。当然，更好的做法是把测试代码分开写，那样就不会有这个问题。

解决思路

　　如何解决IE下不兼容的问题呢，那就是我们自己定义一个console类来覆盖浏览器提供的console功能，这样只要在页面中引用此JS文件就可以了。

　　另外，此类还提供了查看输出的调试信息功能，console 定义了哪些功能呢，我们可以在这里看到：http://getfirebug.com/wiki/index.php/Console_API，我们可以看到这里提供了很多方法，我们常用的有 console.log、console.info、console.group、console.warn、console.error、console.profile、console.time，最后两个是分析代码性能的，比较复杂，本文没有实现。
代码解析

　　第一步，当然是搭一个结构，覆盖浏览器(firebug、chrome)提供的console功能，这样直接引用此JS文件即可保证浏览器(主要是IE)中不出错：

复制代码 代码如下:

console

var console={
assert:function(){
},
clear:function(){
},
count:function(){
},
debug:function(){
},
dir:function(){
},
dirxml:function(){
},
error:function(){
},
exception:function(){
},
group:function(name){
},
groupCollapsed:function(){
},
groupEnd:function(){
},
info:function(){
},
log:function(){
},
memoryProfile:function(){
},
memoryProfileEnd:function(){
},
profile:function(){
},
profileEnd:function(){
},
table:function(){
},
time:function(){
},
timeEnd:function(){
},
timeStamp:function(){
},
trace:function(){
},
warn:function(){
}
};

第二步，实现 console.log方法。在所实现的几个方法中这个是最复杂的。

　　从firebug的API中我们可以看到，console.log不仅仅可以输出信息，还提供了类似 string.Format的功能，直接引用原文如下：

Here is the complete set of patterns that you may use for string substitution:

Pattern	Type
%s	String
%d, %i	Integer (numeric formatting is not yet supported)
%f	Floating point number (numeric formatting is not yet supported)
%o	Object hyperlink
%c	Style formatting

%c は特別で、出力にスタイルを追加します。たとえば、firebug で次のように記述します。

コードをコピーします コードは次のとおりです。以下のように:

console.log('%cTest Output', 'color:white; background-color:blue');

実行後の結果は次のようになります。以下:

ここで、%c は %s、%d などと混合することもできます。

したがって、コード内で直接 replace を使用します。JS の replace はデフォルトで最初に一致する項目のみを置換するため、コードは次のようになります。

コードをコピーします コードは次のとおりです。

var args=Array.prototype.slice.call(arguments);
if(args. length>1){
var i=1,hasstyle=false;
if(args[0].indexOf("%c")==0){
args[0]=args[0] ].replace(/% c/,"");
i=2;
}
for(;iif (/%s|% d|%i|%o/.test(args[0])){
args[0]=args[0].replace(/%s|%d|%i|% o/,args[i ]);
}
else{
break;
}
if(iargs[0] =args[0] " " args.slice(i).join(" ");
}
if(hasstyle){
consoleHelper.showlog(args[0],args[1]);
}
else{
consoleHelper.showlog(args[0]);
}
}
else if(args.length==1){
if(arguments [0] 配列のインスタンス) {
consoleHelper.showlog("[" args[0] "]");
}
else if(arguments[0] 関数のインスタンス){
consoleHelper.showlog (args[0], null,"console_log_function");
}
else{
consoleHelper.showlog(args[0]);
}
}
else{ >consoleHelper.showlog(" ");
}


console.log は複数のパラメータを受け入れることができ、その数は不確かであるため、ここには仮パラメータは記述されません。 %c については、Firebug では途中に書いても有効ですが、ここでは簡単さと直接性を考慮して先頭に書いた場合のみ有効とします。コードでは、まずパラメーターが配列に変換され、次に配列がケースバイケースで処理されます。

パラメータの数が 1 より大きい場合、次のパラメータを replace に置き換えて、残りのパラメータを結合して出力します。

パラメータの数が 1 つの場合、配列の場合とメソッドの場合の 2 つの状況が存在します。配列の場合はfirebugの形式に従い、両端に角括弧を追加します。関数の場合は単語の色を緑色に変更します

パラメータの数が0の場合は、空の文字列
以下の consoleHelper.showlog は、出力の便宜のために書かれたメソッドです。このメソッドでは、さまざまなデバッグ情報の結果がページ上の div に表示されます (存在する場合)。

他のいくつかのメソッドの考え方はこれと似ていますが、スタイルが異なり、関数はパラメータを接続して直接出力するだけです。

コンソール クラス コード全体は次のとおりです:




コードをコピーします

コードは次のとおりです:

console 全部代

var console={
assert:function(){
},
clear:function(){
},
count:function(){
}、
debug:function(){
}、
dir:function(){
}、
dirxml:function(){
},
error:function(){
var args=Array.prototype.slice.call(arguments);
consoleHelper.showerror(args.join(" "));
},
例外:function(){
},
group:function(name){
consoleHelper.showgroup(name);
}、
groupCollapsed:function(){
}、
groupEnd:function(){
}、
info:function(){
var args=配列。プロトタイプ.スライス.コール(引数);
if(args.length==1){
if(arguments[0] 配列のインスタンス){
consoleHelper.showinfo("[" args[0] "]");
}
else if(arguments[0] instanceof Function){
consoleHelper.showinfo(args[0],"console_log_function");
}
else{
consoleHelper.showinfo(args[0]);
}
}
else{
consoleHelper.showinfo(args.join(" "));
}
},
log:function(){
var args=Array.prototype.slice.call(arguments);
if(args.length>1){
var i=1,hasstyle=false;
if(args[0].indexOf("%c")==0){
args[0]=args[0].replace(/%c/,"");
i=2;
hasstyle=true;
}
for(;iif(/%s|%d|%i|%o/.test(args[0])){
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]);
}
else{
ブレーク;
}
}
if(iargs[0]=args[0] " " args.slice(i).join(" ");
}
if(hasstyle){
consoleHelper.showlog(args[0],args[1]);
}
else{
consoleHelper.showlog(args[0]);
}
}
else if(args.length==1){
if(arguments[0] 配列のインスタンス){
consoleHelper.showlog("[" args[0] " ]");
}
else if(arguments[0] instanceof Function){
consoleHelper.showlog(args[0],null,"console_log_function");
}
else{
consoleHelper.showlog(args[0]);
}
}
else{
consoleHelper.showlog("");
}
}、
memoryProfile:function(){
}、
memoryProfileEnd:function(){
}、
profile:function(){
} 、
profileEnd:function(){
}、
table:function(){
}、
time:function(){
}、
timeEnd:function( ){
}、
timeStamp:function(){
}、
trace:function(){
}、
warn:function(){
var args= Array.prototype.slice.call(引数);
if(args.length==1){
if(arguments[0] 配列のインスタンス){
consoleHelper.showwarn("[" args[0] "]");
}
else if(arguments[0] instanceof Function){
consoleHelper.showwarn(args[0],"console_log_function");
}
else{
consoleHelper.showwarn(args[0]);
}
}
else{
consoleHelper.showwarn(args.join(" "));
}
}
};

consoleHelper代码如下：

复制代 代码如下：

var consoleHelper={
showlog:function(val,style,cla){
if(cla){
cla="console_log " cla;
}
else{
cla="console_log";
}
this.show(val,style,cla);
},
showinfo:function(val,cla){
if(cla){
cla="console_info " cla;
}
else{
cla="console_info";
}
this.show(val,null,cla);
},
showwarn:function(val,cla){
if(cla){
cla="console_warn " cla;
}
else{
cla="console_warn";
}
this.show(val,null,cla);
},
showerror:function(val){
this.show(val,null,"console_error");
},
showgroup:function(val){
if(!val){
val="";
}
this.show(val ":",null,"console_group");
},
show:function(val,style,cla){
if(document.getElementById("showconsole")){
var div=document.createElement("div");
if(div.setAttribute){
if(style){
div.setAttribute("style",style);
}
}
else{
if(style){
div=document.createElement("

");
}
}
if(cla){
div.className=cla;
}
var oText=document.createTextNode(val);
div.appendChild(oText);
document.getElementById("showconsole").appendChild(div);
}
}
};

注: 希望する場合は、トップページで showconsole のディレクトリの div を直接追加します。

)：

复制代代码如下:

.console_log{
border:1px ソリッド #CCC;
カラー:#333;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
}
.console_info{
border:1px ソリッド #CCC;
カラー:#333;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
背景: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp mB sfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1 Q48koAAPHwXf w1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva cGRF7c hzKXgMqi7G4IDH5ZgbPlLduvhVWfnD n/cf6u7bVH2/a 9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYA hwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAapzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5 18r745jK XtllHWJWjkMS4CjfDE1 U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw pgLYwDmbELmaBi4vy R/TZgRs3QwQi63VXLb1jgWXGiICbiyi O3CjuCh /JAt8e xckhZ87cv KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T BmT uQr92 1dW1dnhq4xMIBBYHfZe ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4 evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIO js7 fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6 IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAABJRU5ErkJggg===) リピートなしスクロール 0 1px #EBF5FF;
パディング左:30px;
}
.console_warn{
border:1px ソリッド #CCC;
カラー:#333;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
背景: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi CIqCBYUjVhE8a W0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c /xIUmTdlN86ouDw71zvnvu7xx SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/it 8UI osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAW d3iqow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2Hou vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYg FO3cR 8sRCj3J6/6 hSNrwdebZ0 / rbI4 yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKK swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn 1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH qbOunyvbX5Y4pwAK UkoAJyJORLS1VmdZpuI4VlEUrS/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") no -繰り返しスクロール 0 1px #FFFFC8;
パディング左:30px;
}
.console_error{
border:1px ソリッド #CCC;
色:#FF0000;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
背景: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHS URBVDiNTZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j33N fMOfeMGGP 4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf c23oWzFMbHB4IZ82HVw4epFcET66 R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz xaZ3369ZgK6tfbm8NgCSy2 QixPVp8MNr/WmF zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8 fm hJorrptnyzbfE2ttRL71C8q9r KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5 YV9y8DGtj 26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch DWrRSmXaxYHB1wOh4DJ pq6 iUcaUIUAccmd ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/ 7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0 Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4 GAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa EY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89 J9mfzlFRG6UiFiU7cJ7ho 50A J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo mUZZFYHUIKVay7 1edfp0qcMta5sTbW3lBUefRMneZbQn608t fer k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5 IyYoRpIGPymih9f3/XD1aeeeCf6v gfLYZXwkd5f2QAAABJRU5ErkJggg== ) リピートなしスクロール 0 1px #FFEBEB;
パディング左:30px;
}
.console_group{
margin-top:20px;
フォントサイズ:16px;
フォントの太さ:太字;
}
.console_log_function{
色:緑;
}

ここでは、パフォーマンスの便宜のため、3 つの小さな図形は、base64 形式の図形、つまり上のコード内の 3 つの長文字列であり、一般に使用される場合は図形の場所に置き換えることができます。
完整代码：

复制代码代码如下:

JSCode
ログイン
結果
JavaScript
HTML
CSS
ALL
編集
共有
ダウンロード


<頭>

自定コンソール(Artwl.cnblogs.com)

小结

この JS の一方の面は作業中にこの側面を持っている必要性があり、また、博问中に有人问 JavaScript でどのように取得するかが原因です。 ？

前段階では、本明細書のような方式が採用されていないことを知らずに、console.log の結果を直接トップページに表示できる国内のインターネット ネットワークがあります。アートウル

関連ラベル：

console

ソース：php.cn

前の記事：DOM向けJavaScriptアプリケーション解析(3)_DOM 次の記事：DOM向けJavaScriptアプリケーション解析(2)_DOM

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

割り当てられた変数 props の優先サイズが正しく機能しません。 エディター用にドラッグ可能な分割パネルを作成したいと考えています。その動作は主に CodeSandbox のコンソール パネルに似ています。コンソールをクリックすると、パネルが展開...

から 2024-03-30 09:42:29

0

1

327

関連トピック

詳細>

• コンソールインターフェイスは何のためにあるのでしょうか?
• トップ10の仮想通貨の最新価格
• 1 ビットコインは人民元でいくらですか?
• ランダムと擬似ランダムの違い
• BTCコイン最新ニュース
• qsort関数の使い方
• C言語はC++と同じですか?
• Tomcat のソース コードを表示する方法