28 ms·

Web developer tool secrets that shouldn’t be secrets

428 points by tybulewicz 5y ago

iudqnolq 5y ago
$() and $$() are handy but very annoyingly the first is overridden by any website that installs jQuery globally. IIRC in chrome you then use x$()? I always have to look it up.
- shp0ngle 5y ago
  Yes this is what I wanted to add. $() is obviously inspired by jquery itself, but it has a slightly different semantics than jquery, so ironically jquery can override it. I am not sure what x$ is. However, what was not in the article, you can also you $x("/something") for xpath. That can be useful, because for some queries, xpath is easier than CSS selectors, and it is actually far more powerful (except that nobody really knows xpath nowadays). The $x thing is actually script around `document.evaluate(xpath, document.evaluate, null, XPathResult.ANY_TYPE, null)`, but good luck remembering how to use that stuff... I can never write doc.evaluate on the first try
amatecha 5y ago
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 :)
- iudqnolq 5y ago
  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)
- jakear 5y ago
  You'll see that in the Elements panel, it actually puts a grey " == $0" after the selected element to point you towards this feature. Also, $1 is the previously selected element, $2 is the one before that, etc.
- chriscodepo8 5y ago
  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-guide-chromium/console/utilities https://docs.microsoft.com/en-us/microsoft-edge/devtools-gui...
  - amatecha 5y ago
    Nice, that's great to know! Thanks for capturing them on that page. BTW I've followed you on Twitter for years. Always lots of neat tips and interesting topics -- thanks for that! :)
- wonnage 5y ago
  If you’re using React the same applies in the dev tools component tree - $r is the currently highlighted component.
stefandesu 5y ago
Great article. I might be a bit late to the scene, but to add to the first section, there are also `console.time`, `console.timeLog`, and `console.timeEnd`. Very handy!
wnevets 5y ago
The Governor of Missouri is very upset about this.
- alostpuppy 5y ago
  I see what you did there.
- NavinF 5y ago
  Context for those who missed it: https://arstechnica.com/tech-policy/2021/10/viewing-website-html-code-is-not-illegal-or-hacking-prof-tells-missouri-gov/ https://arstechnica.com/tech-policy/2021/10/viewing-website-...
- dylan604 5y ago
  As discussed at the time DevTools are not the same thing as right-clicking->View Source.
yepthatsreality 5y ago
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.
- steve_adams_86 5y ago
  You might be surprised how limited some otherwise very competent people's understanding of dev tools is. Console being such a primary example probably isn't an accident; tons of people don't know what it's capable of. I suspect people don't RTFM because frankly there are so many Ms to R. It's overwhelming at times. Many carpenters can get by without learning little tricks here and there while still being excellent carpenters overall. I think it's the same in software. We tend to focus on doing what we know best, and sometimes that means we skip the odd manual here and there.
  - yepthatsreality 5y ago
    Perhaps true. I would extend this to say that RTFM by attaining drips through blog posts that summarizes the M would lead to good competent developers over time, but this exclusive approach would create knowledge gaps (or “secrets”) that would make them excellent developers if they had RTFM otherwise.
  - MonaroVXR 5y ago
    What's up with carpenters? I see a lot of references to it.
    - steve_adams_86 5y ago
      I personally like to find parallels between trades and crafts to help connect my thoughts and experiences to the more abstract world of software. I started my life in carpentry and joinery so it seems to be where my mind finds it’s foundations when thinking in systems and patterns.
      - 5y ago
amelius 5y ago
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.
- chii 5y ago
  it'd be nice if there's an async-trace feature, where you get a (ascii?) visualization of the graph of async calls, if given a promise. It'd have to be able to reach deep into the core of the vm to find out where the promise was created (which might be lost if that info wasn't recorded i suppose), so may not be possible.
- eyelidlessness 5y ago
  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.
  - Aeolun 5y ago
    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’?
    - eyelidlessness 5y ago
      The difference is that an async function suspends on await, and continues to be active in the call stack until it returns. It doesn’t preserve the stack so much as continues to be on the stack. A Promise-returning function returns the Promise value synchronously and then/catch/etc continue from a new stack where they’re resolved.
    - tylerhou 5y ago
      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.
