除了Console.log外的一些实用的前端调试技巧

开发环境代码调试

1. vscode打断点

点击运行-》启动调试。或者直接点击左侧的按钮
选择调试器。我这里选择谷歌
将会自动在根目录下生成.vscode->launch.json文件
修改配置文件。如下

json 复制代码

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "针对 localhost 启动 Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

在设置中打开允许在任何文件中打断点
打断点。直接在文件行左侧点击，变成红色就是打断点成功了。取消断点再次点击就行了
运行调试
点击后就会打开一个调试的新窗口，然后就开始愉快地调试辣。调试技巧自行谷歌哈，懒得打字了

2. 浏览器中直接断点

找到目标文件
点击文件行左侧打断点。取消断点再次点击就行了

线上代码调试

直接调试压缩过的代码, 打断点
- 代码中的某些函数名或者字符串是不会被转化的
- 在特定文件中查找特定字符串
- 在所有文件中查找特定字符串 \
推荐：在 chrome 中修改代码并调试。（可以以方法一为基础）

为了避免修改后刷新就没了。实际上就是创建本地的JS副本，线上页面加载本地的JS文件，就可以在本地JS文件上修改了。
- 创建一个新的空件夹,找到sources->overrides
- 点击 Select folder for overrides，选择刚才创建文件夹, 注意这时chrome浏览器上方有个提示，点击允许。
- 在sources-->page找到要调试的文件，右键点击 override content
- 然后就能在overrides里看到这个本地的副本文件了，直接修改就能生效
- 调试完点击右上角的清空按钮，避免下次进来时还是引用的本地文件
chrome 中使用本地 sourceMap 调试
- 添加sourcemap文件，看你线上要调试的是哪个文件，直接右键选择Add source map,会看到要输入URL
- 这个URL从哪里找呢，我们找到面板中sources-》workspace, 点击Add folder,添加本地项目文件夹,然后从dist目录找sourcemap文件（通常.map结尾），打包的时候可以先开启生产环境的sourcemap
- 找到目标文件（可以利用前面提到的search功能定位到具体的文件），点击copy link address复制地址粘进去
- 然后搜索目标文件。快捷键ctrl+p
- 绿标文件：成功的映射到本地的文件。

网络network面板

复制请求在postman里打开
- 右键，点击copy-》copy as cURL(bash)
- 打开postman，点击import, 把刚刚复制的粘进去
重新发起请求
- 右键，点击Replay XHR
重新发起请求并改变参数
- 右键：copy-》copy as fetch
- 在控制台粘贴并修改参数，按回车即可发起请求
禁用缓存和弱网环境
过滤资源

elements面板

我新学的，元素快速隐藏
这个大家都知道应该，强制显示hover、focus等动态效果效果