December 10, 2005

傳送至 Kindle
互動式隨選列印/另存成 PDF

[黑客人生]Firefox 與網頁設計

說真的,硬派網頁設計師要是沒有 Firefox 的話,幾乎可以說是活不下去了;這不祇是因為 Firefox 對網頁標準的支援程度比 IE 好上許多,更是因為 Firefox 上實在有太多太多好用的工具了。

於是,在布丁長輩的慫恿下,我整理了一些妳可能也會感興趣的 Firefox 擴充套件……

首先,不特別多人知道、但是其實根本就綁兜在 Firefox 裏面的,是一個叫 DOM Inspector 的好東西;顧名思義,這個工具的功能就是讓妳檢視/偵察 DOM (Document Object Model, 文件物件模型) 的。然而在多數版本的 Firefox 中,預設並不會把這個工具一併裝起來,所以安裝的時候妳得要選擇自訂安裝
安裝 Firefox 時選擇自訂安裝,不要使用標準安裝
然後確保「開發者工具」有納入安裝項目中,這麼一來妳的 Firefox 就會具備 DOM Inspector 的功能了。
在自訂安裝中,選取「開發者工具」

從「工具」選單裏選取 DOM Inspector這個 DOM Inspector 可以怎麼用呢?很簡單,首先從 Firefox 的「工具」選單裏選取 DOM Inspector ,然後就會看到這樣的視窗:
DOM Inspector 的視窗
在這個視窗中,妳可以看到整個網頁的文件物件模型架構,妳可以點選任何節點,得知其屬性值;另外,妳也可以點選圖中左上角的圖示,然後再用滑鼠游標點選網頁上的某個地方, DOM Inspector 就會告訴妳那個地方是文件中的那個節點,非常好用。除此之外, DOM Inspector 也可以用來取得 CSS 資訊及 JavaScript 資訊,算是一開始學習網頁設計時,不可或缺的良伴。

從「工具」選單裏啟動 Aardvark接下來我要介紹的擴充套件叫 Aardvark ,這個套件目前釋出到 1.1 版。它的功能很有趣,不但可以讓妳得知特定物件的 id 或 class ,還可以讓妳進行一些「調整」。要使用這個擴充套件,首先要從「工具」選單裏選「 Start Aardvark 」,接下來當妳把滑鼠游標移到網頁組件上時,就會如圖出現相關資訊的說明:
Aardvark 顯示的資訊:範圍、組件、 class 或 id
Aardvark 會用紅色框框標示出該組件的範圍,並在框框左下角以小標籤顯示該組件為何、其 class 或 id 又為何。這個時候透過鍵盤操作,還可以有一些額外的功能: W 可以讓該組件的範圍變寬而 N 則是變窄, Q 是離開 Aardvark 而 U 是還原最後一次操作, R 是刪除所選的組件而 I 則是刪除所有環繞著所選組件的其他組件然後 E 會刪除該組件的內容, B 是把組件內一律設為白底黑字而 C 都是隨機設定組件的底色, V 是檢視所選組件的原始碼,然後 D 則是移除任何該組件的固定寬度值。

接下來要介紹的是一個小工具,叫 ColorZilla ,目前釋出到 0.8.3.1 版。這個工具用起來很簡單,首先用滑鼠在 Firefox 畫面左下角的滴管圖示上點一下:
滴管圖示
這時候滑鼠游標就會變成十字形(準星),然後當妳把滑鼠游標移動到任何地方時, ColorZilla 就會顯示出游標所在位置的色彩資訊(包括 RGB HEX 值以及顏色代碼等):
ColorZilla 顯示著色彩資訊
(補充說明一下,布丁長輩要求提示說,各位不妨在那個滴管圖示上按個滑鼠右鍵,會發現很多東西喔……)

再來要介紹的是 Document Map ,目前釋出到 0.4 版,功能是藉由網頁內的標題組件(也就是 h1, h2, h3, h4, h5 等),來建立所謂的「文件地圖」。因此,當妳想要檢視自己做出來的網站是否結構清楚、層次分明,就不能錯過這個擴充套件。使用 Document Map 的時候,要先從檢視選單裏叫出 Document Map 這個資訊方塊列:
使用 Document Map 資訊方塊列
然後在左方的資訊方塊列中,就會按照網頁的結構層次,把所有的標題組件列出來。這個時候,如果妳用滑鼠點一下被列出來的標題組件,瀏覽視窗中的位置也會跟著跳過去:

