前端Bug解决方案
没错!我正在写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" 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输出,或者逐步注释功能代码块,定位错误代码片段。
前端Bug解决方案的更多相关文章
- IE8/9的几个前端bug解决方案
最近做的东西需要兼容IE……啊真是令人忧伤…… 解决低版本IE的buggy inline-block 低版本的IE只对本身inline的元素能用inline-block,而本身为block的元素需要设 ...
- jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案
jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI ...
- 如何区分前端BUG和后台BUG?
测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的技能.这里先说定位问题的要求,定位问题要向深入,前提当然是对功能.产品的流程.开发方案.开发人员 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案
Ext1.X的CheckboxSelectionModel默认全选之后不允许编辑的BUG解决方案,ext 的CheckboxSelectionModel在后台默认选中之后,前台就不允许编辑的bug是存 ...
- FIS前端集成解决方案
FIS前端集成解决方案-文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 FIS开发实例 --附件下载-- 什么是FIS FIS提供了一套贯穿开发流程 ...
随机推荐
- shell_跳板机推送公钥
#!/bin/bash#push publickey to aap-servers#将局域网内可以ping通的主机ip保存到一个文件> ip_up.txtfor i in {2..10}do { ...
- java中多线程入门有趣介绍
我们在网上可以看到所有有关于java的线程的基本概念的很多解释,不乏有很多详细经典的解释和代码解说.但是我们的很多初学者看完不能有一个直观的印象,特别是一些没有编程基础的学习者,很多时候要花很多时间去 ...
- vue项目环境搭建与组件介绍
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- 2)#ifndef和#pragma once
#################################################################################################### ...
- day20-双下new方法,单例模式
# 1. __new__:构造方法,它创造对象,程序员口头语:new一个对象.先执行__new__方法再执行___init__方法. class Goods: def __init__(self):# ...
- 如何回收VCSA 6自带的vPostgres数据库空间
最近有学生连续反应由于VCSA磁盘空间满了,导致服务无法正常启动,寻求压缩数据库空间的问题.首先说下,VCSA的数据库是没办法图形界面管理的, 它的内置vPostgres数据库的管理只能通过命令行来完 ...
- 陈天奇XGBoost文章解读(未完成)
这个是我下载的原文在看,然后结合一些网上的资料学习,先贴一个网上的资料. 终于有人说清楚了XGBoost算法 XGBoost阅读之Weighted quantile sketch XGBoost论文翻 ...
- Python迭代器和关键字 global ,nonlocal
1.关键字 global : 可以修改全局变量 可以在局部作用域声明一个全局变量,剪切 : 此时局部作用域没有该变量,全局作用域中有 name = 1 def func(): global name ...
- s检验|k-S检验|适应性检验|独立性检验|Cintinuity correction |Fisher‘s Exact Test|Likelihood Ratio|Person Chi-Square|φ系数|Cramer’s V|列联系数
应用统计学: s检验是检验否符合正态,而k-S检验是检验否符合一种分布. 已知分布便知道参数,知道参数不知道分布. 适应性检验 多项式分布的情况如下例: 二项分布是多项式分布一种情况,所以就是上式中只 ...
- 为什么说iPhone无望恢复中国市场?
直到现在还记得,iPhone 4在国内当时引发的追捧狂潮.彼时iPhone 4绝对是一机难求,上至土豪下至学生都以拥有iPhone 4为荣.发售接近一年后仍然需要加价,价格动辄达到七八千元,真正成为了 ...