IE9 developer Tool "network capture" feature detailed

In the IE7 era, Microsoft launched a "developer Tool" toolbar, download the installation, you can in IE more convenient analysis of HTML code, the page to understand the elements of the attributes, style and other information, for developers to debug the Web page is particularly convenient. Because this function lets ie besides can browse, can also very good debugging, therefore, "the developer Tool" smoothly became a built-in function in the IE8, the user can press F12 to use directly when browsing the webpage.

By today's IE9, the tool has been enhanced and a new Network tab has been designed. With it, we can capture the loading of each element when the browser opens the page. With this functionality, both developers and ordinary users have a lot of use.

We know that the Web page is based on HTML code, which includes the pages of the required images, script files, flash files, such as the various elements of the Web address (URL), display methods and so on. When browsing the web, the browser downloads the files one at a time through its URL and saves them to the browser cache so they can be displayed.

Start using

Press the F12 key on the keyboard on the Web page that you want to debug or analyze. You can open developer tools, in addition to the original HTML, CSS, console, script, and other tabs, in the main interface, there is a "Network" tab, which is today to introduce the protagonist son:

Clicking the Start Capture button allows the program to begin capturing network traffic in the current IE9 browser page, typically including HTTP requests and their returned data, such as Web page code and related pictures, scripts, and other resources. However, if the page is already turned on, there will be no network traffic behavior, and no results will be shown here.

Press F5 to let the Web page reload, when all the connections and downloads from the browser can be found through the Network tab.

Summary view

All the HTTP request and receive behavior that has been caught is listed in the summary view that is seen by default. When we visit the Bing home page, we get this result:

This allows the user or developer to learn the key information for each HTTP request:

URL: The network file path that the request gets.

Method: The method of HTTP request, get or post.

Results: The standard request result code or state information, such as 200 means that the desired file is returned smoothly, 404 indicates that the file does not exist, 503 indicates that the server is temporarily unavailable, and 500 indicates an internal error occurred on the server.

Type: The MIME type of the request file.

Received: The file size that is currently downloaded. If the file is larger, such as a video file, this value may increase as the download continues.

Spent: The time that the download request took from the beginning to the completion of the download.

Initiator: An Event or Web Page object that triggers the download behavior. For example, the download of the Web page itself is generated by the user's refresh operation, so this will be "refresh":

Timing: The Gantt Chart visually shows how long each step in the file download process takes. This is useful for us to understand and analyze the loading of Web pages:

When performing a refresh, we often find that a lot of files are downloaded in 304, which means that the Web page has been opened in the browser and cached the relevant files, and the server contacted, the server responded that this file has not been changed, you can directly use the cached version. As a result, these files are actually used by the browser cache for direct reads, are not downloaded in the refresh operation, and the files are loaded at a small time, less than 1 milliseconds:

If you want the Web page to be completely reloaded, you can click the Developer toolbar menu, select the Clear browser cache command, or select clear the browser cache for this domain, and then refresh the page, and the page will be completely downloaded and refreshed by the server.

Detailed View

Select a file in the list in the summary view, and then click the go to Detailed View button to go to the Detailed View panel. Here, we can look at more detailed information about this download request:

This information includes the HTTP request headers, the request body, the response headers, the response body, the cookies associated with the file's download behavior, the initiator, and more detailed timing information than the summary view. In other words, the detailed view has shown us how the browser communicates with the server at the protocol level, and this information is invaluable to developers and debugging staff, making it easy to debug the site.

For example, in the Timing tab, we can see the start time and duration of each step of the download request, and the advanced user can determine whether the network is in bad condition or the server causes the page to load slowly. Developers and debuggers can also use this information to find bottlenecks in page loading, and to make the page load faster by adjusting the code or the server:

The magical uses of "network capture"

When the user sees the content that likes on the net, must want to save them to the computer, later can appreciate slowly, also can become the material that makes other material. For the text, we copy and paste, for the picture, you can also save the right key, but encountered video files are more headaches. Previously, we either searched for thousands of files from the hidden Internet cache, found the video that was needed, or had a special software to get its URL and then download it. With IE9, this task can be done directly using the network capture feature and the download manager in Developer tools.

For example, in the summary view, we can easily see the accurate download of the online video that is watching, then use the download tool or IE9 built-in download manager, you can easily download these videos saved!