序章

デバッグを学ぶことは、開発中のエラーを効率的に修正できるため、開発者にとって不可欠なスキルです。 統合開発環境(IDE)の外部でJavaScriptを操作する場合、デバッグツールの使用方法を理解しているとは限らない場合があります。

このチュートリアルでは、Google Chrome DevToolsと、人気のあるテキストエディター Visual Studio Code (VS Code)を使用したJavaScriptのデバッグについて説明します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルでは、ノードサーバーで実行できる独自のJavaScriptプロジェクトの1つにレッスンを適用できますが、必要に応じて、サンプルアプリケーションを使用して従うオプションもあります。

ステップ1—サンプルアプリの作成(オプション)

フォローするJavaScriptプロジェクトがない場合は、この手順を実行してクイックチャットプロジェクトを作成できます。

Landing page for the Quick Chat test application

Gitを使用してクローンDesign-and-Build-a-Chat-Application-with-Socket.iorepoを使用します。 または、zipファイルをダウンロードして内容を解凍することもできます。

注:システムにGitをインストールする必要がある場合は、Gitの使用開始を参照してください。

このチュートリアルでは、パート8のコードを使用します。 アプリケーションがどのように機能するかを理解するために少し時間を取ってください。

プロジェクトディレクトリとpart-8ディレクトリに移動することから始めます。

  1. cd Design-and-Build-a-Chat-Application-with-Socket.io
  2. cd part-8

次に、プロジェクトのnpmパッケージをインストールします。

  1. npm install

次に、サーバーを起動します。

  1. npm start

Chromeで127.0.0.1:3000にアクセスすると、usernameのプロンプトが表示されます。 ユーザー名を入力してチャット!ボタンをクリックすると、チャットアプリに移動し、次のように表示されます。

  1. Output
    User joined the chat...

ウィンドウ下部の入力にテキストを入力し、送信ボタンをクリックすると、メッセージがチャットウィンドウに表示されます。

新しいブラウザタブを開いて同じURLにアクセスすると、別のユーザーとしてログインし、両方のブラウザタブでチャットウィンドウに送信されるチャットメッセージを確認できます。 これは、このアプリケーションに期待される機能です。

バグの紹介

ここで、意図的に、ログイン後にユーザーが誰であるかを登録できない小さなバグを導入します。

テキストエディタでpart-8/public/app.jsを開き、line 96を見つけます。

パート-8/public / app.js
  //set the username and create logged in message
  username = usernameInput.value;

この行を次のように変更します。

パート-8/public / app.js
  //set the username and create logged in message
  username = usernameInput.text; // added bug

ブラウザタブを更新します。 ログインして、次のことを確認してください。

  1. Output
    undefined joined the chat...

アプリは、usernameInput.valueではなくusernameInput.textを参照することにより、ユーザーのユーザー名を誤って取得します。 これを使用してデバッグを練習します。

ステップ2—デバッグの基本を理解する

アプリのデバッグを開始する前に、デバッグの仕組みを理解しておくと役立ちます。 デバッグの考え方は、ブレークポイントと呼ばれるものを(条件付きで)トリガーして、コードの実行を一時停止できるようにすることです。 これにより、変数の検査などのアクションを実行して、アプリケーションの状態を確認することができます。 さらに一歩進んで、選択した変数を「監視」することもできます。これにより、アプリケーションが一時停止するたびに、これらの変数の値を具体的に調べることができます。

ブレークポイントをトリガーした後、通常、次のオプションがあります。

  • プログラムの実行を続行します。
  • コードを1行ずつステップスルーします。
  • 現在の機能から抜け出します。
  • 次の関数呼び出しにステップインします。

さらに、コールスタックを表示するためのアクセス権があります。 つまり、関数がプログラム内の他の関数を呼び出すときに、それらの関数呼び出しの履歴を調べることができます。

デバッグの仕組みの基本について説明したので、アプリのデバッグを開始する準備が整いました。

ステップ3—GoogleChromeでのデバッグ

Chromeでのデバッグを開始するには、アプリケーションにdebuggerステートメントを追加します。

サンプルアプリケーションをフォローしている場合は、それをloginBtnクリックイベントハンドラーに追加できます。

パート-8/public / app.js
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タブがポップアップ表示されます。

Quick Chat app paused, with debugger view in Chrome DevTools

私たちが見ているものを分解してみましょう。

ソース

最初に気付くのは、コードのコピーのように見えるものです。 これは、ブラウザがロードしてアプリケーションとして実行しているコードです。 また、debuggerの行が青色で強調表示され、アプリケーションが一時停止された場所であることを示しています。

Debugger line highlighted in Chrome DevTools

Chromeには、理由からこのコードを表示する機能があります。 コードが目の前にあるので、ブレークポイントを設定できます。 ブレークポイントは、プログラム内の意図的な停止または一時停止の場所です。

ブレークポイントを追加するには、行番号の左側にあるガターまたは空のスペースをクリックします。 あなたがそうするように、Chromeはこのブレークポイントをさらに下のブレークポイントのリストに追加することに注意してください。

List of Breakpoints in Chrome DevTools

範囲

[スコープ]タブでは、アプリケーションの変数を検査することができます。 Local セクション(ブレークポイントがある関数のローカルスコープ)、 Global セクション(グローバルスコープ)、およびScriptセクションがあることに気付くでしょう。 ] セクション。 Script セクションでは、現在のスクリプトのスコープ内の変数を表示できます。

