Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Debugger for Chrome

More than 3 years have passed since last update.

MS 製エディタ Visual Studio Code には、Debugger for Chrome という面白機能がある。エディタからウェブブラウザを遠隔操作して、書いてる最中の Javascript コードをデバッグ出来る。

インストールと設定

Debugger for Chrome は Visual Studio Code の Extension として実装されているので、View > Extensions で検索してインストールする。

Debug > Start Debugging でデバッグを開始するが、最初は設定が無いのでエラーになる。エラーダイアログの Open launch.json を選択すると自動的に .vscode/launch.json に設定ファイルの雛形が出来る。

雛形は、Node.js 用の物なので新しく書き萎えないといけない。 Visual Studio Code のページにはサンプルとして "Launch Localhost" (新しいブラウザを開いてローカルサーバ実行) と "Launch index.html" (新しいブラウザを開いてファイルを実行) の二つが置いてある。このうち Launch Localhost セクションを create-react-app にあわせて設定するとこうなる。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/", // react-script の開発サーバ URL を指定
            "webRoot": "${workspaceRoot}/", // ソースコードの場所。Chrome Developer Tools > Source > webpack://. が差している場所。
            "sourceMaps": true
        }
    ]
}

利用方法

Command Palette > Debug: Select and Start debugging > Launch localhost を選択

感想

機能は面白いが、Chrome Developer Tools と出来ることが同じなので、狭い画面では特に使う理由無いかも。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away