Special statement

This article is a series by Tomek Sułkowski published on Medium. According to the author revealed a total of 24 articles, updated until December 24, the copyright of the original author.

The author recommended our Chinese translation on Twitter, screenshot at the end

The translator had already communicated with the author before the translation to get permission to translate the whole series. In order not to disturb your reading, the record of authorization is here

The body of the

In the 24 days leading up to the holiday season, I will be publishing a series of short articles on how to use development tools in a more interesting way. Yesterday we played with code blocks and today we will talk about Network:

61. Hide network Overview

Do you often check the Network panel:

  • Look at the timeline of the request
  • Or, maybe just look at the list of requests – to confirm status, size, and response?

I’m betting you’re the latter, and if so, there’s no reason why the Overview section should take up about half the Network space. Hide it.

62.Request Initiator shows a call stack(Request Initiator displays call stack information)

Translator’s note: Initiator is an initiator, but it is too short.

The Initiator column in the Network panel shows which line of the script triggered the request. It shows the final step in triggering the request in the call stack, unless you use, for example: A localized FETCH API that points to low-level library code – for example, xhr.js when Angular uses Axios or zone.js

In addition to these external libraries, you may want to look at what part of the code triggered the request. To hover information over the displayed Initiator (such as external libraries), you will see the complete call stack, including your file:

63.Filter requests by method

The filter input in the Network panel can take strings or regular expressions you type and only show matching requests. But you can also use it to filter a lot of attributes.

Just type for example method or MIME-type:

To display all possible keywords, press [CTRL] + [space] in a blank input field.

64. Customise the Requests Table

In the request table, you can see several pieces of information about each request, such as Status, Type, Initiator, Size, and Time. But you can also add more (I always add Method, for example). More:

All the information you can display in the Network panel.

To customize which columns to display, simply right-click anywhere on the request table header. Note that Response Headers is a complete submenu with more options, and you can even define your own options.

Routine: If you learn something new from this

→ Follow me on Twitter: Tomek Sułkowski

Other series

Other articles in this series will be translated soon, with links posted here.

  • Day 1: ‘$’ in the Console
  • Tips you might not know about Chrome debugging tools Day 2: Copying & Saving
  • Chrome debugging tools you didn’t know about
  • The Chrome debugging tool has a few tricks you don’t know about.
  • Day 5: Console log, puzzling case
  • You don’t know the Command menu for Chrome
  • 7. Fun tips you didn’t know about the Chrome Debugging Tool Consle
  • Chrome’s Color picker is a Color picker that you don’t know about.
  • Day 9: Time console
  • Custom Formatters are custom formatters for Chrome.
  • Today: Style Editors continued
  • Tips you don’t know about the Chrome Debug Tool Day 12: Ninja Log Print! (the ninja logs)
  • Chrome debugging Tool tips you didn’t know about
  • Chrome Debugging Tool tips you didn’t know About day 14: Other shortcuts
  • Chrome debugger tips you didn’t know about
  • Tips you don’t know about Chrome debugging Tools 16: Breakpoints
  • Day 17: Farewell to Console
  • What you Didn’t know about Chrome Debug Tools
  • Chrome debug tool tips you don’t know
  • Tips you didn’t know about Chrome debugging tools Day 20: The dark arts of Workspace
  • Tips you Don’t Know about Chrome Debugging Tools Day 21: Snippets
  • Chrome Debugging Tool tips you didn’t know
  • Chrome debug Tool tips you don’t know
  • Day 24: The last day, New Year’s Day, is awesome

Write in the last

If you are sure of my translation, you can also pay attention to my wave oh ~ incidentally my open source project, for a wave of star→ see here, beautiful blog system

The author recommended our Chinese translation on Twitter