さまざまなブラウザーでデバッグするためのK.O'Nsole.log関数

良いconsole.logですが 、これ以上賞賛するところはありません。 そして、それはどこでもサポートされておらず、複数文字に悩まされています。 そして、タスクは、console.log(またはそれ以上)と同じくらい柔軟ですが、1つまたは複数の値を表示するために変更することなく異なるブラウザーに適合させる単純な機能を持つことです。 デバッグでは、行のテキストの説明ヘッダーが必要になることが多いため、 Alertという名前の行(Stringオブジェクト)にメソッドを追加して、 console.logと同じことを実行し、引数リストの前にコンテキスト文字列を表示すると便利です。 (アポストロフィの行。このようなタイトルが書かれているコードでコピーして検索すると便利なので。)

各ブラウザの実装でさまざまなコマンドを詳しく調べることは、別のブラウザでチェックインするときに意味をなさないため不要です。 長いdopilivanieの完璧な製品は単に採算が取れず、特に専門的な知識を深め、それから新製品、エラー、それらの排除を追跡する必要があります。 さらに、デバッグコンソールの基本機能を使用して何かが必要になった場合に簡単に変更できる完全にシンプルなワークフローが必要です。

システムはconsole.log自体を再定義するよりも少し複雑で(内部のalertInner関数)、次の利点があります。
1)新しい単語は2つだけあり、それらはよく知られています。
2)単語がK.O'Nsより短い...(など);
3)使用される他の名前を置き換えません。
4)他の複雑なスクリプトよりもはるかに単純で、
5)コードは読みやすく、カスタマイズしやすい。

このシステムの通常のアラート()は、出力の最悪の代替手段として関与しています。 ただし、コンマで区切られた複数の値を一度に生成することもできます(たとえば、DebugBarが有効になっていないIE8の場合)。

多くの場合、2つの基本アクションが必要です。1つのコマンドですべてのデバッグを無効にします。 少量のアラートを強制的に監視する場合、または一部のメッセージのみを表示する場合は、ほとんどのデバッグを無効にします。 これにはコンテキスト文字列が適しています。 見出しに(貪欲な)正規表現のサンプルが含まれるメッセージのみを含めます。

Alert.go =''; //-  ;   DEBUG = true; ,    ; Alert.go ='.'; //-   -,  ''.Alert() (  Alert     -  ,  1); Alert.go ='.*'; //    ,    ,  2; delete Alert.go; //-  ; Alert.go ='fthghhfgh'; // -; Alert.go ='^(aab|xaa==|test45:|xxx|__)$'; //-    ( -). 
(便宜上、2つの例外と1つのカスタマイズがコードに埋め込まれています。後者は破棄するか、その逆に開発することができますが、例外は便利で理解しやすいものです。すべてのアクションを無効にする必要があります。フィルターなしで-コマンドシステムを増やすことなく)

以下を開始します。
 Alert(aaa, bbb,'====', ); //  console.log() 'xaa=='.Alert(xaa, xx.element, xaa(1)); //,   -       '-test-'.Alert('   , ', Alert); 

したがって、異なるデバッグページで異なる問題を実行することは便利で明確です。 ツールは非常にシンプルなままです(同じ名前の関数は3つしかありませんが、それぞれ馴染みがあり、需要があります)。 または、たとえば、 Alert({from: '-test-'、xx:other parameters ...})という形式のメッセージのコードに特別な出力を追加しました 。 通常、この形式は必要ありません。 忘れられている; しかし、その利点は、最初の引数であるハッシュが解析されて表示されることです。場合によっては、単純なアラートとHTMLで表示する必要があります。

同じメッセージングシステムは、他のイベントのアプリケーションとして、作業中のプロジェクトに別の名前でコンソールに表示されず、ユーザー向けであるかサーバーに転送される場合は適切に設計されたブロックに実装できます。

コンソールの場合、Operaの初期の段階では必要だったので、今では必要ありません(Dragonflyコンソール、Ctrl-Shift-I、次に「> _」アイコンがあります)。
 ...else if (window.opera && opera.postError) {opera.postError(arguments);} 

