小伙伴遇到这个问题说不想干前端了——一次Chrome翻译造成的玄学bug

突然有一个海外用户反馈问题，说有一个页面点击新增按钮就白屏。对方不会说中文，所以全程英文交流，用上了我抠脚的6级哑巴英语，沟通过程稍微麻烦一点。一开始听到白屏，心里还是毫无波动的，这种问题呢，无非就是某个接口数据返回不太科学，然后前端没有容错。只需要看见报错信息必然可以秒解决

前排提示，现在掘金发文的时候有违禁词会发不出去。所以花了半小时发文章，反复使用二分法排除定位违禁词语，能发出去说明前面内容没问题，然后再加一点内容继续试。我还在发文章的时候，就看见200浏览了，给200个小伙伴道歉，那时候还在试敏感词中，文章内容不完整，现在已经好了，可以回头看了。例如"报错"有时候需要改成"错误"才能过、页面不能有emoji、"jiechi"也是违禁的（以后叫hijack吧）。这里强烈建议，给出违禁词清单、或者监测到违禁词的时候弹出来提示一下

让用户打开控制台

先让用户刷新再复现一遍，保持一直打开console的状态下操作。再手把手截图指导，如何打开console切到哪个面板，再让对方截图，结果是这样的报错：

这个就突然让我有点懵逼了，竟然不是 cannot read property xx of undefined 这种报错。细看一下，是react源码的报错：dispatch后setstate、触发批量更新、执行调度。估计是中途有其他操作把dom节点改了，react瞬间懵逼。即使知道大概是这样，但怎么排查呢?那就先直接来捞接口数据，放本地跑一下看看能不能复现吧

引导用户发response过来

经过一番抠脚英语交流和步骤截图，终于让用户把相关接口的返回数据都发过来了。拿到了数据，那就到我表演了。我本地开始跑dev，再把这些接口全部代理到刚刚拿到的数据上

结果，居然正常运行，一切问题都没有发生

接着我尝试看看对方的录屏，结果发现也没什么错误操作，唯独就是点一下按钮，就报错了，而且还是同样的react源码内部的报错，接口都正常。最后，决定让用户扫我电脑的码，在我电脑登录账号

在我电脑登上了别人的号，开始一顿操作，来到同样的页面，点一下按钮，结果又正常，什么都没有发生…小朋友，你是否有很多问号

远程桌面

实在没办法了，我直接视频通话打过去并要求屏幕分享。打通了，开始全程口语交流，抠脚的英语口语水平只能慢慢的讲，估计对方勉强听得懂吧。我重复了之前的操作，果然又出现了，来到同样的页面，点了按钮，马上报错了。还是一样的问题

于是开始打断点，随便操作了几下，居然自己好了！？？

后面刷新页面，全都自然好了…

心累，暂时不管那么多了，没事就好了吧，事情就此为止。

“looks fine for now. Thank you so much!”

事情再次出现

过了几天，在愉快地写需求的时候，突然被机器人拉群，还是同样的人，还是同样的问题，只是不同的页面链接了。先别急着动手，捋一下思路：

• react源码错误，必然是有react之外的原生dom操作
• 确认过代码，没有任何其他原生dom操作
• 对方在控制台做了dom操作？不可能，无技术背景
• 那只能是浏览器插件、中间人注入(基本不可能优先级调最低)、翻译
• 忘了上次打断点的事情吧，不能投机取巧

上次的经验告诉我，直接远程控制是最好的方法。于是马上连上了远程控制。检查了一下浏览器插件，没有什么插件有影响——浏览器插件pass。确认一下是否翻译，问了对方说有没有开了翻译，对方说没有(远程桌面看不见弹出菜单的，所以需要人家告诉我)

ok，人家说没有翻译，那我就假设这是实话。既然问题发生的根本原因就是有react之外的原生dom操作，那就是dom节点数很有可能不一样。于是我在控制台输入了一下$$('*')，发现对方电脑上是2400个节点。在我电脑上输一下，只有2000个节点。让同事帮忙看看，一样也是2000个节点。于是我决定对比一下第一个不一样的节点是怎样的，在对方的电脑控制台上输了一段简单的脚本：

$$('*').