loading...
Cover image for Chrome DevTools can do that?

Chrome DevTools can do that?

yashints profile image Yaser Adel Mehraban Originally published at yashints.dev ・3 min read

Google Chrome is currently one of the most popular web browsers used by developers today. The Chrome DevTools can greatly improve your workflow by helping you develop, test and debug your websites right within your browser.

However, there are tons of tips and tricks that we don't know about it which can help us even further. Just because we don't see them in menus doesn't mean we shouldn't use them to boost our productivity.

So I got inspired by VS Code can do that series by by Burke Holland and Sarah Drasner and decided to write about these here. Hope it helps you as it's helping me and many others day by day πŸ‘Œ.

Are you ready? Here we go:

Screen shots

You can capture a full page screen shot or what is in the screen without any extension. Simply press CTRL+Shift+P for windows and Cmd+Shift+P for Mac users, to open up the command pallet and type screenshot to see the menu of three options:

  • Capture full size screenshot
  • Capture screenshot
  • Capture node screenshot

Selecting any of those options will save an image of the website to your computer.

Chrome DevTools Screenshot

Drag and Drop in elements panel

I didn't know this until last week and it's awesome. You can drag and drop elements wherever you want inside elements panel and it would reflect the changes in the page. It's very good if you want to quickly see how things look like with small changes.

Chrome DevTools Drag Drop

Pretty Print { } minified source code

Sometimes you like to see the source code formatted like the original code. This makes more sense in terms of CSS rules or code which is not uglified. This built in feature has saved me some time when debugging CSS rules. Simply press {} at the bottom of the page.

Chrome DevTools pretty print

Reference the selected element in console

Sometimes you might want to manipulate an element using JavaScript rather than changing the HTML inside element panel.

Chrome DevTools reference element

Watch expressions

Many times you would like to watch a particular expression to see how it changes under certain circumstances. This is really easy, simply add the expression to watch section:

Chrome DevTools watch expression

And as you saw you can see the last expression using $_.

Snippets

We all have some repetitive piece of code we use time to time. From a template for an click handler to a document ready function, it can be anything really. That's where the code snippets section comes in handy. You can store a snippet and use it real easy. Just open the snippet section and click new. Write your snippet down and whenever you want to use it, press Ctrl+Enter for windows and Cmd+Enter for Mac users, or right click and press run.`

Chrome DevTools code snippets

Overriding location

If you are writing a web application with information depending where the user is, you might want to check the app behaves as expected with user's location. That's where location override in Chrome DevTools is very useful. Simply press Ctrl+Shift+P for windows and Cmd+Shift+P for Mac users, to open the command pallet, type sensors, and then select a different location from override location drop down. You can even set it to a custom latitude and longitude if you have them.

Chrome DevTools location override

Editing any text on screen

Sometimes you have a limited width and want to see how a long text looks like on the page. Or you simply are checking whether ellipsis appear if the text is long enough. Chrome DevTools has a feature called design mode which you can set it on in the console and then change any text you want and watch the changes on the fly. Super cool right? 😎

Chrome DevTools design mode

That's it for this post. Keep an eye out for the next post πŸ‘€.

Posted on by:

yashints profile

Yaser Adel Mehraban

@yashints

An almond croissant addict cleverly disguised as a web developer

Discussion

markdown guide
 

Love this post! Design Mode seems infinitely useful.

With snippets, it was really simple for me to write a quick one-liner to toggle this on or off. And, since you can run any snippet directly from the command palette, I can now easily switch between "edit" mode and "read" mode.

PSA: Open the command palette, delete the leading > and enter a ! to see all your saved snippets. Simply pick one from the list to execute!

 

Nice tip on accessing the snippets!

CTRL+P will open command palette without the leading >, I'm guessing it's CMD+P on Mac

 

I'm lousy with the conversions, but I believe you are correct that the command palette is opened with CMD + P on Mac devices.

Thanks you for pointing this out!

 

You can also right-click an element and select "export to global variable" and the element (and its current state) is stored as temp1 useful if you want to compare the element to an earlier point after making a change.

 
 

Nice! The designMode will be a great touch when showing how a feature will look like for the designers instead of the boring and confusing DOM/DOM text editing :)

A feature that is helping me is the Ctrl+Shift+F for searching in the source, then you just need to prettify and add your breakpoint.

 

Nice article. One thing on "Chrome DevTools has a feature called design mode" : no, it is HTML5 that has it. There are extensions on the Chrome store to enable a one-click access, not featured in Chrome DevTools.

 

Thanks for pointing this out, will update the post once further reading about it ☺️

 

A really interesting topic! It is kinda hard to keep it up with the latest updates. So is good to have a summary from time to time, good article.

Have you checked the "Local Overrides"? that is one of the features that I like the most.

 

I am gathering a list fo the next post. Will add this in thanks

 

If you select a tag in the "elements" tab and go to the "Console" tab and typ "$0" you will get the selected tag

 

Great article! I didn't know that I could override the location, that's awesome :)

 
 

I was aware of a bunch of these, but not the drag and drop of nodes. Very cool.

 

Wow, i could only give you one heart.
Really nice post

 

Thanks for your kind words, these are the encouragement I need to continue writing

 

I didn't know you could fake the location, or that there was a command palette. Nice.