Firefox - 为网页开发者提供了海量工具！- Mozilla Hacks

Firefox 的目标之一始终是通过提供工具和一个非常可扩展的网页浏览器来使网页开发人员的生活尽可能轻松和高效，从而使人们能够创造出令人惊叹的事物。此处的想法是列出使用 Firefox 的网页开发者可用的许多工具和选项。

Firefox 中的原生开发者工具

我们正在努力为您构建一套包含在 Firefox 中的优秀的开发者工具。它们在Firefox Aurora 10 中的开发者工具中进行了更详细的描述，并且它们对我们能够实现的目标有一些非常有趣的意义！

我们正在评估和试验许多用户界面和代码方法，以尝试找到处理页面代码的最佳方法。如果您安装了Firefox Aurora，您现在就可以试用它们！请告诉我们您的想法。

A picture of the native Developer Toosl in Firefox Aurora

此外，请继续关注此博客，因为我们将发布有关原生开发者工具的进度和功能的更新。

Firebug

迄今为止，网页浏览器中最知名的网页开发者工具是Firebug 扩展，毫无疑问，长期以来它为网页开发和调试设定了标准。Firebug 仍然是一个非常重要的工具，具有许多强大的功能，包括大量扩展（见下文）。

不过，您需要注意的是，鉴于 Firebug 提供的所有功能，在内存消耗方面它可能相当占用资源，因此请相应地使用它。

Firefox 网页开发者扩展

多年来，已经开发了许多扩展来帮助网页开发者最大程度地利用 Firefox。以下是一些最常用和最知名的扩展，但如果您发现还有其他对您有帮助的扩展，请告诉我们！

辅助功能评估工具栏

支持网页开发者测试网页资源的辅助功能。

多合一侧边栏

AiOS 允许您将各种窗口作为侧边栏面板打开，并在它们之间快速切换。因此，它终结了窗口混乱！除了书签和历史记录之外，它还在侧边栏中打开了下载、附加组件等对话框。

缓存状态

轻松查看和管理状态栏中的缓存状态。

CacheToggle

只需轻触开关即可禁用（并可以选择清除）浏览器缓存。

Colorzilla

高级吸色器、拾色器、渐变生成器和其他五彩缤纷的功能。

Console²

Console²（发音为 Console Squared 或 Console Two）用可能是下一代错误控制台的内容替换了 JavaScript 控制台。从 v0.5 版开始，包括之前从 Console² 网站单独提供的控制台筛选器扩展。

CSS 重新加载器

CSS 重新加载器是一个扩展，允许您重新加载任何网站的所有 CSS，而无需重新加载页面本身。

DOM 检查器

DOM 检查器是一个工具，可用于检查和编辑任何网页文档或 XUL 应用程序的实时 DOM。可以使用一个双窗格窗口浏览 DOM，该窗口显示文档和其中所有节点的各种不同视图。

Firefogg

Firefox 的视频和音频编码。使用 Firefogg，您可以将大多数媒体文件编码为 Ogg 和 WebM。Firefogg 还提供了一个 API，可以将编码集成到上传过程中。

FireFTP

FireFTP 是一个免费、安全、跨平台的 Mozilla Firefox FTP/SFTP 客户端，它提供对 FTP/SFTP 服务器的简单直观的访问。

FireUnit

JavaScript 单元测试扩展

FoxGuide

显示水平和垂直浮动参考线，就像您在 Photoshop 中使用的那样。有助于改进布局，将元素放置在正确的网格中，对称地布置元素并构建设计。

FoxyProxy 标准版

FoxyProxy 是一款高级代理管理工具，它完全取代了 Firefox 有限的代理功能。它提供的功能比 SwitchProxy、ProxyButton、QuickProxy、xyzproxy、ProxyTex、TorButton 等更多。

Geolocater

将您的位置定位到您想要的位置。

GreaseMonkey

通过使用少量 JavaScript 自定义网页的显示方式或行为。

HTML 验证器

HTML 验证器是一个 Mozilla 扩展，它在 Firefox 和 Mozilla 内部添加了 HTML 验证功能。HTML 页面的错误数量以图标的形式显示。

HttpFox

Firefox 的 HTTP 分析器附加组件。

iMacros for Firefox

自动化 Firefox。录制和回放重复性工作。如果您喜欢 Firefox 网页浏览器，但厌倦了重复性任务，例如每天访问相同的网站、填写表单和记住密码，那么 iMacros for Firefox 就是您梦寐以求的解决方案！

Jenkins 构建监视器

