推荐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 相关文章推荐
popdiv
Jul 14 Javascript
childNodes.length与children.length的区别
May 14 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
element跨分页操作选择详解
Jun 29 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
对javascript和select部件的结合运用
2006/10/09 PHP
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
google地图的路线实现代码
2009/08/20 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解vue-cli3使用
2018/08/14 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python递归函数绘制分形树的方法
2018/06/22 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
英国自行车商店:AW Cycles
2021/02/24 全球购物
存储过程的优点有哪些
2012/09/27 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
辞职信范文大全
2015/03/02 职场文书
公司表扬信格式
2015/05/04 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
python如何正确使用yield
2021/05/21 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python