对有助于开发的浏览器附加工具的建议[关闭]答案

【问题标题】：Recommendations for browser add-on tools to help with development [closed]对有助于开发的浏览器附加工具的建议[关闭]
【发布时间】：2010-09-06 06:19:29
【问题描述】：

谁能推荐一些好的浏览器插件工具/扩展来帮助开发？我在 Firefox 中安装了 firebug，它非常适合处理 CSS、HTML 和 javascript；还有其他建议吗？

Firebug

【问题讨论】：

标签： browser

【解决方案1】：

对于火狐：

Firebug 非常适合调查和开发。

Web Developer Toolbar 也不错。确实有助于 CSS 和页面布局以及其他方面的内容。

我也使用Live HTTP Headers（我认为它被调用，但它在我的工作机器上，所以现在找不到链接）。这帮助我们解决了缓存问题等问题。

我做很多手机开发，所以我也用UserAgent Switcher。对伪装成不同的手机很有帮助。

我倾向于只使用 Firefox 进行开发，并且只在其他浏览器中进行测试，因为大多数浏览器都没有 Firefox 那样广泛的插件来帮助开发。

【讨论】：

【解决方案2】：

火狐：

Inspect This 如果你完全使用 DOM Inspector
Measure It 告诉你像素距离（如果你需要的话）
IE View 或 Safari View 便于在其他浏览器中进行测试
HTML Validator 如果您关心验证
Console² 改进你的 js 错误控制台
Javascript Shell 小书签也很方便（也可以看看那里的其他小书签）

编辑：这是对其他人提到的Web Development Toolbar的补充

【讨论】：

【解决方案3】：

另一个必备的 Firefox 是 Chris Pederick 的 Web Developer Toolbar。

【讨论】：

【解决方案4】：

您绝对应该安装 Safari。它内置了许多工具。我一直将它与其他浏览器结合使用。

网络时间线
错误控制台
网页检查器
片段编辑器

此外，它还允许您为请求设置用户代理。

考虑到这一点，它有一个名为Develop的单独顶级菜单。

【讨论】：

【解决方案5】：

歌剧有：

Dragonfly（工具 -> 高级 -> 开发者工具）

Debug Menu

UserJS methods for intercepting things

opera:config#CompatMode%20Override 强制怪癖或标准模式

Web developer widgets

您可以查看文件源、编辑它们、应用更改并从缓存中重新加载。

【讨论】：

【解决方案6】：

如果是 IE，下一个工具会很有用

Microsoft Developer Toolbar - dom|样式查看器
Fiddler HTTP Debugger - http 监视器
Instant source - dom|样式查看器
Companion.JS - dom|styles 查看器，扩展错误控制台

IE 的“uber”扩展 - “开发者工具”，作为 IE8 的一部分提供

【讨论】：

【解决方案7】：

开发者控制台和 DOM 快照 for Opera：

http://dev.opera.com/tools/

很棒的是这些都是用 JS 实现的书签。糟糕的是他们需要 Internetz。

【讨论】：

【解决方案8】：

火狐：

如果你完全使用 DOM 检查器，请检查它

测量它以告诉您像素距离（如果需要）

IE 视图或 Safari 视图便于在其他浏览器中进行测试

HTML Validator 如果你关心验证

Console2 改进你的 js 错误控制台

Javascript Shell 小书签也很方便（也可以看看其他的）

这是对别人提到的Web开发工具栏的补充

Cebjyre 的这个列表几乎是完整的（因为问题中已经提到了 FireBug）。我只会添加Tamperdata。有时它非常有用。

【讨论】：

【解决方案9】：

这是我的 Firefox 3 的面向开发的附加组件：

【讨论】：

【解决方案10】：

YSlow 是一个很好的 Firebug 插件，用于解决页面加载时间问题。

【讨论】：

【解决方案11】：

除了已经提到的优秀工具之外，我发现Charles 非常有用。特别是因为我使用 Flash Remoting 做了很多工作，它处理得很好。

Charles 是一个 HTTP 代理/HTTP 监视器/反向代理，它使开发人员能够查看他们的机器和 Internet 之间的所有 HTTP 流量。这包括请求、响应和 HTTP 标头（其中包含 cookie 和缓存信息）。

Charles 可以充当 HTTP/SSL 通信的中间人，使您能够调试 HTTPS 会话的内容。

它是跨平台的，售价 50 美元，但您可以下载“每次会话 30 分钟”的评估。

【讨论】：

【解决方案12】：

这是我使用的：

火狐：

DOM Inspector：我用这个比其他任何东西都多用于网络开发
Launchy: 用于在其他浏览器/应用中打开网站
Tamper Data：这有助于调试 GET/POST 请求
Web Developer Toolbar：它有很多方便的调试功能：W3C 验证工具、内置标尺、调整大小工具、源代码操作、简单的缓存/css/脚本工具

IE：

Internet Explorer Developer Toolbar：远不如 Firefox 方便，但至少它为您提供了一个不错的 DOM Inspector

杂项：

Jesse's handy bookmarklets：shell 小书签特别方便
我还安装了 Safari 和 Opera，但大多数情况下只是将它们用于测试和基准测试，因为它们的开发工具不如 Firefox 强大，也不像 IE 那样容易出错。
Lynx：我使用它来确保所有 JS 重的网站仍然可以运行，这样我确信它们在谷歌、屏幕阅读器和任何其他类似机器人的应用程序中看起来都不错。

【讨论】：