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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
JavaScript流程控制(分支)
Dec 06 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实现多进程并行执行脚本
2013/06/18 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
浅谈php和.net的区别
2014/09/28 PHP
php中switch语句用法详解
2015/08/17 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
深入解析Python编程中super关键字的用法
2016/06/24 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
仓库管理制度
2014/01/21 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
疾病捐款倡议书
2014/05/13 职场文书
奥运会口号
2014/06/13 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js