JS调试必备的5个debug技巧


Posted in Javascript onMarch 07, 2014

1. debugger;

我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。
需要带有条件的断点吗?你只需要用if语句包围它:

if (somethingHappens) {
  debugger;
}

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

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

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

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

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

JS调试必备的5个debug技巧

3. Ajax 断点

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

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

JS调试必备的5个debug技巧

4. 移动设备模拟环境

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

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

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

JS调试必备的5个debug技巧

5. 使用Audits改进你的网站

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

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

JS调试必备的5个debug技巧

还有其它的吗?

没有这些工具,我不知道将如何开发。我还会写更多的关于这方面的技巧——一旦我有所发现,请关注我的最新文章。

Javascript 相关文章推荐
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 #Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 #Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 #Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 #Javascript
jquery中常用的函数和属性详细解析
Mar 07 #Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 #Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 #Javascript
You might like
php 批量替换html标签的实例代码
2013/11/26 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
平安建设实施方案
2014/03/19 职场文书
知识竞赛主持词
2014/03/26 职场文书
消防安全宣传口号
2014/06/10 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
美丽的大脚观后感
2015/06/03 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle