关于Chrome断点和console调试

断点

• F12点击source进入
  • 点击{}格式化代码,使代码更清晰
  • js代码中 debugger;会自动创建一个断点,记得在上线前删除
• DOM节点操作的断点(Element内右击对应dom元素)
  • 当节点内部子节点变化时断点（Break on subtree modifications）
  • 当节点属性发生变化时断点（Break on attributes modifications）
  • 当节点被移除时断点（Break on node removal）
• 事件监听断点:Event Listener Breakpoints

console

console.dir()

传入一个dom节点，可以输出该节点的各项 js属性，而不像console.log只能输出一个节点树

console.time() 和 console.timeEnd()

输出期间经过的时间

console.trace()

用来追踪函数的调用轨迹。

console.log()

下面以console.log为例理解Chrome中console的机制
console只有在Chrome DevTools开启的情况下才会执行，因此

• 如果一开始Chrome DevTools即开启,则console结果符合预期，同直接在控制台中执行语句
• 如果console语句执行之后才开启，则将输出内存中此时对应的值(而非console语句所处位置应有的值)
• 如果console输出的值为...(通常是因为该值为get属性方式获取),通过点击展开,则展开后的值为点击时内存中的值(为了获得console时的值可以使用JSON.parse(JSON.stringify(value)))

( 注意 : node 中 console.log 的表现和浏览器表现不一致)

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.