Mozilla

Mozilla Firefox

滑鼠游標移過各區塊即可觀看範例。

開發者工具

你曾想過 Web 運作的方式?想動手修改相關設計與程式碼?Firefox 開發者工具可讓你看穿網頁背後的機制,而能進行 Web 的除錯、優化、測試。

Style Editor screenshot

樣式編輯器

樣式編輯器 (Style Editor) 可輕鬆測試、修改網頁的外觀。你可變更任何網頁的設計,且只要修改樣式表,就能立刻看到相關結果。可至「網頁開發者」選單中找到此功能。

Debugger screenshot

除錯器

在原始碼編輯器中設定中斷點之後,只要暫停、執行、觀看指令碼的執行作業,即可迅速找出 JavaScript 碼中的問題。所有指令碼均列在選單之上,你只需輸入檔案的部分名稱就可跳選該檔案。另針對 Firefox OS 與 Firefox for Android,亦支援遠端除錯功能。

Mobile developer tools screenshot

行動開發者工具

適應性設計檢視 (Responsive Design View) 模式,可針對你目前檢視中的網頁輕鬆調整尺寸,確實呈現網頁在任何螢幕上的視覺效果,且均可透過桌機輕鬆完成作業。你也可透過除錯器 (Debugger),對行動裝置所執行的 JavaScript 進行除錯。只要連上 Firefox for Android 或 Firefox OS,同樣可利用桌機上的監控器對行動裝置進行除錯。

Developer Toolbar screenshot

開發者工具列

在開發 Web 時,快速、簡單、直覺的開發者工具列將為你省下許多時間。除了可透過鍵盤輕鬆控制多樣工具之外,亦能在你輸入時自動完成參數與指令。可到「網頁開發者」選單,或直接按下 shift+F2 即可找到該工具列。

Web Console screenshot

網頁主控台

觀看自己網頁中所發生的事件。網頁主控台 (Web Console) 可查看 JavaScript 碼、JavaScript 與 CSS 錯誤、網路活動等的記錄訊息。你可自行篩選所要查看的事件。此外,亦可透過 JavaScript 直接與網頁互動。

進一步了解
Page Inspector screenshot

頁面檢測器

只要選擇你感興趣的頁面元素,即可觀察網頁的樣式結構。對網頁的任一部分按下滑鼠右鍵,點選「檢測元素 (Inspect Element)」;或從「網頁開發者」選單中找到「檢測器 (Inspect)」;或直接按下 ctrl-shift-I (Mac 為 cmd-shift-I) 快捷鍵,都可找到此功能。

進一步了解
Scratchpad screenshot

程式碼速記本

瀏覽器絕對是測試 JavaScript 的絕佳工具,而程式碼速記本 (Scratchpad) 可讓你寫下的程式碼直接與網頁內容互動。程式碼速記本可輕鬆測試你的想法,再將結果複製到你常用的網站開發工具中。在網頁上嘗試各種可能,同樣樂趣無窮。

進一步了解

Firebug

Firebug 附加元件可相容最新版的 Firefox。廣受許多網頁開發者所愛用。

進一步了解
滑鼠游標移過各區塊即可觀看範例。

HTML5 引領創新

Firefox 一直完美支援 HTML5,而除了持續更新版本之外,亦不斷支援更高階的功能。

表單

Mozilla 你好,

我的名字是 。我覺得這個 Demo 很

另外我想反應:Mozilla 應該

已送出!感謝你的意見。

Firefox 建置了 HTML5 表單,並提供新的輸入方式、資料清單支援、新的輸入屬性 (如游標自動定位、欄位提示文字、表單元件、驗證機制、限制條件驗證、自由配置表單元件,還有新的 CSS 選擇器等),將所有特色整合在一起。若需詳細資訊,可至 Hacks 網站

關閉 進一步了解

剖析器

x = - b ± b 2 - 4 a c 2 a

Firefox 具備 HTML5 相容的剖析器 (Parser),內含如網頁內嵌 SVG (inline SVG)新功能,另可透過自有處理器執行並剖析演算法,藉此提高效能。如此可讓 Firefox 剖析演算法更標準,並為跨瀏覽器的一致性打下基礎。

關閉 進一步了解

Video Buffer API

