web-dev-qa-db-ja.com

VSCode（Visual Studio Code）でHTMLとJavaScriptを一緒にデバッグするにはどうすればよいですか？

VSCodeには、1つのapp.jsファイルにリンクするindex.htmlファイルという非常にシンプルなプロジェクトがあります。

F5キーを押したときに、このミニWebサイトを実行してデバッグしたい。

ブラウザーでindex.htmlを開くようにVSCodeを構成し、ブラウザーでアプリとの対話によってトリガーされるapp.jsにブレークポイントを設定できるようにするにはどうすればよいですか？

Visual Studioでは、独自のWebサーバー、IIS Expressを起動します。VSCodeでは、launch.jsonおよび/またはタスクの設定方法がわかりません。 jsonを使用して、簡単なnode.js Webサーバーを作成し、index.htmlを提供します。

Javascriptアプリのデバッグの例をいくつか見てきました。たとえば、このlaunch.jsonです。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch Bjarte's app",
            "type": "node",
            "program": "app.js",
            "stopOnEntry": true,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArguments": [],
            "env": {},
            "sourceMaps": false
        },
        {
            "name": "Attach",
            "type": "node",
            "address": "localhost",
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

これによりjsファイルが実行されますが、アプリを操作する方法がわかりません。

debuggingvisual-studio-code
39
Bjarte Aune Olsen

Chrome vscodeのWebページをChrome Microsoftがリリースした拡張機能を使用したリモートデバッグ。 Debugger for Chrome をデバッグできるようになりました。

このページからわかるように、デバッグには、起動モードと接続モードの2つのモードがあります。サーバーを実行していない可能性があるため、接続モードのみを使用できました。この拡張機能には、ローカル変数、ブレークポイント、コンソール、コールスタックなど、すべての重要なデバッグツールが機能します。

Vscodeを再検討するもう1つの理由は、SublimeCodeIntelや最新バージョンのWebStormなど、私が試した他の「IntelliSenseのような」ソリューションでは見えないメソッドを表示するECMAScript 6のIntelliSenseサポートを持っていることです。

24
Macovei Vlad

私がやりたいことはVSCodeでは不可能です（まだ？）現時点での私の解決策は、ノードパッケージlive-serverを使用することです。でインストール

> npm install -g live-server

次に、VSCodeを開き、プロジェクトのルートフォルダー内の任意のファイルを右クリックして、[コンソールで開く]を選択します。次に入力

> live-server

プロジェクトをルートフォルダとしてサーバーを起動します。ライブサーバーはデフォルトのブラウザを開き、プロジェクトフォルダーを監視してファイルの変更を監視し、変更を加えるたびにhtmlページをリロードします。

live-serverを使用したソリューションでは、VSCodeでアプリをデバッグすることはできず、ブラウザーでのみ実行できます。 Chromeでデバッグしています。

19
Bjarte Aune Olsen

他の人が言ったように、これをインストールすると：

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome を使用できます

また、ローカルホストではなく、HTMLとJavaScriptを実行している場合は、このlaunch.jsonコードを使用できます。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch index.html",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html"
    }
]

}

3
Hellonearthis

VSCodeはノードを使用してアプリを起動します。つまり、アプリは一部のPORTで実行されています。 http：// localhost：PORT / にアクセスすると、アプリを操作できます。app.jsにブレークポイントを設定した場合、ノードを介してローカルで実行しているサイトにアクセスするとヒットします。ここにニースのデモがあります https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

2
Isidor Nikolic

C：\ C＃\ mypage.htmのようなパスに＃がある場合、FF＆exを使用できます。 fileBasenameまたは 類似変数 -Chromeでは機能しません：

.vscode\launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch HTML file",
            "type": "firefox",
            "request": "launch",
            "file": "C:/C%23/${fileBasename}"
         }
    ]
}

または、node.jsでテストされた単純なフルパス：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}
1
Tom

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome を使用できます

Launch.jsonでは、使用しているサーバーのURL値をpuするだけで、エディターのVisual Studioコードでhtml + jsをデバッグできます

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
0
Iván Gómez

いくつかのHTMLとJavaScript（同様の例とは異なります）だけのためにサーバーを実行したくありませんでした。このVS Code起動構成と「Debugger for Chrome」拡張機能は、Windows 10マシンでうまくいきました。

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }
0
Binary Galaxy