引言:
命令行是firebug中最有用的功能之一。如果你以前有过使用Visual Studio(简称VS)开发项目的经验,就应该知道你在使用VS进行调试程序的时候,“立即窗口(Immediate window)”和“监视窗口(Watch window)”的有用性。
firebug的命令行类似于VS的立即窗口,你可以在任意时候检查一个特定对象的值,包括在设计时期也可以正常使用(注:VS的立即窗口只能在调试程序的时候使用)。此外,firebug命令行还有一个好处就是能够直接输入javascript代码即时执行。
接下来列举出的所有firebug命令行API都是能在firebug的官方网站上找到的(网址:http://getfirebug.com/commandline.html
)。在这里我将会进一步结合例子介绍大部分的API,希望对各位读者能有一点帮助。
命令行种类:
在控制台面板中有两类命令行。
·单行命令行
·多行命令行
单行命令行:
单行命令行是firebug控制台面板中默认的,它允许我们每次只能输入一行命令。
此外,我们还能通过按键盘上的“↑”和“↓”键翻阅之前输入过的历史纪录。
多行命令行:
多行命令行是单行命令行的加强版,它允许我们一次可以输入多行javascript代码同时执行。
单行命令行和多行命令行各有各的优点,因此,您可以根据不同的场景使用不同的命令行,对于本人而言,主要还是使用单行命令行为主。
命令行API(附带例子):
在正式学习这些API之前,我先声明一下,虽然所有的API都可以在开发阶段和程序运行阶段使用,但是最能发挥firebug所长的还是在调试我们的javascript程序的时候。如果我们只是利用firebug去开发javascript程序,也许其他一些IDE会比firebug更适合。
例子下载~
Demo Zip File
API列表:
- $(id)
- $$(selector)
- $x(xpath)
- dir(object)
- clear()
- inspect(object[, tabName])
- keys(object)
- values(object)
- debug(fn) & undebug(fn)
#1. $(id
)
根据给定的id返回相应的元素。
例子(1.0)~
-
<
body
>
-
Name :
<
input
id
=
"nameTextBox"
class
=
"normalText"
type
=
"text"
/>
-
</
body
>
<body>
Name : <input id="nameTextBox" class="normalText" type="text" />
</body>
步骤~
·复制以上代码到一个空的HTML文件上,然后在firefox浏览器中打开它。
·打开firebug控制面板(按F12键或点击右下角甲虫图标),点击控制台标签。
·在命令行上输入$(’nameTextBox’) ,然后按回车键。
输出结果~
这个用起来很简单(而且看上去似乎也没什么大用),但是我觉得这在多行命令行中进行javascript调试的时候是比较有用的。
接下来让我们来看看如何使用多行命令行进行javascript代码的调试。
·点击单行命令行右边“^”图标。
·将以下javascript代码拷贝到多行命令行中。
·点击“运行”。
-
var
txt = $(
'nameTextBox'
);
-
-
txt.value =
'Michael Sync'
;
-
txt.textAlign =
'center'
;
-
txt.style.color =
'blue'
;
-
txt.style.borderStyle =
'double'
;
-
txt.style.borderColor =
'pink'
;
var txt = $('nameTextBox');
txt.value = 'Michael Sync';
txt.textAlign = 'center';
txt.style.color = 'blue';
txt.style.borderStyle = 'double';
txt.style.borderColor = 'pink';
输出结果~
#2. $$(selector)
返回根据给定的CSS选择器相匹配的元素数组.
注意:如果你还不清楚什么是CSS选择器,请点击此处
。
例子(1.1)~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Firebug</title>
<style type="text/css">
div{
background-color:Black;color:White; border: solid 1px grey;
}
</style>
</head>
<body>
<div id='div1'>This is DIV1.</div>
<br />
<div id='div2'>Here is one more.</div>
</body>
</html>
步骤:
·在命令行中输入$$(’div’),然后敲击回车键(你将得到所有的div元素数组(div1和div2))。
#3. $x(xpath)
返回给定xml路径(xpath)相匹配的元素数组。
注意:如果你对xpath还不是很了解,请点击这里
。
例子(1.2)~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CommandLine - $</title>
</head>
<body>
<div id='container' style="width:800px">
<div id='leftsidebar' style="width:100px; background-color:Gray;min-height:400px;float:left;"> </div>
<div id='content' style="width:600px;min-height:400px; background-color:ThreeDShadow;float:left;">
<div id='content-header' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<h2>All about Firebug</h2>
</div>
<div id='content-body' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<p>Firebug is the most popular tool in web revolution.</p>
</div>
</div>
<div id='rightsidebar' style="width:100px; background-color:Gray;height:400px;float:right;"></div>
</div>
</body>
</html>
此例子我们将用多行命令行进行测试。
将下列代码粘贴到多行命令行中。
var obj = $x('html/body/div/div');
console.log(obj[0].id);
console.log(obj[1].id);
console.log(obj[2].id);
输出结果~
#4. dir(object)
打印给定对象的所有属性。而且打印出来的风格和在DOM标签上展示节点属性的风格是一样的。
这个例子我们还将继续沿用例子1.2中的HTML文件,然后将下列javascript代码粘贴到多行命令行中:
var obj = $x('html/body/div/div');
dir(obj);
结果如下图所示,你将会得到这三个div元素的所有属性和方法(leftsidebar, content, rightsidebar)。
#5. clear()
清除控制台的内容。如果你想要清空控制台中的所有内容,只要在命令行中输入“clear()” 然后点击回车键即可。也可以在javascript代码中加入“console.clear()” 语句。
#6. inspect(object[,tabName])
在合适的标签中查看参数给定的对象,可选参数tabName可以强制制定跳转到哪个标签查看。这些合适的标签包括“HTML”,“css”,“脚本”,“dom”。
步骤~
·在firefox浏览器中打开“example1.2”。
·在单行命令行中输入($(’content-header’),’html’) 。
·firebug将会自动跳转到HTML标签所对应的视图,而id为“content-header”的div标签将会被自动选择上(如下图)。
#7. keys(object)
返回对象所有属性名(包括方法名)的集合数组。对象可以是javascript对象( 如: var objCar = new Car() ) 或者也可以是HTML元素(如: document.getElementById(’table1′))。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Keys and Values</title>
</head>
<body>
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function Car(){
this.Model = "Old Model";
this.getManufactor = new function(){
return "Toyota";
}
}
</script>
</body>
</html>
步骤~
·在firefox浏览器中打开“example1.4”。
·在firebug中打开“控制面板”标签。
·打开多行命令行(点击单行命令行右边“^”图标)。
·将下列代码粘贴到多行命令行上。
var o = new Car();
keys(o);
·你将会得到“car”对象的所有属性名(包括方法名)(如下图)。
#8. values(object)
返回该对象的所有属性值。
例子:参考例子1.4
步骤~
·在firefox中打开“example1.4”。
·点击“控制台”标签
·跳转到多行命令行。
·将下列代码输入到多行命令行中。
var o = new Car();
values(o);
·你将会得到所有"car"对象的属性值。
注意:由于getManufactor是car的一个方法,所有只显示object超链接,而不是直接显示他的返回值“Toyota
”。
#9. debug(fn) and undebug(fu)
在给定方法的第一行增加或删除一个断点。
注意:关于这部分内容,我将在这系列接下来的篇章中详细讲述,敬请期待:)
- 大小: 27 KB
- 大小: 29.4 KB
- 大小: 47.2 KB
- 大小: 17 KB
- 大小: 6.8 KB
- 大小: 5.1 KB
分享到:
相关推荐
#### 二、Scrapy基础概念详解 - **命令行工具**:深入讲解Scrapy提供的各种命令行工具,如启动项目、运行爬虫、调试等功能。 - **爬虫(Spiders)**:详细介绍如何编写爬虫类来定义抓取规则,包括如何处理响应、解析...
#### 二、入门指南 ##### 2.1 Scrapy简介 - **Scrapy快速一览**:Scrapy是一种灵活的应用框架,用于自动化网站的抓取。它提供了所有必要的工具和服务,以便用户能够构建自定义的爬虫程序来抓取特定的网站。 - *...
- **命令行工具**:介绍Scrapy提供的命令行接口,如项目创建、爬虫运行、日志查看等操作的命令语法。 - **爬虫(Spiders)**:爬虫是Scrapy的核心组件之一,负责定义如何从网站中提取数据。本节详细讲解了爬虫的创建...
### scrapy教程知识点详解 #### Scrapy简介与快速入门 **Scrapy** 是一个用于网络爬虫项目的开源和协作框架,它被设计用来帮助开发者高效地抓取网站数据,并将其保存为统一格式的数据集,适用于各种用途,如数据...
### Scrapy 爬虫框架知识点详解 #### 一、Scrapy 概览与特性 **Scrapy** 是一个基于 Python 的高级网络爬虫框架,它借鉴了 Django 的设计理念,具备高度灵活性和强大的功能集。该框架适用于各种复杂的网页抓取任务...
### Scrapy开发架构详解 #### 一、Scrapy概览 **Scrapy**是一个用于爬取网站并提取结构化数据的应用框架。它被设计为快速、高效且易于扩展,适用于各种规模的数据抓取项目。 ##### **1.1 Scrapy一瞥** Scrapy...
#### 一、安装指南 **1.1 引言** Selenium Python bindings 提供了一个简洁的 API 来控制 Selenium WebDriver 的操作。WebDriver 是一个独立的应用程序,用于与浏览器交互,使得我们可以编写自动化测试脚本来模拟...