透過影片緩衝 (Buffered) 屬性對 HTML5 影片的支援功能,搭載影片的網頁將可精確得出影片緩衝的進度,而不是根據下載速率與目前串流中的位置,提供百分比數據而已。

進一步了解

支援影片「預載」

影片的「自動緩衝 (Autobuffer)」屬性 (自 Firefox 3.5 起所內含,僅 On/Off 兩種狀態),現已由新的「預載 (Preload)」屬性所取代。只要是包含於網頁內的影片,均可讓開發者控制影片的預載方式。

進一步了解
滑鼠游標移過各區塊即可觀看範例。

CSS 美化網頁

歸功於相關標準已漸趨成熟,Firefox 所滿載的全新與強化 CSS 屬性,已從自有的 CSS 命名空間 (namespace) 納入標準的命名空間。

CSS Transitions

❖✪

Firefox 可支援 CSS 漸變效果 (Transitions)。由於仍屬早期規格,因此仍保留了 –moz 前綴屬性名稱。

關閉 進一步了解

CSS Animations

Firefox 5 即支援 CSS Animations ─ 可定義 CSS keyframes 而建立複雜的動畫。

關閉 進一步了解

-moz-calc()

Firefox 支援 calc 的早期版本 (即自有命名空間的 –moz-calc )。開發者可用簡單表示式指定長度,進而簡化 CSS 頁面配置 (不需再用 divs 形成空格排版)。

進一步了解

-moz-any()

Firefox 另新增特別實用的新 CSS 擴充:-moz-any() 選擇器群組 (Selector grouping)。可提供另一種組合選擇器的方式,避免大量重複指定同樣的選擇器。

進一步了解

-moz-element()

-moz-element 為 background-image 屬性的延伸,可將任何元素作為其他元素的背景。

進一步了解

-moz-placeholder

針對 HTML5 表單中的輸入欄位提示文字,可透過 :-moz-placeholder 改變提示文字的屬性,如色彩或其他屬性。

進一步了解

Border Radius

現已支援 border-radius 屬性,將取代舊版的 -moz-border-radius。

進一步了解

-moz-font-feature-settings

Beau Grand & Fort
klmnABRACADABRANTESQUEopqr
EXTRAORDINAIRE
tprestigieuxu
FULGURANT
Phénoménal
«COLOSSAL!»
incroyable
& modeste avec ça

Firefox 透過 -moz-font-feature-settings 屬性,可更完整支援 TrueType 字型。現已可利用 kerning、ligatures、alternates、real small caps、stylistic sets,還有更多字型變化。

關閉 進一步了解

統一 CSS 單位

Firefox 更改像素解析度,以迎合 Internet Explorer、Safari、Chrome。目前的 1 英吋等於 96 像素。

進一步了解

支援 Physical CSS Unit

針對要使用實際尺寸的特殊情況,Firefox 導入新的 CSS 單位 ─ mozmm。

進一步了解

device-pixel-ratio

-moz-device-pixel-ratio 媒體查詢,將提供「實際裝置像素」與「CSS 像素」的比值。

進一步了解

-moz-tab-size

在繪製文字時,-moz-tab-size 將以空白字元為單位,定義定位字元 (Tab character;U+0009) 的長度。

進一步了解

-moz-focusring

當聚焦任一元素時,Firefox 的 CSS pseudo-selector (即 -moz-focusring),可讓開發者指定元素的聚焦環外觀。在繪製聚焦環時,不同的作業系統有不同的繪製規則。而此參數可讓你控制其外觀,並能兼顧各種平台的規範。

進一步了解

可調整文字區域的尺寸

文字區域預設即可調整尺寸;或可透過新的 resize CSS 屬性關閉該功能。

進一步了解
滑鼠游標移過各區塊即可觀看範例。

全新 API

Firefox 建構了新標準 API,可找出瀏覽器所發生的問題,並有更多方式可讓網頁具備更高的互動性,且線上或離線皆然。

window.matchMedia

Firefox 支援等同於 CSS3 媒體查詢 (Media queries) 的 JavaScript 功能,讓網頁可適應其顯示媒體/裝置的螢幕尺寸。現可取得媒體的多項資訊,如螢幕寬度、解析度、旋轉方位等。

進一步了解