Scripts section of Chrome DevTools

これは、デバッグ時間のかなりの量が費やされる場所です。 これは、多くのconsole.log()ステートメントを書き出すためのはるかに効率的な代替手段です。

時計

スコープタブで変数を表示するだけでなく、具体的に調べたい変数を定義することもできます。 ウォッチタブに変数を追加することで、ブレークポイントに到達するたびに、その変数の値をすばやく見つけることができます(コード内のどこにいるかによってはundefinedになる場合があります)。 。 add アイコン(+)を使用して、追跡する変数の名前を入力します。

サンプルアプリケーションをフォローしている場合は、次を使用できます。

usernameInput

Watch tab in Chrome DevTools

ステップ関数、コールスタック、およびブレークポイントリスト

最後のセクションでは、ブレークポイント、コールスタックなどのリストを表示できます。

Call stack and breakpoints tabs in Chrome DevTools

サンプルアプリケーションをフォローしている場合、コールスタックには、ログインボタン(loginBtn.addEventListener.e)のイベントハンドラーとしてリストされている関数が含まれます。 この関数は、これまでに呼び出された唯一の関数であるため、リストされています。 関数がより多くの関数を呼び出すと、そのチェーンは適切に更新されます。

デバッガーの上部にある矢印ボタンにも注意してください。

Close-up of debugging step arrows in Chrome DevTools

これらは、コードの実行を継続したり、コードを1行ずつまたは関数ごとにステップ実行したりするために参照される関数に対応しています。 これらのボタンを少しテストして、コードの実行をナビゲートする方法に慣れてください。

最後に、設定できるブレークポイントにはさまざまな種類があります。 条件付きブレークポイントの作成を見てみましょう。条件付きブレークポイントは、特定の条件が満たされた場合にのみトリガーされます。 ガターを右クリックして、条件付きブレークポイントの追加…を選択します。

サンプルアプリケーションをフォローしている場合は、ユーザーがユーザー名を入力せずにログインしようとしたときのブレークポイントを作成できます。 次の条件で条件付きブレークポイントを設定します。

usernameInput.text === ''

Setting up a conditional breakpoint in Chrome DevTools

サンプルアプリケーションをデバッグする場合、ユーザー名を入力せずにログインボタンを押すと、このブレークポイントがトリガーされます。 それ以外の場合、コードは通常どおり実行され続けます。

ここで説明されていない、さらに多くのブレークポイントオプションが利用可能であることに注意してください。

ステップ4—VSCodeでのデバッグ

これまで見てきたように、Chrome DevToolsは、多くの機能を備えたアプリケーションをデバッグするための優れたエクスペリエンスを提供します。 ただし、Visual Studio Codeには多くの点で、環境にシームレスに統合された一致するデバッグ機能があります。

VS Codeでデバッグを開始するには、 DebuggerforChrome拡張機能をインストールします。

Debugger for Chrome extension in Visual Studio Code

サイドバー(デフォルトではエディターの左側)にある[デバッグ]タブを簡単に見てみましょう。 バグのように見えるアイコンをクリックして、デバッグタブを開きます。

Debug Icon

このペインを開くと、Chromeで見たものと同様のツール(変数、監視、呼び出しスタック、ブレークポイント)が表示されます。

Variables, watch, call stack, and breakpoint tabs from Chrome DevTools rendered in Visual Studio Code

Chrome DevToolsで利用できる機能の大部分は、ここVSCode内で利用できます。

[デバッグ]タブが表示されたので、アプリケーションのデバッグ方法をVSCodeに指示する起動構成を作成します。 VS Codeは、.vscodeという名前のフォルダー内のlaunch.jsonという名前のファイルにデバッグ構成を保存します。

VS Codeにこのファイルを作成させるには、に記載されているリンクをクリックして、実行とデバッグをカスタマイズし、ペインにlaunch.jsonファイルメッセージを作成します。 メニューをナビゲートし、実行を選択してから構成の追加…を選択することによってもこれを達成できます。 次に、Chromeを選択します。

Chrome Environment option in Visual Studio Code

作成した特定の構成は、定義されたポートでアプリケーションに自動的に接続されます。

アプリのソースコードを正しく指すように、この構成を変更する必要がある場合があります。

サンプルアプリケーションをフォローしている場合は、ポートを8080から3000に変更する必要があります。

サンプルアプリケーションはpublicディレクトリから提供され、それを反映するようにwebRootを更新する必要があります。

サンプルアプリケーションをデバッグする場合、launch.jsonファイルは次のようになります。

パート8/.vscode / 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に戻されて、さらに調査されます。

Debugger switching from Chrome back to Visual Studio Code

ここから、Chromeで説明した機能がVSCodeに直接マッピングされます。 条件付きブレークポイントを追加する場合は、ガターを右クリックして、条件付きブレークポイントの追加…を条件付きで選択します。 変数を監視する場合は、クリックして新しい変数を追加し、監視する変数の名前を入力します。 変数を調べる場合は、変数タブに移動します。

結論

このチュートリアルでは、ChromeとVisualStudioCodeの両方を使用してアプリケーションをデバッグしました。 これらのオプションの両方がどのように機能するかを知っていると、自分に最適なワークフローを採用できるようになります。

開発者として次のステップを踏み出すには、プログラミング言語で利用できるツールのエコシステムを利用する必要があります。 デバッグは、開始するのにある程度の時間と労力を要するトピックの1つですが、最終的には、メリットがコストを上回ります。