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

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

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

[[109689]]
[[109694]]

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

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

[[109695]]

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

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

[[109690]]

元素審查

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

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

[[109691]]

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

background: #ccc;
color: red

（詳見(jiàn)開(kāi)發(fā)備注）

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

樣式編輯器

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

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

[[109692]]

調(diào)試器

我們?cè)谠次募斜淼挠疫吿砑恿艘粋€(gè)經(jīng)典的調(diào)用堆棧列表。（詳見(jiàn)開(kāi)發(fā)備注）

[[109696]]

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

[[109697]]

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

[[109698]]

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

控制臺(tái)

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

[[109699]]

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

[[109700]]

代碼編輯器

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

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

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

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

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

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