这篇指南总共分为五大部分:
·第一部分:firebug概览:简要介绍firebug的一些基本特征,如何安装以及一些注意点。
·第二部分:logging,trace和commandline(这里译为命令行,以后提到的命令行即为commandline):这些都是和控制台有关的。在这部分我们将对命令行窗口进行详细的介绍(命令行窗口类似于Visual Studio的立即窗口(Immediate windows)和监视窗口(Watch window))。
·第三部分:HTML,dom的查看和HTML的CRUD操作:这部分将告诉我们什么叫HTML视察,怎么样去HTML视察,HTML视察为什么很有用。我还将向您展示如果在HTML标签中进行HTML,dom的CRUD操作。
·第四部分:用firebug对javascript进行调试:这部分将会覆盖所有关利用firebug对javascript进行调试的知识。这也是firebug对引人关注的地方,同时我还会告诉你们如果结合控制台标签进行javascript的调试。
·第五部分:CSS,DOM和网络标签:详细讲述一些CSS,DOM和网络标签方面的内容。
正如上面所说,我会尝试尽可能的覆盖所有有关firebug方面的东西,如果我有什么遗漏,请积极留言告诉我,万分感谢.
Firebug概览
注意:我将会讲述一些有关firebug的基本常识,包括它的基本功能,如何安装等。如果您已经对firebug有一定的了解,可以跳过本部分的内容。
Firebug是什么?
firebug是现在非常流行的一个在Mozilla Firefox浏览器中的扩展插件,这个插件能使我们的web开发变得更加轻松和简单。它包括了许多非常有用的功能,比如调试,HTML视察等等。
Firebug的功能列表:
·javascript调式
·javascript命令行
·监视javascript的工作情况和xmlhttprequest。
·Logging
·Tracing
·HTML视察和编辑HTML
·编辑CSS
如何得到Firebug?
·首先进入下载网址(请用firefox浏览器打开):https://addons.mozilla.org/zh-CN/firefox/search?q=firebug&cat=all (请确保之前已经安装了最新版的firefox浏览器)
·在官方网站的右边有一张和下图一样的图片,点击便可进行安装。
·点击图标后将会弹出下图所示的对话框,点击“立即安装”按钮。
·安装完成后,我们还需要重新启动一下firefox浏览器。
主菜单(在工具菜单栏下)
在firefox浏览器的“工具”菜单栏下将会出现“firebug”和“错误控制台”菜单项。
·Firebug:这是firebug所有子菜单的父菜单。
·错误控制台:如果你点击这个菜单项,将会弹出一个控制台窗口,该窗口中纪录了所有在运行过程的错误,警告,消息等信息.
firebug菜单:
如果你继续点击firebug菜单项,将会弹出他的子菜单,如下图:
打开Firebug:在浏览器中打开firebug,你也可以按“F12”打开它。
在新窗口中打开Firebug:在新窗口中打开Firebug。
打开编辑器:添加各种编辑器。
查看元素:可以查看网页中的各种html元素,并定位到该元素在html代码中的位置。此功能是firebug的亮点之一,具体将在第三部分介绍。
javascript概况:此功能非常有用,它可以总结出打开一个网页的过程中,所有该网页中包含的javascript函数的执行时间,调用次数等许多有用的信息,具体使用方法将在以后章节中讲述。
清除控制台:清除控制台中的所有信息。
命令行:将焦点定位到命令行输入框中。
搜索:将焦点定位到firebug的搜索输入框中。
Firebug控制台
firebug控制台如下图所示:
firebug包含了六个标签:控制台,html,css,脚本,dom,网络。
·控制台标签:用来显示各种日志信息,同时可以结合firebug给定的API进行各种测试和跟踪。
·html标签:可以用来视察,编辑网页中的各种html元素。
·css标签:可以用来检查网页中和CSS有关的内容。
·脚本标签:可以设置断点调试javascript代码,也可以用来监控javascript代码。
·dom标签:展示dom树。(我觉得html标签可以代替此标签的功能)、
·网络标签:可以观查从服务器端下载下来的js文件,图片,flash等资源的大小,下载所花费的时间等,这也是一个非常有用的功能。
状态栏
如果有错误,你将会在状态栏中红色的叉叉,并提示错误的个数。
问题?
如果您还有什么问题不是很明白,可以在我的博客上留言,我们可以一起讨论研究
- 大小: 21.4 KB
- 大小: 5.5 KB
- 大小: 2.9 KB
- 大小: 26.9 KB
- 大小: 9.6 KB
- 大小: 10.6 KB
- 大小: 53.7 KB
- 大小: 1.9 KB
分享到:
相关推荐
### Firebug 入门指南 #### 一、安装Firebug Firebug 是一款强大的网页调试工具,主要用于 Firefox 浏览器。它可以帮助开发者快速定位问题并优化网站性能。要使用 Firebug,首先需要确保安装了 Firefox 浏览器。...
【Firebug使用指南】 Firebug是一款强大的Web开发工具,它为Firefox浏览器提供了深入的调试功能,包括HTML、CSS、JavaScript和网络性能分析等。本文将详细介绍如何安装、使用Firebug,以及其主要功能。 一、安装...
**Firebug使用指南** Firebug是一款强大的Web开发工具,它为Firefox浏览器的用户提供了便捷的HTML、CSS、JavaScript以及网络请求的调试功能。由Joe Hewitt创建,Firebug的出现标志着Web开发技术的一个显著进步,它...
Firebug是一款专为Firefox浏览器设计的强大开发者工具,被誉为网页开发者的必备神器。它作为一个插件,提供了丰富的功能,包括HTML、CSS、JavaScript调试、网络请求分析等,极大地提高了开发效率。 1. 安装Firebug ...
【Firebug入门指南】 Firebug是一款专为Firefox浏览器设计的强大开发者工具,对于网页开发者而言,它是不可或缺的神器。本文将引导初学者了解如何使用Firebug,涵盖了从安装、开启到利用其各项功能进行网页开发的...
“Book of Vaadin” 是一本详尽介绍 Vaadin 框架的指南,不仅涵盖了基础安装和配置流程,还深入讲解了框架的核心概念和技术细节。对于希望利用 Java 构建高质量 Web 应用程序的开发者来说,这本书提供了宝贵的指导和...
- **可选-安装Firebug和Chromebug**:这两个工具可以帮助开发者调试扩展中的JavaScript代码。 接下来,让我们通过一个简单的例子来了解如何创建一个扩展: 1. **第一阶段: 测试安装**:首先确保扩展能够被正确安装...
- **安装必要的开发工具**:如DOM Inspector、Firebug和Chromebug等。 - **设置开发配置文件**:以便能够快速部署和测试扩展。 ##### 利用扩展可以做些什么 Firefox扩展可以用来增强浏览器的基本功能,具体可以...
#### 所需工具与知识概览 为了顺利完成从cocos2d-iphone到cocos2d-html5的移植,一系列的工具和知识是必不可少的。Xcode、cocos2d-iphone、cocos2d-html5等构成了开发环境的基础;TexturePacker用于图像处理;...
- **Firebug 插件安装**:Firebug 是一个开发者工具,可以帮助调试测试脚本,同样通过 Firefox 的附加组件市场安装。 - **基本使用**: - **录制测试脚本**:启动 Selenium IDE 后,点击“Record”按钮,进行一...
- **Scrapy概览**:Scrapy是一款开源且高效的爬虫框架,用于从网站上抓取结构化数据。它具备强大的功能集,适用于各种复杂的网页结构,并能够高效地处理大量数据。 - **安装指南**:详细介绍如何在不同操作系统上...
### Scrapy 1.0.5 文档概览与核心知识点 #### 一、文档概述 **Scrapy** 是一个用于爬取网站并提取结构化数据的应用框架,它支持多种用途,例如数据挖掘、信息处理或存储等。该文档详细介绍了 Scrapy 的各个组成部分...
### Scrapy 1.4.0 文档概览与核心知识点 #### 一、Scrapy 概述 **Scrapy** 是一个用于爬取网站并提取结构化数据的强大框架,适用于各种规模的数据抓取项目。它能够高效地处理大规模数据,并提供了一套完整的工具和...
- **安装指南**:提供了详细的安装步骤,包括依赖项安装等。 - **Scrapy教程**:通过一个简单的例子引导新手完成第一个Scrapy项目。 - **示例**:提供了一些实际使用的Scrapy项目的例子,帮助理解Scrapy的工作方式。...
##### 安装指南 安装Scrapy前需要确保已经安装了Python环境。Scrapy 0.22版本支持Python 2.6+和Python 3.2+。安装步骤如下: 1. **通过pip安装**:这是最简单的方式,只需运行`pip install scrapy`即可。 2. **从...