监视 Jenkins (http://jenkins-ci.org) 构建并在 Firefox 状态栏中显示状态。

jQuery 扩展

嵌入到浏览器的 jQuery 和 jQuery UI。

JSONovich

以美观的格式显示浏览器中的 JSON 内容，以便轻松、不显眼地查看。

JSONView

在浏览器中查看 JSON 文档。

JSView

如果您正在查看的网站包含任何外部 js/css 文件，则会显示一个显示“SS”、“JS”或两者的图标。然后，可以通过单击文件名来查看每个单独的文件。该文件将在新窗口中打开。

链接小部件

通过为第一页、上一页、下一页和最后一页提供工具栏按钮，简化页面序列（例如网络漫画、论坛或 HTML 4 建议等技术规范）内的导航。

实时 HTTP 标头

查看页面和浏览时的 HTTP 标头。

LiveReload

当文件更改时，LiveReload 会刷新网页。

MeasureIt

在任何网页上绘制标尺以检查页面元素的宽度、高度或对齐方式（以像素为单位）。

修改标头

添加、修改和筛选发送到 Web 服务器的 HTTP 请求标头。此附加组件对于移动 Web 开发、HTTP 测试和隐私尤其有用。

NoScript

您可以在 Web 浏览器中获得的最佳安全措施！仅允许来自您信任的网站的活动内容运行，并保护自己免受 XSS 和 Clickjacking 攻击。

PageSpeed

Page Speed 是 Google 启动的一个开源项目，旨在通过应用 Web 性能最佳实践来帮助开发者优化其网页。

Phoenix

一个带有实时语法高亮的编辑器，允许编辑、运行和测试 CSS、HTML 和 JavaScript 代码。Phoenix 会告诉您页面中加载了多少个 CSS 和 JS 文件，这些文件有多大，它将允许您编辑、打包和反混淆它们。

PixelZoomer

PixelZoomer 会截取当前网站的屏幕截图，并提供各种像素分析工具。您可以放大网站（高达 3200%），测量距离并使用吸色器拾取颜色。

Pixlr Grabber

抓取屏幕和从 Web 上提取图像变得更加容易。使用 Pixlr Grabber 附加组件，您只需右键单击即可复制、保存、共享甚至编辑最终抓取的内容，包括任何图像或背景。

Poster

一个用于与 Web 服务和其他 Web 资源交互的开发者工具，它允许您发出 HTTP 请求、设置实体主体和内容类型。这使您可以与 Web 服务交互并检查结果。

QuickJava

允许从状态栏和/或工具栏快速启用和禁用 Java、Javascript、Flash、Silverlight、图像、样式表和代理，而无需打开任何对话框！

Rainbow Color Tools

网页开发的颜色工具。拾色器和吸色器 + 保存颜色并通过拖放尝试颜色。

正则表达式测试器

带有颜色突出显示（包括子匹配）和用于创建表达式的帮助器的正则表达式测试工具。

删除网站的 Cookie

一个非常简单的扩展，用于删除当前打开的网站的所有 Cookie。它在页面的右键菜单中添加了一个选项，并添加了一个“清除 Cookie”按钮来执行此操作。它在状态栏中显示操作状态。

Screenshot Pimp

只需单击一下即可捕获、抓取、保存、下载或复制您在 Web 浏览器中看到的所有内容！Screenshot Pimp 迄今为止是 Windows 和 Mac 提供的最可自定义且用户友好的截图工具栏！

SQLite Manager

管理计算机上的任何 SQLite 数据库。

Selenium IDE 按钮

只需一个简单的工具栏按钮即可打开 Selenium IDE。您需要安装 Selenium IDE：http://seleniumhq.org/projects/ide/

SeoQuake SEO 扩展

Seoquake 是一款 Firefox SEO 扩展，主要旨在帮助处理搜索引擎优化 (SEO)、社交媒体优化 (SMO) 和互联网推广的网站管理员。Seoquake 允许调查许多重要的 SEO 参数。

ShowIP

在状态栏中显示当前页面的 IP 地址。它还允许通过 IP（右键单击）和主机名（左键单击）查询自定义信息服务，例如 whois、netcraft 等。此外，您还可以将 IP 地址复制到剪贴板。

Stylish

使用 Stylish 重塑网页，Stylish 是一款用户样式管理器。Stylish 允许您轻松安装 Google、Facebook、YouTube、Orkut 和许多其他网站的主题和皮肤。您甚至可以自定义 Firefox 和其他程序本身。

Tamper Data

使用 tamperdata 查看和修改 HTTP/HTTPS 标头和 POST 参数。

TAW3

只需点击一下，您就可以了解网站的可访问性。

Tilt 3D

基于 WebGL 的网页 3D 可视化。

Total Validator

一次性执行多种验证。此多重验证器使用从 http://www.totalvalidator.com/downloads/extensiontool.html 获取的桌面工具的本地副本，适用于外部、内部或本地网页。

TryAgain

当无法访问服务器时，TryAgain 会持续尝试加载网页。

User Agent Switcher

User Agent Switcher 扩展程序添加了一个菜单和一个工具栏按钮，用于切换浏览器的用户代理。

Wappalyzer

Wappalyzer 是一款浏览器插件，用于揭示网站使用的技术。

Web Developer

Web Developer 扩展程序为浏览器添加了各种 Web 开发人员工具。

Firebug 扩展

Firebug 存在许多针对不同用例的扩展，其中一些列在下面

Acebug

使用 Ace 为 Firebug 命令行提供语法高亮显示。模糊自动完成。

Firebug 0.1 版代码覆盖率 v2

此 Firebug 扩展用于报告 Javascript 代码覆盖率。

CSS Usage

Firebug 扩展，用于查看实际使用的 CSS 规则。

Firecookie

Firecookie 是 Firebug 的一个扩展，可以查看和管理浏览器中的 Cookie。

Firefinder

查找与所选 CSS 选择器或 XPath 表达式匹配的 HTML 元素。

FirePHP

FirePHP 允许您使用简单的 PHP 方法调用将日志记录到 Firebug 控制台。

FireQuery

用于 jQuery 开发的 Firebug 插件。

friendly bug

使 Firebug 更友好、更易于使用

Inline Code Finder for Firebug

Inline Code Finder 是 Firebug 的一个附加组件，用于查找具有以下任何问题的 HTML 元素：内联 JavaScript 事件、内联样式、javascript: 链接。

FireRainbow

Firebug 的 Javascript 语法高亮显示。

NetExport

NetExport 是一个 Firebug 扩展，允许导出从 Net 面板收集和计算的所有数据。创建的文件的结构使用 HTTP 归档 (HAR) 格式（基于 JSON）。

Pixel Perfect

Pixel Perfect 是一个 Firefox/Firebug 扩展，允许 Web 开发人员和设计师轻松地将 Web 构图覆盖在开发的 HTML 上。

YSlow

YSlow 基于雅虎的高性能网站规则分析网页以及网页速度慢的原因。

Firebug 还有更多扩展可用，可在 Firebug 扩展维基中找到。

Mozilla Hacks 的技术布道者和编辑。发表关于 HTML5、JavaScript 和开放 Web 的演讲和博客文章。罗伯特坚定地相信 HTML5 和开放 Web，自 1999 年以来一直致力于 Web 前端开发——在瑞典和纽约市。他还定期在 http://robertnyman.com 上发布博客文章，并且喜欢旅行和结识新朋友。

更多由罗伯特·奈曼 [荣誉编辑] 撰写的文章……

89 条评论

pdp

请原谅我在这里厚颜无耻地宣传一下，但我坚信我们的扩展“Websecurify”应该出现在列表中，尽管它相对较新。 :)

原因是当前列出的扩展程序都没有解决安全问题。有很多工具可以修复 CSS、测试 HTML 和 JS，但安全性通常会被忽略。Websecurify 在这方面非常完美，因为它提供了直接在浏览器内部的自动化应用程序测试解决方案，可以在开发过程中轻松启动和积极使用。

我们只是想让世界变得更美好 :)

2011 年 11 月 28 日 02:29
1. 罗伯特·奈曼 [Mozilla]
  
  有道理！:-)
  我假设这是那个？https://addons.mozilla.org/en-US/firefox/addon/websecurify/
  
  2011 年 11 月 28 日 02:36
  1. pdp
    
    是的，就是这个。 :)
    
    2011 年 11 月 28 日 02:50
2. gni33
  
  我已经使用 Websecurify 一段时间了，它是一个很棒的插件！
  继续努力！
  
  2011 年 11 月 29 日 04:08
  1. 罗伯特·奈曼
    
    很高兴听到这个消息！
    
    2011 年 11 月 29 日 05:17
pd

你什么时候会站出来，做正确的事情，诚实地说：你已经放弃 Firebug 了吗？

https://bugzilla.mozilla.org/show_bug.cgi?id=699528#c13

“我现在是唯一一个维护整个 Firebug 项目的人”——Jan Honza Odvarko

你上面提到的许多扩展都依赖于 Firebug，而你并没有让它烂掉。

Mozilla 如何停止宣传，开始诚实？Mozilla 一直对商业实践采取如此公正的态度，现在发生了什么？

