對(duì) Firefox DevTools （開發(fā)者工具）來說，2017 年是值得紀(jì)念的一年。我們更新并改造了 UI、重新創(chuàng)建三個(gè)面板、解決不計(jì)其數(shù)的程序缺陷，并且發(fā)布多項(xiàng)新功能。通過這一連串的努力，我們不但把 DevTools 的使用體驗(yàn)變得更快更好，也為 2018 年和將來的新功能及改進(jìn)打下扎實(shí)的基礎(chǔ)。Mozilla 兢兢業(yè)業(yè)地打造更好的工具和功能，以協(xié)助開發(fā)者運(yùn)用 JavaScript 框架和 CSS Grid 等最新技術(shù)和標(biāo)準(zhǔn)來建立網(wǎng)站。

在前瞻 Firefix DevTools 的下一步前，先和我們一起快速回顧一下 Devtools 的過去。

2016 年

2016年，DevTools 團(tuán)隊(duì)啟動(dòng)轉(zhuǎn)型計(jì)劃，讓開發(fā)者工具停止對(duì)于 XUL 及 Firefox 專用 API 的支持，而全面改用現(xiàn)代的網(wǎng)絡(luò)技術(shù)。這一系列轉(zhuǎn)型計(jì)劃的第一個(gè)項(xiàng)目就是 debugger.html。

Debugger.html 不是 Firefox Debugger 的升級(jí)換代，而是重新打造的成果。DevTools 團(tuán)隊(duì)從零開始重建 repo，以打造一個(gè)具備可重復(fù)使用 React 組件和 Redux 儲(chǔ)存（store）模塊的調(diào)試器。

此現(xiàn)代化架構(gòu)的效果很快見效。所有東西都變得簡(jiǎn)單易懂、容易測(cè)試和預(yù)測(cè)，而且，debugger.html 也能用于 Firefox 以外的平臺(tái)，包括 Chrome 和 Node。

除此以外，我們?cè)?016 年也推出以現(xiàn)代化網(wǎng)絡(luò)技術(shù)設(shè)計(jì)的全新響應(yīng)式設(shè)計(jì)模式。

2017 年

去年，我們延續(xù) 2016 年展開的工作，重建 Firefox DevTools 的組件（并陸續(xù)加入新功能），讓開發(fā)者工具變得更快和更穩(wěn)定。我們還發(fā)布了讓瀏覽器速度和性能大躍進(jìn)的 Firefox Quantum。

調(diào)試器（Debugger）

始于 2016 年的 debugger.html 開發(fā)工作終于開花結(jié)果，隨著 Firefox 56 發(fā)布于各平臺(tái)，同時(shí)還加入新功能與更新，包括：搜索工具改善、框架調(diào)用堆棧（framework call-stacks）、異步步進(jìn)（async stepping）等等。

控制臺(tái)

全新的 Firfox 控制臺(tái)也隨 Firefox Quantum 上線而落地。新的控制臺(tái)不但有了新的 UI，連程序都是以 React 和 Redux 重寫而成，另還推出幾項(xiàng)改進(jìn)，例如：日志組收閉及檢查文本中對(duì)象的功能。

網(wǎng)絡(luò)監(jiān)視器（Network Monitor）

Firefox 57（Firefox Quantum）還推出新的網(wǎng)絡(luò)監(jiān)視器。新的網(wǎng)絡(luò)監(jiān)視器也有新 UI，而且也是使用 React 和 Redux 等現(xiàn)代網(wǎng)絡(luò)科技所打造而成。此外，它還加強(qiáng)了篩選的 UI、新增網(wǎng)絡(luò)過濾等新功能。

CSS Grid 布局面板

