This is more of a "hacker" tip than something for web developers but "Show Page Source" will show you the full raw HTML for any page. Be careful where you use it though as it is illegal in some states.
Yes officer this comment right here!
Web developer tool secrets that shouldn’t be secrets
51–60 of 108 posts
Re: Web developer tool secrets that shouldn’t be secrets
#52Earlier quoted context omitted.
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’?
Native async/await functions use generator functions under the hood, which are an implementation of coroutines. Like all fully-fledged coroutine implementations, generators can suspend execution while preserving the stack by yielding control (hence the `yield` keyword). This requires interpreter (e.g. V8) support.
Desuguared Promise.then can't suspend the stack like that as a normal JS thread must run to completion and cannot yield to the scheduler; instead every call to `.then` pushes the new closure onto the event/microtask queue.
Re: Web developer tool secrets that shouldn’t be secrets
#53Re: Web developer tool secrets that shouldn’t be secrets
#54Earlier quoted context omitted.
I was fascinated, but I cannot find any sources that say viewing the source is illegal. Reusing it as your own, yes if not licensed for that. Viewing it? No. You’re viewing the rendered source code when you load the page? https://www.techdirt.com/articles/20071017/092927.shtml
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 built the website and quite a bit more so that Parson would try to charge the journalist with a crime for finding it.
We're all just shaking our heads over that.
Re: Web developer tool secrets that shouldn’t be secrets
#55"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.
Author here:
Yes it is in Edge DevTools, you can read up on how to here:
https://docs.microsoft.com/en-us/microsoft-edge/devtools-gui...
I very much would advise against hacking the tools yourself, for the reasons you stated, but isn't it awesome that you even can do that?
Re: Web developer tool secrets that shouldn’t be secrets
#56Here'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 :)
Author here.
There are even more. $0 is only the current one, but you also have $1 to $4 as a history of the last ones/ I like that $_ is a reference to the last result of what you did in the console.
I documented most here:
https://docs.microsoft.com/en-us/microsoft-edge/devtools-gui...
Re: Web developer tool secrets that shouldn’t be secrets
#57So 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?)
Author here.
No, this isn't "a technical PR blog post promoting Windows Edge". It is, as explained in the first sentence, a write-up of a presentation I've given at an event. It is on my personal blog that I've maintained since 2006 and very much my own message.
> This is a talk that I’ve given at CityJS this September. I am a principal product manager for developer tools in Microsoft Edge and these are things I encountered during working on the tools, documenting them and going through user feedback.
Microsoft Edge is a browser based on Chromium and we joined the project quite some time ago, fixing hundreds of bugs, making the developer tools themeable, localisable and accessible to assistive technology. All of these changes have been submitted back to the Chromium core, so that Chrome, Brave and all the other browsers based on the same open source project also benefited from that. We work closely with the Chrome team and share a lot of ideas and plans for the future of the Chromium platform.
We differentiate in the UX of the developer tools, much like all Chromium based browsers differentiate in the interface for the end user.
I spent about 10 hours on the presentation and this morning about 3 hours turning the slides into this blog post. If my goal were to promote Edge, I could have done a much simpler, shorter and to the point post.
If you read the article, you might realise the things we're adding exclusively to the Edge devtools based on user feedback and demands, the focus mode and in-context explanations being one of the efforts, and the deep integration with VS code being another one.
As to whether these things are useful, I think I pretty clearly explained that this is exactly what we'd like people to tell us. Which is why there are several ways to contact the team and provide feedback.
Re: Web developer tool secrets that shouldn’t be secrets
#58Earlier quoted context omitted.
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.
I am curious why you can edit Edge dev tools with Edge. There is literally a part of the article where I show that this is possible with a screenshot showing it on my Mac.
Re: Web developer tool secrets that shouldn’t be secrets
#59Open 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.
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://github.com/MicrosoftDocs/edge-developer
Re: Web developer tool secrets that shouldn’t be secrets
#60"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…
Author here.
This all applies to Edge, too. I am also a huge keyboard fan and user and the command menu is incredibly useful. As to bringing Overrides to the main browser interface and not only to developer tools, I'd love to do some more research on that. We are not seeing much use of overrides at all and they are a pretty niche use case. That said, I see far too many people and companies resorting to browser extensions where a snippet or override could do the trick. I guess one of the issues is that they are limited to the user/machine right now and you can't share them in a team.
That said, we have some ideas in the making to bring command menu functionality to the browser URL bar. We'll see how this goes down with non-developer end users. As a interesting fact , which I did mention in the talk, we had a real issue with people accidently hitting F12 and getting developer tools without wanting them and we're still getting daily feedback that people are utterly confused as to what happens to their browser when they open.