做爲Web開發者，你願給Firefox一次機會嗎？

做爲Web開發者，你願給Firefox一次機會嗎？

做者｜Ibrahim Nergiz譯者｜大愚若智編輯｜覃雲本文從開發者角度介紹了 Mozilla 全新發布的 Firefox Quantum 瀏覽器在諸多方面的改進和加強，尤爲是在 Web 開發者工具方面新增的功能。

友情提示：原文的圖片大多都是動圖，但因爲微信對圖片大小的限制，以及動圖壓縮後變成高糊，爲了保證閱讀質量，小編將動圖換成了png圖，想獲取原圖的讀者可點擊文末原英文連接。

做爲「晚期」八零後的我，對 Firefox 的崛起和衰落至今依然感受歷歷在目。

Firefox 最初做爲開源項目，以 Internet Explorer 6 競爭對手的姿態誕生。當時這是個很棒的項目，由於它爲用戶提供了更多選擇，例如，用戶能夠經過各類擴展得到新的功能，還能夠更改瀏覽器的視覺主題等，每一個人都愛過它。

然而幾年後另外一個重量級選手登場了。這個選手名叫 Chrome，Chrome 發佈後迅速攻城掠地，很快超越了全部對手。實際上，Chrome 在極短的時間裏得到了如此衆多的用戶，成爲 Google 有史以來最有價值的 資產，相信不少人如今就是使用 Chrome 閱讀本文的。

不過咱們仍是先簡單回顧一下吧。做爲開發者，我徹底明白用戶有多難取悅。

隨着各類愈來愈複雜的 Web 技術，以及常規應用程序和軟件逐漸涌現，內存和 CPU 佔用率居高不下的問題開始困擾着你們。

JotForm 開發者團隊的 Deniz 最近就說過：

「我有一部最新款 MacBook Pro，但是在開發（打開 Chrome DevTools）時，電量以肉眼可見的速度耗盡。」

若是你也是開發者，我相信你確定也產生過相似的感覺，或者至少聽周圍的人這樣說過。

你甚至可能會猶豫不決地想着要否則換用 Chrome 以外的其餘瀏覽器算了。

來源：https://twitter.com/firefox/status/930435170288656384

2017 年，在標誌性的初代 Firefox 發佈十多年後，Firefox Quantum 有了質的飛躍，Quantum 面向 Android、Linux、iOS、Mac 和 Windows 平臺隆重發布。

不只有着更美觀的現代化界面，據稱它加載網站的速度比 Firefox 6 快兩倍，同時內存用量比 Chrome 低 30%。

對比視頻：https://youtu.be/YIywpvHewc0

涉足這一領域十多年後，Mozilla 終於找到了一種讓 Firefox 在保持優點的同時，從競爭對手中脫穎而出的新方法，這絕對是個不小的成就。

爲了全面發揮計算機的強大處理能力，他們藉助 Servo、Rust 以及 Quantum/Stylo 等前沿技術重寫了大約四百萬行代碼。

這一切是值得的。由於在我看來，相比其餘瀏覽器，Firefox Quantum 有着絕佳的性能表現。

緣由以下：

支持多種新技術 WebAssembly

在線運行大規模、效果炫目的複雜應用，這是不少開發者最大的夢想。此外隨着在線視頻或圖片編輯、3D 遊戲編輯、VR/AR 等技術的興起，用戶對在線體驗的預期開始一飛沖天。

WebAssembly 是一種全新類型的代碼，相似於底層彙編類語言，但可在現代化瀏覽器中運行。

諸如 Google V八、Mozilla SpiderMonkey 以及 Microsoft Charka 等 JavaScript 引擎在開發過程當中便可針對此類操做提供極爲出色的性能。

截止 2017 年末，咱們就已經能夠藉助 Firefox 運行 Unity 和 Unreal 遊戲引擎，如今這一技術也獲得了其餘主流廠商的支持。

 A-Frame 和 WebVR

