admin管理员组

文章数量:1538729

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

简介

说明

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

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

官网

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

谷歌浏览器：https://developer.chrome/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浮点数
%ccss格式
%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

版权声明：本文标题：谷歌浏览器--控制台(console)调试--使用教程实例 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726981835a1092884.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。