要当好JavaScript程序员:5个debug技巧
我一直使用printf调试程序,一般来说都是比较顺利,但有时候,你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用:
1. debugger;
我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。
需要带有条件的断点吗?你只需要用if语句包围它:
if (somethingHappens) {
debugger;
}
但要记住在程序发布前删掉它们。
2. 设置在DOM node发生变化时触发断点
有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源。
谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,叫做“Break on…”,你在DOM节点上右键,就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化,或它的某个子节点有变化发生。
3. Ajax 断点
XHR断点,或Ajax断点,就像它们的名字一样,可以让我们设置一个断点,在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时,这一招非常的有效。
4. 移动设备模拟环境
谷歌浏览器里有一些非常有趣的模拟移动设备的工具,帮助我们调试程序在移动设备里的运行情况。

找到它的方法是:按F12,调出开发者工具,然后按ESC键(当前tab不能是Console),你就会看到第二层调试窗口出现,里面的Emulation标签页里有各种模拟设备可选。
当然,这不会就变成了真正的iPhone,只是模拟了iPhone的尺寸,触摸事件和浏览器User Agent值。
5. 使用Audits改进你的网站

YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具,叫Audits。
它可快速的审计你的网站,给你提出非常实际有效的优化你的网站的建议和方法。
PS:复制的别人的;
要当好JavaScript程序员:5个debug技巧的更多相关文章
- 如何成为一个伟大的 JavaScript 程序员
这篇文章主要概述在我5年工作经验的基础上,我成为优秀JavaScript开发人员所使用的技术和资源. 当前大多数Web开发人员面临着这样一个共同的问题:他们必须在多个不同的领域领先于他人——从数据库到 ...
- 为什么我要称自己为Javascript程序员
Aaron Griffin写了一篇精彩的牢骚文章,主要是关于各种框架和它们能把程序员从主要业务编程中抽离出来的功能特征.概括一下他的主要论点,当你成为了一个“Rails程序员”,你使用的是一种易于理解 ...
- 初中级Javascript程序员必修学习目录
很多人总感觉javascript无法入门,笔者在这里写一下自己的学习过程,以及个人认为的最佳看书过程,只要各位能按照本人所说步骤走下去,不用很长时间,坚持个3个月,你的js层级会提高一个档次,无他,唯 ...
- [JavaScript] 初中级Javascript程序员必修学习目录
很多人总感觉javascript无法入门,笔者在这里写一下自己的学习过程,以及个人认 为的最佳看书过程,只要各位能按照本人所说步骤走下去,不用很长时间,坚持 个3个月,你的js层级会提高一个档次,无他 ...
- 以技术面试官的经验分享毕业生和初级程序员通过面试的技巧(Java后端方向)
本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕 ...
- [转]成为优秀Java程序员的10大技巧
转自:http://www.codeceo.com/article/10-good-java-programmer-tips.html Java程序员有许多应遵循的守则或最佳实践方式.本文概述了每个开 ...
- 程序员作图工具和技巧,你 get 了么?
分享程序员常用的画图软件和小技巧 大家好,我是鱼皮. 说实话,我觉得做个程序员挺好的.日常工作有很多,写代码.对需求.写方案等等,但我最爱画图:流程图.架构图.交互图.功能模块图.UML 类图.部署图 ...
- JavaScript程序员必备的5个debug技巧
1. debugger:我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: if (somethingH ...
- 每个JavaScript程序员都需要知道的5个数组方法
Array.forEach() .forEach() 方法能够方便的让你 遍历数组里的每个元素,你可以在回调函数里对每个元素进行操作..forEach()方法没有返回值,你不需要在回调函数里写retu ...
随机推荐
- IE环境下判断IE版本的语句...[if lte IE 6]……[endif][if lte IE 7]……[endif]
<!--[if IE 6]> <![endif]--> 只有IE6版本可见 <!--[if lte IE 6]> <![endif]--> IE6及其以 ...
- js仿微信语音播放
html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...
- 怎么通过 Mysql 实现数据同步呢?
怎么使 mysql 数据同步先假设有主机 A 和 B ( linux 系统),主机 A 的 IP 分别是 1.2.3.4 (当然,也可以是动态的),主机 B 的 IP 是 5.6.7.8 .两个主机都 ...
- mySQL函数根据经纬度计算两点距离
DROP FUNCTION IF EXISTS func_calcDistance ; CREATE FUNCTION func_calcDistance( origLng ,), -- 目的地经度 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- 20160712001 SQL server R2 更名
use mastergoselect @@servername;select serverproperty('servername') sp_dropserver 'BPM-SERVER'gosp_a ...
- phpMyAdmin的配置
好久没写东西了,上来记录一下今天学的一点小东西吧~ 之前搞php开发的时候,一直用的是SQLyog来操作mysql数据库的,但是今天发现sqlyog功能不是很完善,主要是我想修改数据库名,但是sqly ...
- laravel框架总结(十二) -- 关联关系
这里我们users表对应的模型类名是users,大家特意注意下和user取名的不同 1.一对一关系 1>表A和表B的记录一一对应,比如一个用户对应一个社交账号 数据表的设计如下: 2> ...
- Fragment全解析系列(一):那些年踩过的坑
开始之前 最新版知乎,单Activity多Fragment的架构,响应可以说非常"丝滑",非要说缺点的话,就是没有转场动画,并且转场会有类似闪屏现象.我猜测可能和Fragment转 ...
- 20-ES6(3)class基本语法
# Class基本语法 关于es6的class简介: ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以 ...