虛擬現實（簡稱爲 VR）是近些年最重大的創新之一，而且在手機、瀏覽器，以及 Oculus Rift 和 HTC Vive 等產品方面取得了不錯的進展。

Mozilla 在 WebVR 基礎架構的開發方面扮演了重要角色，同時他們也在努力改善自家新瀏覽器對該技術的支持。藉助（由 Mozilla 支持的）A-Frame，咱們已經能夠用上這個出色的 WebVR 框架。

A-Frame - Make WebVR：一種構建虛擬現實體驗的 Web 框架，能夠藉助 HTML 和 Entity 組件製做在 Vive 上使用的 WebVR 內容……

Mozilla VR：面向開放的 Web 環境免費提供的虛擬現實技術。

 Common Voice 項目

爲了更好地響應用戶的語音命令，Apple Siri、Microsoft Cortana、Amazon Echo 以及 Google Home 在語音識別技術方面構築了極高的專利圍牆。

你猜怎樣？Mozilla 發起了開源的 Common Voice 項目，旨在爲每一個人提供能夠隨意使用的語音識別能力。

Mozilla Common Voice 項目：Common Voice 項目意在提供人人可用的語音識別技術，如今你已經能夠經過貢獻本身聲音的方式提供支持。

任何人均可以向 Common Voice 項目作出本身的貢獻，爲此只需大聲朗讀句子教計算機識別便可。你也能夠幫忙驗證 Common Voice 的轉錄結果，藉此改進識別引擎的質量。

 Firefox Devtools

使用 Firefox DevTools 測試、精益並構建：藉助 Firefox DevTools 提供的「試驗場」學習 CSS 網格佈局（Grid Layout）、Firefox 調試器等技術。

考慮到 Firefox 在上述領域的舉措，你確定也能猜到，DevTools 也包含了諸多的改進。Debugger.html 就是其中之一。最棒的改進呢？Debugger.html 已成爲託管在 GitHub 上的開源項目，所以任何人均可以作出本身的貢獻。

接下來挨個看看 debugger.html 的新增功能吧。

常規功能—檢查工具 更改主題

新的開發者工具提供了三個不一樣的主題選項：暗色、亮色以及 Firebug。儘管主要的開發工做已經中止，但不少人依然在使用備受讚譽的 Firebug 工具。

此外還有一篇專門的博客文章對比了不一樣的配色：Firefox Nightly News 所發佈的 深度文章。

 CSS 網格

CSS 網格佈局是該領域的最新創新之一。經過使用 DevTools，咱們能夠看到本身的「display: grid」特徵元素，還能夠輕鬆地永久性打開或關閉行號（Line number）、區域名（Area name）、延伸線（Extend line）等特徵。

詳情可訪問：https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

 Box 模式

元素的邊緣和縮進值有時候可能很難處理。經過 Box 模式結構，咱們將能夠經過 Margin、Padding 和 Border 等屬性，輕鬆地查看並更改位置佈局。

詳情可訪問：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

 CSS 變量

變量的引入是 CSS 中另外一個重要的創新。雖然目前並不是全部瀏覽器均可支持變量，但之後確定會得到普遍支持。顧名思義，咱們能夠經過該功能爲變量賦予任何值。想知道具體的值是什麼？將鼠標指針懸停上去就清楚了。

詳情可訪問：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

 添加 / 刪除類

按下 DevTools 儀表盤右側的.cls 按鈕，隨後便可針對正在檢查的 HTML 元素輕鬆地添加或刪除 CSS 類。

 懸停

按下右側.cls 按鈕旁邊的按鈕後，就能夠輕鬆地測試當前元素的 Hover、Active 和 Focus 狀態。

 字體族

在檢查元素的同時，還能夠看到元素所使用的字體，以及字體的添加方式。

 動畫

動畫的開發也廣受關注。在以前的文章「如何像專家那樣使用 CSS 動畫」中，我曾簡要介紹過這種動畫。在這裏能夠緩慢地播放動畫，或者追蹤內容的移動方式。

 XPath

