在visual code的debugger for chrome中调试webpack构建的项目

   一直使用chrome中内置的调试器， 感受世界那么美好， 自从学了react以后，使用visual code做为编辑器， 它提供了不少插件， 其中就包括debugger for chrome， 一款使用内置调试器来调试浏览器中网页的插件。因而打算折腾一下试试。

踩了不少坑， 配置lanuch.json， 运行一直失败， 缘由就是由于该项目是由webpack构建， 须要先启动项目， 而后再启动调试器

 

1. 启动项目

npm start

只有项目启动后， 配置的lanuch.json才有效！！！

2. 配置lanuch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000", // 由于web-dev-derver默认打开的是此端口， 因此用url来指定调试该端口， 具体的端口和路径由你项目决定 
            "webRoot": "${workspaceFolder}" // 默认
        }
    ]
}

3. F5启动调试 - 完成