js调试工具及使用方法

IE/FF扩展插件下载地址：

TamperIE的官方网站是http://www.bayden.com/TamperIE/
IEwatch的官方网站是http://www.iewatch.com/downloads.aspx
LiveHTTPHeaders的官方网站是https://addons.mozilla.org/zh-CN/firefox/addon/live-http-headers/
TamperData的官方网站是https://addons.mozilla.org/zh-cn/firefox/addon/tamper-data/versions/
firebug的官方网站是https://addons.mozilla.org/zh-CN/firefox/addon/firebug/?src=hp-dl-mostpopular

 

IE8“开发人员工具”使用详解上(各级菜单详解)

IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测，然后给出什么“Chrome运行JavaScript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。我管谁比谁强多少？我只知道：当windows7发布的时候，IE8浏览器的市场占有率将让前台开发人员无法说：“不用去管IE8，没有几个人在用它”。所以，这篇文章将会非常务实的讲解一下，IE8中也许是唯一让开发人员感到亲切的“开发人员工具”。同时，我们会延伸一些相关的资料和知识。所以，请抛弃你对IE8的偏见，耐心的看下去吧。

你还没有安装IE8？

如果你是前端开发人员，那么还请你安装一下这玩意吧。因为正式版已经发布了。不同于以前的beta版，这次咱得认真的关注一下它了。去下载并安装一个吧，下面是下载地址——

IE8中文版下载列表

Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64-bit
Windows Vista 64-bit
Windows Server 2003 64-bit
Windows Server 2008 64-bit

IE8英文版下载列表

Windows XP
Windows XP 64 Bit
Windows Vista
Windows Vista 64 Bit
Windows Server 2003
Windows Server 2003 64 Bit
Windows Server 2008
Windows Server 2008 64 Bit

哦，也许你会担心，你系统内的IE6或者IE7完蛋了。恩，的确，这有可能。但是，你可以试试下面的工具。它可以让你多版本的IE共存——

IE多版本共存的解决方案——IETester
微软网页开发调试利器SuperPreview（附下载）

认识“开发人员工具”

虽然这玩意改了时髦的名字，但是却也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只是IE的一个插件而已。而在IE8中，浏览器已经自动集成了这玩意，不仅改了个有点土鳖的名字，而且功能也加强了很多。

开发人员工具在IE8的工具菜单下，或者直接点击F12快捷键也可以呼叫出来。

IE8开发人员工具使用详解

在我们介绍它之前，我们先来说说这玩意到底能做什么？如果你只是用浏览器来浏览网站，而不用操心页面是怎么做出来的。那么我想你已经可以离开这页面了。

总体来说，开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找页面的bug，包括html代码、css代码和JavaScript代码。同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。

ok，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧——

【文件】菜单

IE8开发人员工具【文件】菜单

【全部撤销】

以前在开发人员工具中进行的操作全部取消，并且刷新页面和DOM结构。

【自定义Internet Explorer试图源】

【试图源】真是操蛋的名词。通俗一点的说法就是：“用什么编辑器查看网页源文件”。例如：我用的就是EditPlus。

【退出】

为了不侮辱阁下的智商，这个我就不多说了。嗯，F12是个奇偶快捷键，这个顺便提一下吧。

【查找】菜单

【单击选择元素】

快捷键Ctrl+B，和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出改元素的DOM结构、CSS样式等信息。

例如上面的图。左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。

右面的区域显示了改元素样式信息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示强行删除此样式。而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，非常方便。

使用过FireFox的FireBug的朋友，对此一定不会陌生。区别仅仅是：FireBug是把优先级比较低的样式排列在下方，仅此而已。

【跟踪样式】视图和【样式】视图的作用是一样的，都是用来看选中元素的样式信息。区别仅仅是：它换了个视图方式而已。具体习惯哪种视图，就看你自己的喜好了。

【布局】视图可以显示选中元素的盒装模型信息。虽然相比FireBug可以显示更多的信息，但是我还是比较喜欢FireBug中直接在页面上用色块表现出来的方式。

【属性】视图可以查看选中元素的属性信息。非常令人高兴的是：你可以立即增加或者删除一些属性，用来快速的调试页面。

哦，对了。需要注意的是：无论你是在开发人员工具中修改选中元素的样式还是属性，他们都是暂时的调试而已，并不会正在修改你的网页源代码。

【禁用】菜单

【脚本】

