控制台console

先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的打开控制台

大家可以看到控制台里面有一首诗还有其它信息,如果想清空控制台,可以点击左上角那个来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示

现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。

下面我们用console.log来替换,感受一下它的魅力。

看了上面这张图,是不是认识到log的强大之处了,下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

目前控制台方法和属性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"] 
下面我们来一一介绍一下各个方法主要的用途。

一般情况下我们用来输入信息的方法主要是用到如下四个

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息 
用图来说话

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

Js代码

  1. console.log("%d年%d月%d日",2011,3,26);
  2.  console.log("圆周率是%f",3.1415926);

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

Js代码

  1. var dog = {};
  2. dog.name = "大毛";
  3. dog.color = "黄色";
  4. console.log("%o", dog);

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

Html代码

  1. <body>
  2. <table id="mytable">
  3. <tr>
  4. <td>A</td>
  5. <td>A</td>
  6. <td>A</td>
  7. </tr>
  8. <tr>
  9. <td>bbb</td>
  10. <td>aaa</td>
  11. <td>ccc</td>
  12. </tr>
  13. <tr>
  14. <td>111</td>
  15. <td>333</td>
  16. <td>222</td>
  17. </tr>
  18. </table>
  19. </body>
  20. <script type="text/javascript">
  21. window.onload = function () {
  22. var mytable = document.getElementById(‘mytable‘);
  23. console.dirxml(mytable);
  24. }
  25. </script>

7、console.group输出一组信息的开头

8、console.groupEnd结束一组输出信息

看你需求选择不同的输出方法来使用,如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

哈哈,是不是觉得很神奇呀!

9、console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

10、console.count(这个方法非常实用哦)当你想统计代码被执行的次数

11、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

12、console.time 计时开始

13、console.timeEnd  计时结束(看了下面的图你瞬间就感受到它的厉害了)

14、console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息

在Profiles面板里面查看就可以看到cpu相关使用信息

15、console.timeLine和console.timeLineEnd配合一起记录一段时间轴

16、console.trace  堆栈跟踪相关的调试

上述方法只是我个人理解罢了。如果想查看具体API,可以上官方看看,具体地址为:https://developer.chrome.com/devtools/docs/console-api

下面介绍一下控制台的一些快捷键

1、方向键盘的上下键,大家一用就知晓。比如用上键就相当于使用上次在控制台的输入符号

2、$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。

什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined。

3、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点

4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

(哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪 比如记事本  是不是觉得功能很强大)

5、keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组

说到这,不免想起console.table方法了

6、monitor & unmonitor 
monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

看了这张图,应该明白了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。当解除监视(也就是执行unmonitor时)就不再在控制台输出信息了。

$ // 简单理解就是 document.querySelector 而已。 
$$ // 简单理解就是 document.querySelectorAll 而已。 
$_ // 是上一个表达式的值 
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。 
dir // 其实就是 console.dir 
keys // 取对象的键名, 返回键名组成的数组 
values // 去对象的值, 返回值组成的数组

下面看一下console.log的一些技巧

1、重写console.log 改变输出文字的样式

2、利用控制台输出图片

3、指定输出文字的样式

最后说一下chrome控制台一个简单的操作,如何查看页面元素,看下图就知道了

你在控制台简单操作一遍就知道了,是不是觉得很简单!

时间: 2024-10-16 04:06:31

控制台console的相关文章

OpenStack控制台console偶尔无法使用或加载慢

有时候OpenStack云平台运行一段时间发现控制台(console)界面时好时坏(多控制节点环境),或者控制台加载比较慢,查看log和相关进行没有异常,我的解决方法是重启相关服务:openstack-nova-api.openstack-nova-consoleauth.openstack-nova-novncproxy. 重启这三个服务都比较快,不会有什么影响,但是重启nova-api时可能会导致在dashboard上创建虚机等相关任务失败,但是这个操作很快,一般不会有什么影响.

chrome控制台console方法表

控制台console表达式表 console.clear()/clear() 清空控制台 console.log() 方法可以接受一个或多个表达式作为参数,并将他们的值打印到控制台(可使用CSS样式显示) // %s 字符串格式 // %i 或 %d 整型格式 // %f 浮点格式 // %o DOM节点 // %O JavaScript 对象 // %c 对输出的字符串使用css样式,样式由第二个参数指定. console.dir() 以JavaScript对象的形式打印 console.wa

Eclipse的控制台console经常闪现

Eclipse的控制台console有时候经常闪现! 让它不经常的调出来,可以按下面的操作去掉它: windows  ->   preferences   ->  run/debug   ->   console 在右边面板去掉"Show when program writest to standard out"和"Show when program writes to standard error"两个多选框,然后重启Eclipse.

[No000090]C#捕获控制台(console)关闭事件及响应cmd快捷键

捕获控制台(console)关闭事件: 1.Ctrl+C信号: 2.Ctrl+Break信号: 3.用户系统关闭Console时: 4.用户退出系统时: 5.系统将要关闭时: using System; using System.Runtime.InteropServices; using System.Threading; using System.Diagnostics; namespace ConsoleApplication2 { public delegate bool Console

控制台console对象常用的一些方法

console.log():调试中最常用的方法,用于在控制台窗口显示信息. console.log(123); //123 console.warn():输出信息时,在最前面加一个黄色三角,表示警告 console.warn('输出警告信息'); //输出警告信息 console.error():输出信息时,在最前面加一个红色叉,表示出错 console.error('输出错误信息'); //输出错误信息 console.assert():用来验证某个条件是否为真,如果是假,则显示一条事先指定的

Eclipse控制台console自动跳出来

Eclipse的控制台console有时候经常的跳出来,非常的烦人! 让它不经常的调出来,可以按下面的操作去掉它: windows  ->   preferences   ->  run/debug   ->   console 去掉"Show when program writest to standard out"和"Show when program writes to standard error"两个多选框 重启Eclipse Eclip

浏览器控制台console

console对象 console对象代表浏览器的JavaScript控制台.虽然它还不是标准,但是各大浏览器都原生支持,已经成为事实上的标准. console对象主要有两个作用: 显示网页代码运行时的错误信息. 提供了一个命令行接口,用来与网页代码互动. console对象的接口有很多方法,可供开发者调用. console.log() log方法用于在console窗口显示信息. 如果参数是普通字符串,log方法将字符串内容显示在console窗口. console.log("Hello Wo

控制台console输出信息原理理解

Eclipse控制台输出信息的控制 标签: Eclipse控制台输出信息 2015-01-02 14:11 22454人阅读 评论(1) 收藏 举报  分类: Some Tips(15)  版权声明:本文为博主原创文章,未经博主允许不得转载. 当你在Eclipse中 running/debugging一个应用程序的时候,有关该应用程序的运行调试信息及日志信息都会输出到控制台(console )显示,但是Eclipse只会显示最后一部分的日志信息,如果你的应用程序会产生大量的运行调试信息及日志信息

隐藏控制台console application窗口

  如题,在windows上新建控制台应用程序的时候,怎么才能将console 黑窗口隐藏起来.   第一种方法: ::SetConsoleTitle(_T("test_exe")); HWND hwnd=::FindWindow(_T(""),_T("test_exe")); ::ShowWindow(hwnd,SW_HIDE); 不行,试了,不清楚为什么失败-. 窗口句柄抓到了,就是不明白为什么隐藏不了......⊙﹏⊙b汗 两种方法抓到的句

IntelliJ IDEA控制台Console里没有查找快捷键

问题描述:之前的项目一直用的 Eclipse,习惯了其快捷键的使用,现在的项目换到IntelliJ IDEA,为了尽快上手,就把快捷键Keymap修改为Eclipse方式.发现在控制台Console里没有查找快捷键功能. 解决: 在网上找了好久也没有发现有效的信息,只好自己耐心的逐项对比了,发现在Keymap为Eclipse方式下, Main menu --> Edit --> Find --> Find ( a string in active editor) 查找功能没有设置快捷键!