DevTools Tips
devtoolstips.org
devtoolstips.org
The very first tip I see is "Customize the way objects look" which is ok... cool you can do that, is this where it should start? Also, it seems Safari only got a handful of tags and many of its unique (and very useful) features are missing completely from the list.
(This sounds like a sarcastic, leading question, but it’s genuine. I don’t know this space well at all.)
I mean, why not? It's not all for fun and giggles, it's actually a very useful feature, I use it a lot when working with data structures I've created myself (which are ultimately usually Objects in the JS world, but custom algorithms for get/set/sort and so on) and I want to render them differently in the console.
Another real-life example of it's usefulness is https://github.com/binaryage/cljs-devtools which formats Clojure/Script data structures into a more useful format when printing them to the console. It literally uses that feature: https://github.com/search?q=repo%3Abinaryage%2Fcljs-devtools...
Maybe it's lacking some kind of starring system? A "most starred tips" page would definitely be useful.
In Chrome, this is not a big issue because the panel is on a separate column (compared to the main panel where variables values can be browsed).
In Firefox, both panels are in the same column. When many breakpoints are set, one must scroll or click to close the breakpoints panel before any work is possible.
Anyone els feels the same?
However, I feel like this site was published for the survey more than anything else.
I only added the survey much later. The survey is just a little thing I added to try and get people to share their frustrations with DevTools, as a way for me to think of other tips that they may find useful, and then add them to the site.
The site is a long-running thing, which I've been running as a side personal project for 2 years now, slowly adding more and more tips, as I (or other people) think of them.
Small tips: Remove the underline from the title of the "tip" and increase the margin between the tips themselves by a small amount. Maybe adjust the background color of a tip as well.
Would make it look like this: https://i.imgur.com/m1WqTBU.png
My brain just doesn't get the connection between the title/text/tags block and the image at first glance, so it jumps to the conclusion that the image is an ad and not worth looking at.
https://www.chromium.org/developers/design-documents/site-en...
https://github.com/WernerFP/vivaldi-clear-engagement.sh/blob...
Why the need for a new website for this?
What makes this useful over the issues tab inside the developer tools pane inside browsers?
I see tips and tricks in the pane with issues and tips how to solve it.
So I don't understand the need for a website for this.
Perhaps read some of the website?
For instance the example for customising the output when inspecting your own object types: a view specific to your objects is something DevTools doesn't do out of the box (how could it when the devs know nothing of your objects?) though there is a way for you to tell it how to display them which few people know about. I for one was unaware until now.
Some of the examples seem a lot more like common knowledge (in fact you can derive some of the tips by just reading the screen in front of you while using DevTools) but that doesn't mean some people aren't unaware of the facility or are aware of it but have misunderstood and think it is less useful that it can actually be. For instance I know about the “Apply CSS styles to console messages” method, I've used it starting some time ago (though note: over use of things like this hinders more than it helps), but I image a lot of people don't because it isn't in the usual lists of console tips (which normally amount to illustrating the existence of console.warn(), console.table(), and similar methods).
Of course if you know everything about DevTools, or simply don't need/care to know more than you do, then the site genuinely isn't useful to you. But that doesn't mean it isn't useful to others.
> I see tips and tricks in the pane with issues and tips how to solve it.
I'm not seeing a Tips and Tricks pane so maybe we are not using the same browser, or you have an extension installed that is providing extra features.
There is What's New which does what this site is doing, just for brand new or newly updated features not those that have been around for some time.
The issues tab, but this is issues detected in the current page, not necessarily anything to do with DevTools..
Where do the devtools tips/tricks tell you about this?