之前杭锋教过我. 感谢杭锋. 这里记录一下

基础
  • chrome这里要看network, 看都发了什么.
  • node这边可以看调用栈.
参考
  • https://developers.google.com/web/tools/chrome-devtools/
  • https://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html
如何查看dom树
  • chrome的debug方式是从inspact element入手的. 可以一路跟踪过去.
  • chrome的elements视图就是dom树的视图.
  • https://developers.google.com/web/tools/chrome-devtools/
  • element这边右键可以选择break on, 然后相关事件发生就会被break,
    • 这个是发生在mutationobserver
    • 这个会显示再devtools->elements->dom breakpoints
  • 在elements里面, 找到event listen, 选择blocking, 这样事件都会被跟踪.
  • source那边也可以针对某个event进行breakpoints
调用栈面板
  • 有所有的调用栈
  • 如果要跟踪异步事件可以把async这个选择框勾上. 这样计时调用和xhr(ajax)事件都跟踪了.
黑盒
  • 黑盒的意思是调试的时候不会跳进去, 这个其实还挺有用的. 可以避免各种干扰因素.
  • source面板选择文件, 右键选择黑盒.
异常会引起暂停
  • 是因为勾选了pause on excption
devtools可以格式化代码
  • 用底部的这个图标: {}
如何调试动态加载的js代码
在需要跟踪的js的头部或者尾部加这个注释
//# sourceURL=随便起的名字.js
然后在chrome里面就能看到nodomain里面出现了对应的名字的js文件
  • 这个方法实际上是sourcemap方法的手写版本.
  • 同样的方法可以调试typescript以及coffeescript, 不过对于chrome而言, 当前这两种语言都是自动的了.
一个疑问

  • 每次使用pause, 然后步进: step over next function call的时候, 都会不停地出现vm77, vm487, vm684….

  • 显示类似如下内容

    !!(
    (window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length) || window.React
  )

  • 严重干扰了正常调试