网络分析参考Network Analysis reference

在此 Microsoft Edge 开发工具网络分析功能的全面参考中,探索分析页面加载方式的新方法。Discover new ways to analyze how your page loads in this comprehensive reference of Microsoft Edge DevTools network analysis features.

记录网络请求Record network requests

默认情况下,只要开发人员工具处于打开状态,它就会在“网络”工具中记录所有网络请求。By default, DevTools record all network requests in the Network tool, so long as DevTools is open.

“网络”面板

停止记录网络请求Stop recording network requests

若要停止记录请求,请完成以下步骤。To stop recording requests, complete the following steps.

  1. 在“网络”工具上,选择“停止记录网络日志(“停止记录网络日志”)。On the Network tool, choose Stop recording network log (Stop recording network log). 它变为灰色,表示开发人员工具不再记录请求。It turns grey to indicate that DevTools is no longer recording requests.
  2. 当“网络”工具成为焦点时,选择 Control+E(Windows、Linux)或 Command+E(macOS)。Select Control+E (Windows, Linux) or Command+E (macOS) while the Network tool is in focus.

清除请求Clear requests

在“网络”工具上选择“清除”(“清除”),从“请求”表中清除所有请求。Choose Clear (Clear) on the Network tool to clear all requests from the Requests table.

“清除”按钮

跨页面加载保存请求Save requests across page loads

若要跨页面加载保存请求,请在“网络”工具上启用“保留日志”复选框。To save requests across page loads, on the Network tool, turn on the Preserve log checkbox. 开发人员工具将保存所有请求,直到禁用“保留日志”。DevTools saves all requests until you disable Preserve log.

“保留日志”复选框

在页面加载期间捕获屏幕截图Capture screenshots during page load

捕获屏幕截图以分析在等待页面加载时为用户显示的内容。Capture screenshots to analyze what displays for users while waiting for your page to load.

若要启用屏幕截图,请选择“网络设置”,然后在“网络”工具上,启用“捕获屏幕截图”复选框。To enable screenshots, choose Network settings, and on the Network tool, turn on the Capture screenshots checkbox.

在“网络”工具成为焦点时刷新页面以捕获屏幕截图。Refresh the page while the Network tool is in focus to capture screenshots.

截图后,可通过以下方式与之交互。After capturing a screenshot, you interact with it in the following ways.

  • 将鼠标悬停在屏幕截图上以显示截图的位置。Hover on a screenshot to display the point at which that screenshot was captured. 概述”格上将显示一条黄线。A yellow line is displayed on the Overview pane.
  • 选择屏幕的缩略图以过滤截图后发生的任何请求。Choose the thumbnail of a screen to filter out any requests that occurred after the screenshot was captured.
  • 双击缩略图可将其放大。Double-click a thumbnail to zoom into it.

将鼠标悬停在屏幕截图上

更改加载行为Change loading behavior

通过禁用浏览器缓存来模拟首次访问者Emulate a first-time visitor by disabling the browser cache

要模拟首次用户体验你的网站的方式,请启用“禁用缓存”复选框。To emulate how a first-time user experiences your site, turn on the Disable cache checkbox. 开发工具禁用浏览器缓存。DevTools disables the browser cache. 此功能更准确地模拟了首次用户的体验,因为在重复访问时,请求是从浏览器缓存中获得的。This feature more accurately emulates a first-time user's experience, because requests are served from the browser cache on repeat visits.

“禁用缓存”复选框

从“网络条件”抽屉中禁用浏览器缓存Disable the browser cache from the Network Conditions drawer

如果要在其他开发工具面板中工作时禁用缓存,请使用“网络条件”抽屉。If you want to disable the cache while working in other DevTools panels, use the Network Conditions drawer.

  1. 打开“网络条件”抽屉。Open the Network Conditions drawer.
  2. 启用\(或关闭\)“禁用缓存”复选框。Turn on (or off) the Disable cache checkbox.

手动清除浏览器缓存Manually clear the browser cache

