WEB 调试神器 -- Firebug

以下是来自慕课网--《WEB 调试神器 -- Firebug》的学习总结

Firebug 网页浏览器 Firefox 下的一款开发类插件,有人说是WEB 调试神器。它集HTML 查看和编辑、Javascript 控制台、网络状况监视器于一体,是开发HTML 、CSS 、Javascript 和Ajax 的得力助手。


1.下载安装

    a.下载安装火狐浏览器!

    b.然后,添加组件

    c.搜索firebug,并安装

    d.f12 啊亲,firebug在浏览器下方就显示啦!


2.操作界面

控制台:js 命令行操作,显示js错误信息、提示信息、日志信息。右侧可以自己输入创建自己的js

HTML:显示页面的源代码,并且支持修改

CSS:显示页面的CSS源码,支持修改

脚本:显示页面的脚本,支持调试

DOM:显示页面的对象和DOM属性

网络:显示页面下载和花费的时间

Cookies:显示页面请求的Cookies,支持修改

上述的标签,启用的是黑色,未启用时灰色。具体的还有很多的细节,比如最左边的小甲虫,点击有惊喜,可以设置firebug 很多的东西的!


3.HTML 、CSS 、网络标签就不在这里详细介绍了。

4.网络标签中的XHR,即是Ajax 监听啦。你想试一下?试一试打开www.baidu.com,打开firebug,看看当你在搜索框输入内容时XHR 的信息显示的变化吧!

5.我要放大招啦!那就是最重要的firebug 的功能啦!js 调试!

a.首先啊来学习一个基本的函数信息:console... 当你在js 代码中加入这个,在控制台就能打印出信息了,对于变量啊执行的函数的效果啊,这是很好的查看运行效果的函数!试一试在程序中加入一下的代码,并运行看看控制台的信息吧!

var i =0;
console.log(i);
console.info(i);
console.debug(i);
console.warn(i);
console.error(i);
b.在控制台右边有一个代码调试填写的区域,可以在这里直接写自己的调试的代码,点击运行将进行代码的调试运行。

6.可以玩的地方都点击着试试啦,还有鼠标右键啊什么啊,多试一试!


还有话要说:我感觉,我用了很久的谷歌自己的调试器啊,还有火狐本身对开发者的调试工具好像也够用了额,不知道这个插件其实厉害在哪里,可能是我没有研究透吧。

还有话想要说:介绍一个在线好玩的开发工具:https://codepen.io/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值