Console控制台讲解

Console控制台讲解

控制台(Console)是JS开发里最重要的面板,主要作用是显示网页加载过程中产生各类信息。

之前的开发经常用Firebug进行JS代码调试,Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下正常使用,但是目前为止Firebug 官网宣布已停止开发更新。

但目前的浏览器自带的开发者工具类似于FireBug,一样可以使用。
console对象,提供5种方法,用来显示信息
日志信息console.log()、一般信息console.info()
除错信息console.debug()、警告提示console.warn()
错误提示console.error()
console对象,提供5种方法,用来显示信息
日志信息console.log()、一般信息console.info()
除错信息console.debug()、警告提示console.warn()
错误提示console.error()


显示信息的命令

(1)console.log()、console.info()、console.debug()的作用都是在浏览器控制台打印信息的。在Firefox里console.info()打印出的信息,在控制显示的时候信息前面会出现一个小图标, ,而且谷歌浏览器和opera不支持console.debug()。
(2)不同性质的信息前面有不同的图标,并且每条信息后面都有超级链接,点击后跳转到网页源码的相应行。
(3)console.log方法和console.debug()与console.info(),几乎用法完全一样,唯一不同的就是显示时候的表现形式了。

console.log

console.log,程序员经常用它来调试分析代码,可以在任何的js代码中调用console.log(),然后就可以在浏览器控制台看到打印的常量,变量,数组,对象,表达式等的值。
在这里插入图片描述

占位符

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

%o占位符 用来查看一个对象内部情况

占位符总结
丰富样式输出

可以使用%c进行css样式格式化输出。常见的富样式输出有两种:文字样式、图片输出。
(1)文字样式

(2)%c可以写在任何地方,不限于开头,然后%c后面所有的输出会应用我们指定的样式。


(3)图片输出(注意:背景图时,%c后面加空格占位)

(4)图片输出(高度用line-height+padding,宽度用padding)

(5)注意
console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式,而这个无法用%c覆盖

分组显示

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


注意:点击组标题,该组信息会折叠或展开;可以用console.groupEnd()引起来,也可以不引起来或者最后引起。

输出属性与方法

console.dir()可以显示一个对象所有的属性和方法。


输出节点代码
console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

清空控制台

console.clear()清空控制台内容

计时器
console.time(),console.timeEnd()方法计算一个操作的执行的时间console.time()是开始,console.timeEnd()是结束。
可以传一个参数,参数为计时器的名称。


计时器案例如图所示

注意:尽量在body结束前引入jquery库文档,因为在使用DOM时需要使用页面的元素,页面元素未实例之前是不能调用。

表格化
console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。

如有问题,请联系小编

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当我们在C语言控制台输出文本时,除了可以输出文本内容之外,还可以对文本的颜色进行设置,来使输出的文本更加丰富、直观。控制台的颜色设置是通过Windows API函数`SetConsoleTextAttribute()`来实现的。 `SetConsoleTextAttribute()`函数可以设置输出文本的前景色和背景色,前景色指的是文本本身的颜色,而背景色则是文本所在的背景颜色。该函数的原型如下: ```c BOOL SetConsoleTextAttribute( HANDLE hConsoleOutput, WORD wAttributes ); ``` 其中,`hConsoleOutput`参数指定了要设置属性的控制台屏幕缓冲区的句柄,可以通过`GetStdHandle(STD_OUTPUT_HANDLE)`函数获取。`wAttributes`参数指定了输出文本的属性,其中低4位指定前景色,高4位指定背景色。下面是常用的颜色属性值: | 颜色属性值 | 前景色 | 背景色 | | --------- | ------ | ------ | | 0 | 黑色 | 黑色 | | 1 | 蓝色 | 蓝色 | | 2 | 绿色 | 绿色 | | 3 | 浅绿色 | 浅绿色 | | 4 | 红色 | 红色 | | 5 | 紫色 | 紫色 | | 6 | 黄色 | 黄色 | | 7 | 白色 | 白色 | | 8 | 灰色 | 灰色 | | 9 | 淡蓝色 | 淡蓝色 | | 10 | 淡绿色 | 淡绿色 | | 11 | 淡浅绿 | 淡浅绿 | | 12 | 淡红色 | 淡红色 | | 13 | 淡紫色 | 淡紫色 | | 14 | 淡黄色 | 淡黄色 | | 15 | 亮白色 | 亮白色 | 例如,我们可以使用以下代码将控制台的前景色设置为红色、背景色设置为黄色: ```c #include <stdio.h> #include <windows.h> int main() { HANDLE handle = GetStdHandle(STD_OUTPUT_HANDLE); WORD color = FOREGROUND_RED | BACKGROUND_YELLOW | FOREGROUND_INTENSITY; SetConsoleTextAttribute(handle, color); printf("Hello World!"); return 0; } ``` 除了设置前景色和背景色之外,我们还可以使用`GetConsoleScreenBufferInfo()`函数获取当前控制台屏幕缓冲区的属性信息,包括前景色和背景色等,以便恢复默认的控制台颜色。例如: ```c #include <stdio.h> #include <windows.h> int main() { HANDLE handle = GetStdHandle(STD_OUTPUT_HANDLE); CONSOLE_SCREEN_BUFFER_INFO info; GetConsoleScreenBufferInfo(handle, &info); WORD old_color = info.wAttributes; WORD color = FOREGROUND_RED | BACKGROUND_YELLOW | FOREGROUND_INTENSITY; SetConsoleTextAttribute(handle, color); printf("Hello World!"); SetConsoleTextAttribute(handle, old_color); return 0; } ``` 在控制台中,我们也可以通过以下代码来设置控制台的字体颜色,以便更改输出文本的颜色: ```c #include <stdio.h> #include <windows.h> int main() { system("color 4f"); printf("Hello World!"); return 0; } ``` 其中,`system("color 4f")`指令中的`4`表示红色,`f`表示白色,可以根据需要更改。需要注意的是,该指令只能在Windows系统上执行,且只能在控制台中执行,不能在IDE等其他环境中执行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值