【翻译】Chrome Developer Tools:网络面板

说明：本文对Chrome Developer Tools系列翻译文章的三篇

原文见https://developers.google.com/chrome-developer-tools/docs/network

Chrome Developer Tools: Network Panel

Chrome Developer Tools:网络面板

The Network panel lets you inspect resources that are downloaded over the network.

在网络面板里能查看资源在网络上下载的情况。

Follow the steps below to explore the Network panel:

按照下面步骤打开网络面板

Open the Google Closure Hovercard demo page.

打开 Google Closure Hovercard demo page

Open the Developer Tools window as described in the How to Access the Developer Tools section of this tutorial.

按照 How to Access the Developer Tools 节打开开发工具窗口

If it is not already selected, select Network panel and reload to collect requests information.

如果没有选择网络面板，选择 Network 面板并且重新加载收集请求信息





This shows a timeline waterfall of network activities. Latency, the time between making the request and the server's first response, is shown in the lighter shade within each bar. The blue and red vertical lines - on the right-hand side in the above screenshot - indicate firing of the DOMContentLoaded and Load events respectively. This helps clarify the time it takes for pages to load and helps you improve your website's load times. You can choose to view all resources, or a sub-set using the All, Documents, Stylesheets, Images, and other scope bars below the panel selection icons.

这里显示一条网络活动的时间瀑布线。
在以上屏幕截图里，右手边蓝色和红色的水平线表明 DOMContentLoaded 和各自的Load事件响应。这帮助清晰页面加载的时间，并且帮助你提升你网站的加载时间。你能选择查看所有的资源，或者通过面板下面的选择图标，只看 All, Documents, Stylesheets, Images和其它范围块的一个子集。

Browser caching can be disabled in the Settings , under "Disable cache". Also, browser cache and cookies can be cleared via context menu

按下"Disable cache"，能够在设置里禁用浏览器缓存。也能通过上下文菜单浏览缓存和cookie。

Status bar button to the right from the Console toggle allows you selecting large or small request rows. In the screenshot above, large rows are visible, in the next ones, small rows.Record button allows you to preserve data in the grid upon page navigation, while Clear button clears the network log immediately.

从右侧控制台状态条按纽切换，允许你选择大的或小的请求栏。在上面的截图里，大列可见。在下一个里，小栏。录制按纽允许你保存页面导航上的数据。而Clean按惯立即清除网络日志。

You can hover over timeline bars to see detailed information on the network timing.

你能hover over （鼠标悬停）时间块来看详细的网络时间。

Request timeline

请求时间线
Select the Timeline drop-down list. You can choose sorting mode for the network grid here.

选择时间线列表，你能选择网络网格的排序模式。







... or click Size column header to see the largest resources downloaded.

或者单击Size栏，看最大下载资源。

Request details

请求细节
Click the hovercard.html entry in the sidebar.

单击hovercard.html进入侧边栏。





Note: You can go back to the network log grid via pressing Esc or clicking a close button to the left of Headers tab.

注意：你能按Esc返回网络日志网格或者关闭关闭按纽到头tab的左边。

This lets you see the data pulled from the network including raw HTTP headers, resource content, cookies that were sent together with the request and request timing information.

这让你看见从网络上拉来的数据，包括原始的HTTP头，cookies，它们随着请求和请求时间信息一起来。