Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about the functions of Chrome developer tools, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following. I hope you can get something from this article.

When we crawl different sites, the implementation of each site page is different, we need to analyze each site. Are there any general methods of analysis? I share the "routine" of my crawling analysis. On a website, the tool I use most to analyze pages and crawl data is the Chrome developer tool.

The Chrome developer tool is a set of Web development and debugging tools built into Google Chrome that can be used to iterate, debug, and analyze websites. Because many domestic browser kernels are based on Chrome kernel, domestic browsers also have this function. For example: UC browser, QQ Browser browser, 360browser, etc.

Next, let's take a look at some of the more powerful features of the Chrome developer tool.

01 elements panel

Through the Element panel, we can see the tag where we want to grab the rendered content of the page, what CSS attributes to use (for example: class= "middle"), and so on. For example, if I want to grab the dynamic title on my Zhihu home page, right-click on the page and select "check" to enter the elements panel of the Chrome developer tool.

In this way, we can quickly locate a DOM node on the page, and then extract the relevant parsing statements. Move the mouse to the node, then right-click the mouse and select "Copy" to quickly copy the parsing statements of Xpath, CSS elector and other content parsing libraries.

02 Network Panel

The Network panel records information about each network operation on the page, including detailed time-consuming data, HTTP request and response headers, Cookie, and so on. This is what we usually call grabbing bags.

The Filters pane, which I often use to filter out some HTTP requests, such as asynchronous requests made using Ajax, pictures, videos, and so on.

The largest pane is called Requests Table, and this table lists each HTTP request retrieved. By default, this table is sorted in chronological order, with the oldest resources at the top. Click the name of the resource to display more information.

Headers is the Headers that displays the HTTP request. We can see the request through this way, as well as the request parameters carried, and so on.

Preview is a preview of the result of the request. It is generally used to view the requested pictures, which is more powerful for grabbing pictures.

Response is the result returned by the request. The general content is the source code of the entire site. If the request is asynchronous, the result is usually Json text data.

Cookies can see the Cookies carried by the request and the Cookies returned by the server. Sometimes you need to use Response's Cookies. For example, a page must be logged in to see it.

After reading the above, do you have any further understanding of the functions of the Chrome developer tools? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.