会禁止使用页面的JavaScript或者VBScript脚本。为什么要禁用呢？为了测试页面的健壮性。有些对页面设计要求比较高的客户会问：“如果客户禁用了脚本，这个页面还能不能使用呢？”恩，对，这个功能就是用来测试这些操蛋客户的变态需求的。

【弹出窗口阻止程序】

弹出窗口的过滤器。用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。”

【CSS】

“CSS裸奔节”来了！用这里来测试一下你的页面在CSS裸奔时的姿态吧。这个也是检验页面健壮性和可访问性的重要测试。虽然，现在在中国会访问网页的盲人还不是很多。

【查看】菜单

IE8开发人员工具【查看】菜单

【类和ID信息】

快捷键是Ctrl+I，奇偶开关。打开以后，你就会看到页面上布满了密密麻麻的红色色块。同时会显示出class名称或者ID名称。是的，这个就是查看类和ID信息的效果了。不过说实话，谁会对这一坨坨红色的大便感兴趣？不仅把页面搞的看上去像个缝满补丁的乞丐服，而且完全看不清楚-_-b...

【链接路径】

和上面一样。它会把页面中的所有超链接都会一坨坨的红色框出来，并且显示其链接地址。

【链接报告】

使用链接报告功能，开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等信息。不过，具体这玩意有什么用。我也不知道。

【选项卡索引】

高亮显示出所有包含tabindex属性的元素。tabindex属性的设置，可以改变网页元素获得焦点的顺序。

【访问键】

高亮显示所有包含“accesskey属性”的元素。设置accesskey属性，可以设定元素获得焦点的快捷键。

【源文件】之“带有样式的元素源”

生成一份包含选中元素样式、HTML代码，网页级别信息的源文件。

必须先选中一个元素，此命令才有效。而且生成的源文件也只与选中元素有关。

【源文件】之“DOM（元素）”

快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。用过FireBug的朋友，可以联想到“拷贝元素HTML代码”这个命令。其实这个和那个差不多。只是这个是生成到一个窗口，而FireBug直接复制到剪贴板而已。

【源文件】之“DOM（页面）”

快捷键Ctrl+G。生成一份源文件。此源文件包含整个页面的DOM信息结构。非常操蛋的功能，不知道是不是因为bug的原因，此功能其实就是“查看网页源码”。因为，生成的源码并不仅仅是DOM信息，也包含CSS和脚本信息等。

【源文件】之“原始状态”

极其操蛋的功能，其实就是“查看网页源码”。大家应该都比较喜欢用鼠标右键直接在网页上点吧。

【轮廓】菜单

【轮廓】菜单，很明显就是把满足条件的元素勾画出来显示的命令。

【表单元格】

就是把form表的各个单元格用桔色线框出来。让你知道——哦。原来这里就是表的单元格呀。

【表】

就是把form表单用桔色线框出来。让你知道——哦。原来这里就是form表单呀。

【DIV元素】

就是把页面中的所有div元素用绿色线框出来。让你知道——哦。原来这些都是div元素呀。

【图像】

就是把页面中的所有img元素用紫色线框出来。让你知道——哦。原来这些都是img元素呀。

【任何元素】

这个比较强劲了。你可以自定义任何标签和他们要用什么颜色的线框出来。点击这个菜单，会弹出下面的对话框。很简单。不再做说明了。

【定位元素】之“相对”

会用绿色线框出来，所有具有position:relative样式的元素。

【定位元素】之“绝对”

会用黑色线框出来，所有具有position:absolute样式的元素。

【定位元素】之“固定”

会用蓝色线框出来，所有具有position:static样式的元素。

【定位元素】之“浮动”

会用黄色线框出来，所有具有float样式的元素。

【清除轮廓】

当你的页面已经被各种颜色的线搞的像Excel表格一样的时候，你可以可以使用这个命令来清除所有的线了。

【图像】菜单

很明显，这个命令就是控制页面上各种图片的。

【禁用图像】

为了不侮辱你的智商，这个就不说了。唯一一点需要说明的是——不仅仅是img元素，而且连元素的背景图片都会被禁用哦。

【显示图像尺寸】

很不错的功能。可以不用查看图片属性就快速的知道各个图片的尺寸大小，当然，单位是像素。

【显示图像文件大小】

很不错的功能。可以不用查看图片属性就快速的知道各个图片的文件大小，当然，单位是字节。

【显示图像路径】

很不错的功能。可以不用查看图片属性就快速的知道各个图片的URL路径，而且还可以复制。

【显示Alt文本】

