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

岩苍美津未
915 阅读3分钟

开发环境代码调试

1. vscode打断点

  • 点击运行-》启动调试。或者直接点击左侧的按钮

    image.png

  • 选择调试器。我这里选择谷歌 image.png

  • 将会自动在根目录下生成.vscode->launch.json文件 image.png

  • 修改配置文件。如下

    {
    // 使用 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}/*"
            }
        }
    ]
}

  • 在设置中打开允许在任何文件中打断点 image.png

  • 打断点。直接在文件行左侧点击，变成红色就是打断点成功了。取消断点再次点击就行了 image.png

  • 运行调试
    image.png

  • 点击后就会打开一个调试的新窗口，然后就开始愉快地调试辣。调试技巧自行谷歌哈，懒得打字了 image.png

2. 浏览器中直接断点

  • 找到目标文件

    image.png

  • 点击文件行左侧打断点。取消断点再次点击就行了

    image.png

线上代码调试

1. 直接调试压缩过的代码, 打断点

  • 代码中的某些函数名或者字符串是不会被转化的

    image.png

  • 在特定文件中查找特定字符串

    image.png

  • 在所有文件中查找特定字符串

    image.png\

2. 推荐：在 chrome 中修改代码并调试。

可以以方法一为基础，为了避免修改后刷新就没了。实际上就是创建本地的JS副本，线上页面加载本地的JS文件，就可以在本地JS文件上修改了。

  • 创建一个新的空件夹,找到sources->overrides

  • 点击 Select folder for overrides，选择刚才创建文件夹, 注意这时chrome浏览器上方有个提示，点击允许。

  • 在sources-->page找到要调试的文件，右键点击 override content

    image.png

  • 然后就能在overrides里看到这个本地的副本文件了，直接修改就能生效

    image.png

  • 调试完点击右上角的清空按钮，避免下次进来时还是引用的本地文件

    image.png

3. chrome 中使用本地 sourceMap 调试

  • 添加sourcemap文件，看你线上要调试的是哪个文件，直接右键选择Add source map,会看到要输入URL

    image.png

    image.png

  • 这个URL从哪里找呢，我们找到面板中sources-》workspace, 点击Add folder,添加本地项目文件夹,然后从dist目录找sourcemap文件（通常.map结尾），打包的时候可以先开启生产环境的sourcemap

    image.png

  • 找到目标文件（可以利用前面提到的search功能定位到具体的文件），点击copy link address复制地址粘进去

    image.png

  • 然后搜索目标文件。快捷键ctrl+p

    image.png

  • 绿标文件：成功的映射到本地的文件。

    image.png

网络network面板

1. 复制请求在postman里打开

  • 右键，点击copy-》copy as cURL(bash)

    image.png

  • 打开postman，点击import, 把刚刚复制的粘进去

    image.png

2. 重新发起请求

  • 右键，点击Replay XHR

    image.png

3. 重新发起请求并改变参数

  • 右键：copy-》copy as fetch

    image.png

  • 在控制台粘贴并修改参数，按回车即可发起请求

4. 禁用缓存和弱网环境

image.png

5. 过滤资源

image.png

elements面板

1. 元素快速隐藏

image.png

2. 强制显示hover、focus等动态效果效果

image.png

avatar
文章
阅读
粉丝