Chrome Dev Tools无法实时编辑嵌套媒体查询问题求助

当使用CSS预处理器的嵌套媒体查询写法时，会遇到Chrome DevTools无法实时编辑断点内样式的问题：修改内容会立即还原，页面也不会同步更新，但非嵌套的常规媒体查询写法可正常编辑。

示例代码对比 #

可正常编辑的非嵌套写法 #

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

这种写法下，可直接在DevTools中修改1024px断点下的grid-template-columns值，页面会同步更新。

无法实时编辑的嵌套写法 #

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @media (min-width: 1024px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

采用这种嵌套写法时，在DevTools中编辑断点内的样式，修改会瞬间还原，页面无变化。

问题说明 #

这是Chrome DevTools的已知问题，根源在于预处理器转译嵌套语法后，DevTools无法正确建立转译后CSS与原嵌套代码的映射关系，导致编辑操作无法持久化。

临时解决办法 #

• 开发调试阶段临时改用非嵌套的媒体查询写法，调试完成后再换回嵌套写法。
• 使用Chrome DevTools的「本地覆盖」功能：将页面加载的转译后CSS文件保存到本地目录，直接修改本地文件中的对应样式，修改会同步到页面且不会被还原。
• 若使用Sass/Less等预处理器，开启更详细的source map配置，确保DevTools能精准追踪到嵌套媒体查询的原代码位置，部分场景下可缓解该问题。

内容的提问来源于Stack Exchange，提问作者Joakim Melkersson