web-dev-qa-db-ja.com

Chromeを起動し、Visual StudioCode内からデバッグします

Visual Studio Codeを使用してフロントエンドのJavaScriptをデバッグしています（Wordpressプラグインの場合）。launch.jsonファイルを正しく構成できません。

chromeを手動で起動し、事後に（Attachリクエストを使用して）アタッチすることができます。その場合、javascriptブレークポイントは正常に機能します。

Vscode内から（Launchリクエストを使用して）chromeを起動すると、接続は行われます（コンソール出力が表示されます）が、ブレークポイントが起動しません。私のlaunch.jsonファイル。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Signup Form",
        "type": "chrome",
        "request": "launch",
        "url": "http://myclient.dev/signup-form",
        "sourceMaps": true,
        "webRoot": "../../..",
        "runtimeArgs": [
            "--remote-debugging-port=9222"
        ]
    },

    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9222
    }
]

}

私はウェブルートについて考えられることは何でも試しました（「htdocs」のウェブルートへの完全なローカルパスと上記の相対パスを含みます。そこに何を入れてもかまわないようですので、多分私は間違った木を吠えています。

ローカルプロジェクトフォルダは次のとおりです。

/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form

サーバー上では、次のようにマップされます。

http://myclient.dev/wp-content/plugins/cee-signup-form

「signup-form」ページに、完全なURLを使用して、問題のjavascriptファイルを含めます。

もちろん、手動でURLにアクセスして、デバッグするたびに添付することもできますが、ワンクリックで起動してデバッグする方がはるかに優れています。

私は何が間違っているのですか？

javascriptgoogle-chromedebuggingvisual-studio-code
6
Leo De Bruyn

以下の手順に従ってください。

  1. 「VSCode-DebuggerforChrome」拡張機能がインストールされていることを確認してください。
  2. まず、このコードを.vscode /launch.jsonに配置します。
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node",
      "port": 9229,
      "protocol": "inspector",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
      "console": "integratedTerminal"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/client/src"
    }
  ],
  "compounds": [
    {
      "name": "Full-stack",
      "configurations": ["Node", "Chrome"]
    }
  ]
}

  1. VS Codeでデバッグモードに移動し、「フルスタック」から始めます。

  2. Npmを開始します

これを参照してください： https://github.com/auchenberg/timey

9
Vijay Chauhan

私の場合、Ubuntu 14.04では、追加した後に機能しました

"runtimeExecutable": "/usr/bin/chromium-browser"

ただし、事前にchromeを開始する必要があります。

1
wbartussek

VSCodeのバグであることが判明し、最新バージョン（1.2.1）で修正されています。更新後、私は3つのことをしなければなりませんでした。

Chrome拡張機能を更新します

VSCodeで、CTRL + Pを押してコマンドパレットを表示し、次の操作を行います。

Extensions: Show Outdated Extensions

この時点で、それらを更新できるようになります。詳細はこちら： https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension

起動設定を編集します

現在、Webルートの絶対パスが必要です。そのため、launch.jsonファイルのwebRootプロパティを変更して、ワークスペースルートを明示的に含める必要がありました。

"webRoot": "${workspaceRoot}/../../..",

デバッグ前にChromeのすべてのコピーを閉じる

これは迷惑です。しかし、それは機能します。

1
Leo De Bruyn