from Hacker News

Web developer tool secrets that shouldn’t be secrets

by tybulewicz on 11/1/21, 7:24 PM with 104 comments

  • by bondolo on 11/2/21, 2:16 AM

    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.

  • by 1vuio0pswjnm7 on 11/1/21, 11:59 PM

    "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

  • by amatecha on 11/2/21, 1:08 AM

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

  • by recursivedoubts on 11/1/21, 11:56 PM

    not 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

  • by iudqnolq on 11/2/21, 12:10 AM

    $() 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.

  • by eyelidlessness on 11/2/21, 12:18 AM

    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

  • by amelius on 11/1/21, 11:52 PM

    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.

  • by NAR8789 on 11/1/21, 11:57 PM

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

  • by leetrout on 11/2/21, 12:41 AM

  • by account-5 on 11/2/21, 5:50 AM

    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.

  • by stefandesu on 11/9/21, 7:40 AM

    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!

  • by hsod on 11/2/21, 12:32 AM

    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

  • by hutzlibu on 11/1/21, 11:52 PM

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