Google Chrome is currently one of the most popular web browsers used by developers today. The Chrome DevTools can greatly improve your workflow by ...
For further actions, you may consider blocking this person and/or reporting abuse
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 MacI'm lousy with the conversions, but I believe you are correct that the command palette is opened with
CMD + Pon 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
temp1useful if you want to compare the element to an earlier point after making a change.Design mode <3 Mad love :D :D
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+Ffor 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
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
Remote debugging! - developers.google.com/web/tools/ch...
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.
I didn't know you could fake the location, or that there was a command palette. Nice.