Chrome扩展Pesticide无法在本地开发站点生效问题求助

核心原因 #

Chrome扩展默认没有权限访问file://协议的本地页面，也可能被限制了本地开发服务（localhost类地址）的访问权限，所以才会出现公网页面功能正常、本地页面失效的情况。

解决操作步骤 #

• 打开Chrome扩展管理页面：在地址栏输入chrome://extensions/后回车
• 找到对应的调试扩展（Pesticide/Web Developer），点击卡片下方的「详细信息」按钮
• 在详情配置页中找到「允许访问文件网址」选项，将开关切换为开启状态
• 如果你使用的是localhost等本地开发服务地址，同步将「扩展的站点访问权限」设置为「所有站点」
• 刷新本地页面后重新触发扩展功能即可正常使用

其他排查方向 #

如果完成上述操作后依然失效，可以排查以下问题：

• 本地项目的全局样式是否存在* { border: none !important; }这类高优先级样式，覆盖了扩展注入的边框样式
• 确认当前打开本地页面的Chrome用户配置文件，和安装对应扩展的配置文件为同一个
• 检查Chrome的广告拦截、脚本拦截类扩展，是否拦截了调试工具扩展的样式注入

无扩展替代方案 #

你也可以不需要依赖第三方扩展，直接在本地项目的样式代码中临时插入一行代码，实现和Pesticide完全一致的调试效果：

/* 仅临时调试使用，用完删除即可 */
* { outline: 1px solid #f00 !important; }

该写法使用outline属性，不会改变元素的盒模型尺寸，比border属性更适合样式调试场景。

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