2011 年 11 月 28 日 02:30
1. 罗伯特·奈曼
  
  这篇文章是关于作为 Web 开发人员在 Firefox 中可用的各种工具：原生工具、扩展程序以及 Firebug 及其扩展程序。
  
  然而，我不明白你为什么认为将这篇文章描述为不诚实是合适的，因为我的目的是列出可用的工具——这正是我所做的。
  
  说到 Firebug 及其未来，它一直由社区和 Mozilla 的参与共同领导。我不是该战略团队的一员，也不知道 Firebug 未来计划。
  
  2011 年 11 月 28 日 02:43
  1. pd
    
    “然而，我不明白你为什么认为将这篇文章描述为不诚实是合适的，因为我的目的是列出可用的工具——这正是我所做的。”
    
    好吧，也许不诚实不是最好的描述。也许没有讲述完整的故事更准确。
    
    我承认我假设任何为 hacks.mozilla 撰稿的人都知道 Mozilla 内部正在发生的事情。你纠正了我，所以谢谢。
    
    不过，我希望你能理解我的观点。阅读关于 Firebug 的未来不确定的建议非常令人不安。这就像告诉一个木匠，没有人再制造锤子和锯子了！
    
    你自己也说过 Firebug 在某种程度上是 Mozilla 的一项计划。现在看来，Mozilla 的所有努力都集中在原生工具上。
    
    我认为我的问题是合理的。如果说不是你或你的 hacks.mozilla 作者，那么*其他人*应该澄清 Firebug 的未来。这并非不合理的要求。
    
    2011 年 11 月 28 日 03:22
    1. 罗伯特·奈曼
      
      我确实理解你对 Firebug 的未来感到好奇。但在我的想法中，这不是非黑即白的事情。是的，我们确实在原生开发者工具上投入时间和精力，因为我们认为这是我们需要做的事情，并且我们可以完成 Firebug 做不到的事情。这并不一定意味着 Firebug 被放弃了。Jan 多年来一直是 Firebug 的主要开发者之一，并且他一直在改进它。我想未来会揭示它的发展方向。
      
      2011 年 11 月 28 日 04:19
    2. Honza
      
      澄清一下，虽然我是唯一一个*全职*的 Firebug 开发人员，但 Firebug 周围仍然存在非常健康和活跃的社区，并且现有贡献者群体提供了极大的帮助。
      
      请注意，Firebug 未来目标之一是重用内置工具/组件，这将有助于减少 Firebug 本身的工作量，并有助于正确设计这些内置组件的 API。
      
      Honza
      
      2011 年 11 月 28 日 09:59
      1. 罗伯特·奈曼
        
        感谢您的澄清！
        
        2011 年 11 月 28 日 12:50
      2. pd
        
        我不认为罗伯特你无论如何都会的这种态度是可以接受的，所以感谢 Honza 的更新。但是，如果 Mozilla 认真对待支持开发者，那么应该不止一名全职 Firebug 开发人员，恕我直言。
        
        我想最重要的是，Firebug 永远不会倒退，或者仅仅因为代码是原生的而允许其功能被劣质代码取代。
        
        很有趣的是，似乎有一些开发者和非开发者并不一定想要原生开发工具。从一开始我就一直在关注 Firefox。不幸的是，我从未贡献过代码，但我喜欢关注项目的策略和方向。在这段时间里，我看到很多 Firefox/Mozilla 人员反驳了在浏览器中构建更多功能的需求。现在在开发者工具方面，情况正好相反。太疯狂了。
        
        Firefox 万岁，高质量的 Web 开发者工具万岁！
        
        2011 年 11 月 29 日 06:22
      3. 罗伯特·奈曼
        
        你总是会遇到想要原生工具的开发者和不想要的开发者。除非大多数人想要原生开发者工具，并且我们相信这符合未来的最佳利益，否则 Mozilla 不会构建原生开发者工具。
        
        2011 年 11 月 29 日 09:08
2. 迈克·拉特克利夫
  
  我们无意停止对 Firebug 的支持。它仍然是 Web 开发人员的绝佳工具，并且已被所有主流浏览器复制。
  
  内置的开发者工具旨在与 Firebug 共存，而不是取代它。当然，Honza 是唯一一个全职的 Firebug 开发人员，但仍然有很多其他贡献者。
  
  如果要推测 Firebug 的未来，我猜它可能会利用内置工具（例如，用于突出显示元素），但它将在未来很长一段时间内与我们同在。
  
  2011 年 11 月 28 日 05:40
  1. pd
    
    我希望这不仅仅是为了它而进行的语义修正回复。然而，我想说 Firebug 不仅仅是棒极了，它是至关重要的。它对木匠来说就像锤子；对泥瓦匠来说就像抹子；对机械师来说就像套筒扳手……真正的浏览器已经*尝试*过复制 Firebug，但在 IE 的情况下，彻底失败了。我认为讨论 Web 开发的最佳方式是 BF（Firebug 之前）和 AF（Firebug 之后）。然而，它远非完美，可以做得更好，也可以做得更多。现在是不是该承认，尽管志愿者贡献者非常棒，但 Mozilla 应该将全职资源投入到一般的开发者工具中，而不仅仅是 Honza（尽管他是冠军），而相比之下，有多少人在全职工作于（原生）“开发者工具”上。这就是我反对的：降低 Firebug 的优先级。让我们不要忘记，它最初是由一个人构建的：向 Joe 致敬！据我所知，Joe 不必处理很多政治和优先级的调整。
    
    Mozilla 请您专注于提供最佳的开发者工具，而不仅仅是原生工具或在此项目/政治/庇护下开发的工具。
    
    2011年11月29日 06:49
    1. 罗伯特·奈曼
      
      感谢你们的意见。正如你所理解的，有很多不同的意见，我相信负责开发者工具的人会根据所有反馈和他们看到的需求做出最佳决定。
      
      2011年11月29日 09:06
Nicholas Hebb

FYI - SQLite Manager 的标题中有一个拼写错误（用“G”代替了“Q”）。这是一个用于管理 SQLite 数据库的便捷工具。

2011年11月28日 03:29
1. 罗伯特·奈曼
  
  发现得很好！现在已修复，谢谢！
  
  2011年11月28日 04:11
Essex Web Design

jQuery 开发的 xml 插件是什么？

2011年11月28日 03:49
1. 罗伯特·奈曼
  
  不确定具体是哪一个。
  
  2011年11月28日 04:13
Akshitha

这是一个详尽的附加组件列表。FireBug、ColorZilla、FirePHP、yslow 是每天使用的附加组件。现在你让我忙于尝试这些附加组件了。

2011年11月28日 03:49
1. 罗伯特·奈曼
  
  谢谢，很高兴你喜欢！
  
  2011年11月28日 04:11
Komputer

我还推荐 CSSViewer，但是你必须手动更改安装文件中的 Fierfox 版本。

2011年11月28日 04:17
1. 罗伯特·奈曼
  
  感谢你的提示！但是，我只尝试在此处列出受维护且与 Firefox 最新官方版本（撰写本文时为版本 8）兼容的扩展程序。
  
  2011年11月28日 04:22