hutzlibu 5y ago
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?)
- frosted-flakes 5y ago
  They didn't "copy" the Chromium dev tools, they are the Chromium dev tools. Edge is a Chromium browser, after all.
  - hutzlibu 5y ago
    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.
    - chriscodepo8 5y ago
      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.
      - hutzlibu 5y ago
        "I cannot just edit edge dev tools with edge," I could not "just" edit it like I am used to from chrome - but apparently had to activate a experimental setting. Which you did explain in a video. Not text. I read text.
        chriscodepo8 5y ago
        I still want to understand the issue. The Sources tool is the same in Chrome and in Edge. And if you undock the devtools and you press CMD+Shift+I (or CTRL+I) on either Chrome or Edge you get a second DevTools instance to debug the first one. If you use a workspace, you edit files externally in either Edge or Chrome as they are the same thing. There is no difference in either of these use cases. What use case are you finding where it is different? I'm really confused.
recursivedoubts 5y ago
not mentioned in the article, but my favorite console trick is monitorEvents(elt) https://twitter.com/htmx_org/status/1455242575363723265 https://twitter.com/htmx_org/status/1455242575363723265 hugely helpful when debugging event-driven systems like htmx or hyperscript
- mkl 5y ago
  And unmonitorEvents(elt) to turn it off again. Monitoring every event is pretty noisy, so you can choose what to monitor with a second parameter: https://briangrinstead.com/blog/chrome-developer-tools-monitorevents/ https://briangrinstead.com/blog/chrome-developer-tools-monit... It would be nice if this made live expressions or something instead of filling up the console.
NAR8789 5y ago
> 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 good at crafting tutorials disguised as gameplay. Could we do this with dev tools? Has anyone tried to make "VSCode: the game"? Maybe "tip of the day" popups could be restructured as minigames? Possible hurdles I can think of off the top of my head: - a fancy tutorial probably runs into exactly what the author mentions on the next few lines: that adding more documentation doesn't fix things, because most people don't go to the documentation. - In a game it's very easy to tune the tutorial to what you'll later encounter. A dev tool tutorial... every dev's needs are different. I imagine you'd have to structure it as a tutorial for "core functionality", plus separate tutorials for each extension. - In the game context, I'm expecting to do certain actions repetitively. This has the side-effect of refining those skills. In a dev context, repetition is often considered a smell (though, I'd argue even in dev work we pick up a lot of little katas without thinking about it). - Harping on repetition some more... what about the debugging tools that I only need to use once in a blue moon?
- hutzlibu 5y ago
  "Has anyone tried to make "VSCode: the game"?" No, but something along that line. It is actually very hard, to do so in a consistent way, that is fun and useful.
- dylan604 5y ago
  Has anyone ever written a set of documentation solely by asking questions on StackExchange? I mean make an outline of exactly how you would do written docs, but pose each one of the sections in the outline as questions. You could have another user designed to be an expert for this app answer the questions. I'm not trying to game SO for points. I'm trying to head off the fact that nobody reads docs, but will head straight to a web search.
  - hutzlibu 5y ago
1vuio0pswjnm7 5y ago
"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 away in "Developer Tools". The biggest "secret" not mentioned here is keyboard navigation. It is incredibly cumbersome to operate "Developer Tools" on a small form factor computer without a mouse. Here is one solution: In Chrome's, F12 to open Developer Tools, then Ctrl-P then type ">". Then can scroll all available commands using Up/Down or start typing and use autocomplete to search for commands. Whether this is faster and more effective than pointing+clicking/tapping on tiny screen areas, ticking/unticking tiny check boxes and scrolling around in tiny menus is a question for the reader. Talk amongst yourselves. For example, to navigate to Overrides, the key sequence is F12,Ctrl-P,">","des",Enter
- hutzlibu 5y ago
  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.
  - chriscodepo8 5y ago
    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-guide-chromium/customize/shortcuts 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?
