Cool Chrome DevTools tips and tricks you wish you knew already

Flavio Copes
Mar 21, 2018 · 4 min read

Interested in learning JavaScript? Get my free ebook at jshandbook.com

Check out my overview of Chrome DevTools if you’re new to this awesome browser feature!

1. Drag-and-drop in the Elements panel

Drag-and-drop in the Elements panel

2. Reference the currently selected element in the Console

If you’re using jQuery, you can enter $($0) to access the jQuery API on this element.

Reference the currently selected element in the Console

3. Use the value of the last operation in the Console

Use the value of the last operation in the Console

4. Add CSS and edit the element state

The first lets you add a new CSS property with any selector you want, but pre-filling the currently selected element:

Add CSS rules

The second one lets you trigger a state for the selected element, so you can see the styles applied when it’s active, hovered, or on focus.

Edit the element state

5. Save to file the modified CSS

This trick does not work for new selectors added using +, or into the element.style properties, but only for modified, existing ones.

Save to file the modified CSS

6. Screenshot a single element

Screenshot a single element

7. Find an element using CSS selectors

You can type any string in there to match the source code, or you can also use CSS selectors to have Chrome generate an image for you:

Find an element using CSS selectors

8. Shift-enter in the Console

Once you’re ready, press enter at the end of the script to execute it:

Shift-enter in the Console to write multiline commands

You can clear the console using the Clear button on the top-left of the console, or by pressing ctrl-l or cmd-k.

9. Go to…

  • cmd-o (ctrl-o in Windows), shows all the files loaded by your page.
  • cmd-shift-o (ctrl-shift-o in Windows) shows the symbols (properties, functions, classes) in the current file.
  • ctrl-g goes to a specific line.
Go to file

10. Watch Expression

Watch Expression

11. XHR/Fetch debugging

You can set it to break any time an XHR/Fetch call is sent, or just on specific ones:

XHR/Fetch debugging

12. Debug on DOM modifications

Debug on DOM modifications

Interested in learning JavaScript? Get my free ebook at jshandbook.com

freeCodeCamp.org

This is no longer updated.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store