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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 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的memcached客户端memcached
2011/06/14 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
django云端留言板实例详解
2019/07/22 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
理想国读书笔记
2015/06/25 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL