Firefox 29 開發者工具一窺：CSS source map、網絡性能分析等
英文原文：CSS source map support, network performance analysis & more – Firefox Developer Tools Episode 29
Firefox 29 已經放到曙光版（Aurora）發布頻道了（譯注：每一個 Firefox 正式版的出爐都要經歷 Nightly、Aurora 和 Beta 三個階段。），這意味著現在是時候透露這個版本的重要更新了，這篇文章將帶你一窺新版開發者工具的究竟。
開發者工具更美觀了
除了添加新的功能，我們還更新了暗色主題和亮色主題的外觀。我們對亮色主題做了大幅修改，而且整個工具箱在兩種主題下都保持了統一的設計。你可以在工具箱中的設置里更換主題。（詳見開發備注）
網絡監視器
網絡監視器向你展示了瀏覽器花了多少時間來加載網頁的各個文件。這項功能能幫助你分析網站在首次加載時和存在緩存時的網絡性能。（詳見開發備注）
點擊網絡（Network）面板中的秒表圖標即可開啟性能分析工具。詳見下面的視頻，你也可以在 MDN 上查看更多詳情。
在新版 Firefox 中你能夠以 Data URI 的格式復制圖片請求。只需在圖片請求上右擊，在右鍵菜單中選擇「Copy Image as Data URI」，數據就會保存到你的系統剪切板了。（詳見開發備注）
元素審查
我們之前已經對元素選擇器做了改動，把元素選擇器按鈕與其他按鈕放到了同一行。（詳見開發備注）
我們在 CSS 規則視圖中添加了 CSS 變形（transform）預覽框。現在，如果你把鼠標懸浮到一條 CSS 變形規則上，你就會在彈出的預覽框里看到效果了。馬上下載 Firefox Nightly 版或者曙光版來體驗一下 CSS 變形的效果 吧。（詳見開發備注）
CSS 規則視圖現在支持粘貼多條 CSS 語句，例如
background: #ccc;color: red
（詳見開發備注）
和在網絡面板里一樣，你也可以在這里以 Data URI 的格式復制圖片了。（詳見開發備注）
樣式編輯器
樣式編輯器現已支持 CSS source map（詳見開發備注），并且能夠自動填充 CSS 屬性和值。（詳見開發備注）
想要看到更多相關內容？你可以查看我們先前發布的一篇文章，介紹了如何在開發者工具中借助 source map 來編輯 Sass 和 Less 文件
調試器
我們在源文件列表的右邊添加了一個經典的調用堆棧列表。（詳見開發備注）
調試器里還新增了一個「啟用/禁用所有斷點」按鈕。它可以一次性地切換所有斷點的狀態，方便開發者在正常模式和調試模式間快速地切換。（詳見開發備注）
你還可以從調試器里直接選中并審查 DOM 節點。如果你的鼠標懸停在變量列表中一個 DOM 節點變量上，頁面中對應的元素就會高亮。如果你點擊下圖所示的審查器圖標，該節點就會在元素審查標簽中被打開。控制臺輸出的節點也支持這個功能。（詳見開發備注）
新的代碼美化工具（pretty printer）現在可以保留源代碼中的注釋了。我們使用的美化工具是開源的 pretty-fast，它相當地快。如果你發現它運行很慢，不妨告訴我們。（詳見開發備注）
控制臺
我們對 console.trace 進行了改進。調用堆棧與控制臺其他輸出展示在一起，并且每行末尾有一個指向對應源代碼的鏈接，點擊鏈接可以在調試器里將其打開。（詳見開發備注）
同時我們還改進了控制臺里對象的輸出，根據對象類型的不同，控制臺會展示不同的細節。（詳見開發備注）
代碼編輯器
開發者工具里的很多小工具都提供代碼編輯功能，比如便簽（Scratchpad）、樣式編輯器和調試器。新版的代碼編輯器有如下更新：
- 代碼折疊。（詳見開發備注）
- 支持 Emacs 快捷鍵和 VIM 快捷鍵。打開 about:config 頁面，將 devtools.editor.keymap 設置為 vim 或者 emacs，然后重啟開發者工具即可。（詳見開發備注）
- 支持 ES6 語法高亮。（詳見開發備注）
非常感謝本次更新中開發者工具的開發者們（一共有 43 位）！這里有一份 Firefox 29 解決的開發者工具相關 bug 列表
如果你有任何反饋建議、bug 提交、需求申請或其他問題，可以一如既往地在本文下方評論，或者與我們的團隊聯系 @FirefoxDevTools。
譯文鏈接： http://blog.jobbole.com/60204/