web前端开发教程系列-3 - 前端开发调试工具分享

• 前言
• 一. Bug出现的缘由
  • 1. 主观缘由或者是出现这么多浏览器的缘由
  • 2. 另外客观缘由：
• 二. 调试工具
  • 1. Firebug
  • 2. Chrome
  • 3. IE11
  • 4. IETester
  • 5. 虚拟机
  • 6. Safari
  • 7. Opera
• 三. 其它常见Bug
• 四. 其它思路

 

前言

前几年前端开发的难点在于没有一个强大的调试工具可以快速的找到问题所在，直到2006年Firebug问世，真正的让前端进入一个工程化可调试的时代。但随着前端需求的不断增长，任务的完成难度也随着增大。Chorme的横空出世让从业者眼前一亮，他的调试工具，进一步细化了可调试的粒度，让前端真正从全方位来把握代码执行的流程性能等，更是与Chrome紧密结合，免去了安装或兼容致使的其它问题，受到了不少开发者的信赖或推崇。但因为一些历史或平台缘由，咱们必须得了解其它调试工具，使工做的效率更加的方便或快速。
下面将会从各个层面来介绍这几个耳熟能详的调试工具，分享一些我的的使用心得：

 

一. Bug出现的缘由

1. 主观缘由或者是出现这么多浏览器的缘由

• 各大巨头之间的利益博弈
  由于互联网作为我的电脑向外延伸的有效手段，
• 为了霸占互联网信息的入口
  浏览器是惟一互联网的出入口，能够绑定不少功能，即绑定用户。好比chrome的收藏夹同步功能。
• 为了抢占市场，优化体验
  为了让这个用户量达到倍数级的增加，因此在细节方面不断的优化，这个能够从chrome的版本号上就能看出来。

 

2. 另外客观缘由：

• 结构不合理，让单一div承载更多的样式
• 浏览器自己的问题，实现标准不一致
• 标准自己很混乱
• 编辑器致使的编码问题

 

二. 调试工具

1. Firebug

• Firebug入门指南
• Firebug控制台详解
• Firebug高级用法
• Firebug是我的使用比较顺手的CSS调试工具，多是先入为主，或者是我的习惯的缘由。
  用Inspect工具可以有效的找到Html,CSS布局的问题，单击Inspect工具会在页面上选择须要调试的范围块，而后Firebug相应的焦点会逃到HTML面板中，在HTML面板中点击相应的DOM结构，页面上方的预览区域就会有相应的布局样式呈现，细心的读者应该会发现，Margin为黄色，Padding为蓝色。
  而后如何调试的？
  若是页面中出现bug时，本质的问题时：浏览器呈现的布局与指望中有误差，如何寻找误差？就是利用Inspect观察页面中的布局是否达到了预期的位置。
• Style 标签中属性的显示
  Style里边显示的样式及属性是全部应用到这个标签上的列表集合，

2. Chrome

• 格式化代码
• 查看元素绑定了哪些事件
• 快速的根据勾子找到核心代码区域
• 高效的利用工做区，进行远程调试
• 利用Profiles进行性能优化
• 利用Audits能够进行页面无用CSS的监测或其它方面的建议等。

其它技巧：

• ctrl+ shift + F:全部 js 文件中搜索&查找 js 函数定义
• 经过左右方向键能够折叠源码
• JSONView 能够在浏览器中以树型的方式查看json
• Pretty Beautiful Javascript 格式化压缩js
• Vimium vim的方式操做chrome
• Visual Event
  主要用途是查看某个元素具体绑定了哪些事件

为何没有提到Firebug，Firebug的JavaScript调试，新版加了代码着色以后，有时候反应比较迟缓，甚至会有假死的状况，另外因为插件自身的缘由，并非真实的模拟代码执行的流程。因此JavaScript的调试优先推荐Chrome调试工具。

3. IE11

通常用IE版本大于7的浏览器上根据版本信息来调试大于7的浏览器，基本没有大的偏差，IE11的debuger我的感受仍是有进步的，是想从细节处来吸引用户。可是因为自己技术基因的欠缺，易用性方面与Chrome仍是有很大的差异，即便这样，目前仍是IE版本下调试者的惟一选择。

4. IETester

IeTester虽然有不少缺点，但就从目前的市场来看，他是惟一一款能够方便测试Ie6的软件。另外他还有一个插件能够在有限范围内像Firebug同样调试IE6，也能够安装在虚拟机的IE6上。
另外仍是解决思路的分享，简单的问题简单处理。

5. 虚拟机

由于IETester并不能真实的模拟IE6，因此有些特殊的Bug只能到虚拟机真实的环境中调试，在直接的IE6上能够安装IETester的Debugger插件，能够方便的解决一些Bug。

6. Safari

由于Mac上默认是Safari，并且有必定的用户市场，因此safari的调试也得关注一下。

由于默认的开发菜单是不显示的，因此经过下面的方法让他显示出来：

• 在偏好设置里边显示常规选项卡。
• 高级选项，勾选在菜单栏显示高级选项。
• 关闭选项卡，在浏览器的工具栏出现了开发菜单，就能够调试，其实和Google Chrome浏览器是同样的。可是功能没有Chrome强大。

7. Opera

Opera的调试仍是须要手动来开启。

• 点击Opera按钮菜单，选择更多工具，点击启用开发者工具。
• 以后菜单里就会多出来开发者工具一项。
• 从开发者工具中选择WEB检查器，也能够呼出调试器窗口。

以上两款只作为辅助的调试手段，通常代码结构写的规范或标准，在这两款上面基本没有大的问题。

 

三. 其它常见Bug

• 检查HTML元素是否有拼写错误、是否忘记结束标记
• 检查CSS是否书写正确 （w3c文件校验）
• 用删除法肯定错误发生的位置
• Float元素的父元素必写Clearfix
• 是否忘记了写DTD?DTD是不是在第一行？
• 是否重设了默认的样式?
• 是不是编码问题？

 

四. 其它思路

遇到特别怪异的Bug解析不了，及时的寻求别人的帮助，可使问题快速的获得解决。

 

---

西安中级前端开发：284216186 ，欢迎加入~！