Chrome DevTools

Oct 30, 2019

Introduction

You may know Chrome is a web browser developed by Google and it’s a really good browser, though it’s notorious by its bad RAM control. However, when you’re learning a Web page(for example, you’re coding a Web crawler 网页爬虫), Chrome could help you a lot by its wonderful development tools.

P0uewy.md.png

To open the DevTools, chose the View menu then Developer->Developer Tools.

P0ux08.png

You could see the DevTools has many functions, in this passage, we would talk some of them that you could use to analyze a website.

Elements

You may know a website is made up from some elements. These elements are in tags like . In the DevTools, you can easily see the hierarchical relationships among the elements. You could click the small icon on the left-top of the DevTools, then click the elements on the webpage to High-light the source code of that element.

P0uA3B.gif
P0uVxO.th.png

When you’re writing a Web Crawler, you may need the selector or XPath for an element, in DevTools you could right-click the element’s code then click Copy->Copy XPath/Copy selector

Console

The Console is the place that you could run your JS code. This is useful when you’re debugging your own website. Also, you could see the Output and Error message here.

Application

P0uYr0.png

Sometimes you want to get the image on the website, but the website may block you to right click on it to download it. Or, you want to read the wonderful Scripts or Stylesheets of the website.

Networks

P0ujuY.png

You may know that Webpage always requests other resources, and Network is where you could find the network request during your session. Click the O on the left-top, the DevTools start recording your network request when the O turns red. You could see much information about like the request headers and response headers by clicking the single request. Also, you could see the Status, Size and Time of the request.

Audits(Lighthouse)

P0u5wK.png
P0uU04.png

Lighthouse is an open-source, automated tool for improving the quality of web pages.

Chose something you want to test, then click Run audits:
This is the result of alevel.com.cn

What’s more

Well, to tell you the truth, I have never used other function of DevTools before start writing this passage. So, I’m not that sure about the other functions. However, it’s clear that the DevTools are really useful for every web programmer. For more information, I recommend you read the Google’s doc about the DevTools(https://developers.google.com/web/tools/chrome-devtools/)

Ref: https://developers.google.com/web/tools/lighthouse/#devtools

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.