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 加上最后自己的验证
Nov 04 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
javascript打印输出json实例
Nov 11 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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优化那些事(经验分享)
2014/11/27 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
Angular实现form自动布局
2016/01/28 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
构建一个JavaScript插件系统
2020/10/20 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
Python发送Email方法实例
2014/08/21 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python学生管理系统
2019/01/30 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
QML使用Python的函数过程解析
2019/09/26 Python
python爬取招聘要求等信息实例
2020/11/20 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
合作协议书范本
2014/10/25 职场文书
初三毕业感言
2015/07/31 职场文书
golang特有程序结构入门教程
2021/06/02 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js