firebug工具使用（上）

最新推荐文章于 2024-10-20 16:55:35 发布

abao7781

最新推荐文章于 2024-10-20 16:55:35 发布

阅读量84

点赞数

文章标签： json java

原文链接：http://www.cnblogs.com/nonameG/p/4948602.html

版权

基于fire-fox浏览器开发

火狐浏览器--工具--附加组件--搜索到firebug--下载--重启浏览器F12启动

功能介绍

按钮一：配置信息，可设置文本信息如文字大小、自定义快捷键、版本号等等。

按钮二：选择网页上的元素：当鼠标移动到网页任意一个元素上面，信息栏就出出现对应的HTML和CSS代码，点击下方编辑按钮就可以修改对应HTML和CSS样式

按钮三：脚本，可以查看当前网页的每一个JS执行过程，具体详见下方例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var result = 0;
        for(var i =0 ; i<5;i++){
            result +=i;
        }
        alert(result);
    </script>
</head>
<body>

</body>
</html>

F12打开firebug，点击脚本按钮并且在代码result +=i前面打上断点在按F5刷新。意为：当程序执行到result +=i这行会停下来，有利于调试。

此时右上出现几个新的按钮：

断续：会跳过这次循环，执行下一次的循环；

单步进入：会一步步去执行代码；

右方为监控区域：针对上方代码会显示当前的一些数据,如 i=0、result=0等等；

点击断续，i直接+1，result也变为result+i;

点击单步进入：箭头指向上面的for循环，鼠标移入也会看到当前对应的值。

集合断续和单步进入就可以直观的看到程序执行的顺序和运行结果

调试成功点击断点处就可以取消断点让程序流畅运行了

DOM按钮：针对当前变量的一些显示信息，如i的值result的结果等

网络按钮：当前网页的HTTP请求的信息，如图片、CSS、脚本等。下方信息条包含URL(头信息、响应、缓存)、状态码（200，304，404，,500）、域（请求来自哪里以及详细信息）、时间线（路由解析、建立链接、发送请教、等待响应、接收数据、DOMContentLoaded）

通过DOM按钮可以更好在测试环境或是线上对网站进行调试和一些性能优化

保持按钮：常规来说当点击跳转到另一个网页，之前显示在firebug的前网页信息就会消失如果点击此按钮再跳转到其他网页之前的网页信息就会被保存在firebug中供调试用：之前操作的所有程序都会保存下来。

控制台按钮：最有用的按钮。

控制台介绍：

1向下箭头：一般勾选：显示JAVA SCRIPT错误、显示XMLHTTPREQUESTS(显示AJAX信息【参数、头信息、响应状态、HTML、JSON】用)、弹出自动补全列表（当在控制台中输入任意代码会出现辅助提示信息以及一些简单的判断）如:

document.getElementById("div"),会自动打印null;

for(var i=0 ; i<5; i++){alert(i)},页面中执行代码5次；

常用控制台语句：

console.log (控制台输出语句，alert每次执行会阻止后面代码运行，调试时不方便)，例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     var i = 0;
     setInterval(function(){
         i++;
         console.log(i);
     },1000)
    </script>
</head>
<body>

</body>
</html>

就会在控制台循环打印i出来

console warn:警告信息

console error:错误信息

console group:分组（当前信息非常多的时候使用）方法如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    console.group("第一组");
        console.log(1);
    console.groupEnd();    
    </script>
</head>
<body>

</body>
</html>

很容易的就可以区分开显示的地方，调试的时候就不会出现混乱。

转载于:https://www.cnblogs.com/nonameG/p/4948602.html