在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启动调试 - 完成