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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python打印异常信息的两种实现方式
2019/12/24 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
硕士研究生就业推荐信
2014/05/18 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
个人维稳承诺书
2015/05/04 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
教你怎么用Python生成九宫格照片
2021/05/20 Python
Django使用redis配置缓存的方法
2021/06/01 Redis