- chriscodepo8 5y ago
  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.
eyelidlessness 5y ago
Not 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 call will be evaluated, producing the desired side effect, its return value (`undefined`) is ignored, and otherwise add behaves the same as before. This can save 100s of paper cuts where you might otherwise rewrite a function or some other expression into a block of statements—in the arrow function case requiring curly braces and a return statement. Caveats: - sometimes you need to wrap the expression in parentheses to avoid syntax errors - it does not work with debugger statements, which have no expression equivalent
- Zababa 5y ago
  > 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. This will work in C too. The keyword here is the "comma operator": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
hsod 5y ago
Here’s one: in chrome dev tools, hidden behind two menu clicks, you can enable additional tabs including “media”. This is, afaik, the only way to get error messages from video decoding
leetrout 5y ago
https://developer.chrome.com/docs/devtools/console/utilities/ https://developer.chrome.com/docs/devtools/console/utilities... That's pretty great
- dotancohen 5y ago
  That is a terrific link, thank you! Is there any way to "narrow" the Elements tab to displaying only a portion of the HTML? For instance to narrow to the "div#content" element such that said element appears as the root of the Elements tab, decluttering the view from the parts of the page irrelevant to what one is working on.
bondolo 5y ago
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.
- yial 5y ago
  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 https://www.techdirt.com/articles/20071017/092927.shtml
  - Mikeb85 5y ago
    Joke but kinda real as some US state put sensitive info into HTML and is attempting to prosecute someone for finding it.
    - ano88888 5y ago
      got to find revenue for prisons
  - lowercased 5y ago
    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-calls-journalist-who-found-security-flaw-a-hacker-threatens-to-sue/ https://arstechnica.com/tech-policy/2021/10/missouri-gov-cal... is probably what was being referenced.
    - oblib 5y ago
      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.
account-5 5y ago
I've been looking for something like this for ages, clicked on the link with enthusiasm thinking it would be a general guide. Whilst the article is I retesting I'm still looking for that cross browser article.

428 points by tybulewicz 5y ago

$() and $$() are handy but very annoyingly the first is overridden by any website that installs jQuery globally. IIRC in chrome you then use x$()? I always have to look it up.

shp0ngle 5y ago
Yes this is what I wanted to add. $() is obviously inspired by jquery itself, but it has a slightly different semantics than jquery, so ironically jquery can override it. I am not sure what x$ is. However, what was not in the article, you can also you $x("/something") for xpath. That can be useful, because for some queries, xpath is easier than CSS selectors, and it is actually far more powerful (except that nobody really knows xpath nowadays). The $x thing is actually script around `document.evaluate(xpath, document.evaluate, null, XPathResult.ANY_TYPE, null)`, but good luck remembering how to use that stuff... I can never write doc.evaluate on the first try

amatecha 5y ago

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 :)

iudqnolq 5y ago
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)
jakear 5y ago
You'll see that in the Elements panel, it actually puts a grey " == $0" after the selected element to point you towards this feature. Also, $1 is the previously selected element, $2 is the one before that, etc.
chriscodepo8 5y ago
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-guide-chromium/console/utilities https://docs.microsoft.com/en-us/microsoft-edge/devtools-gui...
- amatecha 5y ago
  Nice, that's great to know! Thanks for capturing them on that page. BTW I've followed you on Twitter for years. Always lots of neat tips and interesting topics -- thanks for that! :)
wonnage 5y ago
If you’re using React the same applies in the dev tools component tree - $r is the currently highlighted component.

stefandesu 5y ago

Great article. I might be a bit late to the scene, but to add to the first section, there are also `console.time`, `console.timeLog`, and `console.timeEnd`. Very handy!

wnevets 5y ago

The Governor of Missouri is very upset about this.

alostpuppy 5y ago
I see what you did there.
NavinF 5y ago
Context for those who missed it: https://arstechnica.com/tech-policy/2021/10/viewing-website-html-code-is-not-illegal-or-hacking-prof-tells-missouri-gov/ https://arstechnica.com/tech-policy/2021/10/viewing-website-...
dylan604 5y ago
As discussed at the time DevTools are not the same thing as right-clicking->View Source.

yepthatsreality 5y ago

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.

steve_adams_86 5y ago
You might be surprised how limited some otherwise very competent people's understanding of dev tools is. Console being such a primary example probably isn't an accident; tons of people don't know what it's capable of. I suspect people don't RTFM because frankly there are so many Ms to R. It's overwhelming at times. Many carpenters can get by without learning little tricks here and there while still being excellent carpenters overall. I think it's the same in software. We tend to focus on doing what we know best, and sometimes that means we skip the odd manual here and there.
- yepthatsreality 5y ago
  Perhaps true. I would extend this to say that RTFM by attaining drips through blog posts that summarizes the M would lead to good competent developers over time, but this exclusive approach would create knowledge gaps (or “secrets”) that would make them excellent developers if they had RTFM otherwise.
- MonaroVXR 5y ago
  What's up with carpenters? I see a lot of references to it.
  - steve_adams_86 5y ago
    I personally like to find parallels between trades and crafts to help connect my thoughts and experiences to the more abstract world of software. I started my life in carpentry and joinery so it seems to be where my mind finds it’s foundations when thinking in systems and patterns.
    - 5y ago

amelius 5y ago

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.

chii 5y ago
it'd be nice if there's an async-trace feature, where you get a (ascii?) visualization of the graph of async calls, if given a promise. It'd have to be able to reach deep into the core of the vm to find out where the promise was created (which might be lost if that info wasn't recorded i suppose), so may not be possible.
eyelidlessness 5y ago
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.
- Aeolun 5y ago
  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’?
  - eyelidlessness 5y ago
    The difference is that an async function suspends on await, and continues to be active in the call stack until it returns. It doesn’t preserve the stack so much as continues to be on the stack. A Promise-returning function returns the Promise value synchronously and then/catch/etc continue from a new stack where they’re resolved.
  - tylerhou 5y ago
    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.

hutzlibu 5y ago

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?)

frosted-flakes 5y ago
They didn't "copy" the Chromium dev tools, they are the Chromium dev tools. Edge is a Chromium browser, after all.
- hutzlibu 5y ago
  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.
  - chriscodepo8 5y ago
    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.
    - hutzlibu 5y ago
      "I cannot just edit edge dev tools with edge," I could not "just" edit it like I am used to from chrome - but apparently had to activate a experimental setting. Which you did explain in a video. Not text. I read text.
      - chriscodepo8 5y ago
        I still want to understand the issue. The Sources tool is the same in Chrome and in Edge. And if you undock the devtools and you press CMD+Shift+I (or CTRL+I) on either Chrome or Edge you get a second DevTools instance to debug the first one. If you use a workspace, you edit files externally in either Edge or Chrome as they are the same thing. There is no difference in either of these use cases. What use case are you finding where it is different? I'm really confused.

recursivedoubts 5y ago

not mentioned in the article, but my favorite console trick is monitorEvents(elt) https://twitter.com/htmx_org/status/1455242575363723265 https://twitter.com/htmx_org/status/1455242575363723265 hugely helpful when debugging event-driven systems like htmx or hyperscript

mkl 5y ago
And unmonitorEvents(elt) to turn it off again. Monitoring every event is pretty noisy, so you can choose what to monitor with a second parameter: https://briangrinstead.com/blog/chrome-developer-tools-monitorevents/ https://briangrinstead.com/blog/chrome-developer-tools-monit... It would be nice if this made live expressions or something instead of filling up the console.

NAR8789 5y ago