Firefox 57 加入了全新的 CSS Grid 布局面板。鑒于 CSS Grid 為網(wǎng)頁(yè)設(shè)計(jì)帶來的革命性變革，我們想為設(shè)計(jì)和開發(fā)人員提供建立與檢查CSS Grid 布局的好工具。這篇 Hacks 文章提供了該面板功能的詳細(xì)介紹，其中特別值得一提的是可視化呈現(xiàn)網(wǎng)格的覆蓋（overlay）、顯示網(wǎng)格區(qū)域名稱和互動(dòng)的網(wǎng)格輪廓等功能。

Photon UI

為了配合 Firefox Quantum 和新 Photon UI 上線，DevTools 主題的視覺設(shè)計(jì)也重新調(diào)整，把外觀變得更簡(jiǎn)潔流暢之外，還加強(qiáng)了易讀性。

2018 和未來

這一系列的成果讓 Firefox DevTools 的未來令人期待。利用現(xiàn)代化網(wǎng)絡(luò)技術(shù)，與使用 XUL 和 Firefox 專用 API 的時(shí)候相比，建立、測(cè)試和布署新功能的速度已顯著改善。

那么，下一步的計(jì)劃是什么？ 以下是一些進(jìn)行中的工作：

改良布局與設(shè)計(jì)的工具

時(shí)間來到 2018 年，以繪圖程序制作的靜態(tài)設(shè)計(jì)已經(jīng)被更現(xiàn)代的工具取代！通過在瀏覽器中設(shè)計(jì)，設(shè)計(jì)人員可以更自由地實(shí)驗(yàn)和創(chuàng)新，同時(shí)還能更快建立好網(wǎng)頁(yè)。在過去一年里與數(shù)百名開發(fā)者請(qǐng)教的過程中，我們深深體會(huì)到社區(qū)對(duì)更好的瀏覽器設(shè)計(jì)工具的殷殷期盼。

CSS Grid 布局面板推出后獲得一致好評(píng)，我們?cè)谙矏傊H，也聽到大家希望獲得更多設(shè)計(jì)、建立和檢查布局工具的聲音，所以，我們推出了 Firefox 頁(yè)面查看器（Inspector），以簡(jiǎn)化 Flexbox 程序代碼的編寫工作。

更好的框架工具

2017 年對(duì) JavaScript 框架（如 React 和 Vue）具有指標(biāo)性意義。另外，一些素有口碑的老牌框架（如 Angular 和 Ember）也持續(xù)成長(zhǎng)和改進(jìn)。這些框架正在改變我們?yōu)榫W(wǎng)絡(luò)創(chuàng)造工具的做法。對(duì)于 Firefox DevTools 的未來，我們滿懷期待，希望能為使用框架設(shè)計(jì)的開發(fā)者提供更好的工具。

更好的 UI

在我們的眼里，F(xiàn)irefox DevTools UI 永遠(yuǎn)都有可以改進(jìn)的空間，還會(huì)更好。我們將繼續(xù)與 Firefox 開發(fā)者社區(qū)合作，不斷測(cè)試和推出更新。

在 GitHub 新上架的項(xiàng)目

前年，當(dāng)我們著手建立 debugger.html 時(shí)，我們展開了新的旅程。我們決定在 GitHub 上建立項(xiàng)目。我們不只找到更多的新貢獻(xiàn)者，也有幸得到不少美言。社區(qū)告訴我們，它的程序代碼非常容易鎖定、管理和使用。今年，我們還會(huì)找機(jī)會(huì)把項(xiàng)目放到 GitHub 上，敬請(qǐng)期待。

助我們一臂之力

有什么好想法嗎？ 找到新的 bug 了嗎？ 有想要抱怨的事情嗎？ 2018 年起，我們想要更認(rèn)真聽 DevTools 使用者的聲音。對(duì)我們來說，您的意見非常重要?？赏ㄟ^下面幾個(gè)方式加入社區(qū)：

加入 Slack 頻道

您可加入 devtools.html Slack 社區(qū)。您也能在 irc.mozilla.org 的 #devtools 頻道找到我們。