原文网址：谷歌浏览器--控制台(console)调试--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文用示例介绍浏览器使用控制台（console）调试前端的方法。

Console API提供了允许开发人员执行调试任务的功能，Console对象提供了浏览器控制台调试的接口。浏览器都实现了这个接口，比如：谷歌浏览器、火狐浏览器、360浏览器、Safari浏览器、IE浏览器等等。也就是说：所有浏览器都可以用console进行调试。

官网

MDN：Console - Web API 接口参考 | MDN

谷歌浏览器：https://developer.chrome.com/docs/devtools/console/api/

查看所有功能

法1：运行console命令

法2：console.dir(console)

技巧

如果想要换行而不是直接执行命令，则按下：shift+enter
查看某个元素的监听器：getEventListeners(document.querySelector('.someclass'));
注意：此方法是Chrome浏览器的，在JS中无法直接使用。

console.clear

console.clear(); //清空控制台

console.log家族

用法1：基本用法

console.log ('普通信息')
console.info ('提示性信息')
console.warn ('警示信息')
console.error ('错误信息')

结果如下

用法2：输出对象

单纯对象

var myObj = {name: 'haha',sex: 'male',obj: function(){console.log("hello");}
}
console.log(myObj);

DOM对象

HTML文件：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>this is title</title>
</head><body><div>这是个Demo
</div></body>
</html>

输出结果：

用法3：输出指定id的DOM节点

代码

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>this is title</title>
</head><body><div id="abc">这是个Demo
</div></body>
</html>

执行结果

注意：用$('#abc')可以达到同样效果。

格式化

console对象的上面4种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持下边几种。

console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。

符号	含义
%d 或%i	数字
%s	字符串
%f	浮点数
%c	css格式
%o	对象

示例

console.log("%d年%d月%d日",2011,3,26);
console.log("%s是%f","圆周率",3.1415926);
console.log("这个表示CSS样式%c红色","color:red", "炫酷吧")

结果：

对象输出示例

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

结果：

console.group()，console.groupEnd()

简介

console.group() ：在控制台创建一个分组，随后创建的内容都会保存在里面；
console.groupEnd() ：表示着当前分组的结束。

适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

示例

console.group("app.bundle");
console.warn("来自bundle模块的警告信息1");console.warn("来自bundle模块的警告信息2");
console.groupEnd();
console.group("app.bundle");
console.log("来自bundle模块的信息1");console.log("来自bundle模块的信息2");
console.groupEnd();

结果如下

这样的控制台信息看上去就一目了然了，就不用再为了找这是属于那一行代码输出的再翻一遍源码了。

console.dir()

说明

输出打印对象的详细键值对信息。

若该对象为HTML元素，则该元素的DOM的表达式会按DOM树输出。这个方法是我经常使用的，比for in方便了很多，可以详细查对象的方法。

示例1：普通对象

var myObj = {name: 'haha',sex: 'male',obj: function(){console.log("hello");}
}
console.dir(myObj);

结果

示例2：DOM对象

console.assert()

简介

对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的。console.assert()就是最好的选择。

示例

var isDebug=false;
console.assert(isDebug,'开发中的log信息');

结果

console.count()

简介

统计代码被执行的次数。

示例

function fun(){console.count('fun被执行的次数');
}
fun();
fun();
fun();

执行结果

console.table()

简介

传入的对象在控制台上以表格的形式呈现。

示例

let aa = [{a: 1,b: 2}, {c: 3,d: 4}
]
console.table(aa);

结果：

console.time()，console.timeEnd()

简介

可以查看一段代码执行的耗时情况。

在使用的时候这两个方法需要传递同一个参数，若不传，则为“default”

示例

console.time("Array耗时");
var array= new Array(10000000);
for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object();
};
console.timeEnd("Array耗时");

结果：

console.profile()，console.profileEnd()

简介

想要查看CPU使用相关的信息时，可以使用console.profile配合 console.profileEnd来完成这个需求。

