前端Bug解决方案

2019年9月11日 118次阅读 来源: 月影

没错！我正在写bug呢！不管你是小白还是大牛，写bug无可避免，遇到bug怎么办？别慌！毛主席教导我们“战略上藐视BUG，战术上重视BUG”！
前端遇到的bug无非就三个方面结构层（HTML），表现层（CSS），行为层（JavaScript）。

一、结构层（HTML）

HTML出错的主要原因是对规范不够理解，没有按照规范来布局。网上搜到很多常见的HTNML错误都是如此：

错误1. 标签嵌套混乱

例1：比如常见的p标签里嵌套div标签

<p>我是一个段落<div>我是一个块级元素</div>我是一个段落</p>

浏览器解析后就变成这样了
《前端Bug解决方案》

例2：缺少结束标签，或结束标签时机不对。
有时候往往是一个标签没有闭合导致整个布局错乱。

/*错误代码*/
<div><a href="">1111<p>2222</p></div><p>3333</p>aaa</a>

/*正确代码*/
<div><a href="">1111<p>2222</p></div><p>3333</p>aaa</a>

错误原因：DTD中规定了块级元素是不能放在P里;P标签内包含块元素时，它会先结束自己。另外提一下，内联元素不可以包含块元素。
解决思路：如上图，就是谷歌浏览器按F12（command+option）打开控制台看元素。

错误2.滥使用br标签

br标签作用在于换行的，而被用来增加行间距和内联元素之间的换行。

/*错误代码*/
 <p>
    我是一句话
    <br />
    <br />
    我是一句话
    <br />
    <br />
    我是一句话
</p>
<br />
<br />
<br />
<p>
    <a href="">我是一个链接</a>  <br />
    <a href="">我是一个链接</a>  <br />
    <a href="">我是一个链接</a>  <br />
</p>

/*正确代码*/
<p>
    我是一句话<br />
    我是一句话<br />
    我是一句话
</p>
<ul>
   <li><a href="">我是一个链接</a></li> 
   <li><a href="">我是一个链接</a></li> 
   <li><a href="">我是一个链接</a></li>
</ul>

错误原因： br标签目的在于换行，作为增加间距不能准确的给出具体的间距大小，作为列表不能明确的表示这是一个列表。
解决思路：，通常是用line-height来调整行间距，用padding来解决段落之间的间距。这样也能很好的做到结构样式分离。

错误3.使用内联的样式

为了代码结构清晰，结构样式分离，我们不推荐使用内联样式。另外当有行为层的时候我们大多通过js来改变的是内联样式。在结构使用内联样式会带来很多麻烦。

/*错误代码*/
<img src="" border="0" alt="">
<div style="width: 200px; height: 40px;line-height: 40px;..."></div>

/*正确代码*/
<img src="" alt="">
<div class="box"></div>//使用样式表定义样式。

不在此一一列举，若你遇到代表性问题欢迎留言！参考:10种常见的HTML标签错误写法

小结：结构层（HTML）问题的解决方案就是谷歌浏览器按F12（command+option）打开控制台看元素结构是不是你设想的一样。

二、表现层（CSS）

少数原因由于粗心大意少写了分号或者结尾的花括号｝导致后面的样式都不起作用了。或者单词拼写错误引起的样式无效。在开发过程中建议使用代码提示，自动补全功能的编辑器（比如：WebStorm）。学习练习的时候使用手写的编辑器。
css错误大多来自对css权重的不理解。排除粗心因素通常遇到到设置的样式不起作用就是这类原因。

错误1：z-index不起作用，或者是负的margin值会影响z-index？。

p{background-color: red; width: 200px; height: 100px ; position: relative; z-index: 1}
div{background-color: green;width: 200px; height: 100px; margin-top: -50px ;z-index: 999}
 <p> 我是一个段落</p>
 <div> 我是一个块 </div>

错误原因，定位影响层级，定位元素层级高。z-index无效。另外浮动元素也影响层级。
解决思路：查找CSS错误的完整步骤
小结：表现层（CSS）解决方案还是利用浏览器的元素审查功能，查看你的元素，给元素添加行内样式测试是否有效。如果你的css样式经常不起作用。请认真阅读下面两篇文章css权重和Css常用的排序方式权重分配

错误2：在用background-image设置渐变背景的时候，在hover的时候设置background：none无效，还是有渐变背景。

解决方案：在hover的时候设置background-image:none才能清除渐变背景。

错误3：有的浏览器正常有的浏览器不正常

这里主要针对css3的兼容性，关于低版本的ie不做考虑。抵制垃圾浏览器从我做起！
例如

display:flex
display:-webkit-flex

错误原因：没有做兼容性处理；
解决方案：CSS3新特性，兼容性，兼容方法总结

三、行为层（JavaScript）

错误1：找不到对象

例如:

 <div id="div1">
    <!--<div class="div3"></div>-->
</div>
<script type="text/javascript">
    document.querySelector("#div1 > div").innerHTML = "first div";
    alert("111111111111");
</script>

当我们运行这段代码的时候报出了一个错误

"Uncaught TypeError: Cannot set property 'innerHTML' of null"    /AJAX_TEST/selector_test.html (43)

这个时候我们只要根据错误提示找到出错的地方(43)行，这个时候我们会发现这段代码

document.querySelector("#div1 > div").innerHTML = "first div";

出错的原因就是document.querySelector(“#div1 > div”)该选择器找不到该元素节点，然后我们根据选择器找到节点

 <div id="div1">
    <!--<div class="div3"></div>-->
</div>

发现该元素节点被注释掉了，我们将该注释取消就OK了
解决思路：在谷歌浏览器控制台查看有没有报错。有报错的，根据报错提示，直接找到报错的那行代码。
用注释法或者alert输出法查找原因。

错误2:方法/变量未定义

例如：通过类名获取元素在有的浏览器不支持
解决思路：用if判断如果浏览器支持的情况下怎么出来，不支持的情况下怎么处理，兼容性处理如下

   function getClass(n){    
            if(document.getElementsByClassName){
               return document.getElementsByClassName(n);
            }else{
                var objArr=document.getElementsByTagName('*');
                var arrClass=[];
                for(var i=0;i<objArr.length;i++){
                   var nameArr = objArr[i].className.split(' ');
                    for(var j=0;j<nameArr.length;j++){
                        if(nameArr[j]==n){
                            arrClass.push(objArr[i]); 
                        }
                    }
                }
                 return arrClass;
            }

小结：JavaScript错误处理方式
1.通过谷歌或火狐浏览器控制台查看错误提示，定位错误代码，打断点定位错误代码。
2.如果没错误提示的，在源代码中用alert输出，或者逐步注释功能代码块，定位错误代码片段。

    原文作者：月影
    原文地址: https://segmentfault.com/a/1190000011117180
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