Web 开发工具

本文将介绍一些重要的 FireFox 插件，它们将对开发 Web 服务提供强大的浏览器端调试工具。


FireFox 和扩展插件
FireFox 是 NetScape 放弃商业浏览器 NetScape Navigator 后投入的一个开源的项目。
(不知道有多少人使用过 NetScape 1.x, 2.x, 3.x, 也不知道有多少人还知道 Mosaic...)
总之 FireFox 在 IE 长期垄断市场后异军突起，以其良好的性能，高扩展性赢得了很多青睐(尤其是技术爱好者)。
FireFox 支持扩展插件，所以你可以在 FireFox 上增加各种功能，比如听 MP3，FTP文件，甚至把浏览器变成 Web Server。

FireFox 的官方网站
http://www.firefox.com
FireFox 的扩展插件
https://addons.mozilla.org/en-US/firefox/browse/type:1


下面是我从几百个开发相关的插件中精选出来的好用插件。

------------------------------
开发工具
------------------------------
Web Developer
https://addons.mozilla.org/en-US/firefox/addon/60
by Chris Pederick
Adds a menu and a toolbar with various web developer tools.
Version 1.1.4 — June 5, 2007
说明:
   超强的 web 分析工具, 开发人员必装.


Firebug 1.05 Homepage
https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Visit the Firebug website for documentation, screen shots, and discussion forums:
http://www.getfirebug.com
说明:
   查看, 编辑, Debug 页面的 CSS, HTML, JavaScript.
   超强的开发调试的工具, 开发人员必装.


View Source Chart 2.5.03
https://addons.mozilla.org/en-US/firefox/addon/655
* Draws A Color-Coded Chart of a Web Page's Source Code
说明:
   显示非常好看的源码, 分级缩进, 不同颜色区分.


Tamper Data 9.8.1
https://addons.mozilla.org/en-US/firefox/addon/966
Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.
说明:
   查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header.
   非常好的工具.


Console2 0.3.7
Console2 let's you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements.
说明:
   检查页面上的各种错误, JavaScript, CSS, XML.


JavaScript Debugger 0.9.87
https://addons.mozilla.org/en-US/firefox/addon/216
Venkman is the code name for Mozilla's JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.
说明:
   firefox 环境下的 JavaScript Debugger, 强大的脚本调试工具.


Live HTTP Headers 0.13.1
https://addons.mozilla.org/en-US/firefox/addon/3829
View HTTP headers of a page and while browsing.
说明:
   浏览页面同时记录所有 HTTP headers .


Add N Edit Cookies 0.2.1.2
https://addons.mozilla.org/en-US/firefox/addon/573
Cookie Editor that allows you add and edit "session" and saved cookies.
说明:
   查看并且修改 cookies, 不方便的地方是显示所有浏览器的 cookies 而不仅是当前页.


XPath Checker 0.4.1
https://addons.mozilla.org/en-US/firefox/addon/1095
An interactive editor for XPath expressions. Choose 'View XPath' in the context menu and it will show the editor. You can edit the XPath expression and it incrementally updates the results.
说明:
   据说可以调试 XPath, 没有顾上测试.



------------------------------
HTML 验证
------------------------------
HTML Validator (based on CSE HTML Validator) 1.2.3
https://addons.mozilla.org/en-US/firefox/addon/887
Validates HTML documents using the CSE HTML Validator engine for Windows. Requires CSE HTML Validator for Windows. The lite edition is available for free at http://www.htmlvalidator.com/lite/
说明:
   著名的 CSE HTML Validator 引擎, 不过需要先安装 CSE HTML Validator Lite (Lite 版本是免费的).


Relaxed the HTML Validator 0.9.2 Homepage
https://addons.mozilla.org/en-US/firefox/addon/3939
"Relaxed" is a HTML validator which validates HTML documents using it's own schema definitions written in Relax NG with embedded Schematron patterns.
说明:
   直接在当前页面上作 HTML validation, 界面不错, 更加清晰直观.


Html Validator 0.8.3.9
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The details of the errors are seen when looking the HTML source of the page.
说明:
   当浏览页面时, 状态栏中将显示页面错误信息, 可以通过查看源码来了解这些信息.
   使用 tidy 和 OpenSP (SGML Parser) 分析页面.


Total Validator
https://addons.mozilla.org/en-US/firefox/addon/2318
by Andy Halford
Perform multiple validations and take screen shots in one go. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the Pro desktop tool...
Version 4.1 — June 30, 2007
说明:
   将把当前页面在 http://www.totalvalidator.com 做 HTML validation,
   输出结果用红字进行了语法修正, 比较友好,
   不过由于通过其他网站验证, 速度有点慢, 并且结果不易保存.



------------------------------
页面设计相关
------------------------------
MeasureIt 0.3.6
https://addons.mozilla.org/en-US/firefox/addon/539
Draw out a ruler to get the pixel width and height of any elements on a webpage.
说明:
   可以测量页面上任何选择区域的长宽, 对界面设计人员非常有帮助.


