angularjs - VS Code 中的 Chrome 调试器扩展不会显示 html 文件

Question

我开始学习 Angular 并在 Visual Studio 中创建了一个简单的项目，它在那里运行良好。它只是一个html文件和一个单独的JS文件。我决定尝试 Visual Studio Code，因为这看起来是一个更好的前端工作编码环境。 但我一生都无法让 Chrome 调试器显示该页面。

这是当前的 launch.json(尝试了对 url 和 webroot 进行了多次更改，但没有成功):

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:9222/index.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

我可以启动并连接 Chrome，但我得到一个完全空白的页面。然后我可以转到 Localhost/json 这给了我这个:

[ {
   "description": "",
   "id": "2c0aed08-5bf3-4186-9ad6-9af1bc9e500c",
   "title": "localhost:9222/index.html",
   "type": "page",
   "url": "http://localhost:9222/json"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/ccfbea86-ec75-434e-9ae0-749eba4cbf2b",
   "id": "ccfbea86-ec75-434e-9ae0-749eba4cbf2b",
   "title": "Chrome Media Router",
   "type": "background_page",
   "url": "chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/_generated_background_page.html",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/ccfbea86-ec75-434e-9ae0-749eba4cbf2b"
} ]

目前我不知道该尝试什么，也不知道如何调试或查看可能导致此问题的原因。任何帮助或指导将不胜感激。

Answer 1

我不确定这是否是正确答案。但更改 launch.json 以包含文件本身是有效的。我现在可以在浏览器窗口中调试和查看我的寻呼机。另外打开诊断日志可以让我看到它是如何进行一些映射的。

{
    "name": "Launch Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:9222/",
    "webRoot": "${workspaceRoot}\\",
    "file": "${workspaceRoot}/index.html",
    "diagnosticLogging": true
}