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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
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
swfupload 多文件上传实现代码
2008/08/27 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python将ansible配置转为json格式实例代码
2017/05/15 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
北承题目(C++)
2012/05/16 面试题
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
网吧消防安全责任书
2014/07/29 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年酒店工作总结
2015/04/28 职场文书