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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
JavaScript 实现页面滚动动画
Apr 24 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
深入理解javascript中的this
2021/02/08 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python中defaultdict的用法详解
2017/06/07 Python
Python人脸识别初探
2017/12/21 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
活动策划邀请函
2014/02/06 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