Web 开发 Browser 调试大全

java-mans

浏览: 11460697 次

最近访客更多访客>>

morelily

devcang

serisboy

chjinniu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15568)

社区版块

存档分类

2012-08 ( 1467)
2012-07 ( 1872)
2012-06 ( 1125)
更多存档...

Summary 一下。Browser很多，对应的调试插件有很多。为了在茫茫中，锁定一盏或几盏明灯。这里总结一下

1. Firebug -- for Firefox
2. IE Developer Toolbar – for IE
3. Web Developer Tools - for Chrome
4. Firebug Lite – for all browsers

1. Firebug
Firefox插件，集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。
6个Tab页： Console HTML CSS Script Dom Net

功能介绍
快速定位页面元素源码。选择源码高亮显示页面元素
查看页面元素的CSS样式，实时更新和显示CSS
快速查看页面JS错误和警告，并定位错误位置
JS 断点调试
性能测试。测试页面反应速度(以ms计)，找到瓶颈点
Ajax 调用分析， Post 和响应分析。

安装使用
http://getfirebug.com/downloads
安装方式
1. 浏览器直接点入以上链接安装
2. 下载插件拖入浏览器进行安装
打开方式
1. 点击 browser 右下角的
2. 快捷键 F12

细部功能

格式化的HTML代码，清晰的DOM层次
实时修改和查看HTML与CSS样式，并有样式修改提示（上下方向键）
跟踪动态改变一些HTML元素的样式表或背景色（如鼠标的onmouseover）
快速定位页面元素

显示 js error and warning, include file name and line no。
查看脚本log. – console.log;console.debug;console.warn;console.error; console.group
console.dir() – 显示一个对象所有的属性和方法
console.trace() – 追踪函数调用轨迹
JS 断点调试，单步进入，执行。实时查看js变量值等
Debug Ajax. URL，Get/post 参数，http头以及响应
Ajax 调用耗时和响应的大小

调试页面的性能，找出系统的瓶颈。显示打开页面需要下载的文件大小及所耗费的时间
“网络” Tab. 看整站的速度，找最耗时间的段。(粗)
console.profile 调试function 级别的速度。(细)

2. IE Developer Toolbar
IE7需要安装,IE 8 已经内置。DOM图HTMl,CSS; 图片报表；高亮表格及元素，Color Picker,ruler,magnifier. IE 8中自带的支持Script 调试
更注重样式调整
ieTester : IE版本的页面兼容性(DebugBar是其页面调试插件)

功能介绍
快速定位页面元素源码。选择源码高亮显示页面元素
查看页面元素的CSS样式，实时更新和显示CSS
快速查看页面JS错误和警告，并定位错误位置
JS 断点调试(需要在Microsoft Script Editor 进行)
性能测试。测试页面反应速度(以ms计)，找到瓶颈点
Ajax 调用分析， Post 和响应分析。
Resize page

安装使用
http://www.microsoft.com/download/en/details.aspx?id=18359
安装方式
.msi 安装文件。直接点击安装
打开方式
点击如下图标

细部功能

量测元素大小和颜色读取
在线Validate HTML,CSS是否符合标准

格式化的HTML代码
快速定位页面元素
页面同类元素批次outline, all link report
实时修改HTML功能在IE 7 上没有，实时修改CSS较Firebug较弱

需要使用Microsoft Script Editor 进行JS调试。调试前需要在“Internet 选项”中启用脚本调试功能
被动调试 – 当IE 碰到JS语法错误及运行时错误，自动弹出
主动调试 - JS代码中使用 debugger 语句

缓存查看与清理(Proview IE7 session loss case)
页面Resize,
Ruler
Color Picker

在线Validate HTML, CSS。
需要网络上的系统才可以

3. Chrome Web Developer Tools

Chrome插件。实时编辑DOM和CSS;JS调试；分析执行时间。 2011年五佳最受欢迎的Web开发工具。开发者中就有Firebug的创始人。

功能介绍
快速定位页面元素源码。选择源码高亮显示页面元素
查看页面元素的CSS样式，实时更新和显示CSS
快速查看页面JS错误和警告，并定位错误位置
JS 断点调试
性能测试。找到瓶颈点(Speed Tracer)
Ajax 调用分析， Post 和响应分析。
在线Validate 是否符合标准
CPU Memory
自动检查建议修改

安装使用
安装方式
使用Chrome进入以上地址，进行安装
打开方式
1. F12 调出和关闭 2. 点击 “开发人员工具”(右图)

细部功能
格式化的HTML代码，清晰的DOM层次
实时修改和查看HTML与CSS样式，并有样式修改提示（上下方向键）
跟踪动态改变一些HTML元素的样式表或背景色（如鼠标的onmouseover）
快速定位页面元素

显示 js error and warning, include file name and line no。
JS function 快速查找，断点调试

调试页面的性能，找出系统的瓶颈。显示打开页面需要下载的文件大小及所耗费的时间(相比Firefox,更直观)
CPU 和Heap 分析

清晰的查看cookie,和更新、清除Cookie
Web 开发的Code Review工具。哪些js, CSS导入重复了？哪些可以压缩传输

4.Firebug Lite
Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome
Same look and feel as Firebug
Inspect HTML and modify style in real-time
Powerful console logging functions
Rich representation of DOM elements

安装使用
http://getfirebug.com/firebuglite
安装方式
1. Bookmarklet(推荐)
Add “Firebug Lite” link to bookmarks
2. live link – include following code at top of the <head>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
3. Local link– download add include following code
打开方式
1. 打开需要调试的页面 2. 点击收藏的书签链接
优劣总结
无须安装，只需要添加一个书签link 查看HTML和CSS够用，JS debug和性能调试功能没有。期待新版本。

分享到：