Thomas Traub

我放弃了 Firefox 转而使用 Webkit 系列，现在我只在三种情况下使用它
1. 检查显示/行为差异
2. 检查语言
3. 检查 Javascript

Firefox 需要再次成为它最初开始时的那个值得信赖、实用且不碍事的工具——只需工作即可。

一个类似于 Webkit 的开发者套件必须始终随新版本的发布而提供，并在后台透明地自动更新，无需任何额外的对话框——最好将其集成到核心。

允许我打开多个版本，并为每个版本提供自己的、隔离的插件树。

版本更改时启动不再重定向（我可能会使用关联的 URL 启动 FF）

但我对此表示严重怀疑

我感觉你们并没有真正使用 FF 进行 Web 开发，或者你们很久没有使用过 Webkit 浏览器了，例如（并非如此）新的集成 Web 控制台在页面刷新时不会清除日志。完全失败。

啊，是的，我在 Mac 上使用 Aurora（10.0a2 (2011-11-27)），我尝试安装了上面的一些扩展，所有页面都告诉我该插件与我的 Firefox 版本不兼容。这种事情现在是典型的体验。

抱歉这么消极，我曾经是真正的粉丝和推广者。

2011年11月28日 05:05
1. 罗伯特·奈曼
  
  谢谢，我们感谢你的反馈！
  我们有很多想改进的地方，听到这样的想法很好。
  
  但是，公平地说，Aurora 是一个测试版本，介于 Beta 版和 Nightly 版之间，因此不要期望所有内容都能在实验版本中正常工作。我专门确保上面所有扩展程序都与 Firefox 的最新发布的官方版本（撰写本文时为版本 8）兼容。
  
  2011年11月28日 07:37
2. Jan ‘Honza’ Odvarko
  
  > Web 控制台在页面刷新时不会清除日志。
  您可以在 Firebug 控制台面板中选中“持久化”按钮，日志将在页面重新加载时保持持久化。Net 面板也是如此。
  Honza
  
  2011年11月30日 00:40
elias

Firebug 与 Firefox 8.0.1 不兼容。你们是认真的吗？

2011年11月28日 05:15
1. 罗伯特·奈曼
  
  我可以在 Firefox 8.01 中从https://addons.mozilla.org/en-US/firefox/addon/firebug/安装它。如果没有，您可以在http://getfirebug.com/找到备用版本。
  
  2011年11月28日 07:34
Pierre Bertet

我制作了这个小型的 Firefox 附加组件，用于在 validator.w3.org 上验证标记：https://addons.mozilla.org/fr/firefox/addon/simple-markup-validator/

如果您只将 Web 开发者用于此功能（代码来自 Web 开发者附加组件），这是一个不错的解决方案。

2011年11月28日 05:53
1. 罗伯特·奈曼
  
  感谢你的提示，我会研究一下！
  
  2011年11月28日 07:39
Michael Stum

绝对应该提到 Tilt，它在一些疯狂的布局故障排除案例中很有用

https://addons.mozilla.org/en-US/firefox/addon/tilt/

2011年11月28日 06:21
1. 罗伯特·奈曼
  
  我完全同意，并将立即添加它！
  
  2011年11月28日 07:39
Insano

Firefox 自带了许多开箱即用的开发者工具，但大多数用户都不是开发者。是否有计划将这些工具作为单独的安装程序提供？

2011年11月28日 06:29
1. 罗伯特·奈曼
  
  我们的想法是将最重要的工具嵌入到 Web 浏览器中，但其他工具——例如上面所有的扩展程序等——则会被视为独立的工具。这是一个微妙的平衡。
  
  2011年11月28日 07:44
cool_guy1

太糟糕了，所有东西都运行得非常慢

2011年11月28日 06:47
1. 罗伯特·奈曼
  
  取决于你安装了多少扩展、你的使用方式以及许多其他因素。
  
  2011年11月28日 07:44
Rey

如前所述，我真的不明白为什么如此推崇原生开发工具，如果可以这么说，与其他浏览器工具相比，Firebug 拥有最佳的可用性和功能（Chrome 是第二好的）。

如果他们确实想与 Firebug 竞争，那么请正确地去做，获取最佳功能 + Firebug 附加组件功能，并允许修改原生工具（制作附加组件等）。

