This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Both front and back end development and test engineers usually use browser developer tools, such as debugging some Web applications, locating front and back end request problems, crawler page analysis and other tools.

However, many small white is still not very clear to some concepts and use skills, hope this share, can be helpful to your usual development debugging, problem positioning.

How do I open Chrome Development Tools?

  • From the Chrome menu: More Tools > Developer Tools
  • Right-click on the page element and select Check
  • Shortcut:F12Sometimes it gets occupied, so try itCtrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

Main Windows and features

  • Elements: Use the Elements panel to replay the layout and design of your site by freely manipulating the DOM and CSS.
  • Console: The Console panel records diagnostic information, or uses it as a shell to interact with JavaScript on the page.
  • Sources: Set breakpoints in the source panel to debug JavaScript, or connect to local files through Workspaces to use the real-time editor of developer tools.
  • Network (Network panel) : The information (including status, resource type, size, time, etc.) obtained from a web page Request, which can be used to optimize Network performance.
  • Performance (Performance panel) : Records and views events that occur during the life cycle of the web site to improve the Performance of the page at runtime.
  • Memory (Memory panel) : Analyzes the execution time and Memory usage of web applications or pages.
  • Application panel: Records all resource information loaded on the website, including Storage data (Local Storage, Session Storage, -IndexedDB, Web SQL, and Cookies), cache data, fonts, pictures, scripts, and style sheets
  • Security: Use the Security panel to debug mixed content issues, certificate issues, etc.

The Network panel

Network panel is the most frequently used panel in daily work. This article mainly introduces the use skills of Network panel.

1. Controller: controls information such as logs and cache.

2. Filters: Control which resources are displayed in the request list.

3. Timeline: The timeline of retrieving resources.

4. Request list: Show the request items in chronological order.

5. Overall summary of requests: Show the total number of requests, the amount of data transferred, and the load time.

The controller

1. Record the request button and clear the request button.

2. Global filtering:

Perform a full search for all request resources and response contents (including request URL, request body, and response body).

3.Preserve log

If Preserve log is selected, cross-page requests are saved, and all requests before and after the jump are displayed in the same request list.

4.Disable cache

Disable Cache: disables loading resources from the cache. If this parameter is selected, data will be requested from the cache. This parameter is used when debugging web applications.

5. Analog networks

Can simulate online, offline, weak network and other scenarios of web page loading, simulation of some weak network scenarios is very useful.

The filter

Network panel filter, mainly is the filter function, a page request contains a variety of resource files and interface data requests, you can filter through the filter module to filter the file type you want, commonly used are XHR and JS.

Request list

  • Name Indicates the resource Name. Click the Name to view the details of the resource, including Headers, Preview, Response, Cookies, and Timing.
  • Status HTTP Status code.
  • Type Resource MIME Type of the request.
  • Method Request Method (default does not display, need to right-click the title line)
  • Initiator Indicates which object or process initiates the request (request source).
  • Size The Size of the file downloaded from the server and the requested resource. If the resource was obtained from cache, this column will show (from cache)
  • Time The Time of the Request or download, the total Time from the initiation of the Request to the acquisition of the Response.
  • Watefall displays a visual waterfall flow (time state axis) of all network requests. Click on the timeline to view the details of the request, and click on the column header to sort by the specified fields.

Several fields that need to be paid attention to in crawler: response body type, cookie(to simulate login), user-agent(to simulate browser)

Network panel has a hidden skill: resend XHR requests

XHR, or XMLHttpRequest, is a JavaScript API for creating AJAX requests.

If you want to resend the XHR request, we usually choose to refresh the page. In fact, you can directly right-click in the “Network” panel and choose Replay XHR debugging.

Other blockbuster tips:

1. Common shortcut keys of the browser

  • To zoom in, CTRL + +
  • Zoom out, CTRL + –
  • Return to normal size with CTRL + 0
  • Switch tabs with CTRL + 19 (19 represents the first tag, the second tag…)
  • Open a new TAB with CTRL + T
  • Search content CTRL + F
  • Return to previous page CTRL + left arrow
  • Go back to the next page, CTRL + right arrow
  • Refresh the page with CTRL + R

2. Change the default search engine in the address bar

Effect:

3. Create a windowless window

It does not carry the cookie saved before, nor saves the cookie to the local, and can view the complete process of the request completely.

4. Take a quick long page

Open the developer tool and use the shortcut key Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac) to open the command input window and type the command Capture full size screenshot. Click the command to intercept the full page.

Original is not easy, if you think the article is good, please help the students for this article point a like, comment or forward, because this will be my output of more quality articles of power, thank you! By the way, dig friends remember to give me a free attention yo!