UDN-企业互联网技术人气社区

板块导航

浏览  : 2804
回复  : 22

[问答] 有哪些 JS 调试技巧?

[复制链接]
一个程序员的头像 楼主
发表于 2015-7-30 17:39:20 | 显示全部楼层 |阅读模式

相关帖子

发表于 2015-7-30 18:02:01 | 显示全部楼层
    我大概是从 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 的调试,我是这么个流程:[ol]
  • 首先尝试在 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。[/ol]
    =====
    补充:淘宝 UED 写了篇非常不错的文章 http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/
    显示全部
  • 使用道具 举报

    回复

    发表于 2015-7-30 19:55:10 | 显示全部楼层

    关于chrome开发者工具补充几个小技巧:

    • resources面板里的css文件也是可以立即编辑和生效的。
    • shift + / (就是"?"号啦)可以查看键盘快捷键。
    • chrome canary 比 dev版更新。
    • audits 面板可以为你提供页面的优化建议。
    • 打开Console后状态栏可以选择框架 (frame) 或者 content script 的JS环境。
    • 有jQuery插件可以将jQuery注入到当前页面中,方便在没有jQ的页面进行测试另外这里也有一些非常不错的补充

    使用道具 举报

    回复

    发表于 2015-7-30 22:27:01 | 显示全部楼层
    我补充一个:debugger;
    执行到这里的话,就直接断点到这行了,某些情况下很实用
    用完记得删掉
    使用道具 举报

    回复

    发表于 2015-7-31 01:00:24 | 显示全部楼层
    Chrome的调试工具确实是王道 :)
    补充2个,主要是关于性能优化的:
    1. Profiles,可以记录JS函数和CSS选择器对CPU的占用,以及内存占用时间线。用来找出影响性能的瓶颈非常有帮助。
    2. Timeline,可以记录浏览器渲染的每一帧里发生了什么,从js执行,css reflow到画面repaint,各自占用多少时间。可以帮助你定位是什么导致动态效果的帧数不流畅。
    使用道具 举报

    回复

    发表于 2015-7-31 03:55:51 | 显示全部楼层
    补充下IE6下的调试:
    IE6写可以在代码里写debugger;关键字。
    如果机器上有Visual Studio的话,代码运行到debugger的时候,会弹出对话框问:是否用Visual Studio调试。
    步骤可参见:http://sixrevisions.com/javascript/javascript-debugging-techniques-in-ie-6/
    挺方便的。
    使用道具 举报

    回复

    发表于 2015-7-31 06:03:28 | 显示全部楼层
    F12进入chrome的开发者工具,简洁好用又强大。
    这里有CodeSchool的高质量教程Code School - Discover DevTools
    使用道具 举报

    回复

    发表于 2015-7-31 07:51:22 | 显示全部楼层
    我有一个小技巧可以调试线上环境:在本地搭建一个nginx,然后做成静态服务器的代理,需要调试的文件就直接读取本地磁盘的,不需要的就直接proxy_pass。这么以来你就可以用本地的未压缩过的文件替代线上压缩过的文件,调试起来很方便。如果遇到合并文件,由于我们公司实现了一套类似yui的loader的机制,所以可以让合并文件的请求返回空文件,然后后续的程序就会只好独立的发起请求取文件,这时你就可以按之前的想法调试一个单独的文件了。
    使用道具 举报

    回复

    发表于 2015-7-31 10:21:00 | 显示全部楼层
    //@ sourceURL=filename.js  这个技巧好,可以调试console中输入的js.
    IE6中js调试可以用用companion.js(IETest那家公司推出的一个工具)
    使用道具 举报

    回复

    发表于 2015-7-31 11:10:07 | 显示全部楼层
    $x("//name/of/xpath");
    写测试的时候再也不用头疼找不到path了
    使用道具 举报

    回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关于我们
    联系我们
    • 电话:010-86393388
    • 邮件:udn@yonyou.com
    • 地址:北京市海淀区北清路68号
    移动客户端下载
    关注我们
    • 微信公众号:yonyouudn
    • 扫描右侧二维码关注我们
    • 专注企业互联网的技术社区
    版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
    快速回复 返回列表 返回顶部