文章翻譯：王韜懿
發(fā)表時間：2015年7月23日
原文作者：Paul Bakaus & the DevTools team
文章分類：全球技術(shù)頭條

關(guān)于本文

谷歌的 Chrome 瀏覽器一直被網(wǎng)友稱道，而如今它又開發(fā)出了新的功能，這次 Google 帶來的是 Chrome 的新的功能。您可以方便的選擇下方的 toolbar 來選擇新的功能 -- 捕捉頁面的結(jié)構(gòu)，咱們來看看這些新的特征吧。

文章內(nèi)容

DevTools 新聞，和它一樣新鮮

在這片文章中第一條新聞是一個小的 meta - 它就是這更新！時不時的至少一個月，我會總結(jié) Chrome 開發(fā)者工具發(fā)生了什么。

當(dāng)我說新鮮的時候，我的意思是：我會介紹在 Chrome Canary 里面的新特征，因此如果您想保持不變，那也非?？?。但是如果您很有冒險精神并且想保持在頂端，這些文章就是為您準(zhǔn)備的。除了最新的特征和 bug 修復(fù)，您會在每一篇文章的最后找到一個我們熱愛的讀者的社區(qū)推動力部分。

無需更多費力，讓我們來看看真實的新聞。

新的 DevTools

Film strip - 就像 Network 和 Timeline 里面的截圖

就在一周之前，我們在實驗之外獲得了一個有重要意義的特征：一個可以捕捉 Network 和 Timeline 的頁面截圖能力。結(jié)構(gòu)

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/filmstrip_network.png" alt="mp4" />

視頻地址

在 Network 面板中，點擊小小的照相機圖標(biāo)就可以開始捕捉結(jié)構(gòu)，然后重新載入這個頁面就可以開始觸發(fā)這個捕捉。除了像用其他工具捕捉的屏幕，比如 WebPageTest ,我們目前只顯示真正從圖像中提取出來的結(jié)構(gòu)。

當(dāng)雙擊其中的一個結(jié)構(gòu)的時候會顯示突起的視圖（然后使用左/右箭頭來定位），當(dāng)結(jié)構(gòu)被真正捕捉的時候鼠標(biāo)經(jīng)過它們會顯示從面板交叉的線條，這允許您修正已經(jīng)加載的部分。這樣一些常見的加載問題更加簡單，比如渲染塊級網(wǎng)頁字體。

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/filmstrip_network01.png" alt="mp4" />

視頻地址

在 Timeline 面板中，您可以通過選中在工具條中的 checkbox 來允許捕捉屏幕。和網(wǎng)絡(luò)面板有一點不同的地方是：在這個案例中，不管有多少實際像素，我們嘗試捕捉像平時我們那樣進行捕捉 － 可以減少在線性刻度與其他行在 Timeline 上的截圖。 不用雙擊去預(yù)加載，視圖中突起的部分在鼠標(biāo)經(jīng)過的時候就會出現(xiàn)。

這兩個方面只是關(guān)于功能和 UX 很小的一部分，我們鼓勵您嘗試新的特征并且在 crbug.com/new 提供建議或者通過 tweet @ChromeDevTools.

Network throttling, 當(dāng)我們在介紹我們的 Device Mode 的時候新增了一個新特征，他在 Network 面板中有了第二個家，因此您可以在一個單獨的面板中做到網(wǎng)絡(luò)最佳化。

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/network_throttling.png" alt="示例圖片" />

這個主頁只是一面鏡子而已：它在 Device Mode 也是可用的，因為當(dāng)在您的網(wǎng)路響應(yīng)的時候模擬壞連接也是非常重要的。

小花絮

• 討厭網(wǎng)絡(luò)時間線上一些怪異的循環(huán)嗎？我們一樣。每一幀的時候我們看到的都是一些點。當(dāng)您的鼠標(biāo)在不斷移動的時候它們看起來就好像形成了線。（https://src.chromium.org/viewvc/blink?revision=198505&view=revision）
• 當(dāng)您在不同設(shè)備之間切換的時候 Device Mode 起到保持方向的效果（https://src.chromium.org/viewvc/blink?revision=198513&view=revision）

社區(qū)推動力

“骯臟下流”的 chrome 工具

http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/down_and_dirty.png" alt="down_and_dirty.png" />

Bret Little 發(fā)布了這個很好的小的演練課程，這需要您有基本的 DevTools 功能，但是也提供了深入的意見或建議。當(dāng)然更多有用的信息在這里，并且更多 DevTools 文檔也在這里。

把 DevTools 變成一個完全的開發(fā)者工具是個很好的主意，這是我們團隊之前夢寐以求的，但是這也將成為一個史詩般的工程。

您是怎樣想的呢？DevTools IDE 難道不是一個白日夢嗎？或者您可以知道它怎么工作嗎？它應(yīng)該是怎樣的呢？讓我們和讀者互動吧！

再見！

Paul Bakaus & the DevTools team

更多IT技術(shù)干貨: wiki.jikexueyuan.com
加入極客星球翻譯團隊: http://wiki.jikexueyuan.com/project/wiki-editors-guidelines/translators.html

版權(quán)聲明：
本譯文僅用于學(xué)習(xí)和交流目的。非商業(yè)轉(zhuǎn)載請注明譯者、出處，并保留文章在極客學(xué)院的完整鏈接
商業(yè)合作請聯(lián)系 wiki@jikexueyuan.com
原文地址：https://developers.google.com/web/updates/2015/07/23/devtools-digest-film-strip-and-a-new-home-for-throttling