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中对表单的基本操作代码
Jul 29 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 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中将网页导出为Word文档的代码
2012/05/25 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
php强制下载文件函数
2016/08/24 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
Python2中文处理纪要的实现方法
2018/03/10 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
高一英语教学反思
2014/01/22 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技