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 THICKBOX弹出层插件
Aug 30 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
js动态引入的四种方法
May 05 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
微信小程序实现聊天室
Aug 21 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
寄语十八大感言
2014/02/07 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
项目工作说明书
2014/07/29 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
前台接待岗位职责
2015/02/03 职场文书
优秀英文求职信范文
2015/03/19 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
2016春季小学开学寄语
2015/12/03 职场文书