没错！我正在写bug呢！不管你是小白还是大牛，写bug无可避免，遇到bug怎么办？别慌！毛主席教导我们“战略上藐视BUG，战术上重视BUG”！
前端遇到的bug无非就三个方面结构层（html），表现层（CSS），行为层（javascript）。
一、结构层（HTML）
HTML出错的主要原因是对规范不够理解，没有按照规范来布局。网上搜到很多常见的HTNML错误都是如此：
错误1. 标签嵌套混乱
例1：比如常见的p标签里嵌套div标签
<p>我是一个段落<div>我是一个块级元素</div>我是一个段落</p>浏览器解析后就变成这样了
例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" >
<div style="width: 200px; height: 40px;line-height: 40px;..."></div>
/*正确代码*/
<img src="" >
<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输出，或者逐步注释功能代码块，定位错误代码片段。