再來要說的是 Fangs ,目前釋出到 0.9.4 版,功能是把網頁模擬成純文字瀏覽器所會看到的樣子,所以當妳特別專注於網頁親和力的話,這個工具可能會有些幫助。

緊接著的是一個很殘酷的擴充套件,叫 HTML Validator ,目前釋出至 0.7.6 版。怎麼說殘酷呢?因為這個擴充套件會隨時檢驗目前網頁是否為有效的 HTML ,並且以圖示顯示驗證結果:
HTML Validator 的驗證結果
這時如果把滑鼠游標移到驗證結果圖示上,還會顯示更詳細的數據:
HTML Validator 的詳細驗證結果
所以啦,任何有瑕疵的網頁,當下就會被抓包,沒有逃過的機會。

當然不是祇有這樣子而已。 HTML Validator 除了驗證 HTML 之外,也能做一點簡單的親和力驗證,而且由於這個擴充套件係根據 HTML Tidy (HTML 美容程式) 所寫成的,所以它還兼具了幫妳替網頁原始檔「整型美容」的功效,實在是好用啊!

再來是 linkToolbar ,這個擴充套件目前釋出到 1.1.0.1 版,功能是協助導覽。大致上他會去看網頁裏面的 link 詮釋資料,然後就可以讓看網頁的妳很方便地移動到網站最上層、上一層、第一篇、前一篇、後一篇、最後一篇的頁面,以及其他相關頁面(例如聯絡作者、授權資訊、其他版本……等等),由此妳也可以用來檢視妳所寫的網頁是否也提供了這些資訊,以增進親和力:
導覽工具列
要特別說明的是,本來安裝了這個擴充套件後,這些導覽按鈕會自動地出現在 Firefox 的右下角,可是現在不知道為什麼,他們不會出現了,所以妳得自己從「檢視」「工具列」「自訂」把這些按鈕放到工具列上。

接下來這個擴充套件比較工程師導向,叫 Live HTTP Headers ,功能是直接監視伺服器傳來的 HTTP 標頭。因為有的時候,網頁設計師們會遭遇無法解決的奇怪問題,例如明明指定了語言為中文,可是頁面總是被當作英文開啟,許多這種問題,其實都來自於伺服器沒有正確組態所致,而這個擴充套件正可以幫助妳釐清這種冤屈。

下一個要介紹的擴充套件可以說是 ColorZilla 的遠親,叫 MeasureIt ,目前釋出到 0.3.5 版,其功能顧名思義就是度量螢幕上各種東西的長度。在使用上也跟 ColorZilla 很像,首先就是以滑鼠點一下左下角的尺標圖示:
尺標圖示
這時候網頁的色彩會變淡,彷彿蓋上了一層薄紗,然後妳可以用滑鼠任意畫出方框,而這個擴充套件則會告訴你這個方框的長度與寬度:

當妳得要錙銖必較地調整各種尺寸時,就會明白這個擴充套件有多重要了。

然後要講的是 mozCC 這個擴充套件。如果妳跟我一樣還在用 Firefox 1.0.7 的話,請裝 1.1.0 版;如果妳已經換到 Firefox 1.5 的話,請裝 1.1.4 版。這個擴充套件的功能很單純:就是辨識並顯示出網頁裏的創用 CC 授權資訊,所以妳可以知道自己有沒有弄錯。當網頁內嵌有創用 CC 授權資訊的詮釋資料時, Firefox 的右下角就會出現相對應的創用 CC 授權條款圖示:
創用 CC 授權圖示
這時如果妳用滑鼠點擊這個圖示,就會出現一個視窗,告訴妳更多細節:
mozCC 的詳細結果

緊接著又是個噁心巴拉的擴充套件,叫 Platypus ,目前釋出至 0.51 版,這個擴充套件會動態地建立 greasemonkey 腳本,讓妳可以用「所見即所得」的方式,編輯任何妳看到的網頁!
Platypus 的工具列

如果妳是多語系網頁的設計人員,那麼妳不能錯過這個 Quick Locale Switcher 擴充套件。這個擴充套件目前釋出至 1.25 版,功能就是迅速切換欲索取網頁的「語系」,所以妳可以藉此檢查伺服器的運作是否正常、各種不同語言版本的網頁又是否運行如意。除了這個擴充套件外,目前釋出至 1.3.2005092701 版的 Popup ALT Attributes 和 1.4.2005110501 版的 XHTML Ruby Support 擴充套件,也是增進 Firefox 支援的好朋友,不容錯過。

