插件FireBug
简介:fire不过是一款基于前段开发的工具,是Firefox浏览器的扩展插件,它可以调试javascript,查看DOM、分析css、监控网络流量以及进行ajax的交互等。
一:概述
1、Firebug的特色:
查看和编辑html
动态修改css样式
可视化的css距离调整
监控网络行为
分析和调试javascript
快速发现错误
查看DOM
即时执行javascript
记录javascript日志
2、如何获取Firebug(略)
二:主面板介绍
安装完成之后,可以使用F12键打开firebug,也可以使用ctrl+F12独立打开。
Firebug主要有六个面板,分别是控制台、HTML、CSS、脚本DOM和网络。
控制台面板:记录日志、概述、错误提示、执行命令行和Ajax调试。
HTML面板:查看html元素、修改html和css,它包含三个子面板。分别是 样式、布局和DOM。
CSS面板:查看网页CSS样式,修改css样式。
脚本面板:显示javascript文件以及所在页面,也可以显示javascript的dubug。
DOM面板:用于显示页面上的所有对象。
网络面板:用于监视网络活动。
1、控制台面板:
记录日志:
console.log:简单的记录日志
console.debug:记录调试记录,并附上行号的超链接。
console.error:在消息前显示错误图标,并附上行号的超链接。
console.info:在消息前显示信息图标,并附上行号的超链接。
console.warm:在消息前显示警告图标,并附上行号的超链接。
代码:
<script type="text/javascript">
console.log("this is log message");
console.debug("this is debug message");
console.error("this is error message");
console.info("this is info message");
console.warm("this is warm message");
</script>
2、HTML面板
源代码:
<html>
<head>
<title>firebug修改html和css</title>
<style type="text/css">
body{margin:0;padding:0;}
div.test{border:1px solid red;margin:20px;padding:20px;}
.test span{color:pink;}
.test h2{color:blue;}
.test i{color:green}
</style>
</head>
<body>
<div class="test">
<span>span测试</span>
<h2>h2测试</h2>
<i>i测试</i>
</div>
</body>
</html>
2.1、查看修改HTML和CSS
2.2、使用inspect:可以快速寻找到某个元素的html结构
3、脚本面板
面板不仅仅可以查看元素中的javascript代码,而且还可以调试。
源代码:
<html>
<head>
<title>firebug修改html和css</title>
<script type="text/javascript">
function doSomeThing(){
var a = document.getElementById('messageLable');
a.innerHTML = "I just did someThing";
}
</script>
</head>
<body>
<div>
<div id="messageLable"></div>
<input type="button" value="Click Me" οnclick="doSomeThing();"/>
</div>
</body>
</html>
3.1、静态断点:
继续执行<F8>、单步进入<F11>、单步跳过<F10>、单步退出<Shift+F11>
3.2、条件断点: