6 ms·

How I test site speed changes using Chrome's local overrides (2021)

58 points by illdave 3y ago

CalRobert 3y ago
[flagged]
- chayesfss 3y ago
  Love testing with chrome personally, all the extensions make it so easy to use
- onion2k 3y ago
  This is good advice for everyday browsing, but please test your web apps in all browsers, including Chrome.
  - exceptione 3y ago
    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.
  - CalRobert 3y ago
    Firefox users have been dealing with devs completely ignoring everything but Chrome for years.
- easton 3y ago
  …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 3y ago
    Afaik not directly, but you can use for example Charles to intercept request and replace network requests. https://www.charlesproxy.com/ https://www.charlesproxy.com/
shortrounddev2 3y ago
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
- nuancebydefault 3y ago
  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.
  - dlisboa 3y ago
    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?
    - nuancebydefault 3y ago
      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 3y ago
        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
lofaszvanitt 3y ago
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 3y ago
>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.
- rasz 3y ago
  >1. You can already set up a local host on your machine to run tests. I thought that was standard practice. Yes, run your own local server. You used to be able to just save local copy and click on it. Chrome killed this, now you have to run your own infrastructure even when all you want is testing one letter change.
andromaton 3y ago
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
Thoeu388 3y ago
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.
horsawlarway 3y ago
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 3y ago
  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.
raman162 3y ago
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.
mostlystatic 3y ago
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 https://product.webpagetest.org/experiments [2] https://www.debugbear.com/docs/experiments https://www.debugbear.com/docs/experiments

58 points by illdave 3y ago

CalRobert 3y ago

[flagged]

chayesfss 3y ago
Love testing with chrome personally, all the extensions make it so easy to use
onion2k 3y ago
This is good advice for everyday browsing, but please test your web apps in all browsers, including Chrome.
- exceptione 3y ago
  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.
- CalRobert 3y ago
  Firefox users have been dealing with devs completely ignoring everything but Chrome for years.
easton 3y ago
…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 3y ago
  Afaik not directly, but you can use for example Charles to intercept request and replace network requests. https://www.charlesproxy.com/ https://www.charlesproxy.com/

shortrounddev2 3y ago

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

nuancebydefault 3y ago
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.
- dlisboa 3y ago
  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?
  - nuancebydefault 3y ago
    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 3y ago
      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

lofaszvanitt 3y ago

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 3y ago

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

rasz 3y ago
>1. You can already set up a local host on your machine to run tests. I thought that was standard practice. Yes, run your own local server. You used to be able to just save local copy and click on it. Chrome killed this, now you have to run your own infrastructure even when all you want is testing one letter change.

andromaton 3y ago

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

Thoeu388 3y ago

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.

horsawlarway 3y ago

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 3y ago
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.

raman162 3y ago

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.

mostlystatic 3y ago

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 https://product.webpagetest.org/experiments [2] https://www.debugbear.com/docs/experiments https://www.debugbear.com/docs/experiments