示例

console.profile("Array耗时");
var array= new Array(10000000);
for (var i = array.length - 1; i >= 0; i--) {array[i] = new Object();
};
console.profileEnd("Array耗时");

有人说，在Profiles面板里面查看就可以看到cpu相关使用信息，但我并没有找到。他们的测试结果是：

其他功能

$_ // 上一个表达式的值
$0~$4 // 最近5个最近选中的DOM元素

$ // 对JavaScript的document.querySelector() 的封装
$$ // 对JavaScript的 document.querySelectorAll 的封装

dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 取对象的值, 返回值组成的数组
monitor，unmonitor //监听函数执行
debug，undebug //函数若执行则进入断点

$_

简介

上一个表达式的值

示例

$0~$4

简介

代表了最近5个你选择过的DOM节点。

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

示例

$

简介

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

$(selector)是原生JavaScript的document.querySelector() 的封装。

示例

$$

简介

$$(selector)是对ocument.querySelectorAll() 的封装。返回的是所有满足选择条件的元素的一个集合。

示例

copy

简介

可以将在控制台获取到的内容复制到剪贴板。

注意：他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~这样我们就可以通过js代码进行复制操作而不用再依赖Flash插件了。

示例

此时就可以ctrl+v粘贴了。

keys，values

简介

keys：返回传入对象所有属性名组成的数组
values：返回所有属性值组成的数组

示例

var myObj = {name: 'haha',sex: 'male',obj: function(){console.log("hello");}
}
keys(myObj);
values(myObj);

结果

monitor，unmonitor

简介

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

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

示例

function sayHello(name){console.log('hello,' + name);
}
monitor(sayHello);
sayHello('abc');
sayHello('def');
unmonitor(sayHello);

结果

debug，undebug

简介

也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug 则是解除该断点。

示例

其他

Chrome控制台实用指南 - 知乎
Chrome 控制台console的用法 - SegmentFault 思否
Chrome控制台浏览器 console用法_pw251的博客-CSDN博客

谷歌浏览器--控制台(console)调试--使用/教程/实例相关推荐

JavaScript 控制台(console)调试技巧
一.简单理解 Console是用于显示JS和DOM对象信息的单独窗口.在浏览器中按F12调出的调试窗口中有一个控制台选项或console选项. 二.支持console的浏览器 Chrome和FireF ...
在MFC，Win32程序中向控制台(Console)窗口输出调试信息
在MFC程序中输出调试信息的方法有两种,一种是使用TRACE宏,可以向Output窗口输出调试信息:另一种是用MessageBox,弹出消息框来输出调试信息,但会影响程序的运行. 其实有一种方法可以更 ...
和我一起学Windows Workflow Foundation(1)-----创建和调试一个WF实例(转)
和我一起学Windows Workflow Foundation(1)-----创建和调试一个WF实例今天开始,我打算开始学习WWF,从网上搜索到了部分相关资料,也找到了一些文档和实验.但是,资料以 ...
bboss-elasticsearch--使用/教程/实例
原文网址:bboss-elasticsearch--使用/教程/实例_IT利刃出鞘的博客-CSDN博客简介说明本文用实例介绍bboss-elasticsearch的用法. 官网 github 官 ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
[转]Chrome 控制台console的用法
Chrome 控制台console的用法下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x&q ...
html页面手机端console,GitHub - MobileHTML5/vConsole: 一个针对手机网页的前端 console 调试面板。...
vConsole 一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 ...
【JS 逆向百例】网洛者反爬练习平台第五题：控制台反调试
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 文章目录声明逆向目标逆向过程声明本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业 ...
macOS的控制台Console.app
1.前言从Xcode9.4开始,Devices 界面已经移除了真机设备的日志输出log,而移到macOS系统独立的控制台app(Console.app): 20180713-macOS-Consol ...

谷歌浏览器--控制台(console)调试--使用/教程/实例

简介