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 相关文章推荐
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JS随机密码生成算法
Sep 23 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php中session退出登陆问题
2014/02/27 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python实现注册登录系统
2017/08/08 Python
python实现抖音视频批量下载
2018/06/20 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
机械设计职业生涯规划书
2013/12/27 职场文书
运动会邀请函范文
2014/01/31 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
公司委托书格式范文
2014/10/09 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
python 网络编程要点总结
2021/06/18 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers