调试是开发 Web 应用中最痛苦的部分之一。你必须处理浏览器的不一致性，包括 HTML, CSS 和 JavaScript，更不用说调试 JavaScript 本身的困难了。
以下是我用来应对这种疯狂行为的 Firefox 扩展的概要。
驯服 CSS：Web 开发者工具栏(Web Developer Toolbar)
调试 CSS 可能真的很令人沮丧。Web Developer Toolbar 让你检查并实时编辑(实时编辑)页面的 HTML 和 CSS 你的页面的，从而当布局出现问题时你可以看到发生了什么。它还能做更多事情，但这里是我使用的功能：
Ctrl + Shift + F: 显示元素信息。这会在你的鼠标下方显示一个红框。将鼠标移到元素上，其属性会出现在弹出窗口中：名称、类、像素大小、字体等全部信息。以下是你可以做的：
- 找出哪些类创建了你看到的样式
- 轻松获取 div 的 id 以便与 Firebug 一起使用（如下）
- 确定图片的大小（像素高度和宽度）
Ctrl + Shift + E: 编辑 CSS. 这会打开一个侧边栏标签，显示当前样式表。你可以编辑任何属性并实时查看效果（例如给 Google 加上黑色背景）：
我最喜欢的 CSS 样式是 border: 1px solid red;
在 Web 开发过程中，我已经做过成百上千次以下操作：
- 用鼠标找到 div（ctrl + shift + f）
- 获取其 id
- 编辑 CSS （ctrl + shift + e）
- 给 div 添加边框： #mydiv{border: 1px solid red;}
- 调整宽度、高度、外边距和内边距直到完美对齐
- 移除边框
但与其 删除 边框，不如在前面加一个“x”：“xborder: 1px solid red”。这个 CSS 不会有效，因此边框会被忽略，但保留着样式，以便以后想启用时使用。
选择你编辑后的 CSS 文件中的所有文本，并粘贴到实际的 CSS 文件中。哗，你的更改立即生效。这几乎与在 DreamWeaver 中创建文件并在 Firefox 中查看的过程相反。你正在 Firefox 中查看实际文件，进行更改，然后将更改复制回文本编辑器。我发现这对于编辑非常有效 CSS, 你避免了频繁的来回切换，因为 Firefox 现在有一个 CSS 编辑器。
额外奖励: ColorZilla 拾色器
ColorZilla 给你一个取色器，可以找到十六进制 RGB 页面上任何元素的颜色值（如#123456）。在设计时，如果你想将字体颜色与页面中的颜色匹配，这非常有用。这比截图并打开Photoshop要快得多。
规范 JavaScript：Firebug
Firebug，我如此爱你 （或者获取 书签小程序 适用于其他浏览器的版本）。如果你爱自己，你会立即安装它，省去无数小时的烦恼。
Firebug可以调试JavaScript，检查 DOM, 以及做更多事情（你可以也应该去了解更多）。以下是我使用它的方法：
F12: 打开Firebug。你可能需要针对该页面启用它。
控制台选项卡： 编写快速的JavaScript命令——它甚至对变量名和属性有自动补全功能。尝试你的函数，修改 CSS 属性，向页面添加元素——只要能测试就行。
脚本选项卡（调试）： 最好的功能。没有之一。点击行号在你的JavaScript中设置断点（红点）。重新加载页面，当遇到该行时会中断（暂停）。
此时，你可以切换到控制台来检查和更改变量，弄清楚代码为何不工作。然后点击蓝色的“play”按钮继续运行你的应用，直到下一个断点。
网络选项卡： 查找 页面的下载性能.
性能分析按钮（在控制台选项卡上）： 查找页面的运行时性能。点击“profile”开始捕获信息，执行一些命令，然后点击停止。你会得到一份代码耗时报告。如果你必须优化，首先要优化常见情况。
如果你更注重视觉，试试这个很棒的拼贴图：
不满意？查看示例 在主页上.
深入细节：实时 HTTP 头(Live HTTP Headers)
有时你需要深入细节。我的网站发送了什么缓存头？我的页面真的被gzip压缩了吗？
我知道这些问题让你夜不能寐，所以你可以这样做：
- 安装 Live HTTP Headers
- 打开它（工具 > Live HTTP Headers)
- 访问页面 / 按刷新
- 欢呼
当访问页面时，你会看到 HTTP 头部信息随着浏览器请求元素而飞速闪过。如果项目被缓存，浏览器可能根本不会请求它们（太棒了！）或者可能会请求该元素并得到304“Not Modified”响应（稍微没那么棒，你仍然需要检查服务器）。我写过更多关于 缓存行为以及Live HTTP Headers 是了解缓存(caches)的绝佳方法 HTTP （出于性能原因，每个web开发人员都应该对此感兴趣）。
更棒的是，你可以“重放”任何请求头(header)，编辑发送的数据。这在测试或调试缓存或 gzip 编码 行为时非常有用。
调试 IE：遗失的章节
唉，不幸的是IE缺少这些出色的工具。有一个 脚本调试器，但远不及Firebug。事实上，我经常不得不求助于alert语句，在被Firebug惯坏之后，这让你不寒而栗。
我使用的一个不那么痛苦的方法是：
In your HTML: <div id="log"></div>
In your Javascript:
function log(str){
var log = document.getElementById("log")
if (log){ // let's be safe...
log.innerHTML += str + "<br/>";
}
}
Usage: log("Hi there!");
Optional: create an eval box:
<input name="eval" id="eval"/>
<a href="javascript:void(0);" onClick="log(eval(document.getElementById('eval').value));">go</a>
它没什么特别的，只是一个简单的日志函数，将文本追加到div中。是的，这很粗暴，但比alert()语句要好，特别是有循环时（除非你喜欢重复性劳损，或者想让自己条件反射害怕对话框）。如果有人知道在IE中调试JavaScript的好方法，我很想了解。我试过的工具都非常笨重且不连贯，让你脱离浏览器。
我尽量在Firefox中进行95%的开发，并用以下方法调试IE特有的问题（如 不稳定的 substr 行为）。
持续进步
Web Developer Toolbar 和 Firebug 能做的 更多 比这里描述的更多。就像80/20法则一样，这些是我最常用的命令，能带来最大的性价比。花几分钟学习这些工具，你就能够省下 小时 以后的时间。这里是一个 更多用于 Web 开发的工具.
这些工具可能无法让你在构建web应用时免于单只眼睛神经性抽搐，但没关系。它们会帮你避免双眼都抽搐。