JavaScript 逆向调试常用技巧

1.浏览器开发者工具面板介绍

以chrome浏览器为示例(可按 f12 快捷键打开或鼠标右键选择“检查”)：

• Elements：元素面板，用于查看或修改当前网页 HTML 节点的属性、CSS 属性、监听事件等等，HTML 和 CSS 都可以即时修改和即时显示。

• Console：控制台面板，用于查看调试日志或异常信息。另外我们还可以在控制台输入 JavaScript 代码，方便调试。

• Sources：源代码面板，用于查看页面的 HTML 文件源代码、JavaScript 源代码、CSS 源代码，还可以在此面板对 JavaScript 代码进行调试，比如添加和修改 JavaScript 断点，观察 JavaScript 变量变化等。

• Network：网络面板，用于查看页面加载过程中的各个网络请求，包括请求、响应等各个详情。

• Performance：性能面板，用于记录和分析页面在运行时的所有活动，比如 CPU 占用情况，呈现页面性能分析结果，

• Memory：内存面板，用于记录和分析页面占用内存情况，如查看内存占用变化，查看 JavaScript 对象和 HTML 节点的内存分配。

• Application：应用面板，用于记录网站加载的所有资源信息，如存储、缓存、字体、图片等，同时也可以对一些资源进行修改和删除。

• Lighthouse：审核面板，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。

2.查看节点事件

接下来会以某网站为示例，之前我们是用 Elements 面板来审查页面的节点信息的，我们可以查看当前页面的 HTML 源代码及其在网页中对应的位置，查看某个条目的标题对应的页面源代码，如图所示。

点击右侧的 Styles 选项卡，可以看到对应节点的 CSS 样式，我们可以自行在这里增删样式，实时预览效果，这对网页开发十分有帮助。

在 Computed 选项卡中还可以看到当前节点的盒子模型，比如外边距、内边距等，还可以看到当前节点最终计算出的 CSS 的样式，如图所示。

接下来切换到右侧的 Event Listeners 选项卡，这里可以显示各个节点当前已经绑定的事件，都是 JavaScript 原生支持的，下面简单列举几个事件。

• change：HTML 元素改变时会触发的事件。

• click：用户点击 HTML 元素时会触发的事件。

• mouseover：用户在一个 HTML 元素上移动鼠标会触发的事件。

• mouseout：用户从一个 HTML 元素上移开鼠标会触发的事件。

• keydown：用户按下键盘按键会触发的事件。

• load：浏览器完成页面加载时会触发的事件。

通常，我们会给按钮绑定一个点击事件，它的处理逻辑一般是由 JavaScript 定义的，这样在我们点击按钮的时候，对应的 JavaScript 代码便会执行。比如在图 xx 中，我们选中切换到第 2 页的节点，右侧 Event Listeners 选项卡下会看到它绑定的事件。

这里有对应事件的代码位置，内容为一个 JavaScript 文件名称 chunk-vendors.77daf991.js，然后紧跟一个冒号，然后再跟了一个数字 7。所以对应的事件处理函数是定义在 chunk-vendors.77daf991.js 这个文件的第 7 行。点击这个代码位置，便会自动跳转 Sources 面板，打开对应的 chunk-vendors.77daf991.js 文件并跳转到对应的位置，如图所示。

所以，利用好 Event Listeners