`
传说の黄花菜
  • 浏览: 200616 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

firebug指南(二)---firebug命令行API详解

阅读更多

引言:

       命令行是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列表:

  1. $(id)
  2. $$(selector)
  3. $x(xpath)
  4. dir(object)
  5. clear()
  6. inspect(object[, tabName])
  7. keys(object)
  8. values(object)
  9. debug(fn) & undebug(fn)

 #1. $(id )

 根据给定的id返回相应的元素。

 例子(1.0)~

Html代码 复制代码
  1. < body >       
  2. Name :  < input   id = "nameTextBox"   class = "normalText"   type = "text"   />       
  3. </ body >     
<body>   
Name : <input id="nameTextBox" class="normalText" type="text" />   
</body>  

 

步骤~

     ·复制以上代码到一个空的HTML文件上,然后在firefox浏览器中打开它。

     ·打开firebug控制面板(按F12键或点击右下角甲虫图标),点击控制台标签。

     ·在命令行上输入$(’nameTextBox’) ,然后按回车键。

输出结果~


      这个用起来很简单(而且看上去似乎也没什么大用),但是我觉得这在多行命令行中进行javascript调试的时候是比较有用的。

      接下来让我们来看看如何使用多行命令行进行javascript代码的调试。

         ·点击单行命令行右边“^”图标。

         ·将以下javascript代码拷贝到多行命令行中。

         ·点击“运行”。

Js代码 复制代码
  1. var  txt = $( 'nameTextBox' );      
  2.      
  3. txt.value =  'Michael Sync' ;      
  4. txt.textAlign =  'center' ;      
  5. txt.style.color =  'blue' ;      
  6. txt.style.borderStyle =  'double' ;      
  7. 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
分享到:
评论

相关推荐

    Python零基础30天速通(小白定制版)(完结)

    宣导片:开启Python进阶之路 30动漫番剧播放量影响因素分析1综合案例 29小红书卖货实力与用户分析1综合案例 28星巴克门店探索|Matplotlib实战 27詹姆斯哈登的制胜宝典1 Panads的使用 26一晚5万的酒店| Numpy的使用 25揭开数据分析的面纱1数据分析"三剑客"概述 24虎牙直播数据告诉你谁最火1案例篇 23我的音乐我做主1数据保存之csv和excel 22电竟| BeautifulSoup解析HTML 21对李焕英的评价1HTML基础 20我的美食我做主1爬虫介绍、requests请 19看我四十二变1内容提取和格式转换 18我的版权我做主1PDF就是这么帅 17婚礼策划师离不开你|亲爱的PPT 16运营部的烦恼1战胜Excel 15Up主的创作之路1 Python与word初次 14你的offer之选|邮件发送 13我的存在只为悦你1 Pillow图片处理 12你喜欢的电竟赛事大全1 Python的文件操作 11哈利波特的魔法棒|模块 10龙珠之赛亚人1面向对象基础 09大吉大利今晚吃鸡1特种兵的战场(项目案

    20240519基本完整

    20240519基本完整

    MATLAB仿真项目-大数据源码-疲劳检测识别,可应用于疲劳驾驶监测,专注度检测等(高分期末大作业).rar

    本项目提供了一个基于MATLAB的疲劳检测识别仿真系统,旨在帮助计算机相关专业的在校学生、老师和企业员工更好地学习和实践大数据与人工智能技术。该项目可应用于疲劳驾驶监测、专注度检测等领域,具有较高的实用价值。 项目源码已经过运行测试,确保OK,可作为课程设计、毕业设计的优质资源。此外,我们还为您提供了一些网络相关资源,以便您在学习过程中进行参考。这些资源将帮助您更好地理解项目的原理和应用。 本项目的源码适用于初学者,即使是编程基础较弱的同学也能快速上手。同时,源码结构清晰,易于理解和修改。您可以在这个基础上进行二次开发,实现更多有趣的功能。 请放心下载使用,我们为您提供了详细的文档说明,以便您更好地了解和使用该项目。希望这个项目能为您提供实质性的帮助,祝您在学习和工作中取得更好的成绩!

    利用协同过滤算法,基于用户历史订单数据,对店铺的用户和商品进行推荐.zip

    协同过滤算法(Collaborative Filtering)是一种经典的推荐算法,其基本原理是“协同大家的反馈、评价和意见,一起对海量的信息进行过滤,从中筛选出用户可能感兴趣的信息”。它主要依赖于用户和物品之间的行为关系进行推荐。 协同过滤算法主要分为两类: 基于物品的协同过滤算法:给用户推荐与他之前喜欢的物品相似的物品。 基于用户的协同过滤算法:给用户推荐与他兴趣相似的用户喜欢的物品。 协同过滤算法的优点包括: 无需事先对商品或用户进行分类或标注,适用于各种类型的数据。 算法简单易懂,容易实现和部署。 推荐结果准确性较高,能够为用户提供个性化的推荐服务。 然而,协同过滤算法也存在一些缺点: 对数据量和数据质量要求较高,需要大量的历史数据和较高的数据质量。 容易受到“冷启动”问题的影响,即对新用户或新商品的推荐效果较差。 存在“同质化”问题,即推荐结果容易出现重复或相似的情况。 协同过滤算法在多个场景中有广泛的应用,如电商推荐系统、社交网络推荐和视频推荐系统等。在这些场景中,协同过滤算法可以根据用户的历史行为数据,推荐与用户兴趣相似的商品、用户或内容,从而提高用户的购买转化率、活跃度和社交体验。 未来,协同过滤算法的发展方向可能是结合其他推荐算法形成混合推荐系统,以充分发挥各算法的优势。

    用C#实现人工智能中的八数码问题,有界面效果,可以得出结果,也可以逐步求解.zip

    用C#实现人工智能中的八数码问题,有界面效果,可以得出结果,也可以逐步求解.zip

    Matlab 太阳能电池 simulink 模型太阳能电池模型连接到巴克 converter.by

    Matlab 太阳能电池 simulink 模型太阳能电池模型连接到巴克 converter.by 不同占空比和 PS 转炉值,我们可以改变输出 voltage.buck 转换器调节来自太阳能电池的电压,因而顺利和调节直流电压在负载的忧伤。通过将许多细胞我们可以使太阳能机舱和增加输出电压电流 (串联或并联).zip

    npy 文件的基本结构和内容

    npy 文件的基本结构和内容

    Learning Python 5th Edition

    Learning Python 5th Edition

    Learning Docker

    Learning Docker

    SwiftUI-加载动画 圆点循环缩放动画

    SwiftUI-加载动画 圆点循环缩放动画

    一种用于非线性模型预测控制的并行优化工具包(NMPC)

    介绍了一种专为非线性模型预测控制(NMPC)设计的并行优化工具包。内容涉及该工具包的功能特点、使用方法以及在解决非线性控制问题中的应用实例。通过对比分析,突出了并行优化在提高NMPC计算效率和实时性方面的重要作用。适合控制工程师、算法研究员和对高性能计算感兴趣的专业人士。使用场景包括复杂系统控制、实时仿真和工业自动化。目标是推广这一工具包的使用,助力非线性控制系统的研究与开发。 关键词标签: 非线性模型预测控制 NMPC 并行优化 工具包 实时控制

    matlab矩阵位移法实现有限元求解.zip

    matlab矩阵位移法实现有限元求解.zip

    Matlab 交互式多模型目标跟踪IMM.zip

    Matlab 交互式多模型目标跟踪IMM.zip

    520节日李珣的爱心代码

    内容概要:本项目是李珣创作的“爱心代码”,旨在通过编程表达浪漫与情感。该项目使用JavaScript编写,生成一个动态的爱心图案,并可以附加个性化的文字祝福。代码逻辑简单清晰,适合在网页上展示和分享。源码提供了完整的代码文件,部署文档详细介绍了代码的使用方法和展示步骤,讲解内容涵盖了代码的实现原理、技术选型理由、设计思路以及使用方法。 适合人群:对JavaScript有基础了解,并希望通过编程表达情感的开发者和编程爱好者。 能学到什么: 1. 掌握JavaScript绘图和动画的实现方法。 2. 学习如何通过代码生成动态图案。 3. 了解简单的前端开发和部署流程。 4. 掌握个性化定制代码的技巧。 阅读建议:本资源旨在帮助学习者通过实践项目掌握JavaScript的绘图和动画实现方法,并了解如何通过编程表达情感。建议在学习过程中结合部署文档进行实践,并深入理解讲解内容中的技术原理和设计思路。同时,鼓励学习者根据实际需求对代码进行拓展和优化,以提升自己的技术水平和创造力。

    python源码毕业设计基于深度学习的水果识别系统源码+文档说明+数据集+模型(期末大作业项目).rar

    本源码提供了一个基于深度学习的水果识别系统,涵盖了Python编程、深度学习、图像识别等多个领域的技术。项目利用神经网络模型对水果图像进行分类,实现了高效的水果识别功能。适合计算机专业的学生、老师和从业人员学习和参考,尤其是对深度学习图像识别感兴趣的朋友。 核心功能包括: 1. 数据集:包含大量水果图片,用于训练和测试模型。 2. 模型训练:采用卷积神经网络(CNN)进行训练,提升模型精度。 3. 图像识别:加载预训练模型,对新图像预测类别。 4. 测试验证:确保模型准确性和实用性。 代码可用于毕业设计、课程设计等,快速构建原型,基于此优化和扩展。 资源丰富,包含详细文档,讲解代码结构和算法;提供数据集和预训练模型,方便测试;代码清晰易懂,结构完整,便于理解深度学习图像识别。 请放心下载,这是经过测试的高质量资源,助你取得课程设计高分!

    Java项目毕业设计-航空订票系统(前台订票+后台票务管理)基于SSM开发+数据库(详细源码)-期末大作业.rar

    本项目为Java项目毕业设计-航空订票系统,基于SSM框架开发,结合前台订票与后台票务管理功能,满足现代航空票务需求。系统采用三层架构,包括表现层、业务逻辑层和数据访问层,确保高效稳定运行。数据库设计考虑数据完整性和安全性,采用MySQL数据库存储关键数据。 经过运行测试,系统性能良好,满足设计要求。界面简洁直观,用户友好;后台管理功能强大,方便管理员管理。系统安全性高,有效防止SQL注入、跨站脚本等攻击。 本资源适合计算机相关专业学生和从业者下载学习。对初学者,可快速掌握SSM框架和航空订票系统开发流程;对有一定基础者,可作为参考,拓宽思路,提升技能。此外,也适用于毕业设计、课程设计、项目立项等场景,展现项目基本框架和功能。 请放心下载使用,相信能助您顺利完成学习和项目任务。期待在您的努力下,系统不断完善,功能更加丰富,为航空事业发展贡献力量。

    web期末大作业-基于html+css+js实现的模仿华为商城静态网页源码+项目说明(附静态网页效果链接).rar

    本学期Web期末大作业,我们为您呈现一个精心制作的静态网页源码项目——基于HTML+CSS+JS实现的仿华为商城。经过严格的运行测试,我们确保该项目在各大主流浏览器中均能完美呈现,无兼容性问题。 这个项目不仅是一个简单的网页复刻,更是一次对前端技术的全面实践。我们采用了HTML5标准编写页面结构,利用CSS3实现丰富的样式与动画效果,同时运用JavaScript进行交互逻辑的编写,使得整个页面动态而生动。 我们深知每位同学的需求不同,因此这个项目的源码设计得非常灵活,易于修改和扩展。无论您是想学习前端技术的基础知识,还是想借鉴实际项目经验,亦或是作为课程设计的素材,这个项目都能满足您的需求。 请放心下载使用,我们承诺提供完善的售后服务和技术支持。遇到任何问题,欢迎随时与我们联系。相信通过这个项目,您一定能获得宝贵的实践经验,为未来的学习和职业生涯打下坚实的基础。

    web期末大作业网页设计期末大作业-大鱼海棠(html+css+js) 项目源码案例.rar

    大鱼海棠网页设计期末大作业项目概述 本项目名为“大鱼海棠”,旨在通过HTML、CSS和JavaScript技术,为学生提供一个具有挑战性的网页设计期末大作业。项目源码经过精心编写与测试,确保运行稳定,无兼容性问题。代码结构清晰,注释详细,便于初学者快速上手,同时也为经验丰富的开发者提供了丰富的参考资料。 大鱼海棠的设计灵感来源于同名动画电影,采用了中国传统元素与现代设计相结合的风格,展现出浓郁的中国风。页面布局合理,色彩搭配和谐,交互效果流畅,用户体验良好。 本资源特别适合计算机相关专业的在校学生、老师以及企业员工下载学习。无论您是初学者还是有一定基础的学员,都能从这个项目中学到宝贵的实践经验。此外,大鱼海棠也适用于毕业设计、课程设计、课程作业以及项目初期立项演示等多种场合。 请放心下载使用,我们承诺提供优质的售后服务和技术支持。祝您学习愉快,取得优异成绩!

    java家庭理财系统(java+applet).zip

    java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)java家庭理财系统(java+applet)

    Matlab HP过滤算法可以用于对混沌时间序列分析过滤使用,能够有效去噪,保留时间序列中有效信息.zip

    Matlab HP过滤算法可以用于对混沌时间序列分析过滤使用,能够有效去噪,保留时间序列中有效信息.zip

Global site tag (gtag.js) - Google Analytics