51Testing软件测试论坛

标题: Web调试工具：火狐浏览器之Firebug讲解 [打印本页]

作者: 姿态 时间: 2019-2-1 14:29
标题: Web调试工具：火狐浏览器之Firebug讲解
本帖最后由姿态于 2019-2-1 14:31 编辑

　firebug是网页浏览器firefox下的一款开发类插件，他集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发javascript、CSS、HTML和Ajax的得力助手。
　　

　　一、窗口介绍
　　控制台：JavaScript命令行操作，显示JS错误信息、提示信息、日志信息
　　HTML：显示页面的HTML源码
　　CSS：编辑页面的CSS源码
　　脚本：显示页面脚本和调试
　　DOM：显示页面对象和DOM属性
　　网络：显示页面下载和花费时间
　　Cookies：显示页面请求的Cookies、以及查看和修改（有启用和禁用）
　　二、查看某一元素的两种方式
　　firebug中点击“点击查看页面中的元素”按钮，然后再web中鼠标滑动至对应控件，然后点击左键
　　三、HTML源码查看
　　在右侧可以出来CSS的样式
　　可以定位、可以对页面进行调试修改
　　四、网络
　　304表示已经缓存至本地的文件: 这就表明了客户端中所请求资源的缓存仍然是有效的,也就是说该资源从上次缓存到现在并没有被修改过.条件请求可以在确保客户端的资源是最新的同时避免因每次都请求完整资源给服务器带来的性能问题.

[attach]121488[/attach]

　 五、XHR：监控ajax的使用请求
　　AJAX概述:通过利用AJAX，JS可以通过JS的XML HttpRequest对象，直接与服务器来通信。
　　通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。
　　比如：百度输入某一些字符，返回结果会直接返回，而无需点击页面的搜索按钮

[attach]121489[/attach]

六、控制台
　　进行JS调试，比如输入 console.dir(console):

　　每个浏览器的开发者调试工具的侧重点不同，需要明白各自的优缺点，按需取用。比如chrome的工具在性能监控和资源查看上更有优势。

作者: Miss_love 时间: 2020-12-31 10:51
支持分享

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)