I like the idea, but I'm not certain how to make it useful beyond "casual reading about devtools".
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.
I would love to add more Safari tips to the site! Please let me know what other features are missing.
Also, the site is open source and lets people add their own tips via: https://github.com/captainbrosset/devtools-tips
Feel free to propose additions there.
> 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?
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.
Was looking for a guide on how to make my devtools earlier. It was actually easier than I thought.
https://github.com/GoogleChrome/chrome-extensions-samples/tr...
You can do things like adding a new tab/pannel in the devtools, override the default new tab, override the bookmark manager/search history manager, add new options to the context menu, intercept network requests, manipulate the sidepanel(the one you open when you search image with google) and [omnibox](https://developer.chrome.com/docs/extensions/reference/omnib...).
One thing that bugs me (with no solution in this site) is the Breakpoints panel that opens everytime a breakpoint is hit.
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.
I think something that could help a lot of people would be a browser devtool comparison page. You can take your existing browser tags and show which devtool features exist on each browser. Personally, I would 100% use a guide like that to decide which browsers tools suit my needs.
I'm the author of devtoolstips.
What exactly makes it feel like a list of ads to you? I'd love to understand this more. I'm, by no mean, a designer, and I do this in my free time. But if there's something that would make it look less marketing-like, then I'd love to know and update the design.
Thanks!
It's too busy with too many elements trying to get the user's focus I think.
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.
I do not agree with the assessment, personally, that it looks like advertising. That said, on mobile, the images could be under the title rather than under the tags, and they could have the same width as the other elements.
The colours and text/image distribution remind me the low quality ads that appear at the bottom of some news places that simply it's a bunch of clickbait and penis enlargement ads
Yes (looking at it from mobile), I think it's because of the fact that the images sit below the tags and there are no separator lines.
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.
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.
Yes. I have this sudden urge to look for the ad close (x) button for some reason. I think it's the lack of a solid border, or box-shadow, or perhaps the lack of padding of the images. I'm not really sure.
nope, looks alright to me. But then I don't really see ads anymore because of extensive blocking + avoiding. Maybe that's why I don't have that assoiciation
devtoolstips is a website that gives tips and tricks about how to use devtools (in edge, firefox, chrome, safari, and even polypane).
Polypane is a development browser. There's absolutely nothing in common between the two.
And, by the way, I know Kilian, the author of Polypane, and we've worked together on a few tips on devtoolstips.
Huh? This is not an alternative devtools application, it's literally just a large collection of tutorials and tips on how to get the most out of your browser's devtools.
> 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..
The Issues panel in Chrome and Edge give you recommendations about how to make your website better.
This is different from devtoolstips.org which gives you tips for how to use DevTools better.
My browser doesn't have an "issues tab" nor do I see any tips.
Which browsers are you referring to?
If I would see those hints in the browser I still think the website is valuable as it shows me which functionalities I can use in other browsers too
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.