WebSockets

Firefox 可支援與伺服器之間的雙向通訊。WebSockets 將於 Web 上建立即時通訊應用與 HTML5 遊戲。

進一步了解

Server Sent Events

Server Sent Events 可讓伺服器推播訊息至瀏覽器,且該訊息將以網頁事件的形態被偵測。

進一步了解

ECMAScript 5

ECMAScript 5 為新版 JavaScript 語言,具備多項新功能與新 API (如 Strict Mode 和 JSON API)。

進一步了解

WebGL

也就是 Canvas 3D。WebGL 所導入的 API 極為接近 OpenGL ES 2.0,並可用於 HTML5 的 canvas 元素中,進而為 Web 帶來 3D 圖形功能。

關閉 進一步了解

針對檔案上傳元件可支援 .click()

Firefox 可於隱藏的檔案上傳元件上呼叫 .click(),進而帶出作業系統的上傳對話框;意即開發者可自訂上傳元件的外觀,而不需顯示原本 (醜陋) 的檔案上傳元件。如果進一步整合新的 File APIsprogress events,就能創造絕佳的檔案上傳體驗。

進一步了解

支援 File API 中的 .slice

Firefox 可支援 Blob API 與其隨附的 .slice APIs。若使用者只想處理部分檔案,卻又不想將完整的大型檔案載入至記憶體時,就可利用此 API。若要穩定上傳大型檔案,則可搭配某些伺服器程式碼與 JS 程式碼,將大型檔案切割為數個區塊並上傳,亦可自動重傳上傳失敗的區塊,甚至可同步上傳多個區塊。

進一步了解

支援 File API URLs

Firefox 支援 File API 的 .url 屬性。意即只要是來自於 File API 的物件,均可作為 HTML、圖像、視訊等物件,或任何可透過指定 URL 而顯示的物件。

進一步了解

觸控與多點觸控事件

Firefox 可於 DOM 結構上支援觸控與多點觸控事件,而 Windows 7 系統已可用此功能。

進一步了解

偵測 Click-to-Touch

Firefox 透過 mozInputSource 屬性,可辨別是由滑鼠或手指所產生的事件。如此有助於處理觸控與多點觸控事件,並讓 App 能以不同方式處理觸控或滑鼠的事件。

進一步了解

IndexedDB

Firefox 具備早期版本的 IndexedDB。此內部儲存空間標準不僅正蓬勃發展,並仍持續改進中。在此標準穩定之前,仍將處於自有的命名空間。可參閱 IndexedDB primer 以初步了解 IndexedDB API 的使用方式。

進一步了解

FormData

Firefox 另支援新的 FormData 物件,可輕鬆使用於 HTML 表單中。該物件亦具備數個新功能,像是透過 File API 所取得的檔案,可更容易併入表單資料中。

learn more

將 Canvas 作為檔案物件

針對上傳與其他作業,Firefox 可將 Canvas 作為檔案物件以利存取。現在可在 Canvas 上使用 mozGetAsFile() 函式,即可回傳圖像檔案。

進一步了解

Audio Sampling and Generation API

Firefox 的 Audio Data API,可讓開發者讀取、修改、寫入來自於音訊與視訊元素的資料。

進一步了解

更高的安全性

Firefox 支援許多新強化的安全功能,可協助 Web 開發者並保護使用者。

內容安全政策

內容安全政策 (CSP) 為一系列工具,可協助開發者抵擋不同類型的攻擊。特別一提的是,CSP 的工具能減少跨網站指令攻擊、鏈結綁架、封包監聽等攻擊行為。只要網站違反任何規則,Firefox 隨即回傳該網站的違反資訊,一併提升了其他瀏覽器的安全性。

進一步了解

X-Frame-Options

Firefox 支援 X-Frame-Options 標頭,為鏈結綁架 (Clickjacking) 的防禦方式之一。其他瀏覽器均已支援此回應標頭。

進一步了解

HSTS (ForceHTTPS)

Firefox 支援 HTTP Strict Transport Security (HSTS) 標頭。這些標頭用以告知瀏覽器絕不透過未加密的 HTTP 連上網站。

進一步了解

改進 CORS

Firefox 修復了跨來源資源分享 (CORS) 中的某些問題。

進一步了解