Category Archives: Chrome DevTools

About Chrome devtools Inspector etc.

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.

Begining:

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

Chrome DevTools was not able to map local CSS files to network CSS files well on the site on WordPress Version 4.8.

If you suddenly become to be unable to do what you have done so far , may be you don’t feel better. But don’t worry. This is a story about WordPress.

Introduction:

In the previous post(sorry, no links) , I reported that I created a mapping  using by Chrome Canary, because I could not map the CSS files in the network folder correctly to the CSS files in the local folder by using normal Chrome.

However, in less than a month from that report, I was surprised that Chrome Canary DevTools suddenly became unable to make a mapping.

This problem was solved in the way I explain below, which also resulted in unexpected good effects too. We were able to map again with normal Google Chrome for some reason. What is going on …?…read more