前端调试配置

本文提到的前端调试并不是在浏览器的开发者工具里进行断点调试，而是在 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

  

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