不得不说的Firebug(二):Firebug——控制台(Console)

2024-09-01 07:48

本文主要是介绍不得不说的Firebug(二):Firebug——控制台(Console),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    本篇博文打算总结一下Firebug中的控制台这一个Tab,控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。下面对其进行介绍,希望对大家有所帮助,有错误之处也希望大家能指出来。


一、显示信息的命令


在调试JavaScript的过程中,我们以往可能很多人会用alert(‘’);或者document.write(‘’);来输出一些信息,但是现在用Firebug的一个内置对象console的一些方法会更加直观地显示信息。Console()有以下几种显示信息的方法:

1、console.log():不带图标的普通信息。

2、console.debug():不带图标除错信息。

3、console.error():带图标的错误提示。

4、console.info():带图标的一般信息。

5、console.warn();带图标的警告提示。

示例:


<script language="javascript" 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.warn('This is warning message');</script>


①、将上述代码整一个拷贝进HTML文件里。命名为test.html,打开这个HTML文件可以看到控制台有以下记录:




可以看到,不同性质的信息前面有不同的图标,并且每条信息后面都有超级链接,点击后跳转到网页源码的相应行。对于错误的信息,还会显示错误在哪一行代码,并且代码有超链接,点击可直接定位到文件里的那行代码中。


②、将以上中间的JavaScript代码片段拷贝到debug调试窗口



③、将以上中间的JavaScript代码片段拷贝到debug调试窗口



也可以点击编辑器右边按钮切换成按回车键逐行输入的命令行,切换成按回车键逐行输入的命令行


二、占位符


console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。


%s

字符串

%d, %i

整型

%f

浮点型

%O

对象

%o

Dom元素

%c

CSS样式,注意不是字符


示例:

<script language="javascript" type="text/javascript">console.log("今天是%s%i年%d月%d日,温度为%f。", "公元", 2014, 7, 31, 31.5);function Dog(){this.BigDog = function(){return "a Big Dog";}this.SmallDog = function(){return "a Small Dog";}}var dog = new Dog();console.log('This is a %o !', dog);</script>


①、将上述代码整一个拷贝进HTML文件里。命名为test.html,打开这个HTML文件可以看到控制台有以下记录:




②、将以上中间的Javascript代码片段拷贝到debug调试窗口运行后控制台的效果一样。


三、分组显示


如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

示例:


<script language="javascript" type

这篇关于不得不说的Firebug(二):Firebug——控制台(Console)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1126355

相关文章

IDEA如何让控制台自动换行

《IDEA如何让控制台自动换行》本文介绍了如何在IDEA中设置控制台自动换行,具体步骤为:File-Settings-Editor-General-Console,然后勾选Usesoftwrapsin... 目录IDEA如何让控制台自http://www.chinasem.cn动换行操作流http://www

IDEA运行spring项目时,控制台未出现的解决方案

《IDEA运行spring项目时,控制台未出现的解决方案》文章总结了在使用IDEA运行代码时,控制台未出现的问题和解决方案,问题可能是由于点击图标或重启IDEA后控制台仍未显示,解决方案提供了解决方法... 目录问题分析解决方案总结问题js使用IDEA,点击运行按钮,运行结束,但控制台未出现http://

Python如何使用seleniumwire接管Chrome查看控制台中参数

《Python如何使用seleniumwire接管Chrome查看控制台中参数》文章介绍了如何使用Python的seleniumwire库来接管Chrome浏览器,并通过控制台查看接口参数,本文给大家... 1、cmd打开控制台,启动谷歌并制定端口号,找不到文件的加环境变量chrome.exe --rem

C++实现俄罗斯方块(Windows控制台版)

C++实现俄罗斯方块(Windows控制台版) 在油管上看到一个使用C++控制台编写的俄罗斯方块小游戏,源代码200多行,B站上也有相关的讲解视频,非常不错,值得学习。 B站讲解视频地址为:【百万好评】国外技术大神C++游戏编程实战教程,油管580W收藏,新手10小时入门,并快速达到游戏开发能力(中英字幕) B站 CSDN博主千帐灯无此声还为此写了一篇博客:C++实现俄罗斯方块(源码+详解),讲

控制台和MFC中内存泄露工具vld的使用

最近想检测下项目中内存泄露的情况,选中了vld这款。在查找使用方法的时候,大都是控制台下的示例,添加到main函数所在的源文件上。换成MFC就纠结了,不知道添加到哪里去。本文记录控制台和MFC中的使用vld过程。    vld资源:    1)、大家可以移步下边的网址下载:     http://vld.codeplex.com/releases/view/82311    2

centos7 安装rocketmq4.7.0以及RocketMQ-Console-Ng控制台

一、前置工作 1.1安装jdk8 https://blog.csdn.net/pang_ping/article/details/80570011 1.2安装maven https://www.cnblogs.com/116970u/p/11211963.html 1.3安装git https://blog.csdn.net/xwj1992930/article/details/964

彻底解决win10系统Tomcat10控制台输出中文乱码

彻底解决Tomcat10控制台输出中文乱码 首先乱码问题的原因通俗的讲就是读的编码格式和写的解码格式不一致,比如最常见的两种中文编码UTF-8和GBK,UTF-8一个汉字占三个字节,GBK一个汉字占两个字节,所以当编码与解码格式不一致时,输出端当然无法识别这是啥,所以只能以乱码代替。 值得一提的是GBK不是国家标准编码,常用的国标有两,一个是GB2312,一个是GB18030 GB1

如何使用Selenium捕获控制台日志

Selenium是一个流行的开源工具,用于自动化Web浏览器。其中一个关键功能是能够与浏览器的开发者控制台交互。本文将向您展示如何在Selenium中使用Java获取控制台日志。这些日志对于调试和解决Selenium脚本的问题非常有用。 如何查看任何网页的控制台日志 首先,打开浏览器的开发者控制台。在大多数浏览器中,您可以通过右键点击页面并选择“检查”来做到这一点。我们将在我们的测试网站——h

SAP学习笔记 - 开发02 - BTP实操流程(账号注册,BTP控制台,BTP集成开发环境搭建)

上一章讲了 BAPI的概念,以及如何调用SAP里面的既存BAPI。 SAP学习笔记 - 开发01 - BAPI是什么?通过界面和ABAP代码来调用BAPI-CSDN博客 本章继续讲开发相关的内容,主要就是BTP的实际操作流程,比如账号注册,登录,BTP集成开发环境的搭建这方面。 目录 1,账号注册 2,BTP登录URL 3,如何在BTP上进行开发? 以下是详细内容。 1,账

Tomcat控制台乱码问题已解决(2024/9/7

步骤很详细,直接上教程 问题复现: 情景一 情景二 原因简述 这是由于编码不一致引起的,Tomcat启动后默认编码UTF-8,而Windows的默认编码是GBK。因此你想让其不乱码,只需配置conf\logging.properties的编码格式即可 解决方法演示🟢 然后重新启动Tomcat即可 效果演示