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

巴特西

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

最新文章

热门文章