title: Firefox 10全新開發者工具，支援網頁3D、HTML、CSS即時檢視
---
**摘要**
如果還沒安裝 Firefox 10 的話，趕快下載來安裝吧！在 Firefox 10 中新增了全新的開發者工具，能輕易的分析網頁排版及架構，並檢視HTML及CSS屬性，還可以直接修改語法的屬性和參數，對於開發者來說，在修改網頁架構時這個功能可以讓開發者輕易的調整細部參數，尤其是在調整CSS部份更是方便。 除此之外，開發者工具還支援 CSS Transforms，可以讓原本平面的網頁變成 3D 樣式，以前需要特別安裝第三方擴充套件才能使用的功能，現在直接內建在 Firefox 中！轉換成3D樣式有什麼好處呢？開發者可以更輕易的瞭解網頁的架構，對於初學者來說，這個功能也能夠在學習時輔以瞭解CSS區塊配置型態，可說是炫又實用呢！
**Category**
- [Firefox](https://www.soft4fun.net/category/software/internet/firefox)
- [新聞](https://www.soft4fun.net/category/tech/news)
- [網路相關](https://www.soft4fun.net/category/software/internet)
**Tag**
- [CSS Transforms](https://www.soft4fun.net/tag/css-transforms)
- [Firefox10](https://www.soft4fun.net/tag/firefox10)
- [網頁3D化](https://www.soft4fun.net/tag/%e7%b6%b2%e9%a0%813d%e5%8c%96)
- [開發者工具](https://www.soft4fun.net/tag/%e9%96%8b%e7%99%bc%e8%80%85%e5%b7%a5%e5%85%b7)
**圖片清單**
- 
- 
- 
- 
- 
- 
- 
---
如果還沒[安裝 Firefox 10](http://www.soft4fun.net/news/%E6%9C%80%E6%96%B0-firefox-10-0-%E6%AD%A3%E5%BC%8F%E7%89%88%E6%90%B6%E5%85%88%E4%B8%8B%E8%BC%89.htm) 的話，趕快下載來安裝吧！在 Firefox 10 中新增了全新的**開發者工具**，能輕易的分析網頁排版及架構，並檢視HTML及CSS屬性，還可以直接修改語法的屬性和參數，對於開發者來說，在修改網頁架構時這個功能可以讓開發者輕易的調整細部參數，尤其是在調整CSS部份更是方便。
除此之外，開發者工具還支援 CSS Transforms，可以讓原本平面的網頁變成 3D 樣式，以前需要特別安裝第三方擴充套件才能使用的功能，現在直接內建在 Firefox 中！轉換成3D樣式有什麼好處呢？開發者可以更輕易的瞭解網頁的架構，對於初學者來說，這個功能也能夠在學習時輔以瞭解CSS區塊配置型態，可說是炫又實用呢！
> 相關連結：
> - [Firefox 10 簡介](http://www.soft4fun.net/news/%E6%9C%80%E6%96%B0-firefox-10-0-%E6%AD%A3%E5%BC%8F%E7%89%88%E6%90%B6%E5%85%88%E4%B8%8B%E8%BC%89.htm)
> - [下載 Firefox 10](http://4fun.tw/LPDO)
#### 開發者工具使用介紹
開啟方式：按住〔Shift〕+〔Ctrl〕+〔I〕即可開啟 Firefox 內建的開發者工具。
▲ 啟用後在瀏覽器下面會顯示工具列，點選「檢測」後將滑鼠游標移到網頁上就可會顯示該區塊使用的屬性。
▲ 另外開發者工具有3種檢視模式。首先介紹HTML模式，在開發者工具列右邊點選「HTML」按鈕即可開啟HTML簡視窗格，將滑鼠移游標網頁上任何位址，HTML檢視窗格中的程式碼就會隨著游標停駐的位置顯示該區域的HTML。
▲ 另外一種則是「樣式」，使用方法與HTML相同。當開啟樣式功能時，網頁右側會出現樣式表顯示滑鼠游標停駐區域的所套用的CSS。
▲ 在樣式功能中，可以隨意開啟或停止某個CSS語法的運行或修改其參數，調整版面配置時非常好用。
▲ 最特別的 3D 功能可以讓網頁架構變成 3D 化，有助於觀察架構。
#### Firefox 開發者工具介紹影片
#### 介面更勝 Firebug
相信網頁開發者早就已經開始使用 Firebug 這款擴充套件，Firefox 10 的開發者工具功能與 Firebug 相去不遠，但是以兩者的介面比較起來，我認為 Firefox 開發者工具顯得比較直觀，而且在字體、字型和視窗的部份都有特別安排（Firebug 是將所有內容顯示在擴充套件視窗中），雖然功能上不及 Firebug 專業，但對於單純網頁學習、研究或開發人員來說是相當不錯的好工具。