Chrome Debugger 那些你应该知道的功能

作前端开发应该都了解浏览器，这里主要介绍Chrome全文参考chrome-developer-tools javascript-debugging。若是有Eclipse Debug的经验应该很好理解。Chrome Debugger还能够用于调试nodejs应用这个之后写文章介绍

---

基础调试

• 格式化压缩的代码Pretty print see

• 运行到指定行Continue to Here see

• 条件断点

  首先设置一个断点，而后右键该断点选择Edit breakpoint在弹出的输入框中填写具体的条件便可

• 在异常的行触发断点 see

• 动态修改内容 see

  在Sources界面内选择某个js文件直接修改，而后使用Ctrl + S或者Cmd + S。这样便可及时生效

• 异常栈查看 see

  在右下角有一个打叉的小图标（以js出错为前提）。点击能够查看详细的栈信息，如需查找对于的代码请先点击左边的小三角形图标在展开的栈中点击靠右边的js文件名。若是在代码中像打印栈能够经过console.log(e.stack)，打印当前代码调用栈能够经过console.trace()

• 断言console.assert(var1 !== undefined, "no var1")

• Source Maps 用于关联源码位置 see

HTML相关调试

• DOM变化断点 see

  切换到Elements界面，右键须要监控的元素选择Break on...(就的版本可能不须要这个) --> Break on Subtree Modifications。这样元素的内部发生变化时会触发断点

• XMLHttpRequest(日常是由JavaScript发起的请求)请求中断

  在Sources界面的右边找到XHR Breakpoint添加URL中包含的字符，这样在发送请求时会触发断点

• 事件断点（鼠标事件、键盘事件等）

  在Sources界面的右边找到Event Listener Breakpoint勾选须要的事件，这样在发生事件时会触发断点