Firefox 29 已經(jīng)放到曙光版（Aurora）發(fā)布頻道了（譯注：每一個 Firefox 正式版的出爐都要經(jīng)歷 Nightly、Aurora 和 Beta 三個階段。），這意味著現(xiàn)在是時候透露這個版本的重要更新了，這篇文章將帶你一窺新版開發(fā)者工具的究竟。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供神木企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為神木眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

開發(fā)者工具更美觀了

除了添加新的功能，我們還更新了暗色主題和亮色主題的外觀。我們對亮色主題做了大幅修改，而且整個工具箱在兩種主題下都保持了統(tǒng)一的設(shè)計。你可以在工具箱中的設(shè)置里更換主題。（詳見開發(fā)備注）

網(wǎng)絡(luò)監(jiān)視器

網(wǎng)絡(luò)監(jiān)視器向你展示了瀏覽器花了多少時間來加載網(wǎng)頁的各個文件。這項功能能幫助你分析網(wǎng)站在***加載時和存在緩存時的網(wǎng)絡(luò)性能。（詳見開發(fā)備注）

點擊網(wǎng)絡(luò)（Network）面板中的秒表圖標(biāo)即可開啟性能分析工具。詳見下面的視頻，你也可以在 MDN 上查看更多詳情。

在新版 Firefox 中你能夠以 Data URI 的格式復(fù)制圖片請求。只需在圖片請求上右擊，在右鍵菜單中選擇「Copy Image as Data URI」，數(shù)據(jù)就會保存到你的系統(tǒng)剪切板了。（詳見開發(fā)備注）

元素審查

我們之前已經(jīng)對元素選擇器做了改動，把元素選擇器按鈕與其他按鈕放到了同一行。（詳見開發(fā)備注）

我們在 CSS 規(guī)則視圖中添加了 CSS 變形（transform）預(yù)覽框。現(xiàn)在，如果你把鼠標(biāo)懸浮到一條 CSS 變形規(guī)則上，你就會在彈出的預(yù)覽框里看到效果了。馬上下載 Firefox Nightly 版或者曙光版來體驗一下 CSS 變形的效果 吧。（詳見開發(fā)備注）

CSS 規(guī)則視圖現(xiàn)在支持粘貼多條 CSS 語句，例如

background: #ccc;
color: red

（詳見開發(fā)備注）

和在網(wǎng)絡(luò)面板里一樣，你也可以在這里以 Data URI 的格式復(fù)制圖片了。（詳見開發(fā)備注）

樣式編輯器

樣式編輯器現(xiàn)已支持 CSS source map（詳見開發(fā)備注），并且能夠自動填充 CSS 屬性和值。（詳見開發(fā)備注）

想要看到更多相關(guān)內(nèi)容？你可以查看我們先前發(fā)布的一篇文章，介紹了如何在開發(fā)者工具中借助 source map 來編輯 Sass 和 Less 文件

調(diào)試器

我們在源文件列表的右邊添加了一個經(jīng)典的調(diào)用堆棧列表。（詳見開發(fā)備注）

調(diào)試器里還新增了一個「啟用/禁用所有斷點」按鈕。它可以一次性地切換所有斷點的狀態(tài)，方便開發(fā)者在正常模式和調(diào)試模式間快速地切換。（詳見開發(fā)備注）

你還可以從調(diào)試器里直接選中并審查 DOM 節(jié)點。如果你的鼠標(biāo)懸停在變量列表中一個 DOM 節(jié)點變量上，頁面中對應(yīng)的元素就會高亮。如果你點擊下圖所示的審查器圖標(biāo)，該節(jié)點就會在元素審查標(biāo)簽中被打開?？刂婆_輸出的節(jié)點也支持這個功能。（詳見開發(fā)備注）

新的代碼美化工具（pretty printer）現(xiàn)在可以保留源代碼中的注釋了。我們使用的美化工具是開源的 pretty-fast，它相當(dāng)?shù)乜?。如果你發(fā)現(xiàn)它運行很慢，不妨告訴我們。（詳見開發(fā)備注）

控制臺

我們對 console.trace 進(jìn)行了改進(jìn)。調(diào)用堆棧與控制臺其他輸出展示在一起，并且每行末尾有一個指向?qū)?yīng)源代碼的鏈接，點擊鏈接可以在調(diào)試器里將其打開。（詳見開發(fā)備注）

同時我們還改進(jìn)了控制臺里對象的輸出，根據(jù)對象類型的不同，控制臺會展示不同的細(xì)節(jié)。（詳見開發(fā)備注）

代碼編輯器

開發(fā)者工具里的很多小工具都提供代碼編輯功能，比如便簽（Scratchpad）、樣式編輯器和調(diào)試器。新版的代碼編輯器有如下更新：

• 代碼折疊。（詳見開發(fā)備注）
• 支持 Emacs 快捷鍵和 VIM 快捷鍵。打開 about:config 頁面，將 devtools.editor.keymap 設(shè)置為 vim 或者 emacs，然后重啟開發(fā)者工具即可。（詳見開發(fā)備注）
• 支持 ES6 語法高亮。（詳見開發(fā)備注）
  

非常感謝本次更新中開發(fā)者工具的開發(fā)者們（一共有43位）！這里有一份 Firefox 29 解決的開發(fā)者工具相關(guān) bug 列表

如果你有任何反饋建議、bug 提交、需求申請或其他問題，可以一如既往地在本文下方評論，或者與我們的團(tuán)隊聯(lián)系 @FirefoxDevTools。

原文鏈接： Brian Grinstead   翻譯： 伯樂在線 - 方應(yīng)杭

譯文鏈接： http://blog.jobbole.com/60204/

本文標(biāo)題：Firefox29開發(fā)者工具一窺:CSSsourcemap,性能分析
文章轉(zhuǎn)載：http://uogjgqi.cn/article/cdihcoe.html