Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Web developer tool secrets that shouldn’t be secrets

christianheilmann.com

Post reply on HN
Print view View original

31–40 of 108 posts

Re: Web developer tool secrets that shouldn’t be secrets

#31

Post by yepthatsreality »

eyelidlessness wrote: post #25
yepthatsreality wrote: post #3

Open secrets aka secrets for people who can’t RTFM. Good tips! I would argue that the IDE is the connector of the editing + debugging experience. Otherwise there’s a reason they’re disconnected.

In this case TFM is partly composed of >=1 blogs from >1 browser vendors in addition to properties associated with the underlying browser engine which most people don’t directly use or reference by name. No one has actually written T FM.

That’s not true. There are great sources of documentation for anything you use. Scoped down to the specific topic and it doesn’t have to be found in a blog post or stackoverflow answer. Those are the sources that just beat the SEO game.

Re: Web developer tool secrets that shouldn’t be secrets

#32

Post by hutzlibu »

frosted-flakes wrote: post #28
hutzlibu wrote: post #7

So this is basically a technical PR blog post promoting Windows Edge? Never used it, but it looks pretty much like chrome dev tools, which might be, because they just copied it, when they forked chrome/webkit? Well, why not copy what works, but is there anything edge dev tools are now doing better than chrome? (there seems to be a connection possible to VS code, is that useful?)

They didn't "copy" the Chromium dev tools, they are the Chromium dev tools. Edge is a Chromium browser, after all.

Well, they do not really advertise that fact and the codebase is not exactly the same, it seems.

The mentioned vs code connection - and it seems, I cannot just edit edge dev tools with edge, something I can do in chrome.

Re: Web developer tool secrets that shouldn’t be secrets

#33

Post by dang »

hutzlibu wrote: post #7

So this is basically a technical PR blog post promoting Windows Edge? Never used it, but it looks pretty much like chrome dev tools, which might be, because they just copied it, when they forked chrome/webkit? Well, why not copy what works, but is there anything edge dev tools are now doing better than chrome? (there seems to be a connection possible to VS code, is that useful?)

Isn't the point of this article to highlight specific tools? A lot of technical PR blog posts do well on HN. Not as many as technical PR blog people wish they would, but still - if the post contains interesting information, that's what matters. Here's a past explanation about this, in case it's helpful: https://news.ycombinator.com/item?id=20186280, which was an answer to https://news.ycombinator.com/item?id=20186246 ("Is it acceptable to have unmarked advertisements on HN?").

There's also this guideline:

"Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something."

https://news.ycombinator.com/newsguidelines.html

Re: Web developer tool secrets that shouldn’t be secrets

#34

Post by dylan604 »

yepthatsreality wrote: post #30
dylan604 wrote: post #18

Earlier quoted context omitted.

I want to learn all there is to know about JS. Which/what manual should RTFM? Should I read it front to back completely before attempting to write my first bit of code? Before writing any php, should I read every single word written on php.net? Docs for programming languages are not written like a book to be read starting with the first page through to the last. Kind of like the bible.

You should read the manual for the language features and debugging tools you use most. Don’t assume you know everything about Console.log because you use it all the time one way.

Thanks for answering with an ambiguous answer. Of course I don't know everything about anything. That's why search engines were invented. I mean, even O'Reily doesn't know everything else there wouldn't be other authors!

So, which manual am I reading for learning everything there is possible to know about Console.log that will mean I never have to turn to a search engine again (with console related questions)?

Re: Web developer tool secrets that shouldn’t be secrets

#35

Post by Aeolun »

eyelidlessness wrote: post #23
amelius wrote: post #6

console.trace() looks nice, except it doesn't work for async functions (i.e., functions that call each other through an event loop), which is how many function calls happen to be coded in practice.

It doesn’t work for callback-based async (including native Promises, but some libraries like Bluebird can help). But it does work for suspending async functions (native async/await, generators)! This also applies to Error#stack and debugger call stacks. I’m actively moving some projects I inherited from Promise APIs to async/await for this reason.

What is the difference between promises and native async/await? From the perspective of coding them they seem to be exactly the same.

