vscode调试webpack项目的方法

本文详细介绍了如何在VSCode中使用JavascriptDebugger插件调试Webpack构建的Node.js项目,包括安装插件、配置launch.json文件和调试流程等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vscode调试webpack项目的方法

首先安装vscode插件Javascript Debugger

 这个插件的介绍也写清楚了: An extension for debugging Node.js programs and Chrome.

那就是用来调试Node.js和Chrome的vscode扩展插件,包括typescript.

然后按F5启动调试,此时会提示编辑launch.json文件,将下面的内容写进去:

{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "pwa-chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:7002",   // webpack项目启动时的web访问地址和端口        

            "webRoot": "${workspaceFolder}/src",

            "sourceMapPathOverrides": {

                "webpack:///src/*": "${webRoot}/*",

                "webpack:///*": "${webRoot}/*"

            }

        }

    ]

}

注意: 上面url是指webpack项目启动以后的访问地址和端口。

launch.json文件位于当前项目的.vscode目录下:

然后重启vscode,这个很重要!

接着照常通过npm start/或者yarn start命令启动你的webpack项目(比如react)

然后按F5启动调试,并提前打好断点。

vscode会自动打开一个浏览器窗口,并访问上面指定的url地址。

注意:一定访问vscode打开的那个浏览器窗口,否则调试无效!

当你关闭这个浏览器窗口时,vscode调试模式也会自动终止!

当访问能触发该断点的浏览器链接/api接口时,vscode会自动跳到该断点,

而且鼠标悬停到某变量时,vscode就会自动显示该变量的值:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值