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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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的类树(支持无限分类)
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
应聘医药销售自荐书范文
2014/02/08 职场文书
大学军训感言300字
2014/03/09 职场文书
支教个人总结
2015/03/04 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Django使用channels + websocket打造在线聊天室
2021/05/20 Python