可以显示出img元素的alt属性的文本。顺便说一下：图片的alt千万不要进行关键字的堆砌，否则很容易被认定为SEO过渡优化。

【查看图像报告】

生成一份详细的改页面的图像报表。包含每个图片的非常详尽的信息。

【缓存】菜单

IE8开发人员工具【缓存】菜单

管理缓存和Cookie的菜单组。对于开发人员来说这个将会是非常令人欢喜的功能。

【始终从服务器中刷新】

好像很高深的命令一样。其实换句话说就是：“禁止使用浏览器缓存”。

【清除浏览器缓存】

快捷键Ctrl+R。没啥好说的，只是简化了以前的操作步骤而已。

不知道你注意到菜单中【清除浏览器缓存】后面有三个点没有。这个表示，点击此菜单后会确认对话框。

【清除此域的浏览器缓存】

快捷键Ctrl+D。没啥好说的，只清除本域下的浏览器缓存。

【禁用Cookie】

没有什么好处说。不让吃饼干了。

【清除会话Cookie】

清除浏览器所有的Cookie。你的论坛呀，社区呀都等着重新登陆吧。

【清除域的Cookie】

只清除本域下的Cookie。

【查看Cookie信息】

查看此页面包含的Cookie信息。想都别想，密码你是得不到的。

【工具】菜单

开发人员工具附送的一些很有用的小工具，虽然相比其他专门的相关工具有点弱。但是应急还是足够的。

【重新调整大小】

非常有用的小工具。可以快速的将浏览器窗口调整到相关的尺寸。这样，测试网页分辨率兼容性的时候就方便多了。

【显示标尺】

一个简单的标尺工具。使用它可以度量长度、距离等信息。线的颜色是可以换的。也可以创建多个标尺。如果太细微的地方，可以使用放大镜功能。

【显示颜色选取器】

一个简单的拾色工具。点击鼠标就可以选中颜色。不过，我向你推荐另外一个工具——《我的工作工具箱——抓色工具(ColorPic)》，相比之下，开发人员工具中的这个就太简单了。

【验证】菜单

必将引起江湖腥风血雨（谢谢小七同学提醒我这个突然忘记了的成语，唉～可能最近看的武侠小说比较少的缘故吧。但是不知为何好像对“娇喘连连”这类成语比较熟）的菜单。不久的将来必将产生无数的孔乙己。

【HTML】

验证页面的HTML代码。会将本页面发送到w3c的html验证工具，并得到验证报表。

【CSS】

验证页面的CSS代码。会将本页面发送到w3c的css验证工具，并得到验证报表。

【源】

验证页面的源文件代码。会将本页面发送到feedvalidator.org验证工具，并得到验证报表。

【链接】

验证页面的链接。会将本页面发送到w3c的验证工具，并得到验证报表。

【本地HTML】

打开w3c的html验证工具，对本地的页面进行验证。

【本地CSS】

打开w3c的CSS验证工具，对本地的页面进行验证。

【辅助功能】之“WCAG清单”

验证页面的WCAG(Web Content Accessibility Report-页面的可访问性)。会将本页面发送到contentquality.com验证工具，并得到验证报表。

【辅助功能】之“第508条清单”

验证页面的508 Standards。会将本页面发送到contentquality.com验证工具，并得到验证报表。

【多个验证】

同时验证对页面进行多个规范的验证。

IE8开发人员工具的集合验证对话框

对于页面的验证，我想说两句：其实页面是不是一样要通过验证才能上线呢？我个人感觉完全没有必要。如果你是学生，躺在象牙塔里面。你可以随便怎么折腾你的页面，因为你就是客户，你就是有时间，你就是追求完美。但是商业项目，完全没有必要为了一个“PASS”而浪费宝贵的项目资源。因为没有哪个客户会在乎“你看，我们做的这个页面是经过w3c多方面验证的。”如果真的有客户在乎了，那么我只能说，我很崇拜你的“忽悠”能力。

IE8"开发人员工具"使用详解下(模式,JS调试,探查器) 

浏览器模式



