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);} )

参考链接