2011年11月28日 06:54
1. 罗伯特·奈曼
  
  当然，我们从 Firebug 中获得了灵感，你现在看到的原生工具是第一步。这将得到评估，并且是一个持续进行的工作，因此下一步将受此影响。
  
  2011年11月28日 07:45
  1. pd
    
    尊敬的 Robert，到目前为止，我还没有在新的开发者工具中看到太多 Firebug 灵感的证据。首先，UI 的结构完全不同。我绝对希望这是暂时的，但我希望 Mozilla 的开发人员才华横溢且敏捷，能够发布更接近完成状态的版本，而不是新的开发者工具的外观。因此，我认为有两种可能性；工具接近它们最终的样子，或者 Mozilla 的原生工具开发人员不如我期望的那么优秀。究竟是哪一个？谁说 HTML 查看器必须是一个随机浮动的调色板/对话框/某些东西？在那个决定中，Adobe 的影响力更大，而不是 Firebug 的精心放置的子窗口。为什么要将样式查看器制作成一个压缩视口空间的侧边栏，以及来自视口顶部的控制台？是否有某个聪明的年轻人提出工具必须占据尽可能多的屏幕/视口空间，从而使实际的网页看起来像邮票？我们并非所有人都只为移动网络开发。并非我们所有人都像每个 WordPress 主题或 Facebook 一样沉迷于狭窄的列式设计范式。毕竟，他们发明了宽屏显示器！无论如何，抱歉我有点抱怨。
    
    很高兴看到这么多人愿意在这些评论中站出来反对 Mozilla 并告诉他们自己的感受。Mozilla 必须倾听！
    
    2011年11月29日 07:09
    1. 罗伯特·奈曼
      
      我无法具体评论设计，但自然地，它以及工具本身都会经历多次迭代和测试。
      
      2011年11月29日 09:04
    2. Jan ‘Honza’ Odvarko
      
      > 我还没有在新的
      > 开发者工具中看到太多 Firebug 灵感的证据。
      是的，现在还为时过早。另请注意，Firebug 希望保留其 UI 并共享后端服务/API（一个例外可能是检查器/突出显示器）。
      
      Honza
      
      2011年11月30日 00:46
      1. pd
        
        我可以理解 Firebug 如何采用新的拾色器的灯箱效果及其本地 HTML 面包屑/路径/分支语音气泡/门牌号。我想可以限制新的结构化 HTML 视图的宽度，去掉其非窗口面板非标题栏，并仅以不同的样式将其放置在 Firebug HTML 选项卡内。但是，除非 Firebug 获得（在我看来已经过时了）显示/隐藏 RHS 部分的选项，否则将无法实现宽结构化 HTML 视图。
        
        关于这一点 Jan，是否有核心原因导致从未实现过此功能（显示/隐藏 Firebug RHS 部分）？如果没有，如果您认为这是一个扩展程序可能添加到 Firebug 中的功能，我很有兴趣尝试编写这样的扩展程序。我总是来回拖动分隔符以尝试查看扩展的供应商 HTML，其中包含重复的类和 id 值，从而扩展了标签。
        
        2011年11月30日 04:32
iii

是的，FF 有一套优秀的开发工具（不仅仅是这些），并且长期以来它足以让我最喜欢的浏览器。但这已经是两年前的事情了，从那时起，浏览器世界发生了很多变化。现在，我启动它只是为了确保页面在其中看起来正常，这几乎总是正确的，然后我很快切换回 Chrome，我（更）喜欢将其用于日常使用。这真的很可惜，因为 FF 曾经是一个很棒的浏览器……

2011年11月28日 07:29
1. 罗伯特·奈曼
  
  很高兴听到你对你正在使用的感到满意。但是，从建设性的角度来看，你是否想提及你在 Firefox 中缺少/想要更改的内容？
  
  2011年11月28日 07:46
Peter Snow

有趣的是，它曾经是我的主要浏览器。我非常喜欢它，现在我仅在开发时使用它，因为最新更新不再支持我的密码管理器附加组件（我使用 Kwallet，因为我在 Linux 上）。

在选项卡栏上拖放选项卡似乎在同一更新中停止工作，我的主题也消失了！

由于他们宣布了短暂的发布周期，这让我非常害怕……我不想每隔几周，当 Mozilla 决定推送另一个更新时，就不得不修复它或忍受损坏的扩展程序，而我之前一直依赖这些扩展程序。

更烦人的是，每次更新几乎都没有任何明显的改进！

不过，我喜欢 Web 开发者扩展程序。

2011年11月28日 07:39
1. 罗伯特·奈曼
  
  我不了解 Kwallet 和你遇到的选项卡行为，但肯定会有许多操作很快就会推出，以解决你描述的扩展程序/升级问题。
  
  2011年11月28日 07:47
  1. Peter Snow
    
    这是令人鼓舞的消息。感谢 Robert。我会密切关注这些消息。:-)
    
    2011年11月28日 07:54
chocho

我不理解原生开发工具的必要性。并非每个人都是开发者，所以为什么要捆绑更多他们不需要的东西。Chrome 和 Webkit 这样做是有充分理由的。他们没有强大的 Mozilla 平台可用。他们别无选择，只能提供这个功能，顺便说一句，这个功能甚至都不能扩展……它非常基础。

Mozilla 不是 Webkit。它甚至不是 Chrome。它比所有浏览器技术加起来还要多。我认为 Mozilla 应该做的是重新发明浏览器，使其比现在更简单。更少的混乱、更快的速度、更好的代码。其他所有内容都应该是平台的扩展。这曾经是 Mozilla 的方式，我不确定发生了什么导致每个人都改变了主意。为什么如此重要地复制 Chrome 和 Webkit？它们绝非更好。

我认为 Mozilla 应该这样做
1. 清理浏览器 UI 的 xul。这将使扩展开发更容易。
2. 提供更多 xbl 绑定和其他基元，以便开发人员在编写扩展时不必一遍又一遍地重新发明相同的代码。它还使移植更容易。
3. 发布 FF、TB 和所有其他 Mozilla 产品的最低公分母，并让社区负责其余部分。Mozilla 拥有最大的开发人员社区之一，我看不出有任何理由不利用它。

