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

開發者工具更美觀了

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

[[109689]]
[[109694]]

網絡監視器

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

[[109695]]

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

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

[[109690]]

元素審查

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

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

[[109691]]

CSS 規則視圖現在支持粘貼多條 CSS 語句，例如

background: #ccc;
color: red

（詳見開發備注）

和在網絡面板里一樣，你也可以在這里以 Data URI 的格式復制圖片了。（詳見開發備注）

樣式編輯器

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

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

[[109692]]

調試器

我們在源文件列表的右邊添加了一個經典的調用堆棧列表。（詳見開發備注）

[[109696]]

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

[[109697]]

你還可以從調試器里直接選中并審查 DOM 節點。如果你的鼠標懸停在變量列表中一個 DOM 節點變量上，頁面中對應的元素就會高亮。如果你點擊下圖所示的審查器圖標，該節點就會在元素審查標簽中被打開。控制臺輸出的節點也支持這個功能。（詳見開發備注）

[[109698]]

新的代碼美化工具（pretty printer）現在可以保留源代碼中的注釋了。我們使用的美化工具是開源的 pretty-fast，它相當地快。如果你發現它運行很慢，不妨告訴我們。（詳見開發備注）

控制臺

我們對 console.trace 進行了改進。調用堆棧與控制臺其他輸出展示在一起，并且每行末尾有一個指向對應源代碼的鏈接，點擊鏈接可以在調試器里將其打開。（詳見開發備注）

[[109699]]

同時我們還改進了控制臺里對象的輸出，根據對象類型的不同，控制臺會展示不同的細節。（詳見開發備注）

[[109700]]

代碼編輯器

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

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

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

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

原文鏈接： Brian Grinstead   翻譯： 伯樂在線 - 方應杭

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