Some Examples of Local Overrides, New Features in Chrome Canary DevTools

If you want to start development using JavaScript and CSS, you would better choose Google Chrome Canary DevTools.


There were two events in last December, that was something undesirable for someone like me who uses DevTools occasionally when needed. One was Chrome Canary DevTools’ Local Overrides feature specification change, the other was that Mapping features were removed from regular Chrome DevTools.

In this article, I will describe for Local Overrides, the new feature of Chrome Canary DevTools implemented instead of Mapping feature, with two examples.
One of examples is for a demo, another is for a practical application example.
However, some settings are required for both Chrome Canary Browser and DevTools to make this new feature available, due to the changes in last month. “Both” means that we need to install Chrome Canary to use Local Overrides.

As for this setting, it has been  explained in this linked page [Chrome DevTools: Edit production websites with Network Overrides]. I recommand you to read it first if you did not know those changes.

Also, the description of this article is based on WordPress site examples because I have only WordPress website. On platforms other than WordPress, there is a possibility that it may not match your situation, but most things can be accomplished by your devising.…read more