应了《无间道》的那句话——“出来混，迟早是要还的！”。IE6种下的苦果，现在果然到了要咽下的时候了。当IE8发布的时候，他不得不面对着世界上成千上万“只有在IE6中才能正常显示”的页面。不发布IE8了吧，FireFox和Chrome又跟着后面抢蛋糕；不管那些“IE6 only”的页面吧，那浏览器出来还不被人骂死；让所有的站长都把页面重构吧，想想自己都要笑。唉，这可咋整呀。
唉，有了，咱采取一个手段，让用户自己去处理，如果他碰到了“IE6 only”页面，就让他自己手动处理一下，让浏览器还用老的渲染模式渲染页面，这虽然麻烦了一点用户，但是也不失是个办法。于是“浏览器模式”出来了。说白了，就是让用户选择当前页面用何种IE版本去渲染。
举个例子吧，顺便练习一下《IE的有条件注释详解》，核心代码如下——

<div id="divTest">
<!--[if IE 7]>
浏览器是IE7
<![endif]-->
<!--[if IE 8]>
浏览器是IE8
<![endif]-->
</div>

让我们来试试这个页面，在不同的浏览器模式下的显示效果吧——

IE8开发人员工具之浏览器模式

对于普通用户，微软官方推荐的是这个玩意——兼容性视图按钮。


当然，对前端开发人员来说，这个工具主要用来测试页面多浏览器兼容性而已。但是非常遗憾的是：没有IE6模式。没有IE6的世界，虽然是一个美好的愿望，但是可惜的是：我们生活在现实之中，或许说生活在地狱中更确切。所以，我还是不得不提下面的两个工具——

IE多版本共存的解决方案——IETester
微软网页开发调试利器SuperPreview（附下载）

文本模式



说起“文本模式”这个名词，这又要回到渲染页面的3种模式了：诡异模式（Quirks mode，也有翻译为兼容模式、怪异模式的），标准模式（Standards mode），和几乎标准模式（Almost standards mode）。这是一个非常重要、但是很多人却比较模糊的概念。一两句话不太能说清楚，这样说吧——“页面的不同渲染模式，将直接影响页面的最终呈现效果 ”，也就是说，一个页面如果在这种模式下显示完美，但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。
乖乖，这玩意太绕人了，还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面两个图，是相同页面，采用不同页面渲染模式的最终显示效果。
页面很简单，只要一个div元素，然后随便设置一点高度、宽度、padding、margin就可以了。核心代码如下——

<style type="text/css">
#divTest{
    background-color:red;
    padding:10px;
    margin:10px;
    width:100px;
    height:100px;
}
</style>
<div id="divTest">
<!--[if IE 7]>
浏览器是IE7
<![endif]-->
<!--[if IE 8]>
浏览器是IE8
<![endif]-->
</div>

IE8开发人员工具之文本模式

从图片中，我们可以清楚的看到，红色div块的大小和位置，在不同的文本模式下，发生了明显的变化。
关于文本模式的详细资料，我建议你看这篇文章《Quirks mode、Almost standards mode、Standards mode》。虽然是英文原版的资料，也绝对值得翻着字典看完。还有这篇视频教程中，我也有较为详细的介绍到，《“阿一web标准学堂”第4课》

利用IE8开发人员工具调试JavaScript脚本
重头戏来了。很多朋友梦寐以求的功能呀——JavaScript脚本调试。一直摆脱不掉FireFox，就是因为Firebug实在太好用。虽然利用VS这样航母级的软件也能进行JavaScript脚本的调试。但是，很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种大家伙。所以对JavaScript的调试，IE的用户一直耿耿于怀。但是，现在终于可以平息了。因为IE8开发人员工具终于也有了小巧，却功能强大的JavaScript调试功能。
不多说，直接上例子，这里就举一个简单到弱智的例子吧。核心代码如下：

<button>Button</button>
<script type="text/javascript">
function test(){
  test2();
}
function test2(){
  var _obj=document.getElementById("divTest");
  var str=_obj.id;
  alert(str);
}
</script>

还是让我们先看看脚本调试界面吧

利用IE8开发人员工具调试JavaScript脚本

图上的说明已经很清楚了，下面就详细讲一下“控制台”、“断点”、“局部变量”、“监视”、“调用堆栈”这些视图吧。

控制台

在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。
恩，其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运行。如果一行不够的话，可以切换到多行模式。输入完毕后，点击“运行脚本”，就可以看到运行结果了。
断点
是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。


局部变量

我非常喜欢的视图之一。可以详细的显示各个变量的所有方法、事件和属性。我最喜欢干的事情，就是一个个的看下去，看到不知道的就去查资料，绝对是个学习JavaScript的好方法。例如，下面途中这就发现了一些IE8特有的方法。


监视

我非常喜欢的视图之一。可以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的而已。


调用堆栈

可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行顺序和嵌套很有帮助。


