[HN Gopher] DevTools Tips
___________________________________________________________________
DevTools Tips
Author : stefankuehnel
Score : 188 points
Date : 2023-08-30 10:04 UTC (12 hours ago)
(HTM) web link (devtoolstips.org)
(TXT) w3m dump (devtoolstips.org)
| rasz wrote:
| Nice. I didnt know about Snippets. Handy for investigating all
| the garbage Chrome stuffs into Preferences file.
|
| https://www.chromium.org/developers/design-documents/site-en...
|
| https://github.com/WernerFP/vivaldi-clear-engagement.sh/blob...
| isodev wrote:
| 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.
| tilne wrote:
| What are the unique, useful features you're thinking of from
| safari?
|
| (This sounds like a sarcastic, leading question, but it's
| genuine. I don't know this space well at all.)
| capableweb wrote:
| > 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.
|
| 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...
| captainbrosset wrote:
| 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.
| epolanski wrote:
| This is an amazing resource you're building up. Thanks for
| the work.
| specialist wrote:
| I love that you accept submissions as PRs. Bravo.
| billbrown wrote:
| I think it would benefit from a rating system and a sort or
| filter based on that rating.
| nlunbeck wrote:
| 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.
| shermix011 wrote:
| Guys look like Polypane competitior
| captainbrosset wrote:
| 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.
| colesantiago wrote:
| Just curious, how does this compare to using the Dev Tools Pane
| itself?
|
| Why the need for a new website for this?
|
| What makes this useful over the issues tab inside the developer
| tools pane inside browsers?
| azeirah wrote:
| 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.
| colesantiago wrote:
| Doesn't the dev tools pane do this already?
|
| 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.
| dspillett wrote:
| _> 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..
| captainbrosset wrote:
| 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.
| Timon3 wrote:
| Let's go with the first article:
| https://devtoolstips.org/tips/en/custom-object-formatters/
|
| Where do the devtools tips/tricks tell you about this?
| master-lincoln wrote:
| 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
| azeirah wrote:
| Love it! Learned a lot already in the first few articles.
| awelxtr wrote:
| The design of this page makes me feel it is all ads. A list of
| one ad after another.
|
| Anyone els feels the same?
| b0afc375b5 wrote:
| 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.
| colesantiago wrote:
| It does feel it's all ads to me. I'm confused if I would like
| to bookmark this or not.
| master-lincoln wrote:
| 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
| nottheengineer wrote:
| 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.
| consoomer wrote:
| The design and branding reminded me a lot of the old Travis
| Nielson DevTips content. I got excited for a second until I
| realized it's not Trav.
| lfkdev wrote:
| I don't see a single AD
| [deleted]
| captainbrosset wrote:
| 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!
| rendall wrote:
| 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.
| capableweb wrote:
| 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.
|
| Would make it look like this: https://i.imgur.com/m1WqTBU.png
| awelxtr wrote:
| 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
| h1fra wrote:
| Yes same, the google blue + the crispy image, it does reminds
| me of the old days.
|
| However, I feel like this site was published for the survey
| more than anything else.
| captainbrosset wrote:
| That's not the case.
|
| 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.
| h1fra wrote:
| Ah, my apologies then. I felt like it was somehow tied to
| Edge, I should have dug deeper.
| _a_a_a_ wrote:
| Welcome to the fuck-you world of trying to help people!
| Just remember many will thank you as well.
| isaacfung wrote:
| 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](htt
| ps://developer.chrome.com/docs/extensions/reference/omnib...).
| pacoverdi wrote:
| 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.
___________________________________________________________________
(page generated 2023-08-30 23:01 UTC)