要随时手动清除浏览器缓存,请打开“请求”表中任意位置的上下文菜单\(右键单击\),然后选择“清除浏览器缓存”。To manually clear the browser cache at any time, open the contextual menu (right-click) anywhere in the Requests table and choose Clear Browser Cache.

选择“清除浏览器缓存”

模拟脱机Emulate offline

一种称为“渐进式 Web 应用”的新 web 应用程序,,可在服务人员的帮助下脱机运行。A new class of web apps, named Progressive Web Apps, functions offline with the help of service workers. 在构建这种类型的应用程序时,快速模拟没有数据连接的设备可能会很有用。You may find it useful to quickly simulate a device that has no data connection when you are building this type of app.

选择“联机”下拉菜单,在“预设”下搜索,然后选择“脱机”以模拟脱机网络体验。Choose the Online dropdown menu, search under Presets, and choose Offline to simulate an offline network experience.

“脱机”下拉菜单

模拟慢速网络连接Emulate slow network connections

从“在线”下拉菜单中模拟慢速 3G、快速 3G 和其他连接速度。Emulate Slow 3G, Fast 3G, and other connection speeds from the Online dropdown menu.

“限制”下拉菜单

可以选择不同的预设,如慢速 3G 或快速 3G。You may choose from different presets, such as Slow 3G or Fast 3G. 若要添加自定义预设,请打开“限制”菜单,然后选择“自定义” > “添加”。To add your own custom presets, open the Throttling menu, and choose Custom > Add.

开发人员工具会在“网络”工具旁边显示一个警告图标,提醒已启用限制。DevTools displays a warning icon next to the Network tool to remind you that throttling is enabled.

从“网络条件”抽屉模拟慢速网络连接Emulate slow network connections from the Network Conditions drawer

如果要在其他开发工具面板中工作时限制网络连接,请使用“网络条件”抽屉。If you want to throttle the network connection while working in other DevTools panels, use the Network Conditions drawer.

  1. 打开“网络条件”抽屉。Open the Network Conditions drawer.
  2. 从“限制”菜单中选择连接速度。Choose your connection speed from the Throttling menu.

手动清除浏览器 CookieManually clear browser cookies

若要随时手动清除浏览器 Cookie,请将鼠标悬停在“请求”表中的任意位置,打开上下文菜单\(右键单击\),然后选择“清除浏览器 Cookie”。To manually clear browser cookies at any time, hover anywhere in the Requests table, open the contextual menu (right-click), and choose Clear Browser Cookies.

选择“清除浏览器 Cookie”

替代用户代理Override the user agent

要手动替代用户代理,请使用以下步骤。To manually override the user agent, use the following steps.

  1. 打开“网络条件”抽屉。Open the Network Conditions drawer.
  2. 关闭“自动选择”复选框。Turn off the Select automatically checkbox.
  3. 从菜单中选择用户代理选项,或在文本框中输入自定义选项。Choose a user agent option from the menu, or enter a custom one in the text box.

筛选请求Filter requests

按属性筛选请求Filter requests by properties

使用“筛选器”本框按属性(如请求的域或大小)筛选请求。Use the Filter text box to filter requests by properties, such as the domain or size of the request.

如果未显示文本框,则“筛选器”窗格可能已隐藏。If the text box is not displayed, the Filters pane is probably hidden.
有关详细信息,请导航到“隐藏筛选器”窗格For more information, navigate to Hide the Filters pane.

“筛选器”文本框

用空格分隔每个属性,可以同时使用多个属性。You may use multiple properties simultaneously by separating each property with a space. 例如,mime-type:image/png larger-than:1K 显示大于 1 KB 的所有 PNG。For example, mime-type:image/png larger-than:1K displays all PNGs that are larger than 1 kilobyte. 多属性筛选器相当于 AND 操作。The multi-property filters are equivalent to AND operations. OR 当前不支持操作。operations are currently not supported.

支持属性的完整列表。The complete list of supported properties.

属性Property 详细信息Details
domain 仅显示指定域中的资源。Only display resources from the specified domain. 可以使用通配符(*) 包含多个域。You may use a wildcard character (*) to include multiple domains. 例如,*.com 显示以 .com 结尾的所有域名中的资源。For example, *.com displays resources from all domain names ending in .com. 开发工具在自动完成下拉菜单中填充找到的所有域。DevTools populate the autocomplete dropdown menu with all of the domains that are found.
has-response-header 显示包含指定 HTTP 响应头的资源。Displays the resources that contain the specified HTTP response header. 开发工具用找到的所有响应头填充“自动完成”下拉列表。DevTools populate the autocomplete dropdown with all of the response headers that are found.
is is:running 查找 WebSocket 资源。Use is:running to find WebSocket resources.
larger-than 以字节为单位显示大于指定大小的资源。Displays resources that are larger than the specified size, in bytes. 将值设置为 1000 相当于将值设置为 1kSetting a value of 1000 is equivalent to setting a value of 1k.
method 显示通过指定的 HTTP 方法类型检索的资源。Displays resources that were retrieved over a specified HTTP method type. 开发工具用找到的所有 HTTP 方法填充下拉列表。DevTools populate the dropdown with all of the HTTP methods that are found.
mime-type 显示指定 MIME 类型的资源。Displays resources of a specified MIME type. 开发工具用找到的所有 MIME 类型填充下拉列表。DevTools populate the dropdown with all MIME types that are found.
mixed-content 显示所有混合内容资源 (mixed-content:all) 或仅显示当前显示的内容资源 (mixed-content:displayed)。Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed (mixed-content:displayed).
scheme 显示通过未受保护的 HTTP (scheme:http) 或受保护的 HTTPS (scheme:https) 检索的资源。Displays resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).
set-cookie-domain 显示具有与指定值匹配的 Domain 属性的 Set-Cookie 标头的资源。Displays resources that have a Set-Cookie header with a Domain attribute that matches the specified value. 开发工具用找到的所有 Cookie 域填充“自动完成”。DevTools populate the autocomplete with all of the cookie domains that are found.
set-cookie-name 显示具有名称与指定值匹配的 Set-Cookie 标头的资源。Displays resources that have a Set-Cookie header with a name that matches the specified value. 开发工具用找到的所有 Cookie 名称填充“自动完成”。DevTools populate the autocomplete with all of the cookie names that are found.
set-cookie-value 显示具有值与指定值匹配的 Set-Cookie 标头的资源。Displays resources that have a Set-Cookie header with a value that matches the specified value. 开发工具用找到的所有 Cookie 值填充“自动完成”。DevTools populate the autocomplete with all of the cookie values that are found.
status-code 显示与特定 HTTP 状态代码匹配的资源。Displays resources that match the specific HTTP status code. 开发工具用找到的所有状态代码填充“自动完成”下拉菜单。DevTools populates the autocomplete dropdown menu with all of the status codes that are found.

按类型筛选请求Filter requests by type

若要按请求类型筛选请求,请选择“网络”工具上的以下按钮之一。To filter requests by request type, choose the one of the following buttons on the Network tool.

XHRXHR

 

JSJS

 

CSSCSS

 

ImgImg

 

MediaMedia

 

字体Font

 

DocDoc

 

WSWS

WebSocket。WebSocket.

ManifestManifest

 

OtherOther

未列出的任何其他类型。Any other type not listed.

如果按钮不显示,则“筛选器”窗格可能会隐藏。If the buttons do not display, the Filters pane may be hidden.
有关详细信息,请导航到“隐藏筛选器”窗格For more information, navigate to Hide the Filters pane.

要同时启用多个类型筛选器,请按住 Control (Windows、Linux) 或 Command (macOS),然后选择。To enable multiple type filters simultaneously, hold Control (Windows, Linux) or Command (macOS) and then choose.

使用类型筛选器来显示 JS、CSS 和文档资源

按时间筛选请求Filter requests by time

在“概述”窗格中选择并向左或向右拖动,以仅显示在该时间段内处于活动状态的请求。Choose and drag left or right on the Overview pane to only display requests that were active during that time frame. 筛选器为非独占。The filter is inclusive. 将显示在突出显示的时间内处于活动状态的任何请求。Any request that was active during the highlighted time is shown.

