Chromeデバッグ環境構築（VSCode）

2019年8月2日 23:28

F5キーを押した時にChromeを起動して、
作ったページやソースをチェックできるようにするために
「launch.json」を色々と編集。

１）「launch.json」の編集

【初期状態】

{
   // IntelliSense を使用して利用可能な属性を学べます。
   // 既存の属性の説明をホバーして表示します。
   // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "Launch Program",
           "program": "${workspaceFolder}\\My Resume\\MR001x_script.js"
       }
   ]
}

【完成形】

{
   "version": "0.2.0",
   // ローカルにあるファイルをデバッグ
   "configurations": [
		{
           // デバッグ種別を指定（chrome/node/monoなど）
           "type": "chrome",

           // lanunchまたはattachを指定
           "request": "launch",
           
           // デバッグ設定の名称
           "name": "localhost に対して Chrome を起動",
           
           //①ローカルファイルの場合
           // 読み込むHTMLファイルを指定（プロジェクトからのパスを指定）
           "file": "${workspaceRoot}/My Resume/MR000x/MR0001.html",

           //②Webファイルの場合
           // // Webサーバー上にあるデバッグ対象のURLを指定
           // "url": "http://localhost:9999/index.php",
           // // マッピングするローカルファイルが配置されているディレクトリを指定
           // "webRoot": "${workspaceRoot}/",
           // // ソースマップの有効・無効の指定（true/false）
           // "sourceMaps": true

           //Chrome起動時の追加コマンド
           "runtimeArgs": [
               //canvas.toDataURL(　）を許可するための追加コマンド
               "--allow-file-access-from-files",
               "--remote-debugging-port=9222"
           ]
       }        
   ]
}

※今回はローカルファイルのデバッグ（Webサーバ使ってない）のため
　「②Webファイルの場合」ブロックはコメントアウトしている

２）各プロパティについて

　【type】（必須）
　　デバッガーの種別

　【request】（必須）
　　デバッグ時にプログラムを起動するか（launch）
　　既に起動しているプログラムにデバッガーをアタッチするか（attach）

　【name】（必須）
　　デバッグ構成としてのデバッグ名（赤枠箇所）

　【file】
　　読み込むHTMLファイル名

　【url】
　　ブラウザで開くURL

　【webRoot】
　　ファイルが配置されているフォルダのパス

　【sourceMaps】
　　true/falseでソースマップの有効・無効を指定する
　　（初期値はTrue）

　【runtimeArgs】
　　ランタイム環境に渡す引数

３）というか、jsonって何？

・JavaScript Object Notationの略
・テキストベースのデータフォーマットで、XMLと同様。
　XMLより記述が易しい。

４）おまけ

「runtimeArgs」に記載されるもののうち、よくあるのが
"--remote-debugging-port=9222"というものらしい。

これが何かよく分からなかったので調べてみると、

「ポート9222番へのリモートデバッグを有効にする」
みたいな意味。

＜ポート9222とは？＞
「localhost:9222」をアドレスバーに打ち込んでみると、
「ヘッドレスなクローム」ウィンドウで開いている
「タブ情報」が表示される。

（ヘッドレスなクロームのイメージ）
文字通り、ヘッダーがレスなウィンドウで開かれているページ。

（ヘッドレスなクロームで開いているタブ情報のイメージ）
パス情報が表示される。

＜ポート9222番へのリモートデバッグとは？＞
「localhost:9222」（ヘッドレスなクロームで開いているページ）
の操作について、VSCode上でデバッグ確認ができるということ。

すごい！

【出典】
https://nerimax.hatenadiary.org/entry/20160711/1468201877