推荐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 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
理解javascript中的严格模式
Feb 01 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
vue router 传参获取不到的解决方式
Nov 13 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类
2006/07/15 PHP
一个查看session内容的函数
2006/10/09 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Node.js创建Web、TCP服务器
2017/12/05 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python匹配中文的正则表达式
2016/05/11 Python
python实现微信自动回复功能
2018/04/11 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python与字符编码问题
2019/05/24 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
设计模式的基本要素是什么
2014/04/21 面试题
民族团结先进个人事迹材料
2014/06/02 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL