JS逆向基础-开发者工具的详解（2）

Sources面板

Sources面板是必须要掌握的面板，对JS加密脚本的断点调试和代码分析主要是从该面板出发的。如一个网页对登录参数等进行了加密，可以在加密JS脚本处设置断点，这样就可以跟进查看加密函数

1.设置断点

设置断点最基本的方法是在代码的行列号上手动添加，也可以将其设置为在满足某些条件下才会触发的断点。一旦在某一代码行前设置了断点，网页在加载到这一行时就会全局暂停，直到将断点删除。

要在特定的行前设置断点，需要打开Sources面板在中间的file nagigator窗口中选择要分析的脚本文件，在源代码的左侧可以看到行序号，单击行序号即可在这一行上下断点

条件断点只有在断点表达式为true时，才会被触发暂停。

例：新建条件断点

例如该代码，想在第二行创建一个条件断点

鼠标右键点击行序号，选择“Add  conditional breakpoint”创建条件断点

创建完以后就会发现条件断点的颜色和普通断点的颜色不一致

调试者在代码中添加的所有断点都会被记录在右侧的Breakpoints中。

删除断点的方式可以再次单击行序号，也可以在右侧的工具栏中选中断点，选择“remove breakpoint”

2.调试断点

设置好断点之后就可以开始遍历代码了，可以通过一次执行一行代码或者一次执行一个函数来观察数据和页面的更改，也可以修改JS脚本及其中的值。

代码调试通过Sources面板右上角的图标进行操作

第一个图标的意思是：恢复代码执行直到遇到下一个断点，如果没有遇到断点，就会恢复正常

第二个图标的意思是：执行下一行代码，并跳转到下一行

第三个图标的意思是：如果下一行代码包含一个函数调用，就跳转到该函数并在该函数的第一行暂停。

第四个图标的意思是：执行当前函数的剩余部分，然后在函数调用后的下一个语句处暂停。

第五个图标的意思是：暂时禁用所有的断点，用于恢复完整的执行，而不是将断点全部删除

第六个图标的意思是：当异常发生时自动暂停代码。

而在实际的调试脚本中，这些图标都需要结合起来使用。

当脚本暂停在断点时，scope窗格会显示当前时刻所有定义在本地，闭包和全局的属性

只有在脚本暂停的时，scope窗格才有显示，当页面正常运行的时候，scope窗格是空白的

在进行断点的时候，Call Stack窗格会显示代码的执行路径。该窗格是按照时间逆序，从上到下单击查看时，会跳转到对应的代码块中，这有利于调试者理解代码如何运行。

3.运行自定义代码块

代码块是可以在Sources面板中创建和执行的小脚本，在任何页面都可以访问和运行。假设调试者有一个JS加密方式库，内置了多种常见的加密方法，在调试脚本的时候，如果要在多个页面中反复使用，就可以考虑将脚本保存为代码块。

创建代码块

在Sources面板中点击Snippets选项（如果没有发现snippets，需要点击两个小于号<组成的按钮）

打开后如上图一样。创建新的代码块需要右键选择“create new snippet”或者点击上面的+号的New snippet

如果编辑代码块后还未保存，就会在代码文件名处出现“*”，需要ctrl+s保存后就会消失并且代码也可以正常运行

4.美化代码块

一般来说，在打开网页源代码或者JS文件的时候会发现代码是经过压缩，观察起来很不方便。

可以点击左下角的“{}”图标进行美化

Network面板

Network面板中会按照时间顺序记录与网页有关的每个网络操作的详细信息。包括HTTP请求和HTTP响应。

Application面板

在Application面板中可以查看和删除cookie，但是不能修改cookie.

可以看到cookie会按照域列出，不过需要注意，来自不同的域的cookie可能会出现在同一栏中，相同的cookie也可能会出现在多个不同的栏中。

原文始发于微信公众号（HK安全小屋）：JS逆向基础-开发者工具的详解（2）