Chrome DevTools can do that?

Yaser Adel Mehraban on May 23, 2019

Google Chrome is currently one of the most popular web browsers used by developers today. The Chrome DevTools can greatly improve your workflow by ... [Read Full]
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.

 
 

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

 

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 ☺️

 

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

 

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

 

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 was aware of a bunch of these, but not the drag and drop of nodes. Very cool.

code of conduct - report abuse