昨天收到微博运营同事的消息说,不止一位用户在微博中反映,我们站点的所有主要页面的中间内容区域呈空白状,换了几个浏览器都是这样。
本来是优先报给运维部门的,也拉上了我前端。点开微博挨个看了下,发现其中一个用户在回复时提到了自己的QQ。遂主动加了好友帮助排查问题,步骤:
- 换浏览器,问题依旧;
- 开Chrome内核浏览器(用户用的搜狗),开控制台,勾选禁用JS看效果,问题依旧;
- Ctrl+U,将源代码复制出来,存纯文本,发了过来代码一切正常;
- 开控制台,Elements工具,右键选中
<html>
点Copy,粘贴为文本文档发来我看,此时发现了问题
在浏览器渲染结果后的代码中,<body>
上面出现了
<style type="text/css">.advbox,.subbox_adv,.subadv2,[class^="advbox"],.advarticle,.serve{display:none !important;}div[class="row"],div[class="advbox pa-b20"],div[class="advbox"],div[id="tmadvtip"]{display:none !important;}</style>
一行被注入的样式代码,其中的规则一看就是针对autohome广告的屏蔽代码,但其中有div[class="row"]
这么个规则。这个class是我们PC全站使用的CSS Grid布局中最基础的一个类,导致了几乎所有PC站点内容部分被当作广告误杀了。
锁定问题后,为了再度确认,我们自己安装QQ管家,但没有发现这个情况,与客户再度确认后确实是因为QQ管家导致这个问题,且用户使用的是11.0.16779.224测试版,最新的正式版则没有这个问题。
关于此次事件,体会最深的是做事的态度,在群里拉了好多人分析问题甚至是踢皮球,远不如直接去联系客户,最快速地判定问题点,迅速出台解决方案,这也是汽车之家一直以来贯彻的企业文化。
准备周末的周例会上给大家分享下这次事件,给大家涨涨经验,更是一个再度强调企业文化的好机会。