IE8开发人员工具的探查器

“探查器”这玩意一开始还真的让我摸不到头脑，还以为是类似那些国产的，用在马桶或者世界之窗上的插件，用来分析出网页中的flash或者视频、音频地址的呢。到后来，看到的英文原版的才知道，其实就是——“Profiler”。
用过微软SQL数据库中的Profiler的朋友都知道，那个一个帮助SQL分析效率的工具。它会记录所有的执行以及他们的执行时间，从而提供一份报表。这样，就可以知道到底是什么在效率上拖l了后腿。
IE8 的探查器(Profiler)，也引入了这个概念，只是它探测的是JavaScript脚本而已。
先点击【开始配置文件】按钮，然后运行脚本或者刷新页面。等脚本执行完了，或者页面刷新完毕后点击【停止配置文件】按钮，就会生成探查报告了。
它提供两种视图，一种是“函数”，另一种是“调用树”。无论何种视图，都可以清晰且忠实的展现出各个函数的执行所用时间。从而，方便你分析出“为啥我的页面那么慢呢？”

函数视图



函数视图可以方便的按照各个参数进行排序，从而方便的找出类似“谁用的时间最长”这样的答案。

调用树



调用树视图可以方便的看出各个函数之间的调用关系。

一些关于IE8开发人员工具探查器(Profiler)的资料
如果，你还没有过瘾的话，可以看看下面这篇文章，绝对权威。《Introducing the IE8 Developer Tools JScript Profiler》

结束了？其实才刚刚开始
虽然貌似很多地、洋洋洒洒地、图文并茂地讲了两篇文章。其实回头看看也没讲什么东西。只是截图滥竽充数比较多而已。好在，文章中不时地，还丢出几个相关文章的链接出来，所以，应该还不至于让人感到“看完以后完全不知所云”的样子。
其实工具，仅仅是个工具，再详解、再举例、再截图都是白搭。如果真的想用来提高你自己的工作效率，最终还是需要你自己的动手摸索，用在自己的页面上。所以，看完文章的你，赶紧打开IE8的开发人员工具，现在就试试吧。它一定可以带给你惊喜的。

 

ie下的js调试工具companion.js

转自：http://www.okajax.com/a/200904/companion_js.html

       ie下的js调试工具companion.js

官网地址：http://www.my-debugbar.com/wiki/CompanionJS/HomePage

具体使用方法为：
1、先下载Companion.JS安装文件，然后安装。
2、下载安装Microsoft Script Debugger，如果您的机器已经安装过了就可以免过这一步。
3、打开IE菜单“工具”--“Internet选项”--“高级”，找到“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(在Internet Explorer之外)”，将两个选项前面的对钩都去掉，然后重启IE。
4、在Ie中输入：http://www.my-debugbar.com/wiki/uploads/CompanionJS/dummy.htm，然后点击click me链接，如果左上角弹出一个小错误提示或下面控制台出现了错误信息提示，就说明您已经安装成功了。

提示：Microsoft Script Debugger下载可到MS官网(需要经过MS的操作系统正版验证)：http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=E606E71F-BA7F-471E-A57D-F2216D81EC3D#filelist或到baidu里输入“Microsoft Script Debugger 下载”寻找一下。

 

        不过平时的话大家还是把“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(在Internet Explorer之外)”还原回来，不然有得你忙得了。^_^

 

iframe中请求页面而session失效时页面跳转问题

访问相关jsp页面时，往往要先判断用户session是否失效，以便决定是继续业务，还是跳转到登录页面。这个事情我们通常是用过滤器来实现的。由过滤器判断session是否失效，由此来决定请求继续还是跳转到登录页面。

但在跳转时，往往会遇到一个问题：如果在iframe中请求页面而session失效时，登录页将在ifame中显示出来。这与我们的需求不符，我们想让登录页在top层展现。若想实现这个效果，只需在登录页面加上下面这一小段js代码即可。

 

<script type="text/javascript">
     if(top!=self){
          if(top.location != self.location)
               top.location=self.location;
     }
</script>

 

调试工具Firebug的使用方法

Javascript 的调试，是开发Web应用尤其是AJAX 应用很重要的一环，目前对 Javascript进行调试的工具很多，我比较喜欢使用的是Firebug。Firebug 是 Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web 开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML 和 JavaScript。

本文主要是根据Ext JS 3.0的开发过程，介绍下调试工具FireBug的使用方法。 由于本人在开发Web过程，是FireFox表示偏爱，所以主要介绍Firefox+FireBug的详细使用说明。而且EXT开发者都倾向于使用Firefox进行开发。

