Firefox上Web辅助开发插件

简介: 大多数网页设计师与前端工程师都会使用Firefox(火狐浏览器),由于Firefox丰富的Web开发辅助插件可以为我们提供许多好的功能,比如HTML,CSS,JS查错,找BUG等等。因此这里整理了目前常用的一些Firefox Web开发插件。

大多数网页设计师与前端工程师都会使用Firefox(火狐浏览器),由于Firefox丰富的Web开发辅助插件可以为我们提供许多好的功能,比如HTML,CSS,JS查错,找BUG等等。因此这里整理了目前常用的一些Firefox Web开发插件。

开发工具

1.  Web Developer 1.1.8

https://addons.mozilla.org/en-US/firefox/addon/60
以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息,使我们进一步的了解当 前所浏览的网页。
说明:超强的web分析工具,开发人员必装。

2.  Firebug 1.5.0

https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试 功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari),简直难以置信。除此之外,其他功能还很强大。比如html,css,dom的察看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。
说明:查看,编辑,Debug页面的CSS,HTML,JavaScript。超强的开发调试的工具,开发人员必装。

3.  LinrLightWeb 0.2.1

https://addons.mozilla.org/zh-CN/firefox/addon/14068
安装前,请确认您已安装Firebug插件,获取Firebug请访问:http://getfirebug.com/
1. 开启网页编辑模式,随意编辑网页——Fiddler的好搭档;
2. 超强Selector,查找操作标记;
3. 刷新CSS,无需刷新整页;
4. 快速设置CSS Sprites背景,鼠标拖移即可得到位置;
5. 保持登录状态,Session不过期;禁用
6. 同步发行IE版,Chrome版。
说明:非常强的web开发工具。

更多基于firebug的插件可以参考这篇文章:用来武装Firebug的十三款Firefox插件

4.  View Source Char 2.7

https://addons.mozilla.org/en-US/firefox/addon/655
画一个 Color-Coded 的图表的 Web 页的源代码。
说明:显示非常好看的源码, 分级缩进, 不同颜色区分。

5.  Tamper Data 11.0.0

https://addons.mozilla.org/en-US/firefox/addon/966
Tamper Data 的真实含义,即“篡改数据”(或者说定制 HTTP 请求):截取浏览器发出的每一个 HTTP 请求,提示我们选择是要进行定制,还是不做定制而直接提交请求,还是终止当前被截取的请求,然后根据我们的选择决定是打开定制窗口,还是直接向 WEB 服务器提交请 求,还是终止当前的请求。
说明:查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header。

6.  JavaScript Debuger 0.9.87.4

https://addons.mozilla.org/en-US/firefox/addon/216
Venkman 作为Mozilla的调试器,是针对Mozilla(Firefox)的自由工具
说明:firefox 环境下的 JavaScript Debugger, 强大的脚本调试工具。

7.  Live Http Headers 0.15

https://addons.mozilla.org/en-US/firefox/addon/3829
可以用来实时监测发起的http请求和响应,也可以修改请求参数之后重新发起请求。
说明:浏览页面同时记录所有 HTTP headers 。

8.  Add N Edit Cookies 0.2.1.3

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

查看和修改本地的Cookie,Cookie欺骗必备。
说明:查看并且修改 cookies, 不方便的地方是显示所有浏览器的 cookies 而不仅是当前页。

9.  XPath Checker 0.4.1

https://addons.mozilla.org/en-US/firefox/addon/1095
这个工具没什么好多说的,就是安装后可以直接用,在网上看了使用方法,开始没看明白,后来才知道是在页面上点鼠标右键,下面有个view xpath,点击就可以了。
说明:据说可以调试 XPath。

10. YSlow 2.0.6

https://addons.mozilla.org/zh-cn/firefox/addon/5369
YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。
说明:能够帮我们分析web页面比较慢的原因,它是基于 Firebug的,也能分开浏览web页面的元素,比如js,css.

HTML验证

11.  HTML Validator(based on CSE HTML Validator)1.2.3

https://addons.mozilla.org/en-US/firefox/addon/887
HTML Validator是一个Firefox扩展,它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础,Tidy最初是W3C为验证HTML代码开发的一个工具。
说明:著名的 CSE HTML Validator 引擎。

12.  Relaxed the HTML Validator 0.9.5

https://addons.mozilla.org/en-US/firefox/addon/3939
Relaxed the HTML Validator 0.9.5 这是一个做html验证的小插件,可以很容易的检测出页面的错误的html代码。
说明:直接在当前页面上进行 HTML validation, 界面清晰直观。

13.  Total Validator 6.2.0

https://addons.mozilla.org/en-US/firefox/addon/2318
软件帮 助你检查你的网页是否符合标准,结果将帮助你迅速地解决问题。
说明:把当前页面在 http://www.totalvalidator.com 做HTML Validation,输出结果用红字进行了语法修正, 比较友好。不过由于通过其他网站验证, 速度有点慢, 并且结果不易保存。

页面设计

14.  MeasureIt 0.3.92

https://addons.mozilla.org/en-US/firefox/addon/539
通过可以绘制在页面任何地方的刻度尺来显示以像素(px)计算的宽度、高度、元素缩进量。
说明:可以测量页面上任何选择区域的长宽, 对界面设计人员非常有帮助。

15.  ColorZilla 2.0.2

https://addons.mozilla.org/en-US/firefox/addon/271
利用ColorZilla 您可以从浏览器中的任一点读取色彩值,快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。
说明:从 页面, 或者调色板上取色, 同时可以缩放页面。

SEO广告

16.  RankQuest SEO Toolbar 3.9.2

https://addons.mozilla.org/en-US/firefox/addon/1471
检查网站在搜索引擎和alexa的状态
说明:SEO 工具插件, 访问一个页面时, 显示此页面的各种排名及 SEO 信息。

17.  Adsense Preview 1.5

https://addons.mozilla.org/en-US/firefox/addon/2132
将谷歌广告放到你的网页上
说明:在当前页面上显示 Google ADs 帮助确定广告位置。

其他工具

18.  HackBar 1.4.2

https://addons.mozilla.org/en-US/firefox/addon/3899
包含一些常用的工具。(SQL injection,XSS,加密等)
说明:快速对字符串进行各种编码的工具, MD5, Base64, URLencode, URLDecode。

19.  Document Map 0.6.1

https://addons.mozilla.org/en-US/firefox/addon/475
显示当前页的标题结构中侧栏让之间快速导航…
说明:提供页面资源结构信息.。

20.  IE View Lite 1.3.5

https://addons.mozilla.org/en-US/firefox/addon/1429
IE View 简装版,将选项集成到了右键关联菜单中,同时增加了一个工具栏按钮。
说明:点右键可以选择在 IE 中打开页面, 有助于跨浏览器调试。

21.  TimeStamp Converter 2.0.0

https://addons.mozilla.org/en-US/firefox/addon/2063
将转换日期和 timestamps.Context 菜单选项将所选的时间戳转换为日期。
说明:除去从上下文中转换, 还可以手动将 timestamp 时间戳与 date/time 转换。

22.  TimestampDecode 0.1.8

https://addons.mozilla.org/en-US/firefox/addon/3208
将所选的编号视为一个时间戳并显示一个已解码的日期/时间。
说明:将选中的数字作为 timestamp 时间戳转换为 date/time。

23.  Fire Encrypter 4.0

https://addons.mozilla.org/en-US/firefox/addon/2063
说明:将文字加密成各种算法的密文, 甚至包括摩尔斯码。

24.  Add-in-one Sidebar

https://addons.mozilla.org/en-US/firefox/addon/1027
全方位多功能侧边栏。
说明:在浏览器左侧增加打开书签, 历史, 插件等的工具条。

目录
相关文章
|
1天前
|
设计模式 开发框架 数据库
Python Web开发主要常用的框架
【5月更文挑战第12天】Python Web开发框架包括Django、Flask、Tornado和Pyramid。Django适用于复杂应用,提供ORM、模板引擎等全套功能;Flask轻量级,易于扩展,适合小型至中型项目;Tornado擅长处理高并发,支持异步和WebSockets;Pyramid灵活强大,可适配多种数据库和模板引擎,适用于各种规模项目。选择框架需依据项目需求和技术栈。
116 2
|
1天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
1天前
|
JSON JavaScript API
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
6 1
|
1天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
9 2
|
1天前
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
9 0
|
1天前
|
Web App开发 前端开发 JavaScript
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
什么是 Web 应用开发领域的 Frontend Fragmentation(前端碎片化)现象
10 0
|
1天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
10 0
|
1天前
|
安全 测试技术 持续交付
在Python Web开发中,测试是一个至关重要的环节
【5月更文挑战第12天】在Python Web开发中,测试至关重要,包括单元测试(unittest模块)、集成测试、功能测试、系统测试、验收测试、性能测试、安全测试和端到端测试。常用的测试工具有unittest、pytest、selenium、requests和coverage。遵循“测试先行”和“持续集成”原则,确保代码质量与稳定性。
141 3
|
1天前
|
编解码 数据库 计算机视觉
LabVIEW开发基于Web数字图像处理
LabVIEW开发基于Web数字图像处理
|
1天前
|
前端开发 JavaScript Java
Java与Web开发的结合:JSP与Servlet
Java与Web开发的结合:JSP与Servlet
12 0