为何从Chrome DevTools复制样式后粘贴结果格式混乱？

问题原因 #

你的猜测完全正确，问题确实来自Chrome新增的单位切换下拉菜单功能，这是Chrome 113版本上线该功能后出现的官方Bug，和你的操作、使用的开发框架都没有关系。
手动框选样式行内容复制时，DevTools会把单位切换下拉菜单里所有隐藏的可选单位文本也写入剪贴板，导致粘贴后出现大量多余的单位字符，你在记事本中也能复现问题，也验证了问题出在Chrome的剪贴板写入逻辑，和下游编辑器无关。

解决方案 #

• 手动复制时不要框选整行，双击选中你需要的单个属性值再复制，即可避免多余内容被写入剪贴板
• 右键点击目标样式行，选择DevTools自带的复制声明功能，可直接获取格式正确的完整样式代码
• 临时关闭该功能可进入DevTools设置页面，在「实验性」分类下取消勾选「CSS单位切换器」，重启DevTools后就会恢复旧版复制逻辑
• 该Bug已在Chrome 118开发版中修复，等待后续稳定版推送更新即可彻底解决问题

内容的提问来源于stack exchange，提问作者Mooze