マスター ブラウザ DevTools:高度な JavaScript デバッグ テクニック

開発者は、コードをデバッグしたくなることがよくあります。すでに console.log を使用している可能性があります 一部の課題では、これが最も簡単なデバッグ方法です。

この記事では、ブラウザのネイティブ デバッグ ツールを使用してデバッグするための最もクールなトリックをいくつか説明します。

FreeCodeCamp コード エディターについての簡単な説明:

デバッグに入る前に、 その素晴らしいコード チェック エンジンに関する秘密の事実をいくつか漏らしてみましょう。 FCC で。

コードエディタとしてカスタマイズされた CodeMirror を使用します。 eval() 関数は、エディターから文字列として表される JavaScript コードを評価するために使用されます。 eval() のとき が呼び出されると、ブラウザはコードをネイティブに実行します。この秘密がなぜ重要なのかについては、この記事の後のセクションで詳しく説明します。

次はトリックに進みます:

Google Chrome は、V8 と呼ばれる組み込み JavaScript エンジンを備えた最も人気のあるブラウザの 1 つであり、Chrome DevTools と呼ばれる開発者向けの優れたツールセットを提供しています。完全な JavaScript デバッグ ガイドにアクセスすることを強くお勧めします。

1 :DevTools の基本

Chrome DevTools の起動

F12 を押します

。または、

Ctrl + Shift + I

Windows および Linux または

Cmd + Shift + I

Mac の場合、またはマウスが大好きな場合は、Menu > More Tools > Developer Tools にアクセスしてください。 .

Sources について知る と console タブです。

これら 2 つのタブは、デバッグ中におそらく親友となるでしょう。 Sources タブを使用すると、アクセスしている Web ページにあるすべてのスクリプトを視覚化できます。このタブには、コード ウィンドウ、ファイル ツリー、コール スタックとウォッチ ウィンドウなどのセクションがあります。

console タブには、すべてのログ出力が表示されます。さらに、コンソール タブのプロンプトを使用して JavaScript コードを実行することもできます。これは、Windows のコマンド プロンプト、または Linux のターミナルと同義です。

ヒント:Esc を使用して、DevTools でいつでもコンソールを切り替えます。 キーです。

2 :一般的なショートカットと機能

ショートカットの完全なリストにアクセスできますが、最もよく使用されるいくつかを以下に示します。

機能 Windows、Linux Mac
キーワードを検索します。正規表現がサポートされています。 Ctrl +F``Cmd +F
ファイル Ctrl を検索して開きます +P``Cmd +P
Ctrl 行にジャンプします +G +:line_no``Cmd +G +:line_no
ブレークポイント Ctrl を追加します +B 、または行番号Cmdをクリックします。 +B 、または行番号をクリックします。
スクリプトの実行を一時停止/再開 F8 F8
次の関数呼び出し F10 をステップオーバーします。 F10
次の関数呼び出し F11 にステップインします。 F11

3 :コードにソース マップを使用する

あなたが気に入る最も優れた機能の 1 つは、ソース マップを介して動的スクリプトをオンザフライでデバッグできることです。

すべてのスクリプトは、DevTools の [ソース] タブで視覚化できます。 「ソース」タブには、すべての JavaScript ソース ファイルが含まれています。ただし、コード エディターのコードは eval() 経由で実行されます。 ブラウザ プロセス内の単に仮想マシン (VM) と呼ばれるコンテナ内。

もうお気づきかと思いますが、私たちのコードは実際にはファイル名を持たないスクリプトです。したがって、[ソース] タブにはそれが表示されません。

ハックの登場です!

Source Maps を活用する必要があります エディターから JavaScript に名前を割り当てます。とてもシンプルです:

Factorialize チャレンジに取り組んでおり、コードが次のようになっているとします。

function factorialize(num) {
 if(num <= 1){
 ...
}
factorialize(5);

//# sourceURL=factorialize.js を追加するだけです。 コードの先頭、つまり最初の行:

//# sourceURL=factorialize.js
function factorialize(num) {
 if(num <= 1){
 ...

そしてエウレカ、それだけです!

次に、DevTools を開いてファイル名を検索します。ブレーク ポイントを追加し、デバッグを楽しんでください。

デバッグの詳細:

• バグ潰しに関する初心者向けガイド
• 初心者向けのデバッグのヒントとテクニック
• ブラウザのデバッグ コンソールを最大限に活用する方法

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう