こんばんは。 pregum_foxです。
今回はmacOS上のVisual Studio Code(以降VS Code)を使用してChromeをデバッグした時に躓いたメモを残します。
目次です。
背景
macOSでVS Codeを使用してChromeの拡張機能を作ってみたいなと思い、じゃあまずはデバッグできる環境を作ろうとしていました。
前提条件
です。
作業環境
| 項目 | 内容 |
|---|---|
| OS | macOS Catalina 10.15.6（19G73） |
| VS Code | バージョン: 1.47.3 |
| Chrome | 84.0.4147.89 |
作業開始からデバッグできるようになるまでの流れ
- こちらの記事を参考にVS Codeの拡張機能のDebugger for ChromeとLive Serverをインストールして手順通りにHTML, CSS, JSファイルを作成して、ローカルサーバーまで表示できました。
- しかし、デバッグの項目で参考にした記事と同じようにlaunch.jsonファイルを作成してF5でデバッグしてみた所、普通ならStatus barがデバッグ中を示すオレンジ色(デフォルトの場合)になるはずですが、私の場合オレンジ色にならずデバッグができていませんでした。
- そもそも手順通りに進めていてどこがダメかもいまいち見当がつかなかったのでWindowsの場合はデバッグできていたのでOSが関連しているのかと思い、macとVS Code関連でググってみてもそれらしい情報は見当たらない
- ダメもとでFireFoxとVS CodeのFireFoxのデバッグ用拡張機能を追加してデバッグを試してみた所、一発でうまくいきもっと？？？となり、記事が書かれている頃のバージョンまで下げてみようと思い、Debugger for Chromeのバージョンをマイナーバージョンを12から11に落としてデバッグを試してみた所うまくいきました。
- であとはどのバージョンでデバッグできなくなるか確認して最終的には4.12.2以上のバージョンだとデバッグできないことがわかりました。
- またlaunch.jsonの設定が間違っていたみたいで、ブレークポイントを張っても
Breakpoint set but not yet boundというメッセージがVS Code上に表示されて止まりませんでしたが、これはlaunch.jsonのurlの設定が間違っていたみたいで、修正後は無事ブレークポイントで止まるようになりました。
解決後の画面
こんな感じです。
原因
直接の原因は、Debugger for Chromeのバージョンが原因でした。
Debugger for Chromeのバージョンが4.12.2以上だとVisual Studio Code上でF5を押してもデバッグができませんでした。
2020/07/29 追記 セキュリティソフト「ESET」のファイアーウォールが原因でした。 こちらを無効にすればDebugger for Chromeが最新でも動くことを確認しました。
対処方法
VS Code上でDebugger for Chromeのバージョンを4.12.1に落としてインストールしVS Codeを再起動するとデバッグできるようになりました。
図解
具体的に図を用いて説明します。
- まずはVS Codeを起動します。
前述した通り、4.12.1以下のバージョンを使用しないとデバッグができません。
いきなり4.12.1のバージョンをインストールすることはできなかった為
インストールした後歯車マークをクリックし、「別のバージョンをインストール」をクリックして4.12.1をインストールしました。
..
└── first_sample (VS Codeで開いたフォルダ)
├── .vscode
│ └── launch.json (デバッグの構成ファイル)
├── index.html
├── main.css
└── main.js
それぞれのファイル内容も記載しておきます。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:5500/index.html",
"webRoot": "${workspaceFolder}/"
}
]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<!-- <h1>hello world</h1> -->
<button onclick="showSum(event)">Sum</button>
</body>
</html>
main.cssは記載なし
function showSum(event) {
var num1 = 1;
var num2 = 2;
var sum = num1 + num2;
console.log(event); // ここでブレークポイント張る
alert(sum);
}
このフォルダ構成でF5を押すと、おそらくこんな感じの画面になるかと思います。
この場合は、launch.jsonで指定しているローカルサーバが起動していない為、表示ができません。 ローカルサーバを起動する為にLive ServerというVS Codeの拡張機能を追加します。
- インストール完了後VS Codeのstatus barの右側に"Go Live"というテキストが表示されるのでそこをクリックします。
- "Go Live"がPort: 5500という文字に変更され、デフォルトのブラウザで現在のindex.htmlが表示されているかと思います。
- そして前述のmain.jsのコメントを記載している5行目にブレークポイントを張っておきます。
うまくデバッグできない場合は、別のデバッグ構成ファイルを使用していないか確認してみてください。
以上です。
雑感
FlutterもmacのVS CodeではF5でデバッグできなかった他のでとりあえずターミナルで実行したり問題を先延ばしにしていたので、今回は解決することができてよかったです。 この調子でFlutterでもF5デバッグできるようにしたいです。
どうやらC++もmacOS (Catalina)だと少し前まではデバッグができなかったみたい
VS Codeの内部動作が理解できていれば今回のような問題も簡単にクリアできたりするのでしょうか... 一度VS Codeの拡張機能を作って理解した方が問題にも対処しやすくなるのかもしれません。
Debugger for Chromeのバージョンが4.12.2以上だとデバッグできない根本的な原因は不明ですが、今回はデバッグができるところまでに結構時間を使ってしまったので後は別の機会に調べてみたいと思います。
→ セキュリティソフトが原因でした...
flutterについてもファイアーウォールを無効にすれば、F5デバッグできることを確認しました...
別のセキュリティソフトを入れている方も動かない場合は確認してみると良いかもしれません...
次からはセキュリティソフトについても念頭に置いて調査をしていきたいと思いました...
ここまで読んでいただき、ありがとうございました。
