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