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 相关文章推荐
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
详解Vue template 如何支持多个根结点
Feb 10 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
PHP fclose函数用法总结
2019/02/15 PHP
浅谈PHP封装CURL
2019/03/06 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
园林设计师自荐信
2013/11/18 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
大学生如何写自荐信
2014/01/08 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
运动会演讲稿200字
2014/08/25 职场文书
大客户经理岗位职责
2015/04/09 职场文书
上课迟到检讨书
2015/05/06 职场文书
美容院员工规章制度
2015/08/05 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书