Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 - 硬是要學
首頁 » Firefox, 新聞, 網路相關» Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視
Werboy 發表於

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視

文/Werboy

如果還沒安裝 Firefox 10 的話,趕快下載來安裝吧!在 Firefox 10 中新增了全新的開發者工具能輕易的分析網頁排版及架構,並檢視HTML及CSS屬性,還可以直接修改語法的屬性和參數,對於開發者來說,在修改網頁架構時這個功能可以讓開發者輕易的調整細部參數,尤其是在調整CSS部份更是方便。

廣告,請繼續往下閱讀...

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 82820b61f405

除此之外,開發者工具還支援 CSS Transforms,可以讓原本平面的網頁變成 3D 樣式,以前需要特別安裝第三方擴充套件才能使用的功能,現在直接內建在 Firefox 中!轉換成3D樣式有什麼好處呢?開發者可以更輕易的瞭解網頁的架構,對於初學者來說,這個功能也能夠在學習時輔以瞭解CSS區塊配置型態,可說是炫又實用呢!

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 3D

相關連結:

開發者工具使用介紹

開啟方式:按住〔Shift〕+〔Ctrl〕+〔I〕即可開啟 Firefox 內建的開發者工具。

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 2

▲ 啟用後在瀏覽器下面會顯示工具列,點選「檢測」後將滑鼠游標移到網頁上就可會顯示該區塊使用的屬性。

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 html

▲ 另外開發者工具有3種檢視模式。首先介紹HTML模式,在開發者工具列右邊點選「HTML」按鈕即可開啟HTML簡視窗格,將滑鼠移游標網頁上任何位址,HTML檢視窗格中的程式碼就會隨著游標停駐的位置顯示該區域的HTML。

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 78501b22d808

▲ 另外一種則是「樣式」,使用方法與HTML相同。當開啟樣式功能時,網頁右側會出現樣式表顯示滑鼠游標停駐區域的所套用的CSS。

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 2_3

▲ 在樣式功能中,可以隨意開啟或停止某個CSS語法的運行或修改其參數,調整版面配置時非常好用。

Firefox 10全新開發者工具,支援網頁3D、HTML、CSS即時檢視 3d

▲ 最特別的 3D 功能可以讓網頁架構變成 3D 化,有助於觀察架構。

Firefox 開發者工具介紹影片

介面更勝 Firebug

相信網頁開發者早就已經開始使用 Firebug 這款擴充套件,Firefox 10 的開發者工具功能與 Firebug 相去不遠,但是以兩者的介面比較起來,我認為 Firefox 開發者工具顯得比較直觀,而且在字體、字型和視窗的部份都有特別安排(Firebug 是將所有內容顯示在擴充套件視窗中),雖然功能上不及 Firebug 專業,但對於單純網頁學習、研究或開發人員來說是相當不錯的好工具。

關於

3C科技部落客,硬是要學共同創辦人,台灣部落客社群(TBC)共同發起人。熱愛發掘、體驗及分享各類科技產品。

Email:werboy@soft4fun.net

Facebook 網友留言

站內留言

[X]
取得更多 3C 新玩意和優惠資訊,立刻加入粉絲團!
關閉

Close