FireBug调试工具

最新推荐文章于 2018-04-19 16:18:09 发布

我有一个小毛驴

最新推荐文章于 2018-04-19 16:18:09 发布

阅读量909

点赞数

分类专栏： html+css javascript 文章标签： Firebug

本文链接：https://blog.csdn.net/liumingm_music/article/details/39254275

版权

html+css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

插件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、条件断点：

我有一个小毛驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FireBug调试工具

插件FireBug 简介：fire不过是一款基于前段开发的工具，是Firefox浏览器的扩展插件，它可以调试javascript，查看DOM、分析 css、监控网络流量以及进行ajax的交互等。一：概述1、Firebug的特色：查看和编辑html 动态修改css样式可视化的css距离调整监控网络
复制链接

扫一扫