2011年11月28日 07:42
1. Pierre Bertet
  
  将其视为增强的“查看源代码”。请记住，Mozilla 的作用不是制作浏览器，而是促进开放网络！
  
  2011年11月28日 07:46
2. 罗伯特·奈曼
  
  感谢你的反馈！
  我们希望 Firefox 成为开发人员进行开发的最佳工具，有很多原因，我们相信通过包含原生开发者工具可以帮助实现这一点。也就是说，它们肯定不会涵盖所有内容，而是自身具有可扩展性并为社区提供构建基础的平台。
  
  2011年11月28日 07:50
  1. chocho
    
    我认为你假设你可以提供一个内置于 Firefox 中的通用开发平台，它可以适合所有人。人们仍然会安装 Firebug，所以我没有看到这一点。此外，如果我不想使用 Firebug 也不想使用内置的开发工具怎么办？如果另一个扩展程序比这两个都更有用怎么办？我知道内置的开发工具不会阻止我安装其他开发扩展程序，但它们只是使我的生活更复杂，并且同时运行两个开发环境会带来巨大的开销。我老实说没有看到这一点，而且我是支持者之一，无论 Firefox 走向何方，我都会站在它后面。
    
    再次强调，保持领先的最佳方式是开发一个拥有更好扩展技术的浏览器。但不要抄袭 Chrome。虽然 Chrome 开发者在思考如何提升浏览体验，但我感觉 Mozilla 花费了太多资源在思考如何让 Firefox 看起来像 Chrome。Firefox 是不同的，并且它自带 XUL、XBL 及其他所有技术，因此它根本无法与 Chrome 或 Webkit 相提并论。
    
    我知道从头开始可能令人兴奋。我理解这一点（我知道流程和兴奋感），但请不要以牺牲已经运行良好的功能为代价。
    
    我完成了 :) 我要说的就这些了。
    
    2011年11月28日 08:11
    1. 罗伯特·奈曼
      
      不用担心，我们非常感谢您分享！:-)
      我认为永远不会有一个适合所有人的开发者平台。原生开发者工具更侧重于提供选择，并且，就像您希望的那样，为人们提供一个良好的基础，以便他们能够在其之上构建并扩展 Web 浏览器。更进一步的是 Jetpack，它也旨在简化 Web 浏览器扩展。
      
      2011年11月28日 12:20
  2. pd
    
    很高兴听到扩展开发者将可以使用这些工具。但是，这会是 Jetpack API 的相对浅层的形式，还是旧式基于 XUL 的扩展的更深层形式？
    
    2011年11月29日 07:13
    1. 罗伯特·奈曼
      
      目前还不确定，但我猜测可能是公开的 API 而不是基于 XUL 的方法。
      
      2011年11月29日 09:02
Gtricks

哇，对于设计师和开发者来说，这是一个很棒的列表。这就是我更喜欢 Firefox 而不是 Chrome 的原因。

2011年11月28日 08:56
1. 罗伯特·奈曼
  
  谢谢，很高兴您喜欢它！
  
  2011年11月28日 12:20
Paul Lammertsma

如果您是 Web 开发人员，我发现 TryAgain 非常巧妙，它可以让 Firefox 自动重新加载（仍在编译的）网页，直到它真正显示出来。这对 ASP.NET 开发人员尤其有用。

2011年11月28日 09:37
1. 罗伯特·奈曼
  
  谢谢，已添加！
  
  2011年11月28日 12:31
取消冒泡

这里有一个很棒的列表，我已经收藏了。

我想推荐一下 Fireshot（https://addons.mozilla.org/en-US/firefox/addon/fireshot/），它可以截取整个网页的屏幕截图，即使它高达 4000 像素。我发现这非常方便。

2011年11月28日 11:07
1. 罗伯特·奈曼
  
  感谢您的提示！
  我确实研究过，但它仅适用于 Windows，而我希望此列表包含所有平台的选项，因此我排除了它。
  
  也许我应该重新考虑。
  
  2011年11月28日 12:36
ElbertF

我谦卑地将 Wappalyzer 提交到此列表

https://addons.mozilla.org/en-US/firefox/addon/wappalyzer/

2011年11月28日 18:14
1. 罗伯特·奈曼
  
  谢谢，已将其添加到列表中！
  
  2011年11月29日 00:17
Philip

@Robert Nyman – 非常棒的列表！非常感谢！

2011年11月29日 04:34
1. 罗伯特·奈曼
  
  谢谢，很高兴您喜欢它！
  
  2011 年 11 月 29 日 05:17
pd

我应该客观地说，新的检查器的效率看起来确实非常令人鼓舞。如果 Firebug 能够在不丢失任何相关功能的情况下集成它，那将是一个巨大的胜利。但是，我不确定“灯箱”样式。起初，它确实有助于突出显示元素。但是我怀疑它在具有深色配色方案的网站上效果不佳。其他人怎么看？也许可以提供某种简单的选项（大写锁定）来反转悬停/选中元素周围半透明效果的颜色？此外，如果能够修改不透明度，那将非常方便，也许这是扩展开发者的工作。

