如何无需打开DevTools即可应用Chrome本地覆盖？

办法一：命令行启动Chrome时自动加载DevTools #

Chrome的本地覆盖需要DevTools会话初始化才能触发，用命令行参数可以强制DevTools随标签页自动打开（你可以手动最小化它，不影响正常浏览）：

• 找到Chrome的可执行文件路径：
  • Windows：C:\Program Files\Google\Chrome\Application\chrome.exe
  • Mac：/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
• 创建快捷方式（Windows）或用终端启动（Mac/Linux），添加参数 --auto-open-devtools-for-tabs：
  • Windows快捷方式目标栏示例："C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
  • Mac终端示例：open -a "Google Chrome" --args --auto-open-devtools-for-tabs
• 这样每次打开Chrome，所有标签页都会自动加载DevTools，本地覆盖会在页面加载时直接生效，关闭DevTools后也能保留规则

办法二：用Chrome扩展替代本地覆盖（彻底脱离DevTools） #

如果不想一直开着DevTools，写个极简扩展注入CSS是更稳妥的方案：

1. 新建一个文件夹，比如custom-css-fix
2. 里面创建两个文件：
   • manifest.json（扩展配置）：

     {
       "manifest_version": 3,
       "name": "自定义CSS覆盖",
       "version": "1.0",
       "content_scripts": [
         {
           "matches": ["*://你的目标网站域名/*"], // 替换成要覆盖的网站，比如"*://*.baidu.com/*"
           "css": ["override.css"]
         }
       ]
     }
     

   • override.css（放你的自定义CSS代码）：

     /* 把你本地覆盖里的CSS代码直接粘过来就行 */
     .some-element {
       color: #fff !important;
       background: #000 !important;
     }
     

3. 打开Chrome扩展页面（输入chrome://extensions/），开启「开发者模式」，点击「加载已解压的扩展程序」，选择刚才的文件夹
4. 以后目标网站加载时，扩展会自动注入你的CSS，完全不需要依赖DevTools

补充说明 #

你遇到的“关闭DevTools后覆盖保留但首次启动需打开DevTools”的情况，是因为DevTools初始化后Chrome会缓存覆盖规则，但重启浏览器后缓存失效。上面两种方法都能解决这个问题：

• 办法一适合临时测试，保留你原来的本地覆盖工作流
• 办法二更适合长期使用，稳定性更高，不用管DevTools状态

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