chrome调试&代码逆向分析.doc

(完整版)chrome调试&代码逆向分析
一、chrome developer tool 调试技巧
1. Beautify Javascript –格式化压缩代码
js 文件在上线前一般都会压缩下， 压缩的 javascript 几乎没有可读性， 几乎无法设定断点。 在 Scripts 面板下面有个 Pretty print 按钮（这种符号 {｝)， 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了。

2。 查看元素绑定了哪些事件
在 Elements 面板, 选中一个元素， 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件， 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.
在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件
展开事件后会显示出这个事件是在哪个文件中绑定的， 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件。

3。 Ajax 时中断
在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点， 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax， 这个匹配只是简单的字符串查找， 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

根据堆栈向上回溯查找最近的业务代码

4。 主动添加Dom事件中断
除了给设定常规断点外, 还可以在某一特定事件发生时中断（不针对元素） , 在 Scripts 面板右侧， 有个 Event Listener Breakpoints, 这里列出了支持的所有事件， 不仅 click， keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断）， onload, scroll 等事件。

5. Javascript 异常时中断
Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断。 在异常处中断后就可以查看为什么抛出异常了
主要用途：虽然发生异常时可以在console中点击鼠标直接定位到出错的代码段,但是对于动态生成的代码，或某些特殊条件才发生的异常，就很难直接定位了，异常时中断开启后发生异常时会主动中断。甚至可以中断catch掉的异常

6。 DOM Level 3 Event 事件中断
在 Elements 面板, 选中一个元素右键， 有两个选项：Break on subtree modifications， Break on attributes modifications， 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified ， DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断

试下在控制台执行 $（"#top").children（）.eq(0）.remove()
移除子节点时会中断

7。 所有 js 文件中搜索＆查找 js 函数定义
· 在 chrome developer tool 打开的情况下， 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用， 查找支持正则表达式
· 查找函数定义： ctrl + shift + 0 （在 Scripts panel 下)
· 查找文件: ctrl + o  (在 Scripts panel 下）
· 更多快捷键： 在 chrome developer tool 中按 ? 查看帮助

8. console的页面运行环境可选择iframe页面

9。 console 中执行的代码可断点
在 console 中输入代码的最后一行加上 //＠ sourceURL=filename.js， 会在 Scripts 面板中有个叫 filename。js 的文件， 然后他就和外部 js 文件一样了

function hello（） {
alert('say hi')；
｝
//@ sourceURL=hello。js

二、代码逆向分析技巧

总体来说有静态分析和动态分析两种，静态分析是直接在源码中搜索,而动态分析是让代码执行起来，在功能点对应的位置加断点，然后通过堆栈回溯代码。

孔乙己：茴字有几种写法? 通过一个示例说明一下查找代码的方法。

目标:存和笔记功能点击后，提示保存失败，现在要定位相应的代码段解决该问题。

1。通过元素id，class名，name进行查找（静态分析）

J_saveNote

Ctrl+shift+F全局查找，找到相应的代码位置

元素id，class名，或name一般唯一性比较高，较容易查找

2。通过特证关键字或特证的DOM片断来查找 （静态分析）

一定要确保查找关键字的唯一性，比如界面提示语唯一性就比较好，就像用金山游侠修改游戏一样。

因为界面提示“保存失败，请重试"，就从这个提示语入手吧，Ctrl+shift+F全局查找，找到4处代码，全部加上断点,一执行就知道是哪一处代码了.

3通过xmlHttpRequest请求查找 （动态分析)

设置xhr断点，如果不知道接口名字可以选择Any XHR,有ajax请求时会自动中断，从堆栈可以回溯代码

4.通过DOM元素的事件绑定（动态分析)
这种方法较难，主要是因为事件绑定一般都是jquery实现的,代码的堆栈非常长，但是通用性很高，在其它方法都找不到特证时，选用此方法，

1）先选定dom元素，查看click绑定的代码,位置是在jquery中

2).点击鼠标定位过去,加个断点,代码压缩版的可以使用pretty print格式化.

因这段代码是公共代码，调用非常频繁，断点的时候一定要确认作用域的this指向是J_saveNote再往下走，不然就走错地方了

3） 一直按F11单步执行到dispatch

4） 找到preventDefault的上一行,加个断点，执行到此位置后,再按F11

5)眼前豁然开朗。

5。主动添加绑定事件查找。(动态分析)

定位到在目标元素，在souce面板的event listener breakpoint上添加Mouse—〉Click事件监听，通过此方法可以捕获事件往上冒泡过程中的代码位置。

点击后会断在这里，剩下的步骤就和前一种方法一模一样了。