筛选出处于非活动状态约 300 毫秒的所有请求

隐藏数据 URLHide data URLs

数据 URL 是嵌入到其他文档中的小文件。Data URLs are small files embedded into other documents. 任何显示在“请求”表中以 data: 开头的请求都是数据 URL。Any request that displays in the Requests table that starts with data: is a data URL.

若要隐藏请求,请关闭“隐藏数据 URL”复选框。To hide the requests, turn off the Hide data URLs checkbox.

“隐藏数据 URL”复选框

排序请求Sort requests

默认情况下,“请求”表中的请求按启动时间排序,但可使用其他条件对表进行排序。By default, the requests in the Requests table are sorted by initiation time, but you may sort the table using other criteria.

按列排序Sort by column

选择“请求”中任何列的标题以按该列对请求进行排序。Choose the header of any column in the Requests to sort requests by that column.

按活动阶段排序Sort by activity phase

要更改瀑布对请求的排序方式,请将鼠标悬停在“请求”表的标题上,打开上下文菜单 \(右键单击\),将鼠标悬停在“瀑布”上,然后选择以下选项之一。To change how the Waterfall sorts requests, hover on the header of the Requests table, open the contextual menu (right-click), hover on Waterfall, and choose one of the following options.

开始时间Start Time

启动的首个请求位于顶部。The first request that was initiated is at the top.

响应时间Response Time

开始下载的首个请求位于顶部。The first request that started downloading is at the top.

结束时间End Time

完成的首个请求在顶部。The first request that finished is at the top.

总持续时间Total Duration

具有最短连接设置和请求或响应的请求位于顶部。The request with the shortest connection settings and request or response is at the top.

延迟Latency

等待响应时间最短的请求位于顶部。The request that waited the shortest time for a response is at the top.

这些描述假设每个选项按最短到最长进行排列。These descriptions assume that each respective option is ranked from shortest to longest. 选择“瀑布”列的标题以反转顺序。Choose the header of the Waterfall column to reverse the order.

按总持续时间排序“瀑布”

分析请求Analyze requests

只要开发人员工具处于打开状态,它就会在“网络”工具中记录所有请求。So long as DevTools are open, it logs all requests in the Network tool.
使用“网络”面板分析请求。Use the Network panel to analyze requests.

显示请求日志Display a log of requests

使用“请求”表可以显示开发工具打开时发出的所有请求的日志。Use the Requests table to display a log of all requests made while DevTools have been open. 若要显示有关每个项目的详细信息,请选择或将鼠标悬停在请求上。To reveals more information about each item, choose or hover on requests.

“请求”表

默认情况下,“请求”表显示以下列。The Requests table displays the following columns by default.

名称Name

资源的文件名或标识符。The filename of, or an identifier for, the resource.

状态Status

HTTP 状态代码。The HTTP status code.

类型Type

请求资源的 MIME 类型。The MIME type of the requested resource.

发起程序Initiator

以下对象或进程启动请求。The following objects or processes initiate requests.

  • 分析程序 Microsoft Edge 的 HTML 分析程序。Parser The HTML parser for Microsoft Edge.
  • 重定向 HTTP 重定向。Redirect An HTTP redirect.
  • 脚本 JavaScript 函数。Script A JavaScript function.
  • 其他 其他一些过程或操作,例如使用链接导航到页面或在地址栏中输入 URL。Other Some other process or action, such as navigating to a page using a link or entering a URL in the address bar.

大小Size

服务器传递的响应头和响应正文的组合大小。The combined size of the response headers plus the response body, as delivered by the server.

时间Time

从请求开始到收到响应中最后一个字节的总持续时间。The total duration, from the start of the request to the receipt of the final byte in the response.

每个请求的活动的可视细分。A visual breakdown of the activity for each request.

添加或删除列Add or remove columns