Firebug的好处在于，它可以显示动态生成的DOM，甚至可以在Firebug里面直接对DOM进行修改，而这些修改会反映到现实上，并且通过Firebug提供的控制台，可以直接执行Javascript脚本，也可以配置console.debug、 console.info和console.error等日志方法，以便于跟踪。

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集 HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。 Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。目前最新版本为Firebug1.4。

FireFox3.5和Firebug1.4

注意如果你使用Firefox3.0以上的版本，就必须下载Firebug1.2以上的版本，否则不兼容。

1、FireFox3.5下载地址(迅雷下载)：

thunder://QUFodHRwOi8vZnRwLnBjb25saW5lLmNvbS5jbi9wdWIvZG93bmxvYWQvMjAwOTA4L0ZpcmVmb3hfU2V0dXBfMy41LjJfY2hzLmV4ZVpa

2、FireBug1.4:

http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.4.2-fx.xpi

3、安装

(1) 首先安装FireFox3.5

(2) 然后双击firebug-1.4.2-fx.xpi,选择打开方式为FireFox3.5(或者直接拖动到FireFox3.5也可)

(3) 重启FireFox3.5,在查看菜单中选择firebug即可查看,具体展开图如下图所示：

图1

Firebug1.4的应用

如上图所示，我们可以查看到firebug的Tab按钮，具体包括:Console,HTML,CSS,Script,DOM,Net

1、Console控制台

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个 XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

2、Html查看器

图2 Html查看器

 

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合 Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。

利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。

3、CSS调试

Firebug的CSS调试器是专为网页设计师们量身定做的。

一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。如图3中正在修改一个区块的背景色。

图3

4、可视化的CSS尺标

我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、 padding、size之间的关系，从而找出解决问题的办法。如图4所示。

图4

5、网络状况监测器

也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。具体如图5所示。 

图5 网络状况监测器

6、Javascript调试器

这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。具体如图6所示

图6 Javascript调试器

7、DOM查看器

DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个 DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为 document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的 DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。具体如图7所示。

图7 DOM查看器

小结

Firebug插件提供了一整套web开发所必需的工具。从HTML的编写，到CSS样式表的美化调优，以及用javascript脚本开发，亦或是Ajax应用，Firebug插件都会成为你的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，言必称Ajax，动辄就是用户体验提升，如果把Firebug工具用好，必能让你如虎添翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开发中的专家级人物。

 

利用 Console 来调试JavaScrip

一  什么是 Console 
Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 Console 对象，使用该对象
可以输出信息到 Console 窗口中。 
 
