VS Codeの中でブラウザーを開いてCSS開発（ひとり DevTools Advent Calendar 2020 – 22日目）

22 日目の記事です。

• DevToolsおれおれAdvent Calendar 2020やります。ひとりで。

VS Code はウェブ開発に便利だな～、いっそブラウザーのタブも表示できないかな～、そう考えのあなたに朗報です。できます。

題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。

デモプロジェクト

よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。

• ginpei/vscode-debug-web-demo

本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。

Microsoft Edge Tools で VS Code 内にブラウザーの画面を開く

こちらがウェブページの画面と Elements パネルを VS Code のひとつのタブとして表示できるようにする拡張です。VS Code と同じく Microsoft 謹製です。大丈夫です、Mac でも使えます。

• Microsoft Edge Tools for VS Code – Visual Studio Marketplace

1. インストール
   1. VS Code サイドバーの Extensions (Ctrl+Shift+X) を開く
   2. “Microsoft Edge Tools” (by Microsoft) を検索（上記のもの）
   3. インストール
2. 開く
   1. サイドバーの Microsoft Edge Tools を開く
   2. “+” の Open a new tab ボタンを押す

Edge が用意されている環境であれば、そのウィンドウとは別に VS Code で Edge DevTools というタブが開きます。空の画面も表示されているはず。アドレスバーに URL を入力して Elements パネルで遊んでみてください。

なお開くと最初は about:blank が表示されるんですが、任意の URL へ変更可能です。後でやりましょう。

Mac で Edge をインストールしていない場合は後述する「Mac でやる」の方法を試してみてください。

試す

デモプロジェクトなら npm run start でデモ用のウェブサーバーが起動します。http://localhost:8080/ を開いたタブの URL へ入力し移動してください。

CSS ファイルをエディターで開くようにする

せっかく VS Code の中で Elements パネルを表示してるのに、初期状態ではソースコードは見えるだけです。Elements パネル Styles ペインでスタイルの定義箇所（ファイル名と行番号）をクリックしたら、VS Code で即開けるようにできます。

1. ファイルマップの設定
   1. 設定 (Ctrl+,) を開く
   2. （User ではなく）Workspace タブを選択
   3. 左側 Extensions → Microsoft Edge Tools
   4. Source Map Path Overrides → Edit in settings.json
   5. 設定追加（ちょい長いので次節へ分けます）
   • プロジェクトルートに .vscode/settings.json ファイルが生成される
2. DevTools 再起動
   1. エディター部分の Edge DevTools タブを閉じる（開いていれば）
   2. サイドバー Microsoft Edge Tools → 対象のドキュメント → 右端 Attach and open Microsoft Edge Tools ボタンを押す

設定はたぶん sourceMapPathOverrides で検索しても出ます。

あと、設定は User ではなく Workspace で保存するようにしてください。じゃないと同じマシンの全プロジェクトで有効になってしまう。

Source Map Path Overrides の設定

さて Source Map Path Overrides の設定なんですが、開いた JSON ファイルをこんな↓風にしてください。（新規作成したものとします。既存のものがある場合は適宜対応願います。）sourceMapPathOverrides の中身は初期値として何行か追加されてると思うんですが、それは削除しても残しておいても構いません。

• .vscode/settings.json

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "http://localhost:8080/*": "${workspaceFolder}/public/*"
  }
}

正直これのマップ設定の感覚がよくわかってないんですが、デモプロジェクトならこれで動くはず。他で使う場合はポート番号 8080 やファイルの置き場所 /public/ なんかを変更してください。

CRA

create-react-app で作成したアプリの場合の設定も載せておきます。

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "webpack://src/*": "${workspaceFolder}/src/*"
  }
}

CRA は webpack で合成とかなんかしたファイルになるんですが、そこから source maps の仕組みを用いて元のコードを保存しています。その保存された元のコード (webpack:…) をさらに実際のファイルへ対応マップするのが上記です。

その他の環境

Elements パネル Styles ペインで表示されるファイルへカーソルを乗せるとパスが表示されます。これを件の設定で利用する感じっぽい。

Network パネルを表示する

ところでタブは Elements パネルだけですが、Network パネルを出すこともできます。

1. Network 利用の設定
   1. Workspace → Extensions → Microsoft Edge Tools
   2. Enable Network をオンに
2. DevTools 再起動

件の設定は、Settings の中で @ext:ms-edgedevtools.vscode-edge-devtools network で検索しても出てきます。

その他のパネル

出せないっぽい。全部出してくれていいのになあ。

最初に開く URL

設定の Default Url ってやつで最初の URL を指定します。http://localhost:8080/ とか。

なんかだめなとき

The tab is inactive

接続しているウィンドウのタブが非表示の間は利用できません。

見なくてもいいやってときは Headless モードを検討してください。別項参照。

CSS ファイル名をクリックしても開かない

マップが間違ってる。うーん typo とかに気を付けてどうにか頑張ってください。

画面が消えた

DevTools 部分の左上 Toggle screencast を押してください。出したり消したりできます。

ページが真っ白

サーバー起動してないとか。

その他

JS のデバッグもしたい

JavaScript は VS Code 本体で開いてブレイクポイントを設置したりステップ実行したりできるので、それ使いましょう。

こちらをどうぞ。

• VS Codeの中でJavaScript/Node.jsのデバッグまでする（ひとり DevTools Advent Calendar 2020 – 21日目） | Ginpen.com

今回のデモプロジェクトと同じものを使っているので、VS Code サイドバーの Run (Ctrl+Shift+D) と .vscode.example/launch.json を見てもらえればわかるかも。

逆に DevTools で編集したい

できます。簡単に言うと Sources パネルの左側サイドバーで Filesystem を使います。

こちらをどうぞ。

• Elementsパネルで編集したCSSをそのままファイルに保存する（ひとり DevTools Advent Calendar 2020 – 12日目） | Ginpen.com

いっそブラウザーのウィンドウいらない

設定で Headless にチェックを入れるとヘッドレスモードになって、”+” ボタン押してもウィンドウが出てこなくなります。ウィンドウはなくても VS Code の中で画面は見えてますね。設定でオンオフするため機動性が低いのが玉にきず。

エディターでタブを閉じても見えないウィンドウは生き残っています。サイドバー Microsoft Edge Tools の一覧に表示されるので、Attach and open Microsoft Edge Tools ボタンで再度タブを開けます。

というわけで見えないし消えないウィンドウは “+” を押すたびに増えます。どうやって消すんだろ。VS Code 再起動したら消えました。（時間差があります。）

Edge じゃなくて Chrome がいい

できます。たぶん Chrome DevTools Protocol でやってるので。

Chrome を起動するときに --remote-debugging-port=9222 を付けて起動してください。そうするとサイドバー Microsoft Edge Tools の一覧に表示されます。Attach and open Microsoft Edge Tools ボタンを押せば接続完了です。

Mac でやる

ターミナルからこれ↓でリモートデバッグ用ポートを与えて起動できます。実行する前に Chrome はいったん終了させてください。

$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222

やっぱり DevTools 丸ごと使いたい

ですよねー。今回紹介した拡張は機能を絞ってるけど、他に全部入りの DevTools タブを表示する拡張があります。こちら。

• DevTools for Chrome – Visual Studio Marketplace

でも試したら真っ白で動かなかったんだよな。残念。あとスクリーンキャスト（画面）はないみたい。

マップわからん

pathMapping がそれっぽい設定なんだけど駄目で、sourceMapPathOverrides にして一通り動いた。

あとこの sourceMapPathOverrides を追加するときに初期値でいくつかの環境に対応した設定されててあら便利と思ったけどバージョンの違いか例えば / の数が違ってて動かなかったりした。うーん報告するべきなのか自分の環境がおかしいのか？

おしまい

正直いまいち痒いところに手が届かない気がしてます。あと外部モニター使える環境なので VS Code とブラウザーと両方同時に表示できるからそんなに必要に駆られていないというのもあるかも。

参考

• Microsoft Edge Tools for VS Code – Visual Studio Marketplace
• DevTools for Chrome – Visual Studio Marketplace