上面列了這麼多輔助工具,但是硬派網頁設計師一定不會放過網頁原始碼。因此接下來要介紹的兩個擴充套件,就都跟網頁原始碼有關。首先是 View formatted source ,這個擴充套件目前釋出至 0.9.3.4 版,利用這個擴充套件來檢視網頁原始碼時,可以看到被整理得相當整齊的結果:

這個源碼檢視不但會把連結的其他檔案(例如 JavaScript 和 CSS 等)給放進來,而且也可以把成對的標籤「折疊」起來,非常方便。至於另一個擴充套件則叫 View Rendered Source Chart ,目前釋出了免費的 1.2.03 版以及售價 1 美元的 1.3 版。這擴充套件所呈現出來的網頁原始碼,則是用不同顏色的方框,標示出原始碼的結構關係:
View Rendered Source Chart 所呈現的原始碼

最後,別忘了還有老字號的 Web Developer 擴充套件,他目前推出到第 0.9.4 版,具有各式各樣強力的功能,所以別忘了無論如何裝起來吧!
Web Developer 的工具列

以上這些祇是我自己有安裝、而且跟網頁設計有關的 Firefox 擴充套件;因為我自己目前還在用 Firefox 1.0.7 ,所以一些描述甚麼的或許會跟在用 Firefox 1.5 的人相左,就請多運用各位自己的頭腦吧!當然,如果妳發現了甚麼好用的延伸套件,卻又不在我的列表上的,也請讓我知道吧,謝謝!

(+) 於 所發表 | 顯示版本變更: 1.6 |
[創用 CC 授權條款]
Firefox 與網頁設計〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
歷史上的今天:
迴響
[ 1 : 靜態鏈結 ]

太感謝了!
原本只在 Firefox 用 Web Developer,沒想到還有那麼多方便的工具

Yuren Ju 發表於 December 10, 2005 10:22 AM
[ 2 : 靜態鏈結 ]

呵呵,同上,thanks~

x5 發表於 December 11, 2005 02:37 PM
[ 3 : 靜態鏈結 ]

除了原有的Web Developer之外,我只加裝了Aardvark ,原先有裝的DOM Inspector 我把它移除了,因為太複雜了。

waterbee 發表於 December 12, 2005 11:36 PM
[ 4 : 靜態鏈結 ]

十分有趣的……今天剛更新FireFox1.5版
一堆舊套件完全都不能使用了
沒想到上來你這就看到這篇文章,真的是太巧了
多謝嚕

由 abner 發表於 December 13, 2005 02:07 PM
[ 5 : 靜態鏈結 ]

太感謝Jedi,正在自學JavaScript,幫助很大。其實這次中時舉辦的華文部落格,遺珠之憾應該是您沒參加,不過您可能不屑參加吧,畢竟已經不需要獎項來添花了。

Philipz 發表於 December 18, 2005 11:21 PM
[ 6 : 靜態鏈結 ]

噗,應該說我沒有勇氣去參加吧(笑)!

頒獎典禮時我其實有去,不過大概可以說被冷落了就是。

Jedi 發表於 December 19, 2005 02:06 AM
[ 7 : 靜態鏈結 ]

感謝Jedi兄的這篇文章
請恕小弟轉此連結至telnet://icbbs.shu.edu.tw
中的web_publish一版

由 wingfly 發表於 December 20, 2005 02:43 PM
[ 8 : 靜態鏈結 ]

在下的榮幸 :)

Jedi 發表於 December 20, 2005 03:42 PM
[ 9 : 靜態鏈結 ]

今天在公司用firefox瀏覽網站,有同事看到后說,這個是什麽。我的公司是做IT,突然覺得自己好孤立了。終于在這裡找到一些安慰。謝謝你的訊息。

Ivy 發表於 December 28, 2005 11:53 PM
[ 10 : 靜態鏈結 ]

其實還有一套滿方便的外掛叫做
X-Ray它可以不需要切換原始碼地況態下快速顯示網頁標籤的結構
https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=697
本來firefox有收錄的,但是不知道為什麼現在拿掉了

由 Tung 發表於 January 9, 2006 09:10 AM
[ 11 : 靜態鏈結 ]

感謝 提供這麼多訊息.
不過 firefox 有個 關卡.
那就是 對於javascript 目前 很多 web developer 過於依賴 Jscript (for IE). 而標準可以在firefox 上跑的 要查個api 資源又太少.
實在 是個劣勢!