不少開發者確定據說過「網頁抓取（Web scraping）」。若是你想使用抓取程序將某些內容從網頁中抓出來，那麼藉助 XPath 將能很輕鬆地肯定元素在頁面上的位置。從上面的動圖中你應該能很明白個人意思了。

控制檯 控制檯日誌

繼續看看控制檯方面的功能。在這裏能夠輕鬆檢查各類對象，此外樹狀的結構鍵使得咱們能夠輕鬆地選中對象並取消這些內容的隱藏。

 Console.group

你知道嗎，經過使用console.group ()和groupCollapsed ()，可讓事件變得更有序易讀。

調試器 斷點

優秀的 JavaScript 調試工具必不可少。經過使用斷點，咱們能夠快速插入斷點並檢查範圍詳情。

 源代碼地圖

SCSS、WebAssembly、TypeScript、Babel……這些 JavaScript 或 CSS 彙編的作法正在逐漸流行。所以瀏覽器內最終顯示的代碼結構一般會被處理爲與最初編寫的結果大相徑庭的內容。但在源代碼地圖（Source Map）的幫助下，咱們能夠直接處理最初的源代碼內容。

 函數搜索 —項目搜索

發現網頁中錯誤的最佳作法之一就是：直接在數量衆多的文件中搜索。

 樣式編輯器

咱們能夠在這個編輯器中看到針對 CSS 編寫的一切內容，例如斷點的使用。

 性能

爲確保網頁，尤爲是包含動畫的網頁能夠快速流暢地渲染，絕對不能忘記 60 fps 的規則。藉此咱們能夠輕鬆地追蹤每一幀的顯示到底用了多長時間。

 網絡監視器

CSS、JavaScript、圖片以及其餘不少類型的資源將直接載入到網絡監視器中，藉此確保瀏覽器能夠正確地解釋頁面並顯示內容。

咱們可使用這些選項進行性能優化：查看文件狀態，肯定上傳所需的時間，以及內容是否能夠被成功加載。

 存儲

用戶訪問咱們的網站時，咱們可使用 Cookie 或本地存儲來保存有關用戶的信息。

該選項可供咱們檢查、編輯、添加或刪除此類信息。

最終感覺

大型公司的商業模式取決於用戶是否會從第三方產品換爲使用本身的專有產品，這樣才能將用戶禁錮在本身的軟件生態體系內。

舉例來講，若是你想在網上觀看 Apple 的主題演講，那麼就只能在 Safari 瀏覽器中打開相應的頁面。若是你想從 iOS 換爲使用 Android，那就和 iMessage 作別吧。

但 Mozilla Firefox 並無創建「專利圍牆」，所以換用 Firefox 瀏覽器這種作法遠比上面提到的那些狀況更簡單。

我也明白，很難說服別人更換瀏覽器，畢竟還要更改使用習慣、快捷鍵、瀏覽器擴展甚至保存的密碼，但我保證，這是值得的。

 附 注 

對於通讀本文看到這裏的你，有一條好消息。如今已經能夠整治無處不在的通知信息了。

 原英文連接

https://medium.com/swlh/calling-all-web-developers-heres-why-you-should-be-using-firefox-983f012d4aec

前端之巔

「前端之巔」是 InfoQ 旗下關注大前端技術的垂直社羣。緊跟時代潮流，共享一線技術，歡迎關注。

 活動推薦

PWA、Web 框架、UI 與動畫、Node... 大前端的下一站在哪裏？前端工程師的價值和成長路徑是什麼？GMTC2018 上，來自 Google、Facebook、BAT 等 60+ 國內外一線前端大牛，將與你面對面探討大前端領域最新技術趨勢和實踐，想要升職加薪就快來吧！掃描下方二維碼或點擊「閱讀原文」瞭解更多大會詳情！

目前大會 8 折熱銷中，團購更優惠，購票諮詢：18514549229（同微信）