Google Chrome更新后从Inspector复制CSS出现格式错乱问题如何解决

问题产生原因 #

该问题由Chrome 113及后续版本DevTools新增的长度单位快速切换功能导致：为了支持点击单位就能快速切换PX/EM/REM等长度单位，DevTools将CSS声明中的数值和单位拆分为了两个独立的DOM节点，全选复制时两个节点的内容会被自动插入换行符分隔，最终出现数值、单位、分号各占一行的格式错乱问题。

修复方案 #

• 临时替代操作：不要直接框选复制整段CSS规则，右键点击对应CSS规则行，选择「复制声明」即可得到格式正常的代码。
• 永久关闭相关功能：
  1. 打开DevTools后按F1，或点击右上角三点图标打开设置面板
  2. 找到「实验性」（Experiments）分类
  3. 取消勾选「启用长度单位提示（Enable length unit tooltip）」选项
  4. 重启DevTools后复制功能即可恢复正常
• 也可以将Chrome升级到118及以上版本，官方已在后续版本中修复了该功能导致的复制格式兼容问题。

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