Js调试技巧

开发人员工具、断点技巧、搜索技巧等 视频版本：【JavaScript 代码调试方法】How To Debug In Chrome -> link

# 学会使用开发人员工具

preserve log disable cache source -> search 、 snippet script 、 override 重写覆盖脚本 (也可以用 fiddler 支持正则更智能)、 Ctrl键 切换智能提示…

# 学会使用 console

• console 的不同日志级别： console.log console.warn console.error console.debug console.info
• 用列表的形式展示 JSON 和数组数据： console.table
• 日志占位符（可以使用自定义字体样式）： console.log('%c%s', 'font-size: 24px;color: red', 'This is a important message!') % s: 字符串占位符；% o: 对象占位符；% c: 样式占位符；% d: 数字占位符

# 断点技巧

dom断点 、 dom事件断点 、全局 event listener 、 xhr断点 … 下断点一般选在方法开头、结尾、return 处，遇到平坦流（for switch）在 case return 处下断 学会编辑断点条件（false -> 跳过该断点），切换断点禁用

# 搜索关键字技巧

一些常见的加密方式：

1. 取盐校验 -> 不可逆 md5 md2 md4 带密码的 md5（hmac） 分 16 位、32 位、40 位 123456 经过 md5 后 -> 49ba...057 / e10adc...3e sha1 sha256 dha512 分 40 位、64 位、128 位 123456 经过 sha1 后： 7c4a...941b
2. 对称加密 -> 可逆 AES、DES、3DES
3. 非对称加密 -> 可逆 RSA（私钥 setprivate、公钥 setpublic） 同一个明文可以生成不同密文
4. 对于加密无非以下几种情况：
   • 16 进制的（以上的 3 种都是 16 进制的） 0-9 A-F
   • base64 A-Z a-z 0-9 _ =

# 快速定位（无混淆的情况下）

• 使用魔法值搜索： 123456789、1732584193(md5)
• 使用 url 后缀搜索
• 使用关键字 & 属性搜索： password、.password、password=、[‘password’]、[“password”]
• md5 默认 key 0123456789abcdef
• RSA 特征 加密过程：new 一个 rsa 对象 ->setpublickey（key,iv (模值)）->encrypt

# 其他技巧

1. 巧用 JSON.stringify/parse 来提取 js 对象
2. 扣 js 代码或补环境（DOM、BOM），扣代码则要善于导出变量（ window.xxx = ... ）
3. 学会识别统一格式的代码，过滤掉无用的格式要求的固定代码
4. 学会识别 webpack 打包的代码，导出时导出加载器即可，一般位于 webpack 代码的顶部方法
5. 对于 webSocket 协议，学会搜索对应关键词（ new websocket 、 .onopen 、 .onmessage ）
6. 方法里有 this 则需要导出对象，调用对象。方法，不能直接调用方法
7. 灵活使用 hook，而不是一味地搜索关键字（能 hook 找就用 hook 找 ( var send_ = send;send = function(arg...){debugger;send_(...arg);} )

参考链接