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

weixin_30319153

于 2018-09-18 18:08:00 发布

阅读量117

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/nelson-hu/p/9670539.html

版权

一直使用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}" // 默认
        }
    ]
}