MetaTags 2.3.5.2
This sidebar displays page meta-information (metatags, links, etc.) Has automated search engine submission menu. Features include: Watches currently loaded Web page and automatically updates the sidebar. Displays metatags, links, language, base...
说明:
   在左侧显示 HTML Head 里的各种信息.


ColorZilla 1.0
https://addons.mozilla.org/en-US/firefox/addon/271
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
说明:
   从页面, 或者调色板上取色, 同时可以缩放页面.



------------------------------
SEO 广告相关
------------------------------
RankQuest SEO Toolbar
https://addons.mozilla.org/en-US/firefox/addon/1471
by Vincent Brown
RankQuest SEO(Search Engine Optimization) Toolbar provides you quick access to more than 30 intuitive SEO tools. Alexa Rank and Page Rank provided by Alexa and Google respectively ensures the popularity of the site. Once you download and install the SEO Toolbar you are only one or two clicks away from carrying out most of your day to day SEO...
Version 3.9.1 — June 7, 2007
说明:
   SEO 工具插件, 访问一个页面时, 显示此页面的各种排名及 SEO 信息,
   可以分析词密度, 但仍然不能正确对中文分词.
   比较有用.


Adsense Preview 1.0.1
https://addons.mozilla.org/en-US/firefox/addon/2132
Preview the Google ads that may show on any web page.
说明:
   在当前页面上显示 Google ADs 帮助确定广告位置,
   不过做的不好, 弹出一个很大的页面窗口, 而不是直接更改了当前页面.



------------------------------
有用工具
------------------------------
HackBar 1.1.1 Homepage
https://addons.mozilla.org/en-US/firefox/addon/3899
This toolbar will help you in testing sql injections, XSS holes and site security. It is NOT a tool for executing standard exploits and it will NOT learn you how to hack a site. Its main purpose is to help a developer do security audits on his code. If you know what your doing, this toolbar will help you do it faster. If you want to learn to find security holes, you can also use this toolbar, but you will probably also need a book, and a lot of google
说明:
   一个快速对字符串进行各种编码的工具, MD5, Base64, URLencode, URLDecode


Document Map 0.6.1
https://addons.mozilla.org/en-US/firefox/addon/475
Displays the current page's heading structure in the sidebar, allowing rapid navigation between sections
说明:
   提供非常好的页面资源结构信息.


IE View 1.3.3
https://addons.mozilla.org/en-US/firefox/addon/1429
Lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE. Useful for incompatible pages, or cross-browser testing.
说明:
   点右键可以选择在 IE 中打开页面, 有助于跨浏览器调试.


TimeStamp Converter 1.3.5
https://addons.mozilla.org/en-US/firefox/addon/2063
Converts dates and timestamps.
Context menu option to convert the selected timestamp into a date.
说明:
   除去从上下文中转换, 还可以手动将 timestamp 时间戳与 date/time 转换


TimestampDecode 0.1.4
https://addons.mozilla.org/en-US/firefox/addon/2058
Treats the selected number as a timestamp and displays a decoded date/time
说明:
   将选中的数字作为 timestamp 时间戳转换为 date/time


Fire Encrypter 3.0
https://addons.mozilla.org/en-US/firefox/addon/3208
FireEncrypter is an Firefox extension which gives you encryption/decryption and hashing functionalities right from your Firefox browser, mostly useful for developers or for education & fun.
The new FireEncrypter is ready! (v-3.0, this version contains the following ciphers:
- AES (Rijndael 128Bit)
- Affine
- Caesar
- XOR
- OTP (One Time Pad)
- Vigenere
- Rail Fence
- Morse Encoder
- MD2 Hashing
- MD5 Hashing
- SHA1 Hashing
- SHA256 Hashing
- SHA384 Hashing
- SHA512 Hashing
- Secure password generator.
说明:
   将文字加密成各种算法的密文, 甚至包括摩尔斯码.


All-in-One Sidebar 0.7.1
https://addons.mozilla.org/en-US/firefox/addon/1027
All-in-One Sidebar (AiOS) is an award-winning sidebar control, inspired by Opera's. It lets you quickly switch between sidebar panels, view dialog windows such as downloads, extensions, and more in the sidebar, or view source or websites in the sidebar.
Click on the left edge of your browser window to open the sidebar and get easy access to all your panels.
说明:
   在浏览器左侧增加打开 书签, 历史, 插件 等的工具条.


extEMM 2.0
https://addons.mozilla.org/en-US/firefox/addon/4362
This extension adds a menu button to Firefox allowing the user to restart or close Firefox and re-open with the current tabs. The session is even saved through a reboot. This is a small extension that uses Firefox's internal session save features, light and fast.
说明:
   重启 Firefox , 不但会保留书签还会保留 session.