11 tips you must know if you choose Chrome as your development environment.

Tip Description: Use Chrome DevTools Like a Senior Frontend Developer

From the author:

But do you really understand Chrome DevTools? In fact, it provides many powerful but unknown functions, which can greatly improve the efficiency of our development. Here I’ll introduce the most useful features, hoping to help you.

Here are a list of items:

• Command menu -- macOS：Cmd + Shift + P -- really useful
• Powerful screenshots - did list some interesting options that I didn't know about and well worth knowing about
  • capture full size screenshot (even if scrolls off page)
  • capture node screenshot (DOM element)
• Reference the result of the last operation in the console ($_)
• Resend the XHR request
• Monitor page load status
• Copy Variables
• Copy the image as the data URI
• Table object array
• Drag and Drop in the Elements panel
• Reference the currently selected element in the Console
• Trigger CSS pseudo-class
• Shortcut to hide an element
• Store a DOM element in a global temporary variable

Lots of great information here.