前端调试配置

本文提到的前端调试并不是在浏览器的开发者工具里进行断点调试，而是在 VSCode 中以断点的形式进行代码跟踪调试。

前端调试配置

1. 安装调试插件 Debugger for chrome 或者 Debugger for firefox
2. 添加配置文件 .vscode/launch.json
3. 修改 webpack 配置 devtool: 'source-map'
4. 启动项目 npm run dev
5. 运行调试

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

  

  设置成功时：打开浏览器，地址栏颜色会改变

  

原文链接：前端调试配置