1:安装Debugger for Chrome插件
2:配置launch.json文件

 "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "webRoot": "${workspaceFolder}",
            "url": "http://localhost:8086",
            "breakOnLoad": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/src/*",
                "webpack:///./src/*": "${webRoot}/src/*"
            },
        }
    ]

3:配置 devtool:‘eval-source-map’
4:断点调试项目
按f5打开浏览器调试
5:开始调试代码
会生成一个静态不可编辑的页面进行调试,不知道为何我的vscode 需要先在代码中加一个debugger才能调试

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