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

(完整版)chrome调试&代码逆向分析一、chrome developer tool 调试技巧1. BeautifyJavascript 格式化压缩代码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_saveNoteCtrl+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单步执行到dispatch4） 找到preventDefault的上一行,加个断点，执行到此位置后,再按F115)眼前豁然开朗。5。主动添加绑定事件查找。(动态分析)定位到在目标元素，在souce面板的event listener breakpoint上添加MouseClick事件监听，通过此方法可以捕获事件往上冒泡过程中的代码位置。点击后会断在这里，剩下的步骤就和前一种方法一模一样了。