VScodeで簡易WebServerの元でデバッグ
JAVA Scriptに戻る。
概要
ブラウザの開発ツールを使って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 functionSetBgBlue = 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="SetBgBlue()">青色</button>
<button onclick="functionSetColor('#00ff00')">無名関数</button>
<button onclick="loopCountWrite()">カウント</button>
<br />
<span id="pre"></span>
</body>
</html>
11行目12行目としました。file属性の指定は消しました。
このように設定した状態でプライマリサイドバーの実行ボタンを押すと、実行用のViewが左側にできて、そこにjson設定ファイルを作るというリンクがあるので、選択します。これで実行する準備が完了します。*.jsonファイルの設定内容は少し触った方が良い場合が多いです。以下のように設定するのが良い思います。例えば、任意のフォルダに展開したMathjaxのサンプルを実行するときは以下のようにします。開いた任意のフォルダをRootとして、RootにMathJaxSapmleと本体のes5フォルダを配置している感じです。SampleのMathjaxのスクリプト呼び出しパスが元々は../MathJax.jsとなっているのを../../es5/tex-mml-chtml.jsのように変更しないと駄目です。サンプルスクリプトの全てのパスを変えるのは面倒なので動かすものだけを変更すると良いでしょう。全部変更する人もいるかな。とにかく以下のようにします。
{
// 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/MathJaxSample/MathJax-base/index.html",
"webRoot": "${workspaceFolder}",
}
]
}
file設定が規定値で作られますが、ファイルを開くのではなく、上記のようにした方が目的のファイルを開いた状態をデバッグの初期状態にできるので、urlとwebRootによる設定をした方がよいでしょう。${workspaceFolder}が開いたフォルダのパスになっていて、そこをRootとしてurlに設定したようなパスをブラウザで開くのをデバッグの開始位置にした感じです。こうすると、超巨大なJavaScriptライブラリであるMathJaxのようなものをデバッグすることもできます。MathJaxは改行の無いスクリプトなのでいろいろと手を加えないと容易にデバッグ作業はできないです。そのあたりのことはMathJaxをデバッグしてJavaScriptの理解を深めるの記事にまとめたいと思います。
ちなみに最初に書いたサンプルhtmlをRootにおいてデバッグするときは
"url":"http://localhost:5500/index.html",
"webRoot": "${workspaceFolder}",
という設定でlaunch.jsonを構成します。
以上で、実行Viewには黄緑色の実行ボタンが表示されているので、実行します。[F5]キーでも実行開始できます。ブレークポイントは適宜設定して下さい。デバッグの仕方はVisual StudioでC++を実行するときと変わらない感覚で実行できます。細かい説明は省きます。VC PlusPlus:基本的な使い方を参考にして下さい。
関連情報
JAVA Scriptに戻る。