本文提到的前端调试并不是在浏览器的开发者工具里进行断点调试，而是在 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/"
}
]
}
]
}
- 本地运行时浏览器上文件路径查看
10-133526
浏览器远程调试模式
-
Chrome
方式一：在浏览器目录下运行cmd命令（端口号可以自定义设置）
chrome.exe --remote-debugging-port=9220方式二：右键设置浏览器属性
--remote-debugging-port=922010-104826
设置成功时：打开浏览器，访问 localhost:9220 可以打开 Inspectable pages
10-105029
-
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
10-132348
设置成功时：打开浏览器，地址栏颜色会改变
10-134201
原文链接：前端调试配置
