如何在Chrome DevTools中覆盖缺失的brand.css以实现持久化样式修改？

问题场景 #

我们公司使用第三方电商服务，对方要求提供brand.css文件用于覆盖模板默认样式。页面<head>中已有指向该文件的<link>标签，但文件尚未上传（请求返回404）。需要在Chrome DevTools中修改样式并让修改在页面刷新后保留，避免手动比对主CSS文件的繁琐操作。

可行临时解决方案 #

方案1：利用Chrome DevTools Workspaces绑定本地文件夹 #

1. 打开Chrome DevTools，按F1进入设置，切换到「Workspaces」选项卡
2. 点击「添加文件夹」，选择本地存放brand.css的文件夹，授权浏览器访问权限
3. 切换到「网络」面板，刷新页面找到状态为404的brand.css请求
4. 右键该请求，选择「保存为」，将其保存到刚才绑定的Workspaces文件夹中（生成空的brand.css文件）
5. 此时DevTools会自动将线上的brand.css请求映射到本地文件，你可以在「Sources」面板找到该文件并编辑，修改内容会自动保存到本地，刷新页面后样式也会生效

方案2：使用Tampermonkey注入持久化样式 #

1. 安装Tampermonkey浏览器扩展
2. 新建用户脚本，替换为以下代码（将自定义样式写在customStyles变量中）：

// ==UserScript==
// @name         Persist Brand Styles
// @match        https://your-website-domain.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 从localStorage加载已保存的样式
    let savedStyles = localStorage.getItem('persistedBrandStyles');
    let customStyles = savedStyles || `
        /* 在这里编写你的自定义样式 */
        .example-class { color: #ff0000; }
    `;
    
    // 创建样式标签注入页面
    let styleEl = document.createElement('style');
    styleEl.textContent = customStyles;
    document.head.appendChild(styleEl);
    
    // 监听样式修改并保存到localStorage（需手动执行，或添加自动监听）
    window.saveBrandStyles = () => {
        localStorage.setItem('persistedBrandStyles', styleEl.textContent);
    };
})();

3. 在DevTools的「元素」面板找到注入的<style>标签，直接编辑样式内容
4. 每次修改完成后，在控制台执行saveBrandStyles()，样式会保存到localStorage，刷新页面后自动加载

方案3：临时修改DOM并利用MutationObserver自动保存 #

1. 打开DevTools控制台，粘贴以下代码并执行：

// 创建并注入自定义样式标签
let styleElement = document.getElementById('temp-brand-styles');
if (!styleElement) {
    styleElement = document.createElement('style');
    styleElement.id = 'temp-brand-styles';
    // 加载之前保存的样式
    styleElement.textContent = localStorage.getItem('tempBrandStyles') || '';
    document.head.appendChild(styleElement);
}

// 监听样式内容变化，自动保存到localStorage
const observer = new MutationObserver(() => {
    localStorage.setItem('tempBrandStyles', styleElement.textContent);
});
observer.observe(styleElement, { childList: true });

console.log('样式修改将自动保存，刷新页面后生效');

2. 在DevTools「样式」面板中，找到#temp-brand-styles对应的样式区域，直接添加或修改样式
3. 所有修改会自动保存到浏览器localStorage，刷新页面后样式会自动恢复

最终交付 #

当完成样式调试后，只需将本地brand.css文件（方案1）或从localStorage中导出的样式内容（方案2/3）整理成独立的brand.css文件，即可交付给开发团队。

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