前端调试配置
本文提到的前端调试并不是在浏览器的开发者工具里进行断点调试,而是在 VSCode 中以断点的形式进行代码跟踪调试。
前端调试配置
- 安装调试插件
Debugger for chrome
或者Debugger for firefox
- 添加配置文件
.vscode/launch.json
- 修改 webpack 配置
devtool: 'source-map'
- 启动项目
npm run dev
- 运行调试
Launch.json 文件配置项
{
"version": "0.2.0",
"configurations": [
{
/**
* 配置名称
*/
"name": "debugger",
/**
* 浏览器的远程调试端口
* firefox不需要设置
*/
"port": 9220,
/**
* 项目地址,request 为 attach 时地址必须在浏览器已打开
*/
"url": "http://localhost:3001/home",
/**
* 运行模式:
* attach 附加模式,需要打开浏览器远程调试模式
* launch 启动模式
*/
"request": "attach",
/**
* 调试环境,需要安装对应插件
* chrome 谷歌浏览器
* firefox 火狐浏览器
*/
"type": "chrome",
/**
* 路径映射,定位断点位置
* ${workspaceFolder} 本地项目的根目录
* chrome 浏览器使用 sourceMapPathOverrides 配置
* firefox 浏览器使用 pathMappings 配置
*/
"sourceMapPathOverrides": {
"webpack:///src/*": "${workspaceFolder}/src/*"
},
"pathMappings": [
{
"url": "webpack:///src/",
"path": "${workspaceFolder}/src/"
}
]
}
]
}
- 本地运行时浏览器上文件路径查看
浏览器远程调试模式
-
Chrome
方式一:在浏览器目录下运行cmd命令(端口号可以自定义设置)
chrome.exe --remote-debugging-port=9220
方式二:右键设置浏览器属性
--remote-debugging-port=9220
设置成功时:打开浏览器,访问 localhost:9220 可以打开
Inspectable pages
-
Firefox
需要在
about:config
修改配置项配置名 设置值 描述 devtools.debugger.remote-enabled(必须) true 启用浏览器界面及附加组件的调试工具箱 devtools.chrome.enabled(必须) true 启用远程调试 devtools.debugger.prompt-connection false 关闭调试连接时提示弹窗 devtools.debugger.force-local false 调试到在不同的设备上的火狐浏览器 方式一:在浏览器目录下运行cmd命令
firefox.exe -start-debugger-server
方式二:右键设置浏览器属性
-start-debugger-server
设置成功时:打开浏览器,地址栏颜色会改变
原文链接:前端调试配置