二  什么浏览器支持 Console 
很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支 
持不好。比如 IE8 自带的开发工具虽然支持 Console，但功能比较单调，显示对象的时候都是显示
[Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar，但也
不支持 console。Safari、Opera 都支持 Console，但使用上都没有 FireBug和 Chrome 的方便。 
  现在firebug推出了 firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug
几乎一样。详见 http://getfirebug.com/firebuglite 
 
三  为什么不直接使用 alert 或自己写的 log 
使用 alert 不是一样可以显示信息，调试程序吗？alert 弹出窗口会中断程序， 
如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 
  自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好，看完后面 console
的介绍就知道了。 
 
四  Console.log(object[, object, ...]) 
Console.log 是最简单输出信息到 console 窗口的方法，支持多个参数，该方法会把 
这些参数组合在一起显示，e.g： 
 
 
Log 方法第一个参数支持类似 C 语言 printf 字符串替换模式，比如上面的列子可以这样写： 
 
Log 支持下面几种替换模式： 
%s  代替字符串 
%d  代替整数 
%f  代替浮点值 
%o  代替 Object 
 
五  console.debug，info，warn，error 
这 4 种方法与 log 方法使用一模一样，只是显示的图标和文字颜色不一样，e.g

六  console. assert(expression[, object, ...]) 
assert 方法类似于单元测试中的断言，当 expression 表达式为 false 的时候，输出后面的信息,e.g： 
 
 
注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持 
 
七  console.clear() 
该方法清空 console 中的所有信息 
 
八  console.dir(object) 
以列表的方式打印 object 对象中的所有属性，e.g： 

 九  console.dirxml(node) 
把 html 元素的html 代码打印出来，e.g: 
 
十  console.trace() 
trace 方法可以查看当前函数的调用堆栈信息，即当前函数是如何调用的，e.g: 

十一  console.group(object[, object, ...]), groupCollapsed, groupEnd 
这 3 个函数用于把 log 等输出的信息进行分组，方便阅读查看。groupCollapsed 
    方法与 group 方法一样，只是显示的分组默认是折叠的,e.g: 
 
 十二  console.time(name)/console.timeEnd(name) 
我们经常需要测试 js 函数的执行时间，可能我们自己写代码在第1 条语句和 
最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能，time(name)根据 name 创建 1 个新
的计时器。timeEnd(name)停止给定name 的计时器，并显示时间。e.g: 

十三  console.profile(name)/console.profileEnd() 
这组方法用于打开浏览器的分析器，用于分析这组函数之间的 js 执行情况， 
 
十四  console.count([title]) 
count 方法用于统计当前代码没执行过多少次，title 参数可以在次数前面输出 
额外的标题以帮助阅读，e.g: 
注： firebuglite 不支持 count 方法，上述代码在 Chrome 中会打印 1000 次，显示没有 FireBug 那么友好。 
 
十五  console.exception(error-object) 
exception 方法用于打印异常对象，与 log 打印不一样是，except ion 还会打印 
该异常调用的堆栈信息，e.g: 
注：exception 方法是 FireBug 独有的方法，Chrome 和 firebuglite 都不支持。 
 
十六  console.table(data) 
table 方法把data 对象用表格的方式显示出来，这在显示数组或者格式一样的 
JSON 对象的时候非常有用。e

注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。 
 
总结： 
  Console 是帮助我们学习和调试 JS的 1 个非常好工具，如果你以前没用过，哪现在就开始用它吧。你
会发现它能帮你省很多开发时间的。

 

JSHint 使用说明  

JSHint介绍
翻译自www.jshint.com JSHint(注意不是jslint：）)是一个由javascript社区驱动开发的用于检查javascript代码错误和问题的工具，有了他，可以使你保持一个良好的编码风格。你可以很简单的配置它以适应你目前的一个编码风格。 目前JSHint的源码可以在github上面找到。

JSHint文档
如何使用JSHint
JSHint是一个全局的函数，他接受两个参数， JSHint(source,options); 一个是代码source，另一个是options（选项） 第一个参数可以是一个字符串或者是一个字符串数组。如果是字符串，则他会被\n和\r分割，如果传入的参数是数组，就要保证数组的每一项是一行代码。 因此源码参数可以是javascript代码或者是一个json形式。如果所有的检测都ok，JSHint会返回true，否则就返回false。 当返回false的时候，你可以用JSHint.errors来获取错误信息或者用JSHint.data()来获取lint的信息。 如果要了解更多，参见源代码。 使用JSHint，你可以在js文件的开始设定选项，例如

/*jshint evil:true, boss:true */
而设定global参数可以告诉JSHint，全局的变量配置。 例如

/*global DISQUS: true, jQuery: false */
以上的这个例子是告诉JSHint,DISQUS是你自己声明的全局变量，而jQuery是你引入的全局变量

JSHint和JSLint有什么区别？
JSHint是JSLint的一个分支（fork），他比JSLint更加的便捷。用来约束你的代码质量和编码风格。 每个人都有不一样的编码习惯和风格，JSHint通过配置可以适应于各种情况。 JSHint的适用环境

浏览器环境（browsers）
Node.js
jQuery
ES5
CouchDB
Prototype.js
Mootools.js
JSHint的选项配置
asi
如果是真，JSHint会无视没有加分号的行尾， 自动补全分号一直是Javascript很有争议的一个语法特性。默认，JSHint会要求你在每个语句后面加上分号，但是如果你认为自己理解了asi(automatic semicolon insertion)，你可以抛弃JSHint对分号的检查。

bitwise
如果为真，JSHint会禁用位运算符 Javascript允许位运算，但是他却没有整型，位运算符要把参与运算的数字从浮点数变为整数，并在运算后再转换回来。这样他们的效率就不如在别的语言中那么高。

boss
很霸气的选项，如果为真，那么JSHint会允许在if，for，while里面编写赋值语句。 一般来说，我们会在循环、判断等语句中加入值的比较来做语句的运行条件，有时候会把==错写成赋值的=，通常，JSHint会把这个认定为一个错误，但是开启这个选项的化，JSHint就不会检查判断条件中的赋值 ，你是boss，你说的算:)。

