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 :)
Web developer tool secrets that shouldn’t be secrets
71–80 of 108 posts
Re: Web developer tool secrets that shouldn’t be secrets
#72Earlier quoted context omitted.
I think it was meant as a joke reference to a recent news piece where a state agency website had raw personal data in the source code, and 'view source' would show sensitive data (teacher data - names, social security numbers, etc). https://arstechnica.com/tech-policy/2021/10/missouri-gov-cal... is probably what was being referenced.
I live in Missouri, in the deep Red Ozark Mountains in the SW part of it and I shared an article on that on FB in a local group. Our Governor really blew it on this one. Folks here will generally stand by their GOP Party and for the most part they never talk about Parson here but this really pissed them off. I was surprised by the comments and the number of them. They are pissed about the incompetence of those who bu…
Re: Web developer tool secrets that shouldn’t be secrets
#73Earlier quoted context omitted.
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 wi…
Re: Web developer tool secrets that shouldn’t be secrets
#74Not specific to developer tools, but definitely handy for using console.log etc: in JS, an expression can be any comma-separated set of expressions. Every sub-expression is evaluated, the last sub-expression’s value produces the value of the full expression. So for example: const add = (a, b) => ( a + b ); produces the same return value as: const add = (a, b) => ( console.log('adding', { a, b }), a + b ); The log cal…
This will work in C too. The keyword here is the "comma operator": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Re: Web developer tool secrets that shouldn’t be secrets
#75Earlier quoted context omitted.
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 wi…
Re: Web developer tool secrets that shouldn’t be secrets
#76Earlier quoted context omitted.
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)?
> 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)? https://chromium.googlesource.com/devtools/devtools-frontend...
Re: Web developer tool secrets that shouldn’t be secrets
#77Earlier quoted context omitted.
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)?
https://developer.chrome.com/docs/devtools/console/api/
https://developer.mozilla.org/en-US/docs/Web/API/console
https://nodejs.org/api/console.html
It’s not that I’m just reading language docs all day, but I’ve found it to be a really productive use of time when I do. It’s a vehicle for discovery that tutorials, SO answers, and blog posts don’t tend to always cover. For instance, I learned about Realms in JS which allow for a distinct global context, and more recently the proposed ShadowRealms API which not only just sounds cool, but allows for some neat isolation if ever you need to run JS in the browser that shouldn’t affect the window (such as a web IDE).
For those who are brave enough to delve into the Shadow Realms:
https://www.ecma-international.org/wp-content/uploads/ECMA-2...
Point being: there are formal manuals and specifications for every part of the web stack. They can be intensely difficult to grok but are a valuable resource. It’s not fair to say RTFM to every question about the web stack, it’s unreasonable to expect anyone to hold all of that in their brain. Still, these things do exist and have a lot of value.
Re: Web developer tool secrets that shouldn’t be secrets
#78not mentioned in the article, but my favorite console trick is monitorEvents(elt) https://twitter.com/htmx_org/status/1455242575363723265 hugely helpful when debugging event-driven systems like htmx or hyperscript
It would be nice if this made live expressions or something instead of filling up the console.
Re: Web developer tool secrets that shouldn’t be secrets
#79Earlier quoted context omitted.
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 wi…
As far as my understanding goes (which may not be very far at all), the common base seems to be Chromium. When I want to debug an HTML source (like the one in the article), VSCodium offers me Chrome or Edge as the base browser (none of which I have installed). I wonder why Brave isn't in there, since it's also Chromium-based.
This isn't a "Here is what browser developer tools in each browser are like".
If you look for news on each of them, check out the post of my colleague Patrick, which does an awesome job covering news in all of them:
https://www.smashingmagazine.com/2021/09/devtools-cross-brow...
Re: Web developer tool secrets that shouldn’t be secrets
#80Earlier quoted context omitted.
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.
Author here. We'd love to know what we can do better. What are you missing at https://docs.microsoft.com/en-us/microsoft-edge/devtools-gui... ? We lately spent a lot of time re-organising the documentation to cover different use cases, like people wanting introductions or in-depth details getting different starting points. The documenation is even available on GitHub to post issues and ask for features: https://githu…