前端Bug解决方案

Charles 发布于2019-08-21 16:25 / 2126人阅读

摘要：不在此一一列举，若你遇到代表性问题欢迎留言参考种常见的标签错误写法小结结构层问题的解决方案就是谷歌浏览器按打开控制台看元素结构是不是你设想的一样。解决方案在的时候设置才能清除渐变背景。

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

一、结构层（HTML）

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

错误1. 标签嵌套混乱

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

我是一个段落

我是一个块级元素

我是一个段落

浏览器解析后就变成这样了

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

/*错误代码*/

2222

aaa /*正确代码*/

2222

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

错误2.滥使用br标签

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

/*错误代码*/

我是一句话

我是一句话

我是一句话

我是一个链接
 我是一个链接
 我是一个链接

/*正确代码*/

我是一句话
我是一句话
我是一句话

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

错误3.使用内联的样式

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

/*错误代码*/



/*正确代码*/

//使用样式表定义样式。

不在此一一列举，若你遇到代表性问题欢迎留言！参考: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}
  我是一个段落
  我是一个块

错误原因，定位影响层级，定位元素层级高。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：找不到对象

例如:

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

"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")该选择器找不到该元素节点，然后我们根据选择器找到节点

发现该元素节点被注释掉了，我们将该注释取消就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
小结：JavaScript错误处理方式
1.通过谷歌或火狐浏览器控制台查看错误提示，定位错误代码，打断点定位错误代码。
2.如果没错误提示的，在源代码中用alert输出，或者逐步注释功能代码块，定位错误代码片段。

GPU云服务器云服务器前端解决方案前端方案 bug webrtc bug

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88527.html

前后端分离的问题与解决方案

摘要：版本升级每个文件方法头标明版本号，每次修改需修改版本号大于原版本号，即为版本升级。这些天项目有的API出现版本控制问题，着实忙乎了一小阵，因为项目使用TP5的传统方法进行版本控制（api目录下进行版本区分，由请求路径决定使用的版本） showImg(https://segmentfault.com/img/bVbekSM?w=200&h=128); 但是问题往往是，项目使用了v2版本...

zilu 2019-07-01 10:23 评论0 收藏0
年轻人，劝你不要做前端

摘要：前端娱乐圈这些年前端有点热闹。刷量，撕，版本帝想要混前端，除了要有足够强的学习力。领导说所有测试的都要先指派给前端，前端查清原因后再指给当事人。年，前端不再只是切图仔。 ➢ 前端娱乐圈这些年前端有点热闹。 github刷量，vue撕x，版本帝angularJs...... showImg(https://segmentfault.com/img/remote/146000001937...

sevi_stuo 2019-08-23 17:56 评论0 收藏0
前端Bug解决方案

摘要：不在此一一列举，若你遇到代表性问题欢迎留言参考种常见的标签错误写法小结结构层问题的解决方案就是谷歌浏览器按打开控制台看元素结构是不是你设想的一样。解决方案在的时候设置才能清除渐变背景。没错！我正在写bug呢！不管你是小白还是大牛，写bug无可避免，遇到bug怎么办？别慌！毛主席教导我们战略上藐视BUG，战术上重视BUG！前端遇到的bug无非就三个方面结构层（HTML），表现层（CSS...

cppowboy 2019-08-01 17:34 评论0 收藏0
前端Bug解决方案

摘要：不在此一一列举，若你遇到代表性问题欢迎留言参考种常见的标签错误写法小结结构层问题的解决方案就是谷歌浏览器按打开控制台看元素结构是不是你设想的一样。解决方案在的时候设置才能清除渐变背景。没错！我正在写bug呢！不管你是小白还是大牛，写bug无可避免，遇到bug怎么办？别慌！毛主席教导我们战略上藐视BUG，战术上重视BUG！前端遇到的bug无非就三个方面结构层（HTML），表现层（CSS...

voyagelab 2019-08-29 13:25 评论0 收藏0