在web逆向分析中，通过使用浏览器开发者工具(Chrome/Firefox DevTools)调试，可以准确的定位到代码块，分析参数如何生成，通过那段代码生成的至关重要。熟悉开发者工具调试朋友们可以当本文在放屁。
这里以chrome为例，打开google示例，或者自己写段html + js代码，然后按F12, 进入source。
一般打开Chrome DevTools显示的英文，如果想设置中文，点击设置按钮，进入设置界面language选项->选择
可以根据自己的喜好选择。
界面介绍
进入source选项卡后，出现下面界面
资源（Sources）面板包含三个部分：
文件结构树区域：列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。
代码编辑（Code Editor） 区域展示源码。
调试区（JavaScript Debugging） 区域是用于调试的。
断点（break point）
常用的断点分为以下几类：
这里介绍经常用到的几种：
代码行断点
使用代码行断点可以暂停 JavaScript 代码，了解此处的js代码的堆栈引用以及变量情况。
在代码编辑区点击代码行号就可以给这行代码加上断点。
条件代码行
右击代码行，选择add conditional break point, 然后输入表达式。
条件代码行需要当表达式的值为true时候，才会在这行代码处暂停。这对于遍历比较多的数据时，想查看某一种情况特别有用。
可以通过调试区的Breakpoints选项卡对代码行和条件代码行断点进行修改、删除、停用/启用等操作。
XHR/提取断点
当XHR 的请求网址包含指定字符串时中断，开发者工具会在 XHR 调用 send() 的代码行处暂停。
调试区的XHR/fetch breakpoints选项卡, 点击+，填写关键字
事件监听器断点
当触发事件后运行事件监听器上的代码时暂停。通常配合代码行断点和条件断点。
其他断点请参考Chrome DevTools断点使用
调试区的其他面板
最顶端
当前监听XHR 断点中的那个url。当XHR断点有可能有多个，或者会匹配多个。这个区域显示的是当前监听的url
watch
调试的时候，可以显示任意表达式的当前值
call statck
代码暂停当前位置所执行的堆栈信息。简单说就是代码怎么一步一步执行到这一行的。
代码调试示例
以google示例为例，给点击事件添加了断点，当点击按钮就触发了点击函数并暂停：
接下来主要介绍绿色框里面的按钮：
（F8）调到下一个断点，或者没有断点执行结束。
(F9) 运行下一条语句, 碰见if、for、函数等代码块会执行到代码块里面。
（F10）跟上一条命令“下一步（Step）”类似，但是不会进入到代码块中。
（F11）和“下一步（Step）”类似,但是会进入到异步代码中执行。示例
（Shift+F11）跳出当前函数（此函数的之后的代码还是会执行），执行到下一行。当我们使用 偶然地进入到一个嵌套调用，但是我们又对这个函数不感兴趣时，我们想要尽可能的继续执行到最后的时候是非常方便的。
启用/禁用所有的断点。
在代码中的某一行上右键，在显示的关联菜单（context menu）中点击一个非常有用的名为 “Continue to here” 的选项。
当你想要向前移动很多步到某一行为止，但是又懒得设置一个断点时非常的方便。