VScodeで簡易WebServerの元でデバッグ

概要

　ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。

準備

　拡張機能をインストールします。[Ctrl]+[Shift]+[x]で開く拡張機能の画面で拡張機能をさがして、Installするという手順です。1行テキストボックスのMarketPlaceで拡張機能を探すとなっているところに拡張機能名を入力して検索し、検索されたもののなかから、該当の項目を選択すると、メインウインドウ側にその詳細とインストールのためのボタンがInstallボタンとして表示されます。

Japanese Language Pack
JavaScript Debugger(Nightly)
Live Server

　の3つを入力して探して、Installしちゃいましょう。VisualStudioCodeの日本語化をしていない人で英語が読めない人は日本語化パックのJapanese Language Packもインストールしておくとよいでしょう。

　最後のLive Serverをインストールしたら、サーバーとしてどこのフォルダをルートにするかを設定する作業とsetting.jsonファイルという名前のファイルで設定について記述します。VScodeのインストールフォルダは個人設定フォルダがデフォルトで、よく使うProgramFilesへのインストールは通常の方法できません。規定値の個人設定フォルダにインストールしておきましょう。あんまり特殊なことをすると他の人の教えをこうときにあまりにも環境が違い過ぎて、どうしたら解決できるのかわからなくなります。

　ワークスペースフォルダーをルートに設定します。ワークスペースフォルダーに設定したフォルダの中に.vscodeという名前のフォルダが出来上がり、その.vscodeフォルダの中にlaunch.jsonという名前のjson形式ファイルが設置されます。

　ワークスペースフォルダーを決めて、なにかしら、JavaScriptを記述するためのhtmlファイルを新規で作ります。例えば、マイドキュメントにVisual Studio 2021というフォルダがあって、JavaScriptというフォルダを作ったなら、その中にindex.htmlを作ります。

　プライマリサイドバーと呼ばれている5つのアイコンが表示されている部分がウィンドウ左側に規定値では表示されています。プライマリサイドバーはメニュー項目と同じくよく使います。覚えてください。ウィンドウ右側にも移動できます。方法はプライマリサイドバーを右クリックして表示されるコンテクストメニューから[プライマリサイドバーを右に移動する]を選択することで移動できます。まだなにもわからない状態ではあまりウィンドウに表示されているものをカスタマイズして移動させない方が良いでしょう。手順が左にあるとか右にとか上にあるとかで説明される場合に話が食い違ってしまう可能性があります。ここのwebsiteでは次からプライマリサイドバーの上から何番目のアイコン「名称」は何々で…みたいに指示することになります。上からエクスプローラ、検索、ソース管理、実行、拡張機能です。

　プライマリサイドバーの上から1番上のアイコンはエクスプローラというものを選択します。するとワークスペースフォルダーを選択するように促されます。青色のボタンのフォルダーを開くを選択してフォルダーを開きます。[マイドキュメント>Visual Studio 2021>JavaScript]という感じのものを開きます。選択したフォルダがワークスペースフォルダーです。

　するとエクスプローラビューというエリアが新登場します。JavaScriptと書かれたものがワークスペースフォルダー名として表示されていて、その文字があるあたりの上にマウスを当てると、その右側に4つのアイコンが表示されます。左からフォルダ作成・ファイル作成・更新・折りたたむです。

　ではファイル作成ボタンを押します。すると入力欄が新規に登場するので[Index.html]と入力してみましょう。

　サンプルのHTMLとして、以下のコードを入力します。

<!DOCTYPE html>
<html>
    <head>
        <title>
            JavaScript In VSCode
        </title>
        <script>
            function SetBgBlue(){
                document.body.bgColor = "#0000ff";
            }
            function SetBg(color){
                document.body.bgColor = color;
            }
            var function = SetBgBlue;
            var functionSetColor = function(code){
                SetBg(code);
            }
            function loopCountWrite(){
                var obj = document.getElementById("pre");
                for(var i = 0; i < 100; i++){
                    if(i == 99){
                    obj.innerText = obj.innerText + "100回ログ出力完了しました。";
                    return; 
                    }
                    
                    obj.innerText = obj.innerText + (i + 1) + "回目\r\n";
                }
            }
        </script>
    </head>
    <body>
        <h1>Java Script</h1>
        <button onclick="SetBgRed()">青色</button>
        <button onclick="funcSetColor('#00ff00')">無名関数</button>
        <button onclick="loopCountWrite()">カウント</button>
        <br />
        <span id="pre"></span>
    </body>
</html>

　そしたらプライマリサイドバー上から4つ目の実行ボタンを押します。初めてなので表示された実行Viewの画面の青色のボタンの少し下にあるlaunch.jsのリンク形式の部分を押します。するとWeb App(Edge)もしくはWeb App(Chrome)を選択するように促されるので、自分の場合はEdgeをよく使っているのでEdgeを選択しました。

　この段階でワークスペースに.vscodeフォルダが作られ、その中にlaunch.jsonファイルが作られました。この*.jsonファイルを以下のように変更しておきます。このままだとファイルごとに指定しないとダメで面倒です。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Open Index.html",
            "url" :"http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

　11行目12行目としました。file属性の指定は消しました。