Firefox 與網頁設計

December 10, 2005

Firefox 與網頁設計

removed
added

-10,7 +10,7

DOM Inspector 的視窗

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

從「工具」選單裏啟動 Aardvark 接下來我要介紹的擴充套件叫 Aardvark ，這個套件目前釋出到 1.0 1.1 版。它的功能很有趣，不但可以讓妳得知特定物件的 id 或 class ，還可以讓妳進行一些「調整」。要使用這個擴充套件，首先要從「工具」選單裏選「 Start Aardvark 」，接下來當妳把滑鼠游標移到網頁組件上時，就會如圖出現相關資訊的說明：

Aardvark 顯示的資訊：範圍、組件、 class 或 id

Aardvark 會用紅色框框標示出該組件的範圍，並在框框左下角以小標籤顯示該組件為何、其 class 或 id 又為何。這個時候透過鍵盤操作，還可以有一些額外的功能： W 可以讓該組件的範圍變寬而 N 則是變窄， Q 是離開 Aardvark 而 U 是還原最後一次操作， R 是刪除所選的組件而 I 則是刪除所有環繞著所選組件的其他組件然後 E 會刪除該組件的內容， B 是把組件內一律設為白底黑字而 C 都是隨機設定組件的底色， V 是檢視所選組件的原始碼，然後 D 則是移除任何該組件的固定寬度值。

由 Jedi 於 December 10, 2005 03:48 AM 所發表 | 顯示版本變更: 1.6

〈Firefox 與網頁設計〉由 Jedi 製作，所有內容如無特別聲明，一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。

歷史上的今天:

西元 2016 年:

助聽器效益驗證文件更新

西元 2006 年:

NGO Online

西元 2003 年:

西元 2002 年:

迴響

[ 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

給我迴響吧！