Back to Blogs
Image For Blog

Chromes Broken Developer Tools

Debug

30 Oct 2021

Chrome has had a recent update where they've changed a few things in their dev tools.

Sounds great to hear but I feel they've concentrated on some really annoying features that we're not only not needed but have annoyed nearly all developers I've spoken too.

One feature they've added is clicking on a style e.g padding: 30px; now opens a drop down menu of all the available prefixes you could have in terms of web measurement. The problem lies in this is the first thing that shows when people are used to clicking into a value for a quick change. I cant think of a specific situation where I've thought "I'll just change this 30px; to 30em;".

The not so bad feature(which I don't actually enjoy!) is you can now click and hold on the value and slide the mouse left or right to change the value. Again an unneeded feature in my opinion! I much prefer to click into the value and input the numbers myself or at the very least move the value up and down with the arrow keys. The slider is far too sensitive to be able to accurately change the value.

The main gripe people are having at the moment is copy and pasting the code you've added in the tools so you can easily implement it into your CSS file.

For example you may have:

color: white;
padding: 2em 0 0 2em;
border-radius: 0 0 1em 1em;

You go to copy and paste the values and pasting it into a text editor will give you:

color: white;
padding:
2
em
0 0 2
em
;
border-radius:
0 0 1
em
1
em
;

I assume Chrome will release another update very soon to fix these issues. Hopefully they've already done that by the time you're reading this. It would be nice if they had tested this stuff before releasing, it does seem like the channels for testing features for huge companies and even in AAA video game companies is left to the user and the expectation of just fixing things if people complain enough.

These are obviously minor issues thankfully but there's been a lot of shouting about it in the community. Despite this Chrome still seems to be ahead of the game in most aspects of browser useability regarding SVG animations and some extra allowed CSS like allowing overflow: overlay; which firefox despises for some unknown reason but that's for another time!

This website was built in SVG animation and CSS3 Animation.

This is an ongoing project to better understand SVG animation across browsers so this website may change often.

For the best experience use Chrome on desktop.