推荐5 个常用的JavaScript调试技巧


Posted in Javascript onJanuary 08, 2015

我之前使用过用printf debugging,自此之后我用这种方法似乎总能更快地解决bug。
在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处:

1. debugger;

你可以使用“debugger;”语句在代码中加入强制断点。
需要断点条件吗?只需将它包装它在IF子句中:

if (somethingHappens) {

debugger;

}

只需记住在上线前移除。

2. 当节点变化时断开

有时DOM像有了自己的想法。当不可思议的变化发生时很难找到问题的根源。
Chrome开发人员工有调试这个问题的超级有用技能。这就是所谓的“Break on…”,你可以通过在元素选项卡上右键DOM节点找到它。

断点可以在节点被删除后设置,当节点的属性更改或者其子树中的节点变化时。
推荐5 个常用的JavaScript调试技巧

3. Ajax断点

XHR断点或我称作的Ajax断点,也允许当一个预期Ajax请求创建时断开。
当调试你的web应用的网络时这是个让人吃惊的工具。
推荐5 个常用的JavaScript调试技巧

4. 模拟不同的移动设备

Chrome增加了内置的移动设备模拟工具,这将简化你的日常工作。
选择任何非Console的选项卡找到它们,按键盘上的esc键并选择你想摸你的移动设备。

你当然不会得到一个真正的iPhone,但尺寸、触摸事件和agemt都会为你效仿。
推荐5 个常用的JavaScript调试技巧

5. 通过审核提升你的站点

YSlow是个伟大的工具。Chrome也在开发人员工具下包含一个称作Audits的类似工具。
使用快速审核一下你的网站,来获得有用实际的优化技巧。
推荐5 个常用的JavaScript调试技巧

还有什么呢?

没有这些工具我不能想象如何开发。当我发现新的后我会发布更多,敬请期待。

Javascript 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS Attribute属性操作详解
May 19 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 #Javascript
jQuery中prevAll()方法用法实例
Jan 08 #Javascript
jQuery中prev()方法用法实例
Jan 08 #Javascript
深入探密Javascript数组方法
Jan 08 #Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
JS Array对象入门分析
2008/10/30 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
编程语言Python的发展史
2014/09/26 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python matplotlib实时画图案例
2020/04/23 Python
没编程基础可以学python吗
2020/06/17 Python
python 基于opencv实现图像增强
2020/12/23 Python
工作自我评价分享
2013/12/01 职场文书
英语自我评价范文
2014/01/24 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
农民工讨薪标语
2014/06/26 职场文书
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers