阅读(4045) (0)

js调试技巧

2016-08-10 12:04:24 更新

一、常用JS 调试技巧

  • 代码格式化
    可以将被压缩的代码自动展开
  • 实时代码编辑
    可以在运行时动态改变 JS 代码,并且不需要刷新页面就可以看到效果,一般用这个实时的在代码里插 console.log
  • DOM 事件/XHR 断点
    可以针对 DOM 结构改变/属性改变/键盘鼠标事件 等下断点,直接断到事件的第一个 listener 函数上。还可以对 XHR 请求下断点,断到发起请求的那一行代码上
  • 调用栈分析
    这个非常常用,Scripts 面板下右上角的那一部分
  • 自动异常断点
    当代码执行出错时,可以自动断到出错的代码行上,直接分析出错时的运行时环境
  • 分析 HTTP 请求
    Network 面板下列出了所有的 HTTP 请求,可以很方便的查看请求内容、HTTP 头、请求时间等信息
以线上代码出 Bug 为例。一般上手第一步是使用代码格式化功能将被压缩的线上代码展开,然后开启自动异常断点,尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了,但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上,就得结合 DOM 事件断点和 XHR 断点 进一步往上找哪个函数出错。另外,如果是发给服务器请求没有得到正确的 response,可以通过 Network 面板查看请求的参数、Cookie、HTTP 头是否有误。
另外,还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上,免去了代码格式化的麻烦,还可以直接编辑。

还有些比较小的 Tips:
  • console.group/console.groupEnd 可以将 log 信息分组展示,看起来更舒服
  • console.warn/console.error 可以输出 warning 和 error log
  • element 面板右侧实时编辑的 css 样式,可以在 resource 面板里保存起来
  • 关于样式还有个技巧,Elements 面板右上角的 styles 栏,右侧有三个图标,功能依次是:根据当前元素创建一个 css 样式、模拟 :hover/:active 等伪类、颜色值类型选择。实用
  • resource 面板可以删除和修改 cookie/localstorage
  • scripts 面板下的 ctrl+o 可以快速跳转脚本文件,ctrl+shift+o 快速跳转函数
  • 右下角的齿轮图标里有个选项是开发者工具和网页左右分屏(Dock to the right,默认是上下分屏),宽屏必备
  • 接上,还有个选项是禁用 Cookit,必点
  • 接上,在选项面板里还可以手工编辑 user agent 和模拟触摸事件

二、JS调试必备的5个debug技巧

1. debugger;

我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。

需要带有条件的断点吗?你只需要用if语句包围它:
代码如下:
if (somethingHappens) {

  debugger;

}


但要记住在程序发布前删掉它们。


2. 设置在DOM node发生变化时触发断点

有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。

谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做“Break on…”,你在DOM节点上右键,就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化,或它的某个子节点有变化发生。

w3c

3. Ajax 断点

XHR断点,或Ajax断点,就像它们的名字一样,可以让我们设置一个断点,在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时,这一招非常的有效。

Ajax 断点

4. 移动设备模拟环境

谷歌浏览器里有一些非常有趣的模拟移动设备的工具,帮助我们调试程序在移动设备里的运行情况。

找到它的方法是:按F12,调出开发者工具,然后按ESC键(当前tab不能是Console),你就会看到第二层调试窗口出现,里面的Emulation标签页里有各种模拟设备可选。

当然,这不会就变成了真正的iPhone,只是模拟了iPhone的尺寸,触摸事件和浏览器User Agent值。

移动设备模拟环境
5. 使用Audits改进你的网站

YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具,叫Audits。

它可快速的审计你的网站,给你提出非常实际有效的优化你的网站的建议和方法。

Audits