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

为什么80%的码农都做不了架构师？>>>   

做前端开发应该都了解浏览器，这里主要介绍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勾选需要的事件，这样在发生事件时会触发断点

转载于:https://my.oschina.net/ruanjf/blog/180455