接口数据问题导致的前端界面样式错乱 （解决前端BUG思路）

欢迎来到Altaba的博客  2018年6月8日

今天在维护老版的新闻监测项目时候，发现一个问题，列表数据样式错乱了，我第一反应是自己是不是自己不小心动了js里面那个拼接字符串部分，少了什么闭合标签（页面列表数据都是通过拼接字符串动态加载到页面的，这个项目我是维护的，维护拼接字符串这块真的好累呀）

简单介绍下自己平时改BUG思路，问题来了首先是要找到问题所在（此处省略10000字），逐步缩小范围，然后解决，是不是感觉说了等于没说，就拿这个博客缘由说起吧：

1、发现样式错乱，我第一反应是字符串拼接里面少了一些闭合标签，这时候是不是立马就去检查大段拼接的数据呢，NO

2、我第二部是查看该问题是个例还是普遍存在，个例的话极大可能和前端逻辑没多大关系，无非就是极端处理需要完善下，如果普遍存在那就肯定是前端逻辑出现问题了，检查后发现是个例账号，个例页面出现

3、此时接下来第一步：我将大段拼接好的列表dom数据打印到控制台，copy到一个静态文件看结构是否不完整，发现结构没问题，这时候我脑海立马想到，可能结构数据中带有非闭合的标签数据，我这边拿到添加到标签中，浏览器将非闭合数据当成为标签给解析了，果然，事实正如猜想，有个em标签“<em...”,就是它引起的整个页面的样式错乱！！！数据全局替换下就可以了

所以以此为戒，望广大程序员在遇到问题时候能冷静多角度思考然后再去解决，切勿急躁盲目