【JavaScript】VS-Codeでデバッグを楽にする

こんにちは。ゲームプログラマーのメガネです。

JavaScriptはメモ帳で書けますし、ブラウザでさっと確認できます。環境を用意しなくてもすぐにコーディングできるのが強みですよね。

とは言え、少し複雑なプログラムを書いていくと、バグで動作しなくなることはよくあります。そんなときには、デバッガ付きの専用エディタを導入することをおすすめします。

JavaScriptには、Visual Studio Codeがおすすめです。この記事では、

Visual Studio Codeのインストール
Live Serverのインストール
Live Serverで実行する方法
Live Serverでデバッグする方法

を詳しく紹介していきます。

この記事の内容

Visual Studio Codeのインストール
Live Serverのインストール
Live Serverで実行する方法
Live Serverをデバッガとして設定する
Live Serverでデバッグする方法
おまけ：マウスホイール時のスクロールが速すぎるので調整する
まとめ

Visual Studio Codeのインストール

Visual Studio Codeはマイクロソフトが提供するコードエディタです。無料で使えて、高機能で、高速に動作するので、使わない理由がないです。WindowsでもMacでも利用可能です。

こちらから、ご利用のOS向けのVisual Studio Codeをダウンロードできます。インストールして起動すると、以下の画面になります。

Live Serverのインストール

デバッグを楽にするために、Live Serverという拡張機能を導入します。

拡張機能を入れるときには、左のメニューのパズルみたいなアイコンをクリックします。検索窓で「live server」と打ち込んで、Live Serverをインストールします。

以上でインストールは完了です。

Live Serverで実行する方法

まずはプロジェクトのフォルダを選択します。左上のメニューを選択して、「Open Foler」でフォルダーを選択します。

この際に、新規フォルダを作成することもできます。

sample.htmlを作成して、単純なHTMLを作成します。

<html>
    <head>
    </head>
    <body>あいうえお
    </body>
</html>

コード上で右クリックして、「Open with Liver Server」をクリックします。

そうすると、Chromeが開いてHTMLが表示されました。

このままHTMLを編集して保存すると、ブラウザの方に即反映されますので、作業効率が上がります。

Live Serverをデバッガとして設定する

Live Serverをデバッガとして使用できるように設定します。メニューの「Run and Debug」を選択し、「create a launch.json file.」を選びます。その後に「Web App (Chrome)」をクリックします。ご自身の環境に合わせてEdgeを選んでも良いです。

そうするとlaunch.jsonファイルが作成されます。

urlの部分には「Open with Liver Server」で開いたアドレスをそのままコピペします。このサンプルではsample.htmlというファイル名なので、以下のようになります。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5500/sample.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Live Serverでデバッグする方法

デバッグを実験するために、sample.jsを作成します。

function test() {
    let newDiv = document.createElement("div");
    newDiv.innerHTML = "かきくけこ";
    document.body.appendChild(newDiv);
}

window.addEventListener('load', () => {
    test();
});

htmlにスクリプトを関連づけます。

<html>
    <head>
        <script language="javascript" src="sample.js"></script>
    </head>
    <body>あいうえお
    </body>
</html>

ではここから、ブレークポイントを設定して実行してみましょう。

行数の左側をクリックすると、ブレークポイントを設定できます。そのままF5を押すか、左のパネルの上部「▷ Launch」を押すことで実行できます。

実行すると、ブレークポイントを設定した行で停止してくれます。

上部のステップインを実行することで、test関数の中に入ってステップ実行できます。

下のパネルで細かく動作を制御できます。

左から、続行、ステップオーバー、ステップイン、ステップアウト、再起動、停止です。

機能	説明
続行	次のブレークポイントまで実行します。ブレークポイントがなければ、最後までプログラムを実行します。
ステップオーバー	次の行にステップ実行します。
ステップイン	現在関数で止まっていたら、関数の内部にステップインします。
ステップアウト	現在の関数の外にステップアウトします。
再起動	プログラムを再起動して再実行します。
停止	デバッグを停止します。