JS调试

chrome developer tool 调试技巧

http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/

Firebug入门指南  作者: 阮一峰

http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

JavaScript调试技巧之:快速定位

http://jsfox.cn/blog/javascript/debug-js-quick-locate.html

JavaScript调试技巧之:断点调试(1)

http://jsfox.cn/blog/javascript/debug-js-using-break-points-part1.html

JavaScript调试技巧之:断点调试(2)

http://jsfox.cn/blog/javascript/debug-js-using-break-points-part2.html

我大概是从 08、09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢。我平时调错时常用的功能有:

代码格式化

可以将被压缩的代码自动展开

实时代码编辑

可以在运行时动态改变 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 和模拟触摸事件

最后说说 IE 6 的调试,我是这么个流程:

首先尝试在 Chrome 下重现该 Bug,如果能重现,就先把 Chrome 里能重现的 Bug 修了。确定 Chrome 里 OK,但是 IE 6 有问题,再继续下一步

到 IE 里首先尝试高版本 IE,比如 IE 9。E 9 的开发者工具还不错,也可以下断点,调用栈分析、控制台样样都有。如果 IE 9 里没问题,那就继续尝试 IE8,一直定位到能重现该问题的最高版本的 IE 上。即使是 IE 7,其开发者工具也还是勉强能用的……如果不幸的碰上一个 IE 6 only 的 Bug,那就只有继续下一步

到这一步的话一般就是最苦逼的时刻。IE 6 实在是没有太好用的 JS 调试工具(据说 Visual Studio 可以调,我没用过,欢迎补充)。这时候一般就是二分+alert的土法定位到出错行,加上耐心和时间,还有一点点运气。这一步的话强烈推荐开 Fiddler。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容