Chrome浏览器调试线上JS代码的完整指南

Chrome浏览器调试线上JS代码的完整指南

前言

以往前端Bug的调试流程通常是在开发环境中完成功能开发，经过多次测试确认无误后发布至测试环境，待验收合格后再发布至生产环境。然而，生产环境偶尔会出现与开发及测试环境不一致的情况，例如测试环境启用了加密而开发环境未启用，或者测试环境与生产环境的时间格式、数组对象结构存在差异，这些不一致往往导致线上环境出现报错。

为了更高效地在线上环境中定位具体Bug，避免在本地将地址修改为生产环境地址并重新走一遍完整测试流程的繁琐操作，利用Chrome浏览器进行调试显得尤为关键。

定位JS代码并设置断点

一、定位JS代码并设置断点

首先按下F12打开开发者工具，切换到“Sources”选项卡。在Sources面板中选择需要调试的文件，右侧会显示该文件内容。浏览找到目标JavaScript代码，点击代码行号即可设置断点。

如上图所示，假设有两个console输出，第一个打印'aaa'，第二个打印'bbb'。在第二个console左侧点击一下，会出现红色的断点标记。刷新网页后，代码运行到第二个console处会暂停，此时只会打印'aaa'。

格式化显示的JS代码

二、格式化显示的JS代码

许多公司要求前端代码打包并加密，导致看到的代码可读性极差。此时只需点击下方的格式化按钮（Pretty Print），浏览器会自动整理代码格式，极大提升可读性。

调试快捷键：跳转、单步与步入

三、跳转到下一个断点/单步运行/步入函数内部

程序调试通常不止一个断点，但设置过多断点会导致控制台混乱，且难以直接在函数内部定位问题。

幸运的是，Chrome提供了快捷键来解决上述问题。

按下F8可运行至下一个断点；按F10进行单步调试，即代码执行到下一行而非下一个断点；按F11并点击代码行号，可在方法体内的函数内部设置断点。

查看与监视变量值

四、查看变量的值

将鼠标悬停在变量上方，即可显示变量内容；右侧调试面板的“Scope”区域也可查看局部变量的内容。

注意，如果赋值前断点未运行到该位置，显示的变量值为undefined。

五、利用Watch监视变量的值

在Source中选择变量，右键点击菜单选择“Add selected text in watches”，即可将当前选择的文本添加到Watch列表中。Watch列表中的内容会随代码执行动态变化。

调用栈与断点管理

六、利用Call Stack查看代码的层次关系以及Breakpoints查看所有断点

在Sources页面下方即可查看Call Stack和Breakpoints。

Console中显示和修改变量

七、最重要的一点——在Console中显示和改变变量值

在Console中直接输入变量名，或在Source中选择变量后右键点击“Evaluate in console”，即可在Console中显示变量值。也可直接在Console中输入“变量名=变量值”来修改变量值。这种方式无需借助编辑器即可调试线上数据，一旦报错浏览器也会定位到错误行，非常实用。

这种方式可在变量赋新值前配合断点使用，或直接console出该变量的值，以确定是否与其他环境的值一致，以及是否被正确解密或转换格式。

总结

以上方法足以在线上环境找出大多数Bug。最后，在本地将接口地址换回开发环境地址，修改代码后在生产环境测试一遍，基本可一次到位。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。