Firefoxデバッグ環境構築（VSCode）
F5キーを押した時にFirefoxを起動して、
作ったページやソースをチェックできるようにするために
「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": "firefox",
// lanunchまたはattachを指定
"request": "launch",
// デバッグ設定の名称
"name": "localhost に対して firefox を起動",
//①ローカルファイルの場合
// 読み込むHTMLファイルを指定（プロジェクトからのパスを指定）
"file": "${workspaceRoot}/My Resume/MR000x/MR0001.html",
//②Webファイルの場合
// Webサーバー上にあるデバッグ対象のURLを指定
//"url": "http://localhost:8080",
//
//"webRoot": "${workspaceFolder}/src",
//
//"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }
]
}
｝※今回はローカルファイルのデバッグ（Webサーバ使ってない）のため
「②Webファイルの場合」ブロックはコメントアウトしている
２）各プロパティについて
【type】（必須）
デバッガーの種別
【request】（必須）
デバッグ時にプログラムを起動するか（launch）
既に起動しているプログラムにデバッガーをアタッチするか（attach）
【name】（必須）
デバッグ構成としてのデバッグ名（赤枠箇所）
【file】
読み込むHTMLファイル名
３）というか、jsonって何？
・JavaScript Object Notationの略
・テキストベースのデータフォーマットで、XMLと同様。
XMLより記述が易しい。
４）ローカルファイルへのアクセス設定
Firefoxでデバッグしてみると、うまく表示された。（下記）
…が！
CドライブにあるFireFoxをダブルクリックして立ち上げて、
当該HTMLファイルのURLを直接指定して開くと、こうなった。
画像が出ていない。
色々調べてみると、どうやらJavaScript内の「canvas」タグを利用した
「toDataURL( )」メソッドでエラー落ちしている様子。
「toDataURL( )」メソッドでは、Base64を使ってエンコードした
PNGファイルを描画する処理をしている。
でも、Base64を使ってエンコードしたファイルパス（超長い文字列）を
直接指定するとエラー落ちしないので、
ファイルパスの生成（取得）処理でドボンしている可能性が大っぽい。
VSCodeからのFireFoxデバッグでは問題なかったのに、
CドライブからのFireFoxでは問題あり、ということで
あれこれアドオン入れてみたけれど、軒並みNG。
苦戦…
結局、
Chromeと同じく、CORS というセキュリティ上の仕組みで
異なるドメイン間のリソースの共有がNGとのこと。
なので…
①FireFoxのアドレスバーに「about:config」を入力して」を入力して
設定画面を開く
②「security.fileuri.strict_origin_policy」の値を
true から false に変更する。
③FireFox再起動
これで解決！
VSCodeから呼び出すFireFoxは、特に何もせずとも
ローカルファイルアクセスOKなんだろうか…
（デバッカだから？）
【出典】