我真的很不喜欢 HTML 查看器的 UI，而且检查器和 HTML 树几乎是手拉手。该 UI 为查看膨胀的代码提供了很大的宽度，这很棒。令人恼火的是，出于此目的，无法暂时禁用 Firebug 的 RHS 部分。但是，这应该是对原本精美的 Firebug UI 的简单调整，而不是使用初始原生 HTML UI 选择的完全浮动的非窗口。建议：创建一种模式，通过该模式，所有新的原生工具 UI 都可以与 Firebug 完全相同地进行组织，并增加隐藏 Firebug RHS 面板（样式、计算、DOM 和布局选项卡所在的区域）的功能。

至于侧边栏，我完全不明白。请坚持使用 Firebug 的样式、计算机和 DOM 选项卡的简单性。

2011年11月29日 07:28
1. 罗伯特·奈曼
  
  感谢您的建议。
  
  2011年11月29日 09:01
Rahul

你好，Robert

我想将此附加组件提交到列表中，请查看一下，Robert

与 Firebug 一起使用的 friendly bug 1.8.0

感谢您的编译...它帮助了我很多

2011年11月29日 07:50
1. 罗伯特·奈曼
  
  很好的建议，我已添加！
  
  2011年11月29日 08:59
James

哇，这可能是我很长时间以来见过的最全面的工具列表之一。很棒的帖子！

2011年11月29日 08:36
1. 罗伯特·奈曼
  
  谢谢！
  
  2011年11月29日 08:59
Caitanya Dasi

请帮助我！我以为我正在创建一个博客页面，并使用了 Firebug。但是，这并没有发生（没关系）；相反，我的电子邮件和 Facebook 的页面布局现在变成了我以为是博客页面的布局。
这让我抓狂，因为页面顶部有一个巨大的 2 英寸黑色边距，而且所有内容都显得有点挤在一起。如何撤消此布局？
是的，我是一个傻瓜，不知道自己在做什么。谢谢。

2011年12月5日 09:03
1. 罗伯特·奈曼
  
  使用 Firebug，您只能更改您在自己的 Web 浏览器中加载的网页的布局和其他内容，以进行测试。这些更改仅对您可用，如果您重新加载页面，它们将消失。
  
  2011年12月5日 09:27
mogly

您的列表中缺少 Phoenix。

https://addons.mozilla.org/en-US/firefox/addon/phoenix/

一个带有实时语法高亮的编辑器，允许编辑、运行和测试 CSS、HTML 和 JavaScript 代码。Phoenix 会告诉您页面中加载了多少个 CSS 和 JS 文件，它们的大小，它允许您编辑、打包和反混淆它们。

很棒的附加组件。

2011年12月15日 07:55
1. 罗伯特·奈曼
  
  太好了，感谢您的提示！
  
  2011年12月15日 11:13
Isuru Nanayakkara

很棒的帖子！我最近开始学习 Web 开发，这真的很有帮助！谢谢。

2012年1月22日 04:07
1. 罗伯特·奈曼
  
  很高兴听到！
  
  2012年2月20日 01:42
Hasitha @ OOSET

很棒的附加组件列表。Firefox 是 Web 设计师的最佳浏览器。

2012年2月19日 09:05
1. 罗伯特·奈曼
  
  谢谢 - 很高兴您喜欢它！
  
  2012年2月20日 01:42
破产律师

有人知道是否有插件可以在工具栏中检测站点的页面排名？最新版本的 Firefox 没有此功能，而某些早期版本有…

2012年2月20日 12:14
1. 罗伯特·奈曼
  
  没有现成的，没有 - 有几个符合描述，但不确定哪一个可以正常工作。
  
  2012年2月20日 12:19
Ajnabii

不错的 Firefox 开发者工具列表。SEOQuake 和 FireFTP 是我的最爱。

谢谢。

2012年3月24日 12:46
1. 罗伯特·奈曼
  
  谢谢，很高兴您有一些最喜欢的！
  
  2012年5月16日 05:32
Manish

我已在 Firebug 中直接为我的所有网站和项目编写了 CSS 样式表，我无法想象没有它自己开发。

2012年5月11日 23:29
1. 罗伯特·奈曼
  
  很高兴您喜欢 Firebug！也请测试 Firefox 中的原生开发者工具，看看您的想法。
  
  2012年5月16日 05:33
aliabaci

我想要诺基亚和塞班 S60^3 的 Firefox。

2012年7月9日 00:23
1. 罗伯特·奈曼
  
  那会很好，但目前还没有这方面的计划。
  
  2012年8月15日 01:13
ashish

感谢 CSS 和 PHP 附加组件，这些对我非常有帮助。

2012年8月14日 23:11
1. 罗伯特·奈曼
  
  谢谢，很高兴您喜欢它们！
  
  2012年8月15日 01:12

本文评论已关闭。

Firefox – 为网页开发者提供了海量工具！

作者：Robert Nyman [荣誉编辑]

Firefox 中的原生开发者工具

Firebug

Firefox 网页开发者扩展

Firebug 扩展

关于 罗伯特·奈曼 [荣誉编辑]

发现 Web 开发的优秀资源

感谢！请查看您的收件箱以确认您的订阅。

关于罗伯特·奈曼 [荣誉编辑]