curly
如果为真，JSHint会要求你在使用if和while等结构语句时加上{}来明确代码块。 Javascript允许在if等结构语句体只有一句的情况下不加括号。不过这样做可能会让你的代码读起来有些晦涩。

debug
如果为真，JSHint会允许代码中出现debugger的语句。不过建议你最好在检测代码前去掉debug的语句。

eqeqeq
如果为真，JSHint会看你在代码中是否都用了===或者是!==，而不是使用==和!=。 我们建议你在比较0，''(空字符)，undefined，null，false和true的时候使用===和!===。

eqnull
如果为真，JSHint会允许使用"== null"作比较。 == null 通常用来判断一个变量是undefined或者是null（当时用==，null和undefined都会转化为false）。

evil
如果为真，JSHint会允许使用eval eval提供了访问Javascript编译器的途径，这有时很有用，但是同时也对你的代码形成了注入攻击的危险，并且会对debug造成一些困难。 记住，Function构造函数也是另一个‘eval’，另外，当传入的参数是字符串的时候，setTimeout和setInterval也会类似于eval。

forin
如果为真，那么，JSHint允许在for in 循环里面不出现hasOwnProperty， for in循环一般用来遍历一个对象的属性，这其中也包括他继承自原型链的属性，而hasOwnProperty可以来判断一个属性是否是对象本身的属性而不是继承得来的。

immed
如果为真，JSHint要求匿名函数的调用如下：

(function(){ // }());
而不是

(function(){ //bla bla })();
laxbreak
如果为真，JSHint则不会检查换行。 Javascript会通过自动补充分号来修正一些错误，因此这个选项可以检查一些潜在的问题。

maxerr
设定错误的阈值，超过这个阈值jshint不再向下检查，提示错误太多。

newcap
如果为真，JSHint会要求每一个构造函数名都要大写字母开头。 构造器是一种使用new运算符来创建对象的一种函数，new操作符会创建新的对象，并建立这个对象自己的this，一个构造函数如果不用new运算符来运行，那么他的this会指向全局对象而导致一些问题的发生。

noarg
如果为真，JSHint会禁止arguments.caller和arguments.callee的使用 arguments对象是一个类数组的对象，它具有一个索引值。arguments.callee指向当前执行的函数（这个在ES5的严格模式中被禁用了），而arguments.caller指向调用当前函数的函数（如果有的话），并且，他并不是在所有的Javascript实现里面都有。

noempty
如果为真，JSHint会禁止出现空的代码块（没有语句的代码块）。 如果为真，JSHint会禁用构造器，以避免一些问题。 在JSLint中会主动禁用构造器的方式以避免一些潜在问题，但其实很多构造器的使用并非有害，例如如下的调用

new JsUIWindow(); //注意这个调用是没有把构造器的结果赋值给变量的
因此，我们需要使用构造器的时候可以禁用这个选项。

nomen
如果为真，JSHint会禁用下划线的变量名。 很多人使用_name的方式来命名他们的变量，以说明这是一个私有变量，但实际上，并不是，下划线只是做了一个标识。 如果要使用私有变量，可以使用闭包来实现。

onevar
如果为真，JSHint期望函数只被var的形式声明一遍。

passfail
如果为真，JSHint会在发现首个错误后停止检查。

plusplus
如果为真，JSHint会禁用自增运算和自减运算 ++和--可能会带来一些代码的阅读上的困惑。

regexp
如果为真，JSHint会不允许使用.和[^...]的正则， 因为这样的正则往往会匹配到你不期望的内容，并可能会应用造成一些危害。

undef
如果为真，JSHint会要求所有的非全局变量，在使用前都被声明。 如果你不在一个本地作用域内使用var的方式来声明变量，Javascript会把它放到全局作用域下面。这样会很容易引起错误。

sub
如果为真，JSHint会允许各种形式的下标来访问对象。 通常，JSHint希望你只是用点运算符来读取对象的属性（除非这个属性名是一个保留字），如果你不希望这样可以关闭这个选项。

strict
如果为真，JSHint会要求你使用use strict;语法。 Strict 模式是ES5里面的一个新特性，他允许你把一个程序或者函数放在一个“严格”的作用域中。可见Resig写的一篇关于严格模式的blog 严格模式做了几件事情:

1、他可以捕获一些错误和异常

2、当我们进行一下“不安全”的操作时，他会抛异常，例如访问全局变量。

3、他会禁止你使用一些奇淫技巧，或者不良的代码编写。

white
如果为true，JSHint会依据严格的空白规范检查你的代码。