由 neo.anderson 發表於 January 31, 2006 10:18 PM
[ 12 : 靜態鏈結 ]

ECMAScript

Jedi 發表於 February 1, 2006 01:59 AM
[ 13 : 靜態鏈結 ]

應該這樣說,我不覺得設計出一個在 IE 上很正常,但是拿其他瀏覽器來看就破綻百出、甚至有各種安全漏洞的網頁,是怎樣的「優勢」了。

Jedi 發表於 February 1, 2006 02:00 AM
[ 14 : 靜態鏈結 ]

想問一下你那個...
for IE 的網站親和力檢測bar
裡面關於 AAA AA A A+ 這種檢測
好像都是連過去研考會的網站
enable.nat.gov.tw 去檢測...
但我想要讓他能夠從 http://localhost
傳送本地端檔案去檢測
就像是 Fx 的 Web developer 那樣..

或者 我有裝那個freego (就是研考會下載的那個)
能設定那個檢測bar 把我正在看的這個
http://localhost 的文件
直接送進freego 的軟體檢測嗎?

由 ileadu 發表於 March 4, 2006 03:53 PM
[ 15 : 靜態鏈結 ]

說一下...
我留言後按預覽...
你網頁整個跑掉...
沒看到預覽.. 而且還沒有發表送出的按鈕

差點白po
好險我有檢視你網頁的原始碼發現快速鍵Alt-s
不然就 ooxx

我的環境是 WINXP PRO SP2, FX1.5.0.1

由 ileadu 發表於 March 4, 2006 03:59 PM
[ 16 : 靜態鏈結 ]

寫的真是太棒啦!
獲益良多!
Thank you a lot!
(馬上來試試~)

Elsa 發表於 March 7, 2006 11:13 AM
[ 17 : 靜態鏈結 ]

除了 Web Developer, 另一個也是不可錯過的 extension: FireBug - https://addons.mozilla.org/firefox/1843/ .

由 路人甲 發表於 May 18, 2006 11:05 AM
[ 18 : 靜態鏈結 ]

對了, 忘了介紹一個我最愛的 extension. 沒有它沒辦法工作啊~~

mozex - http://mozex.mozdev.org/ . 我最常用的功能, 就是用外部編輯器來 textarea 的內容. textarea 裡只有最基本的編輯功能, 遠比不上自己慣用的文字編輯器來得順手. 它原本是設計在 mozilla 上使用, 要安裝在 firefox 會有問題, 得花很多功夫讓它正常. 沈寂兩三年之後, 終於有人接手發展了. 現在還在 development revision, 不過可用了.

由 路人甲 發表於 May 22, 2006 10:18 AM
[ 19 : 靜態鏈結 ]

果真是很多好用的工具,小弟想請教一下,有沒有一種 firefox extension 是可以 screen html code? 例如只要我設定一個 keyword. 當在 view 網頁時,遇到符合的 keyword, 就可以觸發另一個程式 (或發出聲音).

謝謝你

由 kevin 發表於 November 10, 2006 02:02 PM
[ 20 : 靜態鏈結 ]

另一個我很愛用的, 就是 Mouse Gestures (http://optimoz.mozdev.org/gestures/). 用 nb 的人可能不會覺得它好用, 但是使用滑鼠的人, 請務必試試. 不用使用鍵盤, 不需把滑鼠移到 menu, 只要一隻滑鼠, 就可以控制 firefox 諸如上一頁, 下一頁, 開新 tab, 關 tab 等等的動作.

路人葵 發表於 December 12, 2006 09:14 PM
[ 21 : 靜態鏈結 ]

DOM Inspector 在Firefox 1.8版本以後就不能用了
可以取代的元件有YSlow+Firebug

由 Jan 發表於 November 30, 2008 01:25 PM
[ 22 : 靜態鏈結 ]

DOM Inspector 一直都是「內建」在各版 Firefox 裡面的。安裝時要選自訂安裝然後確認有勾那個選項即可。

Jedi 發表於 November 30, 2008 01:41 PM
[ 23 : 靜態鏈結 ]

唔,就我所知,Firefox 3 開始已經沒有內建 DOM Inspector 了,必須 自行安裝 的說

風痕影 發表於 December 24, 2008 01:36 PM
給我迴響吧!
個人資訊








是否記住個人資訊?



請依上圖輸入檢核碼:
迴響





Jedi.org: 部落格 | Weblog | 三太子 | 討論 | MTBook | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | + | @ | Flickr | Lytro | tumblr | NSFW