> 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 good at crafting tutorials disguised as gameplay. Could we do this with dev tools? Has anyone tried to make "VSCode: the game"? Maybe "tip of the day" popups could be restructured as minigames? Possible hurdles I can think of off the top of my head: - a fancy tutorial probably runs into exactly what the author mentions on the next few lines: that adding more documentation doesn't fix things, because most people don't go to the documentation. - In a game it's very easy to tune the tutorial to what you'll later encounter. A dev tool tutorial... every dev's needs are different. I imagine you'd have to structure it as a tutorial for "core functionality", plus separate tutorials for each extension. - In the game context, I'm expecting to do certain actions repetitively. This has the side-effect of refining those skills. In a dev context, repetition is often considered a smell (though, I'd argue even in dev work we pick up a lot of little katas without thinking about it). - Harping on repetition some more... what about the debugging tools that I only need to use once in a blue moon?

hutzlibu 5y ago
"Has anyone tried to make "VSCode: the game"?" No, but something along that line. It is actually very hard, to do so in a consistent way, that is fun and useful.
dylan604 5y ago
Has anyone ever written a set of documentation solely by asking questions on StackExchange? I mean make an outline of exactly how you would do written docs, but pose each one of the sections in the outline as questions. You could have another user designed to be an expert for this app answer the questions. I'm not trying to game SO for points. I'm trying to head off the fact that nobody reads docs, but will head straight to a web search.
- hutzlibu 5y ago

1vuio0pswjnm7 5y ago

"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 away in "Developer Tools". The biggest "secret" not mentioned here is keyboard navigation. It is incredibly cumbersome to operate "Developer Tools" on a small form factor computer without a mouse. Here is one solution: In Chrome's, F12 to open Developer Tools, then Ctrl-P then type ">". Then can scroll all available commands using Up/Down or start typing and use autocomplete to search for commands. Whether this is faster and more effective than pointing+clicking/tapping on tiny screen areas, ticking/unticking tiny check boxes and scrolling around in tiny menus is a question for the reader. Talk amongst yourselves. For example, to navigate to Overrides, the key sequence is F12,Ctrl-P,">","des",Enter

hutzlibu 5y ago
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.
- chriscodepo8 5y ago
  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-guide-chromium/customize/shortcuts 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?
chriscodepo8 5y ago
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.

eyelidlessness 5y ago

Not 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 call will be evaluated, producing the desired side effect, its return value (`undefined`) is ignored, and otherwise add behaves the same as before. This can save 100s of paper cuts where you might otherwise rewrite a function or some other expression into a block of statements—in the arrow function case requiring curly braces and a return statement. Caveats: - sometimes you need to wrap the expression in parentheses to avoid syntax errors - it does not work with debugger statements, which have no expression equivalent

Zababa 5y ago
> 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. This will work in C too. The keyword here is the "comma operator": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

hsod 5y ago

Here’s one: in chrome dev tools, hidden behind two menu clicks, you can enable additional tabs including “media”. This is, afaik, the only way to get error messages from video decoding

leetrout 5y ago

https://developer.chrome.com/docs/devtools/console/utilities/ https://developer.chrome.com/docs/devtools/console/utilities... That's pretty great

dotancohen 5y ago
That is a terrific link, thank you! Is there any way to "narrow" the Elements tab to displaying only a portion of the HTML? For instance to narrow to the "div#content" element such that said element appears as the root of the Elements tab, decluttering the view from the parts of the page irrelevant to what one is working on.

bondolo 5y ago

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.

yial 5y ago
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 https://www.techdirt.com/articles/20071017/092927.shtml
- Mikeb85 5y ago
  Joke but kinda real as some US state put sensitive info into HTML and is attempting to prosecute someone for finding it.
  - ano88888 5y ago
    got to find revenue for prisons
- lowercased 5y ago
  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-calls-journalist-who-found-security-flaw-a-hacker-threatens-to-sue/ https://arstechnica.com/tech-policy/2021/10/missouri-gov-cal... is probably what was being referenced.
  - oblib 5y ago
    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.

account-5 5y ago

I've been looking for something like this for ages, clicked on the link with enthusiasm thinking it would be a general guide. Whilst the article is I retesting I'm still looking for that cross browser article.