Gea-Suan Lin's BLOG

Saturday, June 03, 2006

Web Developer

會裝 上的 ,其實是因為 深情推薦,裝了以後也不知道幹嘛 XD

直到這陣子寫 HTML code 寫到受不了,決定來看 有什麼功能可以用,才發現這個 Extension 是個神兵利器 XD

第一個,看某個物件的屬性。

在畫面上按下 Ctrl-Shift-F (或是用 Toolbar 上的 Information,選 Display Element Information) 之後,移動游標,在左上角就會出現這個區塊的各種屬性,像是字體資料 (逛網頁時看到喜歡的字型不用再翻 HTML 與 CSS)、物件的巢狀架構 (想要變更 CSS 時超方便,在找 CSS 靈異現象時也超方便):

Web Developer

第二個,看 Javascript 產生出來的 HTML code。

有時候會透過 Javascript 產生一些 code,但產生出來的 HTML 在最簡單的 View Source (即 Ctrl-U 所跳出來的視窗) 裡面看不到。而 Web Developer 提供了 View Generated Source 的功能:

Web Developer (View Generated Source)

第三個,看網站的結構性。

用 View Topographic Information (在 Information 下) 可以看出來網站的結構性,舉布丁大長輩的網站當範例,上面這張是原來的頁面,而下面這張是點選 View Topographic Information 後的頁面。

下面那張裡,預設是黑色,每多一層就變白一點。 算是比較乾淨的網頁,如果你拿 blog.yam.com 的首頁抓出來看,你會看到在奇怪的地方多出一堆奇怪的白色框框 XD:

Web Developer (Original)

Web Developer (View Topographic Information)

當然,還有很多很好用的功能,有空的時候可以隨便抓兩個網頁對照看看,其實會利用 學到不少東西 (以及對於網頁設計的感覺)。

Links to this post:

Create a Link

<< Home