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

關(guān)于本文

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

文章內(nèi)容

DevTools 新聞，和它一樣新鮮

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

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

無需更多費(fèi)力，讓我們來看看真實(shí)的新聞。

新的 DevTools

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

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

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

視頻地址

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

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

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

視頻地址

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

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

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

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

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

小花絮

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

社區(qū)推動(dòng)力

“骯臟下流”的 chrome 工具

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

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

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

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

再見！

Paul Bakaus & the DevTools team

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

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