将鼠标悬停在“请求”表的标题上,打开上下文菜单 \(右键单击\),然后选择选项来隐藏或显示它。Hover on the header of the Requests table, open the contextual menu (right-click), and choose an option to hide or show it. 当前显示的选项旁边都有复选标记。Currently displayed options have checkmarks next to each item.

向“请求”表中添加列

添加自定义列Add custom columns

要向“请求”表中添加自定义列,请将鼠标悬停在“请求”表的标题上,打开上下文菜单\(右键单击\),然后选择“响应标题” > “管理标题列”。To add a custom column to the Requests table, hover on the header of the Requests table, open the contextual menu (right-click), and choose Response Headers > Manage Header Columns.

向“请求”表添加自定义列

显示请求的计时关系Display the timing relationship of requests

使用瀑布显示请求的计时关系。Use the Waterfall to display the timing relationships of requests.
默认情况下,瀑布是按请求的开始时间进行组织的。The default organization of the Waterfall uses the start time of the requests.
因此,最左边的请求比最右边的请求更早开始。So, requests that are farther to the left started earlier than the requests that are farther to the right.

要查看对瀑布进行排序的不同方法,请导航到“按活动阶段排序”。To review the different ways that you may sort the Waterfall, navigate to Sort by activity phase.

“请求”窗格的“瀑布”列。

显示响应正文的预览Display a preview of a response body

若要显示响应正文的预览,请使用以下步骤。To display a preview of a response body, use the following steps.

  1. 在“请求”表的“名称”列下,选择请求的 URL。Choose the URL of the request, under the Name column of the Requests table.
  2. 选择“预览”面板。Choose the Preview panel.

“预览”选项卡在显示图像时最有用。The Preview tab is mostly useful to display images.

“预览”面板

显示响应正文Display a response body

要显示请求的响应主体,请使用以下步骤。To display the response body to a request, use the following steps.

  1. 在“请求”表的“名称”列下,选择请求的 URL。Choose the URL of the request, under the Name column of the Requests table.
  2. 选择“响应”面板。Choose the Response panel.

“响应”面板

显示 HTTP 标头Display HTTP headers

要显示有关请求的 HTTP 标头数据,请使用以下步骤。To display HTTP header data about a request, use the following steps.

  1. 在“请求”表的“名称”列下,选择请求的 URL。Choose the URL of the request, under the Name column of the Requests table.
  2. 选择“标头”面板。Choose the Headers psanel.

“标头”面板

显示 HTTP 标头源Display HTTP header source

默认情况下,“标头”面板按字母顺序显示标头名称。By default, the Headers panel shows header names alphabetically. 若要按接收的顺序显示 HTTP 标头名称,请使用以下步骤。To dsiplay the HTTP header names in the order received, use the following steps.

  1. 打开感兴趣的请求的“标头”面板。Open the Headers panel for the request that interests you. 有关详细信息,请导航到“显示 HTTP 标头”。For more information, navigate to Display HTTP headers.
  2. 单击“请求标题”或“响应标题”部分旁边的查看源Choose view source, next to the Request Header or Response Header section.

显示查询字符串参数Display query string parameters

若要以可读格式显示 URL 的查询字符串参数,请使用以下步骤。To display the query string parameters of a URL in a human-readable format, use the following steps.

  1. 打开感兴趣的请求的“标头”面板。Open the Headers panel for the request that interests you. 有关详细信息,请导航到“显示 HTTP 标头”。For more information, navigate to Display HTTP headers.
  2. 导航到“查询字符串参数”部分。Navigate to the Query String Parameters section.

“查询字符串参数”部分

显示查询字符串参数源Display query string parameters source

若要显示请求的查询字符串参数源,请使用以下步骤。To display the query string parameter source of a request, use the following steps.

  1. 导航到“查询字符串参数”部分。Navigate to the Query String Parameters section. 有关详细信息,请导航到“显示查询字符串参数”。For more information, navigate to Display query string parameters.
  2. 选择“查看源”。Choose view source.

显示 URL 编码的查询字符串参数Display URL-encoded query string parameters

