Disabling the "Length Authoring Tools" (css unit selector) in Chrome Devtools Inspector

Google ChromeGoogle Chrome-Devtools

Google Chrome Problem Overview


The undesired functionality
In Chrome 95 there was introduced new functionality where the user can hover and click on the unit part of a css value to hotswap the unit.
The feature is part of a package solution that has been labeled "Length Authoring Tools" in the release notes, and can be seen in action and described in detail in the release notes on the official blog.

How can this feature be disabled?

Issue 1:

enter image description here

If a css-line in the inspector says padding: 0 10px; then the user can click the px-part of the line and open a selector that let's the user swap px to other units such as rem,vmax or in.
Clicking this part of the value no longer lets the user edit the entire value quickly. Most users already know what unit they desire to use beforehand, so they do not need to be helped to accidentally select pt or vw when working exclusively with px everywhere else.

Issue 2:
Ctrl+CAfter Ctrl+V
When selecting and copying properties from the inspector there is now inserted whitespaces/new lines between the value and the unit since the unit portion seems to be considered a separate element. This makes prototyping in the devtools and copy/pasting to external documents very tedious and broken.

Google Chrome Solutions


Solution 1 - Google Chrome

Updated answer 2021-11-16:

An option has been added to disable Length Authoring Tools in Chrome 96.

The following is mentioned in the official release notes for Chrome 96.

To disable Length Authoring Tools, navigate to this location in the DevTools and uncheck the checkbox:
Settings > Experiments > Enable CSS length authoring tools in the Styles pane.

How to disable Length Authoring Tools


But...
The main issues regarding Length Authoring Tools have also been fully remedied in Chrome 96.

The initial incentive to disable these tools has been greatly diminished because of this.

A chevron will now appear to the right of the hovered value instead of reacting to clicks to the entire unit portion of it.

Length Authoring Tool displaying chevron to the right

Copy paste now also works as intended.

Selected css prepared for Copy Copy/Paste result


Conclusion:
It is now possible to disable the Length Authoring Tools, but you might no longer need to.



Old answer:

You can't.
(Though fixes are coming!)


It is not possible to toggle this feature in the current live stable release ( Chrome 95.0.4638.69 ).

Fixes have been added to Chromium ( [1], [2], [3] ) that are slowly making their way to the stable release of Chrome.

But help is on its way...

Chrome 96 is scheduled to be released on November 16 2021 (source), or ~3 weeks after October 28 according to this official tweet. It will at least contain a revert to free text editing of css properties (source). Hopefully version 96 will address the issue completely, but if it doesn't then the next major release is scheduled for January 4 2021 (If this issue is unresolved by then somebody at Google should be fired).

As for now, Chrome Canary seems to have these fixes implemented and might be considered an alternative solution to the issue if you find the current state of Length Authoring Tools unbearable.

Please be advised that Chrome Canary can be quite unstable.



This question and answer will be edited and corrected once there are real fixes in the live stable version.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMagnusView Question on Stackoverflow
Solution 1 - Google ChromeMagnusView Answer on Stackoverflow