您使用哪些工具在浏览器中调试 HTML/JS？答案

【问题标题】：Which tools do you use to debug HTML/JS in your browser?您使用哪些工具在浏览器中调试 HTML/JS？
【发布时间】：2010-12-25 15:00:09
【问题描述】：

我想为所有浏览器收集最好的调试辅助工具。因此，对于 Firefox，这可能是 Firebug，但您在 IE 中使用什么？苹果浏览器？歌剧？迷你歌剧？还有什么？是否有适用于 IE 6 的工具？ IE 5？

【问题讨论】：

现在是一个后续问题，为什么在 android 上直接调试的等效工具绝对为零（即当您不使用时，没有任何远程废话无法在现场工作）有互联网连接或非安卓设备可用。）
@Michael：提出问题并将链接作为评论发布在这里:-)

标签： javascript html debugging browser

【解决方案1】：

Firebug 不是最轻量级的工具，所以我有时会为 Firefox 使用其他插件：

如果您正在使用 XPath，XPath Checker 既方便又轻巧。但是，我自己对其进行了调整，以将结果的 HTML 源显示为文本而不是 HTML 节点。
Tamper Data 或 HttpFox 可用于查看来自网页的请求（嗯，AdBlock Plus 也可以；），查看 Web 服务器设置的 cookie 等。

【讨论】：

【解决方案2】：

一系列精心布置的 window.alert 函数调用在紧要关头很方便。如果可以，我尝试使用Firebug Lite。

【讨论】：

好用但也阻碍了应用的流量。

【解决方案3】：

我建议使用DIV 和id="debug"，然后在其中添加文本以进行调试。这允许您使用调试输出覆盖 HTML，并且不会阻塞应用程序的流程。使用z-index 确保它保持在顶部并使其透明，以便您可以看穿它。有关 CSS，请参阅 this answer。

或者打开一个新窗口并在其中附加您的调试消息。

您可以将它与嵌套的DIVs 一起使用来实现完整的日志记录。查看this article on A List Apart 和log4js 以获得一些想法。

【讨论】：

【解决方案4】：

Fiddler http(s) 调试：http://www.fiddler2.com/fiddler2/
FireFox 的 Web Developer 工具栏：https://addons.mozilla.org/nl/firefox/addon/60/
IE8 开发者工具：http://blogs.msdn.com/b/ie/archive/2008/09/11/introducing-the-ie8-developer-tools-jscript-profiler.aspx
qooxdoo 检查器（IE、Firefox、Opera、Safari 和 Chrome）：http://qooxdoo.org/application/inspector
Blackbird - 你可能永远不会再使用 alert()：http://www.gscottolson.com/blackbirdjs/

【讨论】：

【解决方案5】：

使用 Firefox，除了 Firebug（正如许多人之前提到的），我发现 Mozilla 的 Venkman JavaScript debugger 有时也很方便。

【讨论】：

【解决方案6】：

Here is a roundup

Firefox 有 Firebug 和 Webdeveloper 工具栏，
Safari 和 Chrome 都有 Inspector，
Opera 有 Dragonfly，
Internet Explorer 有开发者工具栏

Firebug 仍然拥有最先进的功能，但其他功能正在迎头赶上。

【讨论】：

+1 for chrome Dev Tools，在我看来比 Firebug 好得多；

【解决方案7】：

跨浏览器：x-ray

【讨论】：

【解决方案8】：

对于 Firefox 3.5，使用 Firebug。对于 IE8，使用开发者工具

【讨论】：

【解决方案9】：

当然是 Firebug / Firebug lite :) Google Chrome 的 JS 控制台也很不错

【讨论】：

【解决方案10】：

谷歌浏览器的Speed Tracer 扩展看起来非常有用。

【讨论】：

【解决方案11】：

dynaTrace Ajax 为Deep Tracing of Internet Explorer

【讨论】：

【解决方案12】：

对于调试，没有什么能比得上firefox:firebug
对于 IE，如果 once in a blue moon 我使用 IE，我使用 Internet Explorer Developer Toolbar

【讨论】：

【解决方案13】：

对于 IE，IE 8 中包含的开发者工具或Developer Toolbar。

【讨论】：

IE 6 和 7。无论如何，IE 8 中的开发工具都非常出色，因此没有任何遗漏。

【解决方案14】：

在 Internet Explorer 或 FireFox 以外的其他浏览器中：

FireBug Lite

【讨论】：

【解决方案15】：

IETester 用于 IE 版本。
Adobe BrowserLab 或 SuperPreview extension for IE 用于在多个浏览器中测试设计。
Developer Toolbar 用于 IE。
以及用于 FIrefox 的 ofc Firebug。

【讨论】：

【解决方案16】：

对于 Chrome，Chrome Dev Tools。

【讨论】：

【解决方案17】：

对于 Firefox（任何版本 > 2.0），请使用 Firebug。

【讨论】：

我发布这个是为了完整性，所以我们可以使用投票来寻找更好的工具（如果应该有的话:)
萤火虫击败一切。它唯一不能做的就是发现 IE 渲染错误，此时你又回到了 IE 中 Web 开发的恐怖。
不同意。我发现 Firebug 太可怕了，我放弃了 Firefox for Chrome，它有一个集成的调试器，实际上并没有 bug。
@Michael：听起来您发现 Firebug 缺少一个功能；我在所有平台上都遇到了 JS 调试问题（Chrome 在 JS 代码中关闭窗口时忽略了断点，Firebug 不允许我设置断点，...）