It preserves the call stack as soon as you use ‘await’ instead of ‘[promise].then’?

Re: Web developer tool secrets that shouldn’t be secrets

#36

Post by amatecha »

Here's a really obscure one which I've never heard anyone mention, except the first time I heard about it:

In the JS console:

  $0
is a reference to the currently-highlighted element in the DOM Inspector (at least this is the case in Firefox, Chrome and Edge, haven't tried others).

Very handy for quickly evaluating or operating on an element you're looking at :)

Re: Web developer tool secrets that shouldn’t be secrets

#37

Post by hutzlibu »

dang wrote: post #33
hutzlibu wrote: post #7

So this is basically a technical PR blog post promoting Windows Edge? Never used it, but it looks pretty much like chrome dev tools, which might be, because they just copied it, when they forked chrome/webkit? Well, why not copy what works, but is there anything edge dev tools are now doing better than chrome? (there seems to be a connection possible to VS code, is that useful?)

Isn't the point of this article to highlight specific tools? A lot of technical PR blog posts do well on HN. Not as many as technical PR blog people wish they would, but still - if the post contains interesting information, that's what matters. Here's a past explanation about this, in case it's helpful: https://news.ycombinator.com/item?id=20186280 , which was an answer to https://news.ycombinator.com/item?id=2018624…

In general I do enjoy technical PR blog posts and also in this one I found interesting bits.

What disturbed me was, that the title said "web developer tools secrets", while in the text it is specifically microsoft edges web developer tools.

This style of language I do not like so much. There is too much agenda in it, in my taste. As this seem to imply, there are only one web dev tools - the ones that comes bundled with your windows OS. (Microsoft does have a history)

Now it seems, the edge dev tools are allmost identical to chrome dev tools, so I might have assumed more ill intent, than what was actually there, as most web devs use one or the other.

But it is still not clear to me, what of the posts information apply only to edge for example. What to chrome. And what would also work in firefox. All of them have web dev tools.

Re: Web developer tool secrets that shouldn’t be secrets

#38

Post by iudqnolq »

amatecha wrote: post #36

Here's a really obscure one which I've never heard anyone mention, except the first time I heard about it: In the JS console: $0 is a reference to the currently-highlighted element in the DOM Inspector (at least this is the case in Firefox, Chrome and Edge, haven't tried others). Very handy for quickly evaluating or operating on an element you're looking at :)

In a similar vein you can right click on any logged value that's pretty printed in color and save it to a global variable to play around with. (console.log("foo", foo) works with this, console.log("foo"+foo) doesn't)

Re: Web developer tool secrets that shouldn’t be secrets

#39

Post by hutzlibu »

1vuio0pswjnm7 wrote: post #11

"Overrides allow you to store local copies of remote scripts and override them when the page loads. This is great if you have, for example, a slow build process for your whole application and you want to try something out. It is also a great tool to replace annoying scripts from third party web sites without having to use a browser extension." Overrides are useful not just for "developers". Why is this option hidden…

Is it possible by now, to assign custom shortcuts in chrome or edge dev tools? Then you could be even faster for your regular commands with keyboard navigation.

It was discussed endlessly in chrome and I stopped following.

I ended up tweaking dev tools by hand (you can just open dev tools for chrome dev tools) - but stopped doing so, because of breaking update changes.

Re: Web developer tool secrets that shouldn’t be secrets

#40

Post by DylanSp »

vichu wrote: post #16
NAR8789 wrote: post #9

> Many things heralded as the best thing since sliced bread in presentations and video tutorials are hardly every opened, let alone used. This reminds me of something I heard once... that the first half of Portal (the video game) is basically a giant playable tutorial, and that a lot of video games start off with a tutorial disguised as gameplay, and that this is actually pretty pleasant. The world's gotten pretty go…

Games as teaching tools is definitely an interesting topic. You might get a kick out of https://vim-adventures.com/ or https://cssgridgarden.com/ or http://www.flexboxdefense.com/ These are just off the top of my head - would love to see other examples.

https://deadlockempire.github.io/ is a good example, focused on multithreading.
Post reply on HN