[HN Gopher] How I test site speed changes using Chrome's local o...
___________________________________________________________________
How I test site speed changes using Chrome's local overrides (2021)
Author : illdave
Score : 50 points
Date : 2023-07-27 10:56 UTC (12 hours ago)
(HTM) web link (tryblackbird.com)
(TXT) w3m dump (tryblackbird.com)
| andromaton wrote:
| The snippet for fetching performance numbers is useful but it's
| cargo culting (ie, using incorrectly and needlessly)
| Number.EPSILON [1], besides not using the built in toFixed(2)
|
| How universal is the drive to try to keep others from making
| needless mistakes?
|
| [1] "FCP is " +Math.round((fcp + Number.EPSILON) * 100) / 100
| horsawlarway wrote:
| Ok - I think this article pitches the wrong thing (or at least
| buries the lede).
|
| I think the key point is that by using overrides, he can
| basically implement a deployed change that uses production data,
| but without having any access or control over production
| infrastructure, and with no risk for other users.
|
| Lots of folks have correctly pointed out that running locally is
| essentially a solved problem. He can do it against prod data,
| because he's overriding the prod configuration.
|
| I've done exactly this for non-browser (and some browser)
| applications before (using local MITM proxies) but it's nifty
| that chrome lets you skip the certificate headaches and just
| loads a resource from disk.
| ljm wrote:
| I find it most handy for debugging, especially if you've got
| the sourcemaps available (infinitely easier without minified
| code though). In that sense the developer console is an
| underutilised tool when trying to nail down problems,
| especially in highly stateful SPAs and I tend to use it as a
| REPL before I start putting pen to paper in my editor. So much
| easier than trying to create the ideal state locally if you
| already have it handy somewhere else.
|
| Although I notice in general that this style of development (or
| its close friend REPL-driven development) is hard to teach for
| people heavily accustomed to print debugging or even TDD.
| mostlystatic wrote:
| Local overrides are super useful for testing site speed:
|
| * Your local setup is likely different from production (not
| serving from production domains, not using image resize services,
| using different HTTP compression...)
|
| * You might not be able to run tests on localhost, e.g. if you're
| an external consultant or working in technical SEO (who often
| want to give specific recommendations to devs as dev attention is
| scarce and expensive)
|
| There are still some limitations of testing changes in DevTools:
|
| * Testing a fresh load is a pain (need to clear OS-level DNS
| cache, need to clear the connection cache in Chrome, need to
| clear cookies/service worker)
|
| * DevTools throttling doesn't represent server connections
| accurately (you need to throttle at the OS level for accurate
| data, which slows down your whole computer and requires admin
| rights)
|
| WebPageTest [1] and my own tool DebugBear [2] now support
| experiments to make it easy to try out content changes in a
| controlled lab environment.
|
| [1] https://product.webpagetest.org/experiments [2]
| https://www.debugbear.com/docs/experiments
| CalRobert wrote:
| [flagged]
| chayesfss wrote:
| Love testing with chrome personally, all the extensions make it
| so easy to use
| onion2k wrote:
| This is good advice for everyday browsing, but _please_ test
| your web apps in all browsers, including Chrome.
| CalRobert wrote:
| Firefox users have been dealing with devs completely ignoring
| everything but Chrome for years.
| exceptione wrote:
| A good way to end chrome's deathly entanglement of the web is
| to make chrome untenable.
|
| Supporting chrome in taking over the web is not a neutral
| act.
| easton wrote:
| ...does Firefox have this? I use it because Edge's dev tools
| lock up on my work machine, if it does it would help a lot.
| cornedor wrote:
| Afaik not directly, but you can use for example Charles to
| intercept request and replace network requests.
|
| https://www.charlesproxy.com/
| raman162 wrote:
| I love using chrome overrides to test if a front-end bug is fixed
| on production data! The feedback is immediate and I feel more
| confident with a PR.
|
| It works well for me since I'm not allowed to export the
| production data onto my machine or testing environments for HIPPA
| reasons.
|
| This is way better than reviewing an exception from obfuscated
| javascript (without sourcemaps) and trying to figure out where it
| occurred.
| Thoeu388 wrote:
| There is Linux command that throttles speed on network interface.
| You can fully automate loading speed test, and run it as part of
| integration tests.
| shortrounddev2 wrote:
| I have coworkers who only use 2 of chromes debugging tools: the
| console and the network tab. They dont know about breakpoints,
| mapped typescript/react files, or local overrides. Every time
| they come to me with some issue they're facing, I have them set
| up breakpoints first before we do anything. Usually that's all
| that we need to do, and we figure out the problem in about 5mins
| aloer wrote:
| I usually recommend chrome dev tools to newer colleagues by
| saying that they are probably the dev tools with the biggest
| budget. No idea if I am right but so so many features.
|
| That said, 95% of my usual problems can be debugged with the
| console. Often it is faster, easier to grok and does not
| interrupt flow as much as a forgotten breakpoint would.
|
| console.time, console.count, debugger; (breakpoint set in code)
| and $0 (code ref to highlighted html element) are super useful
| as well. Usually that is enough before manually setting
| breakpoints
|
| also nice to know: Safari is great for (offscreen)canvas
| debugging
| nuancebydefault wrote:
| On a tangent, it is weird sometimes that people not always pick
| the right tool for the job, even if the effort is small and the
| results pay off immediately. Like slicing carrots using a
| potato knife or even a table knife.
| dotancohen wrote:
| If you'd care to list some of your most used - or most useful
| tools - I'd love to read it. I suspect that I don't even know
| about most tools available to web devs.
|
| For what it's worth, I stick to server-side for most of my
| work. But occasionally I have to fix something on the front
| end - whether it be a UI issue in CSS/HTML or a real problem
| in Javascript. So a quick mention of those front-end tools
| available and what they do would be great. Thank you!
| shortrounddev2 wrote:
| Not him but I use typescript with webpack. Webpack has
| webpack serve, which runs a simple HTTP server that shows
| an index.html for testing your script. It adds some file
| watchers on your source so if you make any changes it
| automatically compiles. Webpack will build the .map files
| so you can run breakpoints in your browser on the original
| source, but if you develop with vscode, you can create a
| launch profile which allows you to attach your vscode
| debugger to the browser and put your breakpoints in VSCode
| instead of the browser (which I prefer the UI for). This
| works with react as well
| dotancohen wrote:
| Thank you. I have been learning React lately (as a
| backend developer, I love it) and this will be helpful.
| I've considered using webpack or one of the competitors -
| there are so many that I've simply just avoided them
| until now.
| dlisboa wrote:
| Most people don't know all the tools at their disposal, or
| how to use them. I certainly don't and I consider myself
| above average in this regard.
|
| Chrome DevTools has that issue since it's always changing,
| adding new things, and they're not discoverable/learnable
| from inside of it.
|
| If you had a drawer of 50 kitchen implements, would you even
| think to search for the mandoline slicer if you didn't
| already know about it?
| sa46 wrote:
| Chrome dev tools are an engineering marvel; the downside is
| it's quite hard to find the perfectly shaped tool.
|
| I spent about a week tracking down a memory leak in our web
| app. About 5 days in I discovered you could compare heap
| snapshots which led to the root cause of a chrome bug with
| hidden classes. The fix was to move object spread to the
| bottom of an object literal.
|
| Here's the bug. It was a fun one to hunt:
| https://crbug.com/v8/13303
| nuancebydefault wrote:
| You are right. But what I wanted to say is, some people
| stick to very basic tools, even after you show them more
| convenient tools like a sharp knife with a firm handle and
| a knife sharpener. Often the switching part of the process
| seems to big of a hassle.
| shortrounddev2 wrote:
| Yeah, I've shown the junior devs a dozen times how to set
| up breakpoints in VSCode and they still opt to
| console.log everything instead
| MonaroVXR wrote:
| I'm junior myself and this is so weird.
| eddd-ddde wrote:
| In my humble experience, I know about them, yet I still never
| use them, I find it infuriatingly confusing to work with. The
| only time I've ever liked breakpoints and regular debuggers is
| when working with C, anything else feels off to me.
| lofaszvanitt wrote:
| After wading through the mumbojumbo like lcp, fid, cls et al. I
| have learned there are anti flicker scripts.... oh man, brave new
| world.
| mcdonje wrote:
| >It works by saving a copy of the page you're working on (or any
| other resource, like a JavaScript or CSS file), letting you edit
| that, and then serving that file instead of the live version.
|
| 1. You can already set up a local host on your machine to run
| tests. I thought that was standard practice.
|
| 2. I'm glad browsers are offering a similar solution which is
| easier to set up and useful for front end work. I just checked to
| see if Firefox has similar functionality, and it seems they
| support diffs for CSS only, but there is an add-on called
| Resource Override that appears to have similar functionality.
___________________________________________________________________
(page generated 2023-07-27 23:02 UTC)