有关浏览器添加工具的建议,以帮助开发

时间:2020-03-05 18:41:00  来源:igfitidea点击:

谁能建议一些好的浏览器添加工具/扩展来帮助开发?
我在Firefox中安装了萤火虫,非常适合处理CSS,HTML和javascript;还有其他建议吗?

萤火虫

解决方案

回答

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

回答

Opera开发人员控制台和DOM快照:

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

太棒了,这些是使用JS实现的书签。令人遗憾的是,他们需要Internetz。

回答

对于Firefox:

Firebug非常适合进行调查和开发。

Web Developer工具栏也不错。确实对CSS和页面布局有帮助,还有更多帮助。

我还使用Live HTTP标头(我认为它被调用,但是它在我的工作机上,因此现在找不到链接)。这帮助我们解决了缓存问题之类的问题。

我做了很多手机开发工作,所以我也使用UserAgent Switcher。假装成为其他手机非常有帮助。

我倾向于只使用Firefox进行开发,而只是在其他浏览器中进行测试,因为大多数浏览器没有像Firefox那样广泛的插件来辅助开发。

回答

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

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

另外,它还可以为请求设置用户代理。

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

回答

Firefox:

  • 如果完全使用DOM检查器,则进行检查
  • 测量它可以告诉我们像素距离(如果需要)
  • IE View或者Safari View,可轻松在其他浏览器中进行测试
  • HTML验证程序(如果我们关心验证)
  • Console2改善js错误控制台
  • Javascript Shell小书签也很方便(也可以看看那里的其他内容)

编辑:这是其他人提到的Web开发工具栏的补充

回答

如果是IE,接下来的工具可能会有用

  • Microsoft开发人员工具栏-dom | styles查看器
  • Fiddler HTTP调试器-HTTP监视器
  • 即时来源-dom |样式查看器
  • Companion.JS-dom | styles查看器,扩展错误控制台

IE 8开发人员工具的" uber"扩展,作为IE8的一部分提供

回答

Firefox:
  
  Inspect This if you use the DOM Inspector at all
  
  Measure It for telling you pixel distances (if you need that)
  
  IE View or Safari View for ease of testing in other browsers
  
  HTML Validator if you care about validation
  
  Console2 to improve your js error console
  
  The Javascript Shell bookmarklet is also handy (and look at the others there as well)
  
  This is in addition to the Web Development Toolbar mentioned by others

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

回答

歌剧有:

蜻蜓(工具->高级->开发人员工具)

调试菜单

UserJS拦截事物的方法

Opera:config#CompatMode%20Override用于强制执行怪癖或者标准模式

Web开发人员小部件

我们可以查看文件源,对其进行编辑,应用更改并从缓存中重新加载。

回答

除了已经提到的出色工具之外,我发现Charles非常有用。尤其是因为我在Flash Remoting方面做了很多工作,因此处理效果非常好。

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
  
  Charles can act as a man-in-the-middle for HTTP/SSL communication, enabling you to debug the content of your HTTPS sessions.

它是跨平台的,售价50美元,但是我们可以下载"每节30分钟"评估。

回答

这是我使用的:

Firefox:

  • DOM Inspector:我在Web开发中使用的最多。
  • 启动:用于在其他浏览器/应用中打开网站
  • 篡改数据:这有助于调试GET / POST请求
  • Web开发人员工具栏:它具有许多方便的调试功能:W3C验证工具,内置标尺,调整大小工具,源代码操纵,简单的缓存/ css /脚本工具

IE:

  • Internet Explorer开发人员工具栏:远不及Firefox方便,但至少它为我们提供了不错的DOM Inspector

其他:

  • 杰西方便的小书签:外壳小书签特别方便
  • 我还安装了Safari和Opera,但大多数情况下仅将它们用于测试和基准测试,因为它们的开发工具不如Firefox强大,并且不像IE那样有漏洞。
  • Lynx:我用它来确保所有JS繁重的网站仍然可以正常工作,以便确保它们对于Google,屏幕阅读器和任何其他类似bot的应用程序看起来都可以。

回答

这是我针对Firefox 3的面向开发的添加组件:

  • Web开发人员
  • 火狐
  • 彩虹
  • 篡改数据
  • 海报
  • 火FTP
  • 每次重新加载
  • 硒IDE

回答

YSlow是一个不错的Firebug插件,用于对页面的加载时间进行故障排除。