狐好きぷろぐらまー

狐好きプログラマー見習いのブログです。

【VS Code】macのChromeのデバッグで躓いた【Debugger for Chrome】

こんばんは。 pregum_foxです。

今回はmacOS上のVisual Studio Code(以降VS Code)を使用してChromeデバッグした時に躓いたメモを残します。

目次です。

背景

macOSVS Codeを使用してChrome拡張機能を作ってみたいなと思い、じゃあまずはデバッグできる環境を作ろうとしていました。

前提条件

  • macOSであること
  • Chromeがインストールされていること
  • VS Codeがインストールされていること

です。

作業環境

項目 内容
OS macOS Catalina 10.15.6(19G73)
VS Code バージョン: 1.47.3
Chrome 84.0.4147.89

作業開始からデバッグできるようになるまでの流れ

  1. こちらの記事を参考にVS Code拡張機能Debugger for ChromeLive Serverをインストールして手順通りにHTML, CSS, JSファイルを作成して、ローカルサーバーまで表示できました。
  2. しかし、デバッグの項目で参考にした記事と同じようにlaunch.jsonファイルを作成してF5でデバッグしてみた所、普通ならStatus barがデバッグ中を示すオレンジ色(デフォルトの場合)になるはずですが、私の場合オレンジ色にならずデバッグができていませんでした。
  3. そもそも手順通りに進めていてどこがダメかもいまいち見当がつかなかったのでWindowsの場合はデバッグできていたのでOSが関連しているのかと思い、macVS Code関連でググってみてもそれらしい情報は見当たらない
  4. ダメもとでFireFoxVS CodeFireFoxデバッグ拡張機能を追加してデバッグを試してみた所、一発でうまくいきもっと???となり、記事が書かれている頃のバージョンまで下げてみようと思い、Debugger for Chromeのバージョンをマイナーバージョンを12から11に落としてデバッグを試してみた所うまくいきました。
  5. であとはどのバージョンでデバッグできなくなるか確認して最終的には4.12.2以上のバージョンだとデバッグできないことがわかりました。
  6. またlaunch.jsonの設定が間違っていたみたいで、ブレークポイントを張ってもBreakpoint set but not yet boundというメッセージがVS Code上に表示されて止まりませんでしたが、これはlaunch.jsonのurlの設定が間違っていたみたいで、修正後は無事ブレークポイントで止まるようになりました。

解決後の画面

こんな感じです。

f:id:pregum_fox:20200728212748p:plain
デバッグ中の画面

原因

直接の原因は、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を再起動するとデバッグできるようになりました。

図解

具体的に図を用いて説明します。

  1. まずはVS Codeを起動します。

f:id:pregum_fox:20200728205922p:plain
VS Codeの起動

  1. 次にVS Code上でChromeデバッグを行う為にDebugger for Chromeをインストールします。

前述した通り、4.12.1以下のバージョンを使用しないとデバッグができません。

いきなり4.12.1のバージョンをインストールすることはできなかった為

インストールした後歯車マークをクリックし、「別のバージョンをインストール」をクリックして4.12.1をインストールしました。

f:id:pregum_fox:20200728213116p:plain
Debugger for Chrome拡張機能のインストール

f:id:pregum_fox:20200728213357p:plain
バージョンの変更その1

f:id:pregum_fox:20200728213506p:plain
バージョン変更その2

  1. バージョンを変更したDebugger for Chromeを反映させる為、VS Codeを再起動します。

f:id:pregum_fox:20200728213647p:plain
VS Codeの再起動

  1. 再起動が完了したら、実際にデバッグを行うファイルが保存されているフォルダをVS Codeで開きます。 私の場合は参考にした記事を参考に進めていた為下記のようなフォルダ構成です。
..
└── 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を押すと、おそらくこんな感じの画面になるかと思います。

f:id:pregum_fox:20200728215343p:plain
localhostへのアクセス拒否

この場合は、launch.jsonで指定しているローカルサーバが起動していない為、表示ができません。 ローカルサーバを起動する為にLive ServerというVS Code拡張機能を追加します。

f:id:pregum_fox:20200728220317p:plain
Live Serverのインストール

  1. インストール完了後VS Codeのstatus barの右側に"Go Live"というテキストが表示されるのでそこをクリックします。

f:id:pregum_fox:20200728220634p:plain
ローカルサーバの起動

  1. "Go Live"がPort: 5500という文字に変更され、デフォルトのブラウザで現在のindex.htmlが表示されているかと思います。

f:id:pregum_fox:20200728221003p:plain
ローカルサーバ起動

  1. そして前述のmain.jsのコメントを記載している5行目にブレークポイントを張っておきます。

f:id:pregum_fox:20200728221235p:plain
ブレークポイントの設定

  1. VS Code上でF5を押すと、無事Chrmeのデバッグができました。

f:id:pregum_fox:20200728221513p:plain
デバッグ成功

うまくデバッグできない場合は、別のデバッグ構成ファイルを使用していないか確認してみてください。

f:id:pregum_fox:20200728221829p:plain
デバッグ構成の確認

以上です。

雑感

FlutterもmacVS CodeではF5でデバッグできなかった他のでとりあえずターミナルで実行したり問題を先延ばしにしていたので、今回は解決することができてよかったです。 この調子でFlutterでもF5デバッグできるようにしたいです。

どうやらC++macOS (Catalina)だと少し前まではデバッグができなかったみたい

github.com

VS Codeの内部動作が理解できていれば今回のような問題も簡単にクリアできたりするのでしょうか... 一度VS Code拡張機能を作って理解した方が問題にも対処しやすくなるのかもしれません。

Debugger for Chromeのバージョンが4.12.2以上だとデバッグできない根本的な原因は不明ですが、今回はデバッグができるところまでに結構時間を使ってしまったので後は別の機会に調べてみたいと思います。

→ セキュリティソフトが原因でした...

flutterについてもファイアーウォールを無効にすれば、F5デバッグできることを確認しました...

別のセキュリティソフトを入れている方も動かない場合は確認してみると良いかもしれません...

次からはセキュリティソフトについても念頭に置いて調査をしていきたいと思いました...

ここまで読んでいただき、ありがとうございました。

参考資料