Question

我开始学习角度并在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以包含文件本身是有效的。我现在可以在浏览器窗口中调试和查看我的寻呼机。同时启用diagnosticLogging可以让我看到它是如何进行映射的。

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

VS Code中的Chrome Debugger扩展程序不会显示html文件

1 个答案: