At the beginning of this year Chrome came out with Local Overrides features for Chrome 65. This is related, but distinct from Workspaces, which is a way to save your devtools changes to a local project. While Workspaces seems neat, it’s rare that I’m working on a site whose code isn’t generated by some server-side tool. However, with Local Overrides I can work in the devtools inspector, and still persist those changes between page loads, even if they are separate from the project.

I knew this would be useful when I saw it, but I wasn’t sure how. Then, I was presented with a problem with the External Links Drupal module. This module provides external link icons to links that lead off the current domain. It also provides ways of excluding, including and regex-ing links to decide if you want it to have the external icon or not. We had implemented a configuration fix for a site using the module. However, on our testing site, the external icon no longer showed up. I suspected this was a result of the difference in the urls. The hard part was when it turned out that the logic that controlled internal/external links was constructed entirely in client-side JavaScript.

The use of the External Links module is in no way endorsed by the writer of this post…

So the situation was this:

  1. A live site implements this feature that works as expected.
  2. A test site with a different url structure worked differently.
  3. The logic governing these two situations runs entirely on page load.
  4. The logic comprised of a five line if..else statement.
  5. I want to compare the logic of the two sites.
if (url.indexOf('http') === 0
        && ((!url.match(internal_link) && !(extExclude && url.match(extExclude))) || (extInclude && url.match(extInclude)))
        && !(extCssExclude && $(this).is(extCssExclude))
        && !(extCssExclude && $(this).parents(extCssExclude).length > 0)
        && !(extCssExplicit && $(this).parents(extCssExplicit).length < 1)) {
        external_links.push(this);
      }

Since I can’t start console.loging on the live site, this was the perfect place to try out Local Overrides!

Overrides in pictures

The first step is to choose a folder to store your overrides. Click the Sources tab, Overrides, then + Select folder for overrides.
instructional image
This pops up the system browser. I like to put the overrides on my Desktop because I see them as temporary files, and ones that will be swept into the trash when I clean off my Desktop.
instructional image
Click the "Allow" button, it's easy to miss on the top right of the window. Then you browse through the Page files to find the file target file.
instructional image
Now edit to your heart's content. All changes will be saved to your local overrides. Overridden files are indicated with a purple dot. One thing to note, all files edited here will be saved to your local overrides.
instructional image
On the Overrides tab you can view all the available overrides. That includes ones from other sites. You are also able to turn the feature on and off with the Enable Local Overrides checkbox.
instructional image
This is pretty cool. It gave me the tools I needed to compare complicated multi-line switch statements on two sites, without modifying production code, or any server code. The danger, which you might be anticipating, is that it's easy to forget that this is turned on, and load the page with unexpected behavior. That said, this could also be leveraged to add personalized behavior to certain sites. Overall, this is a pretty cool tool and one I'm sure to use in the future.