断点
- 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.
