Web开发必备利器（一）
今天下午看到Jack在调试一个不听话的Web页面，很头疼但那页面总是不按照他的意图去显示他想要的东西，于是我也萌生了写一点Web开发工具插件方面的东西，因为我用过的一些插件，对于调试Web页面来说还是很让人得心应手的，我也向Jack推荐用他们来调试，很节省时间的。
必备利器，也只是说说而已，您大可不必在此大做文章，Web开发也是仁者见仁，智者见智的。有人喜欢这样做，有人喜欢那样做，有人喜欢用这些工具，有人喜欢用那样工具。我这里也只是简单的介绍几个对Web开发调试比较方便的工具插件，您若有更好的工具或者插件，不妨也跟我们分享一下。
首先，向您推荐Firefox浏览器，当然并不是我独出心裁，虽然IE浏览器笼络了大部分用户，但Firefox是一个良好的支持W3C标准的开放源代码的浏览器。
很多朋友可能会问，Firefox好用吗？很多时候在IE下显示正常的网页，在Firefox下却出现错位或者不能正常显示的各种奇怪的问题。确实如此，但在大多数情况下这并不是Firefox的问题，而是该网页使用了不符合规范的HTML/JavaScript或其他不符合W3C标准的语言，也有可能该网页是为迎合IE浏览器或者是仅仅在IE浏览器下调试开发的。因为微软的IE浏览器极其的流氓和霸道，它不严格遵守这些标准，仗着以前自己是浏览器业界老大（现在应该也是:P），自己独处心裁，别开花样。还有一个可能的原因就是网页中可能包含一些ActiveX，Firefox只有装了相应的扩展插件才支持ActiveX。
第一个推荐的插件：
如果你需要用IE浏览，你大可以使用插件：IE TAB。它完全使用的是IE的内核，你可以用它来达到在IE下浏览的效果。
当然这并不算Web开发必备的利器。
第二个推荐的插件：
Firebug，相信绝大部分开发者都听过或者用过这个小工具，确实好用，可以调试JavaScript，众所周知，JavaScript的调试是开发者最头疼的事情了。但有了这个Firebug，你就不用那么头大了。我也就不介绍如何安装这个插件了，主要讲一下这个插件的功能及用法吧：
Firebug的相关设置：
* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的“Always Open in New Window”设置。
* 增加/缩小字体大小：先打开firebug，点击左上角的bug标志，选择“Text Size”命令。每次字体变化的幅度非常小，你可能需要使用多次。
* 限制只对某些站点使用Firebug：先右击浏览器状态上的green check mark标志，选择“disable Firebug”命令。然后，再右击这个已经变灰的标志，选择“Allowed Sites…”命令，增加允许Firebug生效的域名。
Firebug的窗口预览：
* Console标签： 主要使用javascript命令行操作，显示javascript错误信息，在底部的>>>提示符后，你可以自己键入javascript命令。
* HTML标签： 显示HTML源码，并且像DOM等级结构那样，每行之前有缩进。你可以选择显示或不显示某个子节点。
* CSS标签：浏览所有已经装入的样式表，可以当场对其修改。在Firebug窗口上部，“edit”命令的旁边，有一个本页面中所有样式表的下拉列表，你可以选择一个样式表进行浏览。
* Script标签：显示javascript文件及其所在页面。在Firebug窗口上部，“inspect”命令的旁边，有一个本页面中所有Javascript文件的下拉列表，你可以选择一个进行浏览。你可以在javascript命令中，设置断点（breakpoint）及其出现的条件。
* DOM标签： 显示所有的页面对象和window物体的属性。因为在javascript中，所有变量都是window物体的属性，所以Firebug会显示所有变量和它们的值。
* Net标签：显示本页面涉及的所有下载，以及它们各自花费的时间，各自的HTTP请求头信息和服务器响应的头信息。XHR标签对AJAX调试很有用。
Firebug方便的调试页面：
在HTML标签中，点击窗口上方的“inspect”命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。
Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中的对象，都可以用单击或双击进行编辑。当你输入完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上部 “inspect”命令旁边的“edit”命令，下方的窗口就会立刻变成一个黑白的文本编辑窗口，你可以对HTML源代码进行任意编辑。在CSS标签中，Firebug会自动补全你的输入。在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。
Firebug处理CSS样式表：
在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。你可以双击对这些设置进行编辑。
对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的 CSS3规则。所以，它会隐藏_height:25px;（下划线是一个针对IE6的设置）和p:first-of-type {color: #ff0000;} (:first-of-type是一个CSS3规定的伪类，目前只有Safari 3支持）。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法显示，那么你只有使用其他编辑器显示全部CSS内容，找到你的错误。
Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。“关闭”一条语句的方法是，在该语句的左边点击，会出现一个红色的turnoffselector.gif禁止标志。该语句就会变灰。再次点击，该语句就会恢复。
Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。
Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector，然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。
Firebug容器模型：
当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个layout按钮，点击后会展示与该元素相关的方块模型，包括padding、margin和border的值。要查看每一个元素的这三项值，只需点击“inspect”按钮，然后用鼠标悬停在页面中该元素的上方。
JavaScript profiler可以报告你的Javascript函数执行所花的时间，因此你可以查看不同函数对速度的影响。使用这个功能的方法是，打开console 标签，然后点击上面的Profile按钮（上部的按钮顺序是“Inspect |Clear | Profile”）。Firebug列出调用的所有函数，及其所花的时间。你可以针对要测试的某个函数，在其前部加上 console.profile([title])，在其后部加上console.profileEnd()。
console标签的底部是命令行输入，它以“>>>”开头。如果命令行输入有结果输出，那么它会展示在上部的窗口。有一个详细的命令行输入API值得看一下。Firebug内置console对象有几种有用的方法可供调用，包括console.debug、console.info、 console.warning、console.error等。如果这些方法产生了输出结果，Firebug会提供一个链接，让你查看相应的代码。
调试的另一个方法是设置断点。Script标签允许你在任意行暂停执行。单击行号，就会设置一个断点。右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。右面还有一个watch窗口，可以查看当前变量的值。
最新评论