前言

用了一个很大的词“前端调试”，事情是这样的，这两天一直在解决一个bug，我们用iscroll做了一个下拉刷新的产品列表页面，总会出现页面渲染错乱的问题，只要用js动态修改html或者在浏览器开发者工具中修改css、html就会恢复正常。

本来想分享一下iscroll的问题，避免大家走弯路，后来索性把我们定位问题的方法和过程也记录了一下。

页面效果

调试工具修改

目录

• 前言
• 以往诡异问题解决办法
  • 文档头类型
  • 标签闭合
  • 排除法
  • 百度/谷歌大法
• 调试过程与解决办法

以往诡异问题解决办法

以前也遇到过很多类似的问题，大部分是用以下三种方法解决的

1. 文档头类型**

文档头要告诉浏览器用什么类型的语言和版本来渲染你的代码。 大部份前端书籍都有介绍HTML的来历，推荐书籍《web标准开发之道》。

我们需要了解HTML与XHTML的来历与版本,,出现渲染异常的问题如下：

• 文档头未定义
• 版本与标签不一致
• 标签是否需要闭合
• 标签是否支持大小写

简单列一下html与xhtml的历史

第一阶段 HTML4/HTML4.01

第二阶段 XHTML1.0/XHTML1.01/XHTML1.2/HTML4.01 随后，W3C将重点放在向后兼容的XHTML上， 2000年年初，W3C发布：XHTML1.0 完全兼容HTML4.01 紧随其后，XHTML1.1发布，放弃与HTML4.01兼容，移除大量样式标签、font、align等。

第三阶段 HTML2/XHTML5 2002年，W3C转变工作激进转变，提案HTML2，当时浏览器不支持、HTML4.01不兼容。 2007年，W3C内部提出HTML5，向后兼容 XHTML1.01 和 HTML4.01。 2009年放弃更新HTML2，然后就有了咱们念叨的HTML5.

2. 标签闭合

很多前后端未分离的项目，经常出现后端工程师套完页面以后出现页面错乱的情况，大部分都是标签没有闭合或者js生成的DOM没有闭合，很多高版本的浏览器可以自动补全不规范的标签，不影响展示，但是很多低版本的浏览器就没有那么智能了，比如IE。

3. 排除法

这也是一个常用的办法，删除js和css，如果还复现，那肯定是HTML的问题，然后再删50%的html，依次去定位问题，直到定位到问题代码代码。

4. 百度/谷歌大法

你懂得，有问题问度娘，疑难杂症一般在网上都有人分享或者吐槽，直接百度问题关键词。

调试过程与解决办法

解决问题的办法很多，简单写一下我的调试过程，虽然笨拙，写出来也可以避免大家重复我的笨拙。

1. 确认jsp的文档头

   之前遇到过静态页面是HTML5的文档头，开发用的是HTML4，会发现异常问题，确认jsp与静态页面一致后，排除文档头问题。

2. 删除多余HTML标签

   把其他元素全部删除，仅留下上拉加载部分的DOM标签，还是存在问题，然后再对比标签，无异常，排除标签闭合问题。

3. 删除多余CSS样式

   团队的同事们比较认真的学习过张鑫旭大神的《CSS世界》，按照**“z-index 不犯二原则”**，页面并没有使用z-index，使用的positon定位，并有增加，删除其他css代码后，还是可以复现，感觉与positon有关系。

4. 删除JS代码

   注释掉iscroll实例就好了，然后再github上找position的lssues， 找到讨论关于 z-index、translate、transform的，然后提取关键词搜索。

5. 定位到问题点

   见张鑫旭大神的博客

6. 找到解决办法

   根据内容的理解，增加了transform: translateZ(100px)。

最终效果 齐活儿

才疏学浅，如有问题恳请斧正。