若要以可读格式显示查询字符串参数,但保留编码,请使用以下步骤。To display query string parameters in a human-readable format, but with encodings preserved, use the following steps.

  1. 导航到“查询字符串参数”部分。Navigate to the Query String Parameters section. 有关详细信息,请导航到“显示查询字符串参数”。For more information, navigate to Display query string parameters.
  2. 选择查看 URL 编码Choose view URL encoded.

显示 CookieDisplay cookies

若要显示请求的 HTTP 标头中发送的 Cookie,请使用以下步骤。To display the cookies sent in the HTTP header of a request, use the following steps.

  1. 在“请求”表的“名称”列下,选择请求的 URL。Choose the URL of the request, under the Name column of the Requests table.
  2. 选择“Cookie”面板。Choose the Cookies panel.

“Cookie”面板

显示请求的计时细分Display the timing breakdown of a request

若要显示请求的计时细分,请使用以下步骤。To display the timing breakdown of a request, use the following steps.

  1. 在“请求”表的“名称”列下,选择请求的 URL。Choose the URL of the request, under the Name column of the Requests table.
  2. 选择“计时”面板。Choose the Timing panel.

若要更快地访问数据,请导航到“预览计时细分”。For a faster way to access the data, navigate to Preview a timing breakdown.

有关“计时”面板中可能显示的各阶段详细信息,请导航到“计时细分阶段说明”。For more information about each of the phases that may be displayed in the Timing panel, navigate to Timing breakdown phases explained.

“计时”面板

有关各阶段的更多信息。More information about each of the phases.

有关访问视图的详细信息,请导航至“显示计时明细”。For more information about accessing the display, navigate to Display timing breakdown.

预览计时细分Preview a timing breakdown

要显示请求的计时细分预览,请在“请求”表的“瀑布”列中,将鼠标悬停在请求的条目上。To display a preview of the timing breakdown of a request, in the Waterfall column of the Requests table, hover on the entry for the request.

有关如何在不悬停的情况下访问数据的详细信息,请导航至“显示请求的计时细分”。For more information about how to access the data without hovering, navigate to Display the timing breakdown of a request.

> 预览请求的计时细分

计时细分阶段说明Timing breakdown phases explained

有关“计时”面板中可能显示的各阶段的详细信息。More information about each of the phases that may display in the Timing panel.

排队Queueing

浏览器在以下情况下将请求排队。The browser queues requests when any of the following are true.

  • 存在更高优先级的请求。Higher priority requests exist.
  • 已为同一来源打开了六个(上限)TCP 连接。Six TCP connections are open for the same origin, which is the limit. 仅适用于 HTTP/1.0 和 HTTP/1.1。Applies to HTTP/1.0 and HTTP/1.1 only.
  • 浏览器正在磁盘缓存中短暂分配空间。The browser is briefly allocating space in the disk cache.

停止Stalled

该请求可能由于“排队”中描述的任何原因而停止。The request is stalled for any of the reasons described in Queueing.

DNS 查找DNS Lookup

浏览器正在解析请求的 IP 地址。The browser is resolving the IP address for the request.

初始连接Initial connection

浏览器正在建立包括 TCP 握手/重试的连接和协商安全套接字层。The browser establishes a connection including TCP handshakes, TCP retries, and negotiates a Secure Socket Layer.

代理协商Proxy negotiation

浏览器正在与代理服务器协商请求。The browser is negotiating the request with a proxy server.

已发送请求Request sent

正在发送请求。The request is being sent.

ServiceWorker 准备ServiceWorker Preparation

浏览器正在启动服务工作进程。The browser is starting the service worker.

向 ServiceWorker 请求Request to ServiceWorker

请求正在发送到服务工作进程。The request is being sent to the service worker.

等待中 (TTFB)Waiting (TTFB)

浏览器正在等待响应的首个字节。The browser is waiting for the first byte of a response. TTFB 代表到首个字节的时间。TTFB stands for Time To First Byte. 此计时包括一次往返延迟和服务器准备响应所用的时间。This timing includes one round trip of latency and the time the server took to prepare the response.

内容下载Content Download

