浏览器本地替换（local overrides）快速定位前端样式问题的案例详解（也是hook js的手段）

背景

1. 前端同学去排查另外一个前端同学样式问题，尤其是嵌入html和css后，整体样式出错，错在哪里，能否快速定位，运用override非常方便

2. 其中有静态页前端知识书写习惯的问题，也有一不小心缺少一个引号，一个封闭标识，多个 id 等等一些细琐的问题

规则

1. 样式规则

   1. 任何添加在静态页中的样式块，如果想用 class 来写样式，class 都不能做成全局样式，例如.row 这种方式不行，要使用 #mydiv .row 这种级联方式，来减少样式的约束力

   2. 写完的代码最好都丢到一些开发器（webstorm）中，帮忙检查，也可以让 AI 帮忙检查，避免单双引号缺失，多写，写错等问题。

定位步骤

遇到不要慌，Chrome 浏览器帮你忙

1. Chrome 浏览器有个 override 功能，该功能非常有用，在访问页面时，页面出错，我们想要快速定位，就要采用二分法删除的方式，来逐步缩小发生问题的地方

下面以 企业级私域营销一体化解决方案- WADesk 为例子

1. 打开控制台，点击网络（有些是英文版，对照着来），此时刷新一下页面，选择文档（Doc）过滤

   1. 我们的页面最小支持 1200px，所以保证控制台别挤压左侧页面过窄，不然样式就会出错，此外，也可以让控制浮起来，脱离当前页面

这就是文档页面，我们就是要修改它，来达到快速定位，这个连接是来自于服务端返回来的页面，我们现在想每一次都不让它访问服务端，而是访问我们覆写的页面

选择源代码（Source），找到替换（override），选择启用本地替换，这时如果你从来没有操作过，会让你找一个本机的文件夹来存放你要覆写的代码，你按照提示找好

启用替换之后，回到网路，点击该链接，右键选择保存并覆盖（save and override）

保存成功后，会自动切换到到源代码选项板

我们把 联系客服这四个打字  改成 联系王森，首先右侧 ctrl+f 搜索 contact-us，修改之后保存，刷新页面

已经成功了覆写了，接下来就是开始删除自己写的静态页内容，saasbox 的内容一般都是放在 main 标签下面，所以先搜索 main，找到 main 标签

找到了 main 标签，如果你有双屏，那此时可以用两个屏幕，一个编写，一个拿来展示，静态页编写变得特别省事，且刷新后即可渲染

网上下载一个轻量级开发器 vscode， 先给 index.html 创建一个副本，避免后面修改还得重新找，然后用 vscode 创建一个 html 结尾的文件，并把代码拷贝进去

先右键格式化一下 option+shift+f，然后 command+f 搜索到 main 标签，找到 main 下面的 section，利用快捷键 command+option+[

折叠好后就可以删除具体的 section 了，选中删除，然后再拷贝到替换选项卡的 index.html 并保存，之后再在浏览器中刷新一下，就看到了删除后的内容了

 

vscode 还有帮你检查是否缺少双引号，或者没有封闭元素的功能，错误之处会议红点标出

通过以上删除法，可以很快的定位影响样式的位置所在，定位问题，加以修改，就搞定了

如果想避免未封闭，或者引号使用错误等等，可以使用强大的 webstorm，但是这个开发工具需要收费，需要破解的可以找我，我有破解安装方式，采用 command + - 进行折叠，不过 webstorm 比较卡，一般机器运行比较慢

如果不想继续覆盖，或者避免以后遗忘，一定要在定位到问题后及时关闭覆写，不然会造成你有朝一日忘记此事，发现无论怎么修改中台的静态页自己的电脑都不变，而又不找原因！！！这是我吃的亏，切记切记