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)

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

This entry was posted in Browser, Computer, Firefox, Murmuring, Network, Programming, Software, WWW. Bookmark the permalink.

One Response to Web Developer

  1. FireBug也是很不錯的檢視文件資訊套件,整合了error console(包括JavaScript、CSS)還有DOM Inspector、source viewer,檢視elements的時候也是游標指到哪裡就顯示哪裡的原始碼段落,然後可以切換檢視那個element所適用的style、DOM等等。最主要的特色是它是在主瀏覽區下面跳出一個分割窗格顯示資訊,所以它的資訊是可以copy起來的:p

    不過我自己也沒有好好用過Web Developer就是了,裝了以後總覺得功能超多,很複雜XD

Leave a Reply

Your email address will not be published. Required fields are marked *