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 相关文章推荐
基于jquery tab切换(防止页面刷新)
May 23 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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
第七节--类的静态成员
2006/11/16 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
硕士生工作推荐信
2014/03/07 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
干部考察材料范文
2014/12/24 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
八年级物理教学反思
2016/02/19 职场文书