Since yesterday afternoon, every time I try to directly modify a pre-existing CSS style through Chrome's developer tools it opens the JavaScript console and focuses that instead. This is only affecting localhost and isn't affecting live websites.

As an example, here is what the body tag on a site I'm working on looks like:


If I attempt to modify the margin to 5px, as soon as I click on the value and begin typing it opens and focuses the Console instead:


Notice how it's entered the 5 as the value, but the px has ended up in the automatically-opened Console window.

This isn't only happening with typing, either. I've noticed the following things:

  1. When opening the developer tools for the first time, the Console tab opens (about half a second later, even though it wasn't open when I last used the developer tools).
  2. This also happens when modifying colours through Chrome's colour picker - as soon as a colour is picked, it opens and focusses the Console.
  3. This also happens when using the up and down arrows to increment or decrement values.
  4. This does not happen when manually entering new style declarations or adding new style properties through the element.style area.
  5. This also does not happen when typing in property names, only their values (e.g. if I add a new padding declaration to an existing style declaration, I can type in "padding:" just fine, but as soon as I enter a value it focuses the console).

Any idea why this is happening? This was not happening yesterday morning and I haven't updated Chrome or changed any settings (at least, not intentionally).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.