本文详细描述了一种由Chrome浏览器内置谷歌翻译功能引起的前端数据错乱问题，通过观察到的异常现象，如数据接口与翻译接口同时调用，导致客服电脑上数据查询错误。文章提供了三种解决方案，包括手动禁用翻译、代码级禁用翻译和设置正确的语言属性。
背景：Chrome浏览器自带谷歌翻译，这个翻译还是挺实用的，但如果前端代码设置不当，再加上用户操作失误就容易造成很多莫名其妙问题，下面详述问题现象、排查过程及解决方案
一、问题现象
有台客服电脑查数据怎么都查不对，地址、价格都对不上，但是别的电脑没问题、后端返回数据没问题，这个数据也不是随机的，每次查出来很固定，但是不对
二、排查过程
1. Table 主键
初步怀疑为 antd的 Table组件问题，因为之前遇到过当多列 key出现重复，就会有某些行的排序错乱、数据错乱等奇怪问题
但是看 Console没有任何提示，带参数查询单条记录避免 key重复问题还是出现数据错乱
2. 观察现象
仔细观看发现每次查询会调用两个接口，除了数据接口外，还有个谷歌翻译接口，点开返回数据发现果然跟此有关，关闭翻译重刷页面后问题解决
三、解决方案
Chrome 如果设置了自动翻译会引发页面文字乱码以及页面崩溃和页面不刷新等问题
1. 方案一：手动禁用翻译
① Chrome全局关闭询问翻译选项
② 针对单独网站禁用翻译
2. 方案二：代码禁用翻译
<html translate="no">
全局属性 translate被用来规定对应元素的属性值及其子文本节点内容，是否跟随系统语言作出对应的翻译变化，默认为 yes
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/translate
3. 方案三：代码设置语言
<html lang="zh-CN">
理论上 html这个标签语言与系统语言不符时，才会出翻译的询问或者走用户设置的自动翻译功能。 因此将 lang设置成正确语言即可
最后一个小 Tips：碰到疑难杂症的 BUG 时候，排查需要很久。首先要想办法给用户止损，让他们能正常使用。这时候「Chrome 无痕模式」一般能让用户临时凑合使用。
扫一扫
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