...最近、ここFF5(またはfirebug?)で、console.log.applyを理解することを拒否して写真を台無しにし、い代替物を追加する必要がありました。 バグを回避する方法、思い付かなかった、とは限らない。 まれに、引数の数が7を超えており、いつでも引数を配列に収集できます。

機能コード:
 /** * / "--", spmbt0, 30.07.2011 * @context (String) :  ,    * @property go: .     undefined,    * @param o: ,   1     */ Alert = function(o){ if(Alert.go===undefined) return; //===  === var alertInner = function(x, xx,a,b,c,d,e){ //x:  ( FF5 -  7,  Firebug   ) var aL = arguments.length; if(!window.console){ for(var i =0, args =[]; i < aL; i++) args[i] = arguments[i]; alert(args); }else if(console.log.apply) console.log.apply(console, arguments); else{ // - 5- FF    console.log.apply if(aL ==1) console.log(x); else if(aL ==2) console.log(x, xx); else if(aL ==3) console.log(x, xx, a); else if(aL ==4) console.log(x, xx, a, b); else console.log(x, xx, a, b, c, d, e); } }, hasContext = this !== window , context = this; if(hasContext && context instanceof String){ if(!RegExp(Alert.go,'g').test(context)) //===  === return; for(var i =1, args =[]; i <= arguments.length; i++) args[i] = arguments[i -1]; args[0] = "'"+ context +"':"; alertInner.apply(window, args); //===console.log      === }else{ //  .   {from:'', ...} if(Alert.go =='.' || Alert.go =='.*') return; //===  === if(o && o.from && o.from !=''){ //        "from",    var args =[], j =1; for(var i in o) if(i !='from'){ args[j++] = '{'+ i +'}'; args[j++] = o[i]; } if(arguments.length >1) // args[j++] ='}; '; for(var i = 1, aL = arguments.length; i < aL; i++) //   args[j++] = arguments[i]; args[0] = "'"+ o.from +"':"; alertInner.apply(window, args); //===console.log    "from"   === }else alertInner.apply(window, arguments); //=== console.log=== } } String.prototype.Alert = Alert; Alert.go =''; //  //Alert.go ='test-'; //       (   Alert() ) 
結果のコンテンツをコンソールで表示するには、次を実行します。
Firefox :Firebugがある場合-Ctrl-Shift-L(コマンドライン); それなしで- 誰も知らない :);
Chrome :Ctrl-Shift-J(Javascriptコンソール);
Safari :Ctrl-Alt-C(エラーコンソール);
IE :アラートを表示しないように、DebugBarまたは同様のものを開きます。
Opera :メッセージはエラーコンソール(Ctrl-Shift-O)に表示されますが、そこには-ゴミがあります。 より便利-Dragonflyで(Ctrl-Shift-I、次に "> _"アイコン)。

次の例のスクリプトを参照してください: spmbt.kodingen.com/function/testAlert.htm



質問(世論調査):誰がどのような怪物ではないデバッグソリューションを使用しますか?

*)Firebugには、その名前がわからない場合、説明で見つけるのが非常に難しい機能があることを文献に追加します。 「 デバッガ; 」と呼ばれます 。 このような名前がjavascriptで見つかった場合、Firebugは通常のブレークポイントのように停止します。プログラムは[続行](F8)をクリックして[スクリプト]タブからさらに開始します。
weirdanが書きました:- この機能はECMA-262-5にあり、FxとIEの両方でサポートされています。

0. Firebug コマンドラインAPI
0.1 Firebug 1.8がリリースされました (Firefox 5.0でサポートされます)。 バージョンの新機能に関する詳細情報(Habréに掲載)

Habréのコンソールについて:
1. 「さまざまなブラウザーおよび環境でのJavascriptのデバッグ」 、2009年1月24日、 lomaster
2. コンソールを完全に使用します (2011年2月26日、Ryan Seddon)
3. リモートJavascriptデバッグ 、2011年3月3日、youtu.be ...
4. 最新のJavaScriptデバッグ 、2009年2月7日、Chris Mills、Hallvor ...
5. デバッグツールの使用 、2008年8月27日、Pamela Fox、Google M ...

Source: https://habr.com/ru/post/J125308/


All Articles