I use the Chrome Developer tools pretty much daily, but there are a few things I wish I knew earlier 1: Easily get a reference to any i...
For further actions, you may consider blocking this person and/or reporting abuse
Loftie Ellis on September 25, 2019
For further actions, you may consider blocking this person and/or reporting abuse
These are nice tips! To add to a few more:
$0is the currently selected element in the elements viewer tab$$()is shorthand fordocument.querySelectorAll()You can use the color picker to get a color on any page by clicking on a color box in the css. You can change the color format with the arrows to the right.
To add to this: $1 is the previously selected element, $2 the one before that, etc, etc.
Wow, it seems so obvious, but I never even knew that.
Chrome dev tools has a dark mode :)
Chrome Dev Tools supports themes!
chrome.google.com/webstore/detail/...
I made little tweaks to it
github.com/mauricecruz/zero-base-t...
True, and it looks quite pleasing.
👍 Nice article.
Don't forget the styling in console.log 😄
and the dark theme
In the console, if you do
document.designMode = "on"you can then edit the page in your browser as WYSIWYG.Great to mock-up screenshots!
A convenient bookmarklet for toggling it:
Does anyone know if Chrome has any support for better flex/grid debugging like Firefox has? I know you can hover on a div that has a grid and it shows an outline. But I have not see really anything for flex.
This is what is holding me back from using Chrome full time. Really love those features from Firefox.
Thank you for the Blog,
The live expressions thing is an absolute gamechanger, I feel like such an idiot as it is literally right there and I've never bothered to find out what it did.
we never forget we never forgive...
how Chrome kill Firebug
You can access localStorage & sessionStorage from Application
You can use both Network & Performance to improve website loading time.
Elements > CSS > Computed > To see what is currently used by your element.
Great article :)
These are all great! It always amazes me what the tools I'm already using can do that I don't know about yet :) Thanks!
copy(temp1)after storing as global variable 🥰Hello, I'd like to translate these awesome tips to Chinese. The translation will be published at nextfe.com Can you give me the permission?
Feel free, please just credit the original post
Published Chinese translation today: nextfe.com/chrome-dev-tools/
This original post is credited and back-linked at the beginning of the translation.
OMG the first 2 ones are 100% new to me! They are awesome! Thanks!
What I also use from time to time is the F8 shortcut. It's nice if you want to freeze the page e.g. for debugging dynamic hover styles which are not triggered by hover, but by some js logic.
Right forgot about that! It is super useful, sometimes its hard to get to an element that is only triggered by some unknown code.
you can also add
console.dirit actually prints objects raw structure.Thanks for the article, great tips! I actually had a couple of "a-ha" moments, especially the console.table statement which will be super useful for me going forward.
Wow !!
Thanks for the great post! Didn't know many of them!
You can add
-method: OPTIONSto remove all option calls in the network tab.All were great. Add ‘Control + P’ shortcut pressed anywhere in the devtools to search for any file in thr current project for a quick and easy access. Useful if you r working in Angular with lots of components and files in the tree view.
Number 10 is gonna save my life
Awesome!!!!!
Thanks Loftie
Eye opener, didn't know many of them! Thanks!
The file override is a great tool for testing code and style changes
Awesome!
Wwow! Really helpful. I never knew we can do these things with Chrome DEV tools
This is really helpful... 👍🏻
Does someone knows if I can disable the auto-correction of html in the DevTools? Or at least show a warning that this is not the current code?
Wow, did not know about the live expressions! That is awesome!
Disabling caching. That will definitely go in my back pocket.