Web 开发 Browser 调试大全

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和性能调试功能没有。期待新版本。

Web 开发 Browser 调试大全相关推荐

Web开发常规调试方法与常见问题分析
一.Web项目基本原理现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...
VS Code 新扩展，面向 Web 开发人员调试 DOM
微软项目经理 Paul Gildea 发博说,他们针对 Web 开发人员,发布了一个新的 VS Code 扩展-- Elements for Microsoft Edge,这个扩展还是一个预览版,目 ...
firfox 和 chrome 移动端Web开发页面调试
Firefox浏览: 1."Alt+t" 选择工具栏中的"工具">Web开发者工具>查看器>点击红框所指的地方或者 F12 [当然这个歌前提 ...
Mozilla技术布道者给Web开发人员推荐Firefox插件列表
本文作者Robert Nyman是Mozilla的技术布道者,从1999年开始从事Web前端开发 .让Web开发人员的生活尽可能轻松和高效,这是Firefox一直坚持的目标之一.通过提供工具和可扩展的 ...
Firefox火狐浏览器web开发调试开启强制刷新缓存模式
Firefox火狐浏览器web开发调试开启强制刷新缓存模式最近做项目的时候,在火狐浏览器发现缓存难清理,用Ctrl+F5 Ctrl+R 等在谷歌和IE浏览器的快捷键没用,搜索了一下,发现火狐清理缓存 ...
Web开发经验谈之F12开发者工具/Web调试[利刃篇]
引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜 ...
230套java web开发PDF书籍和CHM参考手册资料大全免费下载
230套java web开发PDF书籍和CHM参考手册资料大全免费下载下载地址:http://yun.baidu.com/s/169jYH 文章来源:HTML5星空http://www.html5 ...
Web开发兼容性系列文章（一）：不同设备浏览器的userAgent值大全
Web开发兼容性系列文章(一):不同设备浏览器的userAgent值大全 Posted on 2011-07-22 12:37 随它去吧阅读(1388) 评论(11) 编辑收藏 http://ww ...
Python面试题大全（三）：Web开发（Flask、爬虫）
目录 Web Flask 140.对Flask蓝图(Blueprint)的理解? 141.Flask 和 Django 路由映射的区别? Django 142.什么是wsgi,uwsgi,uWSGI? ...

Web 开发 Browser 调试大全

Web 开发 Browser 调试大全相关推荐

最新文章

热门文章