浏览器正在接收响应。The browser is receiving the response.

接收推送Receiving Push

浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。The browser is receiving data for this response via HTTP/2 Server Push.

读取推送Reading Push

浏览器正在读取以前接收的本地数据。The browser is reading the local data previously received.

显示发起程序和依赖项Display initiators and dependencies

若要显示请求的发起程序和依赖项,请按住 Shift 并将鼠标悬停在“请求”表中的请求上。To display the initiators and dependencies of a request, hold Shiftand hover on the request in the Requests table. 开发工具颜色:发起程序显示为绿色,依赖项显示为红色。DevTools colors: initiators are shown in green and dependencies are shown in red.

显示请求的发起程序和依赖项

当“请求”表按时间顺序排列时,如果将鼠标悬停在某一行上,则它前面的行将显示绿色请求。When the Requests table is ordered chronologically, if you hover on a line, the line preceding it displays a green request. 绿色请求是依赖项的发起程序。The green request is the initiator of the dependency. 如果在此之上还有另一个绿色请求,则该更高的请求是发起程序的发起程序。If another green request is displayed on the line before that, that higher request is the initiator of the initiator. 等等。And so on.

显示加载事件Display load events

开发人员工具在“网络”工具的多个位置显示 DOMContentLoadedload 事件的计时。DevTools displays the timing of the DOMContentLoaded and load events in multiple places on the Network tool. DOMContentLoaded 事件颜色为蓝色,load 事件颜色为红色。The DOMContentLoaded event is colored blue, and the load event is red.

“网络”面板上 DOMContentLoaded 和加载事件的位置

显示请求总数Display the total number of requests

请求总数列在“网络”工具底部的“摘要”窗格中。The total number of requests is listed in the Summary pane, at the bottom of the Network tool.

注意

此数字仅跟踪自打开开发人员工具以来记录的请求。This number only tracks requests that have been logged since DevTools was opened. 如果在打开开发工具之前发生了其他请求,则不计算这些请求。If other requests occurred before DevTools was opened, those requests are not counted.

自打开开发工具以来的请求总数

显示总下载大小Display the total download size

请求的总下载大小列在“网络”工具底部的“摘要”窗格中。The total download size of requests is listed in the Summary pane, at the bottom of the Network tool.

注意

此数字仅跟踪自打开开发人员工具以来记录的请求。This number only tracks requests that have been logged since DevTools was opened. 如果在打开开发工具之前发生了其他请求,则不计算以前的请求。If other requests occurred before DevTools was opened, the previous requests are not counted.

请求的总下载大小

若要在浏览器解压缩每个项目后验证资源的大小,请导航到“显示资源的未压缩大小”。To verify how large resources are after the browser uncompresses each item, navigate to display the uncompressed size of a resource.

显示导致请求的堆栈跟踪Display the stack trace that caused a request

JavaScript 语句请求资源后,将鼠标悬停在“发起程序”列上以显示请求之前的堆栈跟踪。After a JavaScript statement requests a resource, hover on the Initiator column to display the stack trace leading up to the request.

导致资源请求的堆栈跟踪

显示资源的未压缩大小Display the uncompressed size of a resource

启用“使用大请求行”复选框,然后查看“大小”列的底部值。Turn on the Use large request rows checkbox and then review the bottom value of the Size column.

未压缩资源的示例

导出请求数据Export requests data

将所有网络请求保存到 HAR 文件Save all network requests to a HAR file

若要将所有网络请求保存到 HAR 文件,请完成以下步骤。To save all network requests to a HAR file, complete the following steps.

  1. 将鼠标悬停在“请求”表中的任何请求上,然后打开上下文菜单\(右键单击\)。Hover on any request in the Requests table and open the contextual menu (right-click).
  2. 选择“另存为具有内容的 HAR”。Choose Save as HAR with Content. 开发工具将自打开开发工具以来发生的所有请求保存到 HAR 文件中。DevTools saves all requests that have occurred since you opened DevTools to the HAR file. 无法筛选请求。You are not able to filter requests. 也无法保存一个请求。You are also not able to save a single request.

保存 HAR 文件后,可以将其导入开发工具进行分析。Once you save a HAR file, you may import it back into DevTools for analysis. 只需将 HAR 文件拖放到“请求”表中。Just drag-and-drop the HAR file into the Requests table.

选择“另存为具有内容的 HAR”

将一个或多个请求复制到剪贴板Copy one or more requests to the clipboard

在“请求”表的“名称”列下,将鼠标悬停在请求上,打开上下文菜单 \(右键单击\),将鼠标悬停在“复制”上,然后选择以下选项之一。Under the Name column of the Requests table, hover on a request, open the contextual menu (right-click), hover on Copy, and choose one of the following options.

名称Name 详细信息Details
复制链接地址Copy Link Address 将请求的 URL 复制到剪贴板。Copy the URL of the request to the clipboard.
复制响应Copy Response 将响应正文复制到剪贴板。Copy the response body to the clipboard.
复制为 FetchCopy as Fetch  
复制为 cURLCopy as cURL 将请求复制为 cURL 命令。Copy the request as a cURL command.
全部复制为 FetchCopy All as Fetch  
全部复制为 cURLCopy All as cURL 将所有请求复制为一系列 cURL 命令。Copy all requests as a chain of cURL commands.
全部复制为 HARCopy All as HAR 将所有请求复制为 HAR 数据。Copy all requests as HAR data.

选择“复制响应”

将格式化响应 JSON 复制到剪贴板Copy formatted response JSON to the clipboard

选择网络请求并导航到“标头”窗格。Choose a network request and navigate to the Headers pane. 要复制响应的 JSON 值,请导航到 “请求”有效负载,将鼠标悬停在 JSON 响应内容上,打开上下文菜单\(右键单击\),然后选择“复制值”。To copy the JSON value of a response, navigate to Request payload, hover on the JSON response content, open the contextual menu (right-click), and choose Copy Value.

将属性值从网络请求复制到剪贴板Copy property values from network requests to your clipboard

要将属性值从网络请求复制到剪贴板,请完成以下操作。To copy property values from network requests to your clipboard, complete the following actions.

  1. 打开“标头”窗格。Open the Headers pane.
  2. 打开以下其中一个标头部分。Open one of the following header sections.
    • 请求有效负载 (JSON)Request payload (JSON)
    • 窗体数据Form Data
    • 查询字符串参数Query String Parameters
    • 请求标头Request Headers
    • 响应标头Response Headers
  3. 打开上下文菜单(右键单击)>“复制值”。Open the contextual menu (right-click) > Copy value. 现在可以将该值粘贴到任何编辑器中以查看它。You may now paste the value into any editor to review it.

更改“网络”面板的布局Change the layout of the Network panel

可以展开或折叠“网络”工具用户界面的各部分,以集中重要信息。You may expand or collapse sections of the Network tool UI to focus important information.

隐藏“筛选器”窗格Hide the Filters pane

默认情况下,开发工具显示“筛选器”窗格。By default, DevTools show the Filters pane.
选择筛选器 (筛选器)来隐藏它。Choose Filter (Filter) to hide it.

“隐藏筛选器”按钮

使用大请求行Use large request rows

如需网络请求表中有更多空白,请使用大行。Use large rows when you want more whitespace in your network requests table. 在使用大行时,有些列还提供了更多的信息。Some columns also provide a little more information when using large rows. 例如,“大小”列的底部值是请求的未压缩大小。For example, the bottom value of the Size column is the uncompressed size of a request.

“请求”窗格中大请求行的示例

要启用大行,请启用“使用大请求行”复选框。To enable large rows, turn on the Use large request rows checkbox.

“使用大请求行”复选框

隐藏概述窗格Hide the Overview pane

默认情况下,开发工具显示“概述”窗格。By default, DevTools displays the Overview pane. 若要隐藏它,请关闭“显示概述”复选框。To hide it, turn off the Show Overview checkbox.

“显示概述”复选框

联系 Microsoft Edge 开发工具团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.