実用Javascriptデバッグ技術を共有する

多すぎる学友がJavascriptを調整することを見たことがあって、簡単なconsole.log甚だしきに至ってはalertを使うことができます.見ていて本当に彼らのために鶏を捕ります.多くの学生は優雅さを追求して、効率的にコードを書いていますが、優雅で効率的なデバッグコードを無視しています.以下は実用的で聡明なデバッグ技術を共有します.自分のコードをデバッグする時、もっと余裕を持って自信を持つようにしたいです.
1.alertを使用しないでください.
まず、alertは文字列しか印刷できません.印刷対象がStringでないと、toString()方法を呼び出して、[object Object]のようなオブジェクトを文字列に変換します.だから、Stringタイプのオブジェクトを印刷しない限り、他のどんな情報も取得できません.次に、alertはUIとjavascriptの実行をブロックします.必ず「OK」ボタンをクリックして続けます.非常に効果がありません.ですから、alertを使うのが好きな人はこの習慣を変えられます.
2.学会使用console.logconsole.logは誰でも使うことができますが、多くの学生は最も簡単なconsole.log(x)だけを知っています.このように一つのオブジェクトを印刷します.あなたのコードの中のconsole.logが多くなったら、あるプリント結果とコードを対応するのは難しいです.プリント情報にラベルを付けて区別しやすいです.

let x = 1;
console.log('aaaaaaaa', x);

取得:
ラベルは必ずしも明確な意味を持たなくてもいいです.視覚効果が顕著であればいいです.もちろん明確な意味があります.
実際には、console.logは、任意の多くのパラメータを受信し、最後にこれらのオブジェクトをつなぎ合わせて出力することができる.
印刷情報が多すぎて、目的情報が見つけにくい場合は、コンソールでフィルタリングできます.
注意点console.logを使用して参照タイプ(配列やカスタムオブジェクトなど)のオブジェクトを印刷する場合、出力結果はconsole.log方法を実行する時点の値ではないかもしれない.例を挙げます
2つのconsole.logが出力した結果は、配列が参照タイプであるので、展開後に得られたのは配列の最新の状態であることが分かった.[1, 2, 3, 4]を使ってこの問題を解決できます.
3.様式をJSON.parse(JSON.stringify(...))に追加する
もし私たちがconsole.log印刷結果のフォント、色を同じにしたくないなら、もっと目立つ表示をしてもいいです.私たちはCSSを使用して、console.logにスタイルを追加することができます.たとえば:

console.important = function (msg) {
  console.log('%c %s', 'color:white; background-color:#FF1744; font-weight:bold; text-transform: uppercase; font-size:18px; padding:4px', msg);
}

console.todo = function (msg) {
  console.log('%c %s %s %s', 'color:black;background-color:#ffde03; font-size:18px; padding:4px', '–', msg, '–');
}

console.important('This is an important message! ');
console.todo('This is something need to be done');

4.学会使用console.log私たちはたまにDOMオブジェクトの中にどのような属性と方法があるかを見たいですが、従来のconsole.dirはHTMLタグだけをプリントしています.このように:
直接的に元素を審査するのと区別がありません.
もしDOMオブジェクトがJavaScriptオブジェクトとして見たい場合の構造は、console.logを使用することができます.
実際には、console.dirは、任意のJavaScriptオブジェクトの属性リストを印刷することができます.
5.学会使用console.dir私たちはよくこのような場面に遭遇します.一人のユーザリストを取得し、各ユーザには多くの属性がありますが、その中のいくつかの属性を確認したいだけです.console.tableはこの問題を完璧に解決します.例えば、私は下記のユーザーのIDと座標だけを取得したいです.console.log印刷結果:console.table印刷結果:
とても正確で速いです.
6.学会使用console.logコードの性能や非同期方法がどれぐらい実行されるかを知りたい時があります.この時はタイマーを使う必要があります.JavaScriptは既存のconsole.table方法を提供しています.
7.DOM要素を素早く検索する
ウェブページ上のいくつかの要素を検索する必要があります.ブラウザコントロールでconsole.timeを介して照会することを選択します.しかし、chromeとfirefoxはjQueryのようなクエリ文を使用するより速い方法を提供しています.console.timeは、条件に適合する第1の要素を返し、document.querySelector/document.querySelectorAllは、条件に適合するすべての要素を返す.
8.$('.item')でブレークポイントを使う
時には、ブレークポイントをシングルステップで調整する必要があります.普通は、ブラウザコントロールで直接ブレークポイントを選択しますが、これはまずSourcesの中にソースコードを見つけてから、ブレークポイントが必要なコードを見つけて、時間がかかります.$$('.item')のキーワードを使って、私達は直接ソースコードの中で断点を定義することができます.
9.ソースファイルを確認する
時々、私達はコンソールのdebuggerの中であるjsソースファイルを探したいです.フォルダを一つ一つ開けて探すのは面倒くさいです.実はChromeはファイルの検索機能を提供していますが、ほとんどの場合は無視しました.debugger(windowsのショートカットキーは自分で調べてください)を押せば検索ボックスをポップアップしてあなたが探しているファイルを検索できます.
10.JSファイルの読み取りを圧縮する
時にはSourcesでjsコードを読む必要がありますが、圧縮されていることが分かりました.Chromeも便利なフォーマットツールを提供しています.コードを再読み取り可能にします.
点が終わったらこうなります.
以上は私個人がふだん比較的によく使ういくつかのデバッグの小さい技巧で、もしみんなはその他の良いデバッグの技巧があるならば、同じく分かち合うことを歓迎します.ありがとうございます.
最後に、Funebug、使いやすいBUG監視ツールをオススメします.