Javascript 调试利器 Firebug使用详解六

最新推荐文章于 2024-09-23 08:37:48 发布
最新推荐文章于 2024-09-23 08:37:48 发布
阅读量524 收藏
点赞数
分类专栏： JS调试 文章标签： 调试 firebug 控制台 javascript

<h1>Javascript 调试利器 Firebug使用详解六</h1>
<div id="art_info">
作者：  字体：[<a href="javascript:turnbig()">增加</a> <a href="javascript:turnsmall()">减小</a>] 类型：转载
</div><!--end art_info-->
<div class=blank3></div>
<div id="art_demo">有时候，为了更清楚方便的查看输出信息，我们可能需要将一些调试信息进行分组输出，那么可以使用console.group来对信息进行分组，在组信息输出完成后用console.groupEnd结束分组。</div>
<div class=blank3></div>
<div id="con_all">
<script type="text/javascript">dy("bcall");</script>
</div>
<div id="art_content">
<!--NEWSZW_HZH_BEGIN-->
<P>我们测试一下把刚才的4个输出作为一个分组输出，修改代码为： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="25045" class="copybut" id="copybut25045" οnclick="doCopy('code25045')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code25045"><BR>console.group('开始分组：'); <BR>console.debug('This is console.debug!'); <BR>console.info('This is console.info!'); <BR>console.warn('This is console.warn!'); <BR>console.error('This is console.error!'); <BR>console.groupEnd(); <BR></div><BR>刷新页面看看结果（图11-5）。在console.group中，我们还可以加入一个组标题“开始分组：”。如果需要，我们还可以通过嵌套的方式，在组内再分组。 <BR><IMG src=" http://files.jb51.net/upload/20090705005127793.gif" border=0><BR>图11-5 <BR>有时候，我们需要写一个for循环列出一个对象的所有属性或者某个HTML Element下的所有节点，有了firebug后，我们不需要再写这个for循环了，我们只需要使用console.dir(object)或console.dirxml(element)就可以了。 <BR>在测试页中加入代码测试一下： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="16759" class="copybut" id="copybut16759" οnclick="doCopy('code16759')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code16759"><BR>console.dir(document.getElementById('div1')); <BR>console.dirxml(document.getElementById('div1')); <BR></div><BR>结果请看图11-6和图11-7。<BR><IMG src=" http://files.jb51.net/upload/20090705005232601.gif" border=0>&nbsp;<BR>图11-6 <BR><IMG src=" http://files.jb51.net/upload/20090705005250216.gif" border=0><BR>图11-7 <BR>是否想知道代码的运行速度？很简单，使用console.time和console.timeEnd就可以。 <BR>修改一下test函数的代码，测试一下运行1000次循环需要多少时间： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="94733" class="copybut" id="copybut94733" οnclick="doCopy('code94733')"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code94733"><BR>function test(){ <BR>console.time('test'); <BR>for(var i=0;i&lt;1000;i++){ <BR>document.getElementById('div2').innerHTML=i; <BR>//console.log('当前的参数是：%d',i); <BR>} <BR>console.timeEnd('test'); <BR>} <BR></div><BR>刷新页面，单击“方块二”，看看结果（图11-8）。在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出，而该参数就是信息的标题。 <BR><IMG src=" http://files.jb51.net/upload/20090705005341236.gif" border=0><BR>图11-8 <BR>是否想知道某个函数是从哪里调用的？console..trace可帮助我们进行追踪。在test函数的结尾加入： <BR>console.trace(); <BR>刷新页面，单击“方块二”，看看结果（图11-9）。结果显示是在坐标（97，187）的鼠标单击事件执行了test函数，而调用的脚本是在simple.html文件里的第1行。因为是在HTML里面的事件调用了test函数，所以显示的行号是第1行。如果是脚本，则会显示调用脚本的行号，通过单击可以直接去到调用行。<BR><IMG src=" http://files.jb51.net/upload/20090705005411758.gif" border=0><BR>图11-9 <BR>如果想在脚本某个位置设置断点，可以在脚本中输入“debugger”作为一行。当脚本执行到这一行时会停止执行等待用户操作，这时候可以通过切换到“Script”标签对脚本进行调试。 <BR>Firebug还有其它的一些调试函数，这里就不一一做介绍，有兴趣可以自己测试。表4是所有函数的列表： <BR>
<TABLE cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD vAlign=top width=235>
<P>函数<BR></P></TD>
<TD vAlign=top width=333>说明</TD></TR>
<TR>
<TD vAlign=top width=235>console.log(object[, object, ...])</TD>
<TD vAlign=top width=333>
<P>向控制台输出一个信息。可以输入多个参数，输出将已空格分隔各参数输出。</P>
<P>第一参数可以包含格式化文本，例如：</P>
<P>console.log(‘这里有%d个%s',count,apple);</P>
<P>字符串格式：</P>
<P>%s ：字符串。</P>
<P>%d, %i：数字。</P>
<P>%f： 浮点数。</P>
<P>%o -超链接对象。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.debug(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台输出一个信息，信息包含一个超链接链接到输出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.info(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台输出一个带信息图标和背景颜色的信息，信息包含一个超链接链接到输出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.warn(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台输出一个带警告图标和背景颜色的信息，信息包含一个超链接链接到输出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.error(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台输出一个带错误图标和背景颜色的信息，信息包含一个超链接链接到输出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.assert(expression[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>测试一个表示是否为true，如果为false，提交一个例外信息到控制台。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.dir(object)</P></TD>
<TD vAlign=top width=333>
<P>列出对象的所有属性。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.dirxml(node)</P></TD>
<TD vAlign=top width=333>
<P>列出HTML或XML Element的XML源树。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.trace()</P></TD>
<TD vAlign=top width=333>
<P>输出堆栈的调用入口。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.group(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>将信息分组再输出到控制台。通过console.groupEnd()结束分组。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.groupEnd()</P></TD>
<TD vAlign=top width=333>
<P>结束分组输出。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.time(name)</P></TD>
<TD vAlign=top width=333>
<P>创建一个名称为name的计时器，计算代码的执行时间，调用console.timeEnd(name)停止计时器并输出执行时间。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.timeEnd(name)</P></TD>
<TD vAlign=top width=333>
<P>停止名称为name的计时器并输出执行时间。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.profile([title])</P></TD>
<TD vAlign=top width=333>
<P>开始对脚本进行性能测试，title为测试标题。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.profileEnd()</P></TD>
<TD vAlign=top width=333>
<P>结束性能测试。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.count([title])</P></TD>
<TD vAlign=top width=333>
<P>计算代码的执行次数。titile作为输出标题。</P></TD></TR>
<TR>
<TD vAlign=top width=568 colSpan=2>
<P align=center>表4</P></TD></TR></TBODY></TABLE><BR><STRONG>12、 在IE中使用Firebug</STRONG> <BR>Firebug是Firefox的一个扩展，但是我习惯在IE中调试我的页面怎么办？如果在页面脚本中加入console.log()将调试信息写到Friebug，在IE中肯定是提示错误的，怎么办？不用担心，Frirebug提供了Frirbug Lite脚本，可以插入页面中模仿Firebug控制台。 <BR>我们可以从一下地址下载firebug lite： <BR>http://www.getfirebug.com/releases/firebuglite1.0-b1.zip <BR>然后在页面中加入： <BR>&lt;script language="javascript" type="text/javascript" src="/路径/firebug.js"&gt;&lt;/script&gt; <BR>如果你不想在IE中模仿Friebug控制台，只是不希望console.log()脚本出现错误信息，那么在页面中加入一下语句： <BR>&lt;script language="javascript" type="text/javascript" src="/路径/firebugx.js"&gt;&lt;/script&gt; <BR>如果你不想安装Firebug Lite，只是想避免脚本错误，那么可以在脚本中加入以下语句： <BR>if (!window.console || !console.firebug) <BR>{ <BR>var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", <BR>"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; <BR>window.console = {}; <BR>for (var i = 0; i &lt; names.length; ++i) <BR>window.console[names[i]] = function() {} <BR>} <BR>我们将firebug.js加入到测试页面中，然后打开IE，加载页面。页面加载完成后，我们按下F12键就可以打开控制台了。每次页面刷新后，你都要按F12键打开控制台，是不是很烦？如果不想那么，就在html标签中加入“debug='true'”，例如： <BR>&lt;html debug="true"&gt; <BR>在Friebug Lite中也有命令行，但是功能没那么强。 </P>
<!--NEWSZW_HZH_END-->
leo388
关注
专栏目录
Javascript的调试利器Firebug使用详解
03-21
总结，Firebug作为JavaScript的调试利器，通过其强大的调试、检查和分析功能，极大地提升了开发效率和代码质量。虽然现在有更多现代的开发者工具，如Chrome DevTools和Firefox Developer Tools，但了解并掌握Firebug...
Javascript 调试利器 Firebug使用详解
dashuaizhu6400的博客
04-16 103
Javascript 调试利器 Firebug使用详解 有时候，为了更清楚方便的查看输出信息，我们可能需要将一些调试信息进行分组输出，那么可以使用console.group来对信息进行分组，在组信息输出完成后用console.groupEnd结束分组。 我们测试一下把刚才的4个输出作为一个分组输出，修改代码为： 复制代码 代码如下: console.group('开始分组：...
Javascript的调试利器：Firebug使用详解
anshuye8780的博客
08-07 381
Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript进行调试的工具很多，我比较喜欢使用的是Firebug。Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。 本文主要是为初学者介绍一下Firebug的基本功能与如...
jquery的调试利器：Firebug使用详解
qq_31971935的博客
01-27 427
具体内容见链接：http://www.cnblogs.com/zgqys1980/archive/2010/12/21/1913080.html Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript进行调试的工具很多，我比较喜欢使用的是Firebug。Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4026
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 277
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 687
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
vue 案例使用
buhuidage的博客
09-17 454
加上show-password就行。el-switch 按键的使用。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
m0_51798113的博客
09-17 800
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
第 28 章 Javascript错误处理与调试
最新发布
weixin_44010641的博客
09-23 1140
JavaScript 在错误处理调试上一直是它的软肋，如果脚本出错，给出的提示经常也让人摸不着头脑。ECMAScript 第 3 版为了解决这个问题引入了 try…catch 和 throw 语句以及一些错误类型，让开发人员更加适时的处理错误。
基于SpringBoot+Vue+MySQL的智能物流管理系统
程序员大金的博客
09-19 978
基于SpringBoot+Vue+MySQL的智能物流管理系统，附源码。
计算机毕业设计 网上书店系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-16 1306
本文介绍了一款基于Java、SpringBoot和Vue.js技术的网上书店系统。该系统为管理员、用户和卖家提供了图书信息浏览、订单管理、个人中心管理等功能，旨在打造一个便捷、高效的在线购书平台。系统通过优化图书销售流程，提升用户体验，推动出版行业的数字化转型，促进知识传播和文化交流。
语言的复合语句
编程语言技巧经验分享
09-21 471
在函数中可以声明和定义变量，包含多条执行语句，概念上和复合语句类似。事实上，二者在复合语句的概念上几乎没有区别。类定义，用{}包起来，也是复合语句的一种。
Firebug使用详解：网页调试与优化利器
"Firebug使用指南 - 打开新的窗口显示" Firebug是一款强大的Web开发工具，由Joe Hewitt创建，它与Firefox浏览器紧密结合，允许用户在浏览网页时实时编辑、调试和分析HTML、CSS、JavaScript等内容。Firebug是免费且...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值