2009年4月20日 星期一

Firefox addon: 網頁設計篇

Firefox的addon很多,以下是針對網頁設計時有用的一些東西

版面設計
ColorZilla: 偵測顏色
Image Zoom: 可放大縮小圖片
MeasureIt: 可在網頁上拉出像素尺規測量距離
Stylish: 自訂網站與使用介面的外觀

======================================================================



JS開發
ExecuteJS: 提供Javascript Console功能
JavaScript Debugger
JavaScript Deobfuscator: 顯示網頁上所執行的JS
jiffy: 顯示網頁中的Javascript timer
Obtrusive JavaScript Checker: 尋找HTML元素中的JS事件和對應的JS連結

======================================================================


網頁偵錯
Firebug: 功能強大的網頁開發工具
Codeburner for Firebug: 提供使用Firebug時的HTML/CSS參考文件
Firecookie: 提供Firebug檢視Cookie功能
FirePHP: 提供Firebug開發AJAX的功能 (要注意使用,只要啟用就會攔截網站內容,照成無法用預設方式存取的狀態)
Inline Code Finder for Firebug: 找出網頁內元件的JS碼
Web Deveper: 和Firebug類似的工具,比較簡單易用。適合用於檢視整體網頁。

DOM Inspector: 查看網頁DOM
Inspect Context: 搭配DOM Inspector使用可檢視特定node下的內容
InspectThis: 搭配DOM Inspector使用,檢視目前節點下的內容
Hackbar: 測試網站是否有SQL Injection漏洞的手動工具

======================================================================


檢查網頁/站台回應
Live HTTP headers: 另開一個sidebar顯示瀏覽網頁時產生的Header資訊
Modify Headers: 可以添加、修改、過濾http request表頭
CookieWatcher: 將指定的cookie值顯示在狀態列
Extended Cookie Manager: 可用於修改特定網站的Cookie值
HttpFox: 檢查HTTP封包
Poster: 方便自訂URL請求的工具
refspoof: 假造reference資料工具
Tamper Data: 檢視/修改 http表頭,也可以對request進行追蹤和記時

======================================================================


字碼:
base64=>Encoder: 將圖片檔轉成字串,可搭配URI:DATA使用
Charset Switcher: 制定個別網站的預設編碼
Unicode Input Tool/Converter: 轉換輸入字元成UNICODE編碼,不過應該還能幫助轉換成Html-encode。功能完整,不過會另開視窗。
UnicodetoHTML:將Unicode轉換成HTML-encode。功能較弱,不過只佔用sidebar。

======================================================================

加密
xssme
fireE Encrypter


======================================================================


設定Firefox:
Consile2: 錯誤主控台
JavaScript Options: 提供Firefox更強大的JavaScript管理功能

======================================================================


還不確定功用的:
Character Identifier:
InspectorWidget: 在DOMi下添加按鈕和文本選單?
Pixel Perfiect: Firebug套件,似乎可以在網頁上加圖?

======================================================================

其他
regular Expressions Tester: 測試正規表達式作用
backword: 閱讀英文時的翻譯
blocksite: 避免閱讀文章時開啟奇怪的網站
LeechBlock: 可根據時間設定站台是否能夠瀏覽,避免你浪費時間在一些奇怪的站台上 XD
FoxyProfy: 管理Firefox proxy的套件
Tor-Proxy.NET toolbar: 讓你使用TOR-Proxy做為proxy瀏覽網站
Imacros for firefox: 自動化套件
PageDiff: 比對網頁內容的套件
ScrapBook: google筆記套件
Server Switcher: 在開發用伺服器和正式伺服器間轉換的套件

======================================================================

開發Extension時使用
Extension Developer: 提供製作Firefox Extension時的包裝流程
Extension Manager Extended: 提供Firefox Extension的ID和安裝目錄資訊(可移動到該目錄)
Greasemokey: 使用者腳本管理器,要安裝JS後才有功用
Greasefire: 提供可使用於Greasemonkey的JS檔案



附註:
chrome的意思:chrome是黑客的俚语(这里的黑客不是指进行非法勾当的人)。
chrome 是从汽车工业的俚语来的,估计是给车子上光之类(抱歉我不懂机械)
在设计领域 chrome 的意思就是对系统功能没什么大的帮助,但是却能吸引用户的部分。
出自不一样的眼睛,http://www.firefox.net.cn/forum/viewtopic.php?p=195710

沒有留言: