GoogleChromeDevToolsとVisualStudioCodeを使用してJavaScriptをデバッグする方法
序章
デバッグを学ぶことは、開発中のエラーを効率的に修正できるため、開発者にとって不可欠なスキルです。 統合開発環境(IDE)の外部でJavaScriptを操作する場合、デバッグツールの使用方法を理解しているとは限らない場合があります。
このチュートリアルでは、Google Chrome DevToolsと、人気のあるテキストエディター Visual Studio Code (VS Code)を使用したJavaScriptのデバッグについて説明します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- マシンにインストールされているGoogleChromeの最新バージョン。
- マシンにインストールされているVisualStudioCodeの最新バージョン。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
このチュートリアルでは、ノードサーバーで実行できる独自のJavaScriptプロジェクトの1つにレッスンを適用できますが、必要に応じて、サンプルアプリケーションを使用して従うオプションもあります。
ステップ1—サンプルアプリの作成(オプション)
フォローするJavaScriptプロジェクトがない場合は、この手順を実行してクイックチャットプロジェクトを作成できます。
Gitを使用してクローンDesign-and-Build-a-Chat-Application-with-Socket.iorepoを使用します。 または、zipファイルをダウンロードして内容を解凍することもできます。
注:システムにGitをインストールする必要がある場合は、Gitの使用開始を参照してください。
このチュートリアルでは、パート8のコードを使用します。 アプリケーションがどのように機能するかを理解するために少し時間を取ってください。
プロジェクトディレクトリとに移動することから始めます part-8
ディレクトリ:
- cd Design-and-Build-a-Chat-Application-with-Socket.io
- cd part-8
次に、プロジェクトのnpmパッケージをインストールします。
- npm install
次に、サーバーを起動します。
- npm start
あなたが訪問した場合 127.0.0.1:3000
Chromeでは、usernameのプロンプトが表示されます。 ユーザー名を入力してチャット!ボタンをクリックすると、チャットアプリに移動し、次のように表示されます。
- OutputUser joined the chat...
ウィンドウ下部の入力にテキストを入力し、送信ボタンをクリックすると、メッセージがチャットウィンドウに表示されます。
新しいブラウザタブを開いて同じURLにアクセスすると、別のユーザーとしてログインし、両方のブラウザタブでチャットウィンドウに送信されるチャットメッセージを確認できます。 これは、このアプリケーションに期待される機能です。
バグの紹介
ここで、意図的に、ログイン後にユーザーが誰であるかを登録できない小さなバグを導入します。
開ける part-8/public/app.js
テキストエディタで検索します line 96
:
//set the username and create logged in message
username = usernameInput.value;
この行を次のように変更します。
//set the username and create logged in message
username = usernameInput.text; // added bug
ブラウザタブを更新します。 ログインして、次のことを確認してください。
- Outputundefined joined the chat...
アプリは、参照することでユーザーのユーザー名を誤って取得します usernameInput.text
それ以外の usernameInput.value
. これを使用してデバッグを練習します。
ステップ2—デバッグの基本を理解する
アプリのデバッグを開始する前に、デバッグの仕組みを理解しておくと役立ちます。 デバッグの考え方は、ブレークポイントと呼ばれるものを(条件付きで)トリガーして、コードの実行を一時停止できるようにすることです。 これにより、変数の検査などのアクションを実行して、アプリケーションの状態を確認することができます。 さらに一歩進んで、選択した変数を「監視」することもできます。これにより、アプリケーションが一時停止するたびに、これらの変数の値を具体的に調べることができます。
ブレークポイントをトリガーした後、通常、次のオプションがあります。
- プログラムの実行を続行します。
- コードを1行ずつステップスルーします。
- 現在の機能から抜け出します。
- 次の関数呼び出しにステップインします。
さらに、コールスタックを表示するためのアクセス権があります。 つまり、関数がプログラム内の他の関数を呼び出すときに、それらの関数呼び出しの履歴を調べることができます。
デバッグの仕組みの基本について説明したので、アプリのデバッグを開始する準備が整いました。
ステップ3—GoogleChromeでのデバッグ
Chromeでのデバッグを開始するには、アプリケーションにdebuggerステートメントを追加します。
サンプルアプリケーションをフォローしている場合は、サンプルアプリケーションに追加できます。 loginBtn
イベントハンドラをクリックします。
loginBtn.addEventListener('click', e => {
debugger; // added debugger
e.preventDefault();
if (!usernameInput.value) {
return console.log('Must supply a username');
}
//set the username and create logged in message
username = usernameInput.text; // added bug
sendMessage({ author: username, type: messageTypes.LOGIN });
//show chat window and hide login
loginWindow.classList.add('hidden');
chatWindow.classList.remove('hidden');
});
このステートメントに達すると、アプリケーションが一時停止され、デバッグツールが自動的にアクティブ化されます。 アプリケーションが停止したことを示すために、アプリケーションがグレー表示されていることに気付くでしょう。 また、ChromeDevToolsのSourcesタブがポップアップ表示されます。
私たちが見ているものを分解してみましょう。
ソース
最初に気付くのは、コードのコピーのように見えるものです。 これは、ブラウザがロードしてアプリケーションとして実行しているコードです。 また、 debugger
行は青色で強調表示され、アプリケーションが一時停止された場所であることを示します。
Chromeには、理由からこのコードを表示する機能があります。 コードが目の前にあるので、ブレークポイントを設定できます。 ブレークポイントは、プログラム内の意図的な停止または一時停止の場所です。
ブレークポイントを追加するには、行番号の左側にあるガターまたは空のスペースをクリックします。 あなたがそうするように、Chromeはこのブレークポイントをさらに下のブレークポイントのリストに追加することに注意してください。
範囲
[スコープ]タブでは、アプリケーションの変数を検査することができます。 Local セクション(ブレークポイントがある関数のローカルスコープ)、 Global セクション(グローバルスコープ)、およびScriptセクションがあることに気付くでしょう。 ] セクション。 Script セクションでは、現在のスクリプトのスコープ内の変数を表示できます。
これは、デバッグ時間のかなりの量が費やされる場所です。 これは、多くを書き出すためのはるかに効率的な代替手段です console.log()
ステートメント。
時計
スコープタブで変数を表示するだけでなく、具体的に調べたい変数を定義することもできます。 ウォッチタブに変数を追加することで、ブレークポイントに到達するたびに、その変数の値をすばやく見つけることができます( undefined
コード内のどこにいるかによって異なります)。 add アイコン(+)を使用して、追跡する変数の名前を入力します。
サンプルアプリケーションをフォローしている場合は、次を使用できます。
usernameInput
ステップ関数、コールスタック、およびブレークポイントリスト
最後のセクションでは、ブレークポイント、コールスタックなどのリストを表示できます。
サンプルアプリケーションをフォローしている場合、コールスタックには、ログインボタンのイベントハンドラーとしてリストされている関数が含まれます(loginBtn.addEventListener.e
). この関数は、これまでに呼び出された唯一の関数であるため、リストされています。 関数がより多くの関数を呼び出すと、そのチェーンは適切に更新されます。
デバッガーの上部にある矢印ボタンにも注意してください。
これらは、コードの実行を継続したり、コードを1行ずつまたは関数ごとにステップ実行したりするために参照される関数に対応しています。 これらのボタンを少しテストして、コードの実行をナビゲートする方法に慣れてください。
最後に、設定できるブレークポイントにはさまざまな種類があります。 条件付きブレークポイントの作成を見てみましょう。条件付きブレークポイントは、特定の条件が満たされた場合にのみトリガーされます。 ガターを右クリックして、条件付きブレークポイントの追加…を選択します。
サンプルアプリケーションをフォローしている場合は、ユーザーがユーザー名を入力せずにログインしようとしたときのブレークポイントを作成できます。 次の条件で条件付きブレークポイントを設定します。
usernameInput.text === ''
サンプルアプリケーションをデバッグする場合、ユーザー名を入力せずにログインボタンを押すと、このブレークポイントがトリガーされます。 それ以外の場合、コードは通常どおり実行され続けます。
ここで説明されていない、さらに多くのブレークポイントオプションが利用可能であることに注意してください。
ステップ4—VSCodeでのデバッグ
これまで見てきたように、Chrome DevToolsは、多くの機能を備えたアプリケーションをデバッグするための優れたエクスペリエンスを提供します。 ただし、Visual Studio Codeには多くの点で、環境にシームレスに統合された一致するデバッグ機能があります。
VS Codeでデバッグを開始するには、 DebuggerforChrome拡張機能をインストールします。
サイドバー(デフォルトではエディターの左側)にある[デバッグ]タブを簡単に見てみましょう。 バグのように見えるアイコンをクリックして、デバッグタブを開きます。
このペインを開くと、Chromeで見たものと同様のツール(変数、監視、呼び出しスタック、ブレークポイント)が表示されます。
Chrome DevToolsで利用できる機能の大部分は、ここVSCode内で利用できます。
[デバッグ]タブが表示されたので、アプリケーションのデバッグ方法をVSCodeに指示する起動構成を作成します。 VS Codeは、デバッグ構成をというファイルに保存します launch.json
名前の付いたフォルダ内 .vscode
.
VS Codeにこのファイルを作成させるには、に記載されているリンクをクリックして、実行とデバッグをカスタマイズし、ペインにlaunch.jsonファイルメッセージを作成します。 メニューをナビゲートし、実行を選択してから構成の追加…を選択することによってもこれを達成できます。 次に、Chromeを選択します。
作成した特定の構成は、定義されたポートでアプリケーションに自動的に接続されます。
アプリのソースコードを正しく指すように、この構成を変更する必要がある場合があります。
サンプルアプリケーションをフォローしている場合は、ポートを次のように変更する必要があります。 8080
に 3000
.
サンプルアプリケーションは、 public
ディレクトリを更新する必要があります webRoot
それを反映するために。
サンプルアプリケーションをデバッグするために、 launch.json
ファイルは次のようになります。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/public"
}
]
}
注:これを機能させるには、アプリケーションが特定のポートでローカルで実行されている必要があることに注意してください。
構成が定義されたら、ペインの上部にある緑色の play ボタンをクリックして、デバッグセッションを開始できます。 メニュー(実行、デバッグ開始)およびキーボードショートカットを使用することもできます。
アプリケーションがChromeウィンドウにポップアップ表示されます。
VSCode内のバックグラウンドでポップアップしたデバッグメニューバーに気付くでしょう。 このデバッグツールバーを使用すると、一時停止、再起動、続行、およびステップ関数を使用してコードをナビゲートし、デバッガーを操作できます。
デバッグを接続すると、Chromeで行ったようにコードにブレークポイントを設定できます。 行番号の横にあるガターをクリックします。
サンプルアプリケーションをフォローしている場合は、ログインイベントコールバックのすぐ内側の以前と同じ場所にブレークポイントを作成します。
これで、ユーザー名を入力せずにログインしようとすると、ブレークポイントがトリガーされ、コンテキストがVS Codeに戻されて、さらに調査されます。
ここから、Chromeで説明した機能がVSCodeに直接マッピングされます。 条件付きブレークポイントを追加する場合は、ガターを右クリックして、条件付きブレークポイントの追加…を条件付きで選択します。 変数を監視する場合は、クリックして新しい変数を追加し、監視する変数の名前を入力します。 変数を調べる場合は、変数タブに移動します。
結論
このチュートリアルでは、ChromeとVisualStudioCodeの両方を使用してアプリケーションをデバッグしました。 これらのオプションの両方がどのように機能するかを知っていると、自分に最適なワークフローを採用できるようになります。
開発者として次のステップを踏み出すには、プログラミング言語で利用できるツールのエコシステムを利用する必要があります。 デバッグは、開始するのにある程度の時間と労力を要するトピックの1つですが、最終的には、メリットがコストを上回ります。