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

今天药忘吃喽~ 2023-10-02 14:12 40阅读 0赞

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

## **简介** ##

**说明**

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

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

**官网**

MDN：[Console - Web API 接口参考 | MDN][Console - Web API _ _ MDN]

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

## **查看所有功能** ##

**法1：运行console命令**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

**法2：console.dir(console)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

## 技巧 ##

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

## console.clear ##

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

## console.log家族 ##

**用法1：基本用法**

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

**结果如下**

![20210720222213394.png][]

**用法2：输出对象**

**单纯对象**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

**DOM对象**

HTML文件：

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

输出结果：

![20210720231942253.png][]

**用法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>

执行结果

![20210721092018634.png][]

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

**格式化**

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

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

<table> 
 <tbody> 
  <tr> 
   <td><strong>符号</strong></td> 
   <td><strong>含义</strong></td> 
  </tr> 
  <tr> 
   <td> <p>%d</p> <p>或%i</p> </td> 
   <td>数字</td> 
  </tr> 
  <tr> 
   <td>%s</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>%f</td> 
   <td>浮点数</td> 
  </tr> 
  <tr> 
   <td>%c</td> 
   <td>css格式</td> 
  </tr> 
  <tr> 
   <td>%o</td> 
   <td>对象</td> 
  </tr> 
 </tbody> 
</table>

**示例**

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

结果：

![20210720225822120.png][]

**对象输出示例**

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

结果：

![20210720230040353.png][]

## 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();

结果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3][]

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

## console.dir() ##

**说明**

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

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

**示例1：普通对象**

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

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]

**示例2：DOM对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6][]

## console.assert() ##

**简介**

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

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

**示例**

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

结果

![20210720232710410.png][]

## console.count() ##

**简介**

统计代码被执行的次数。

**示例**

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

执行结果

![20210720233036825.png][]

## console.table() ##

**简介**

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

**示例**

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

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7][]

## 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耗时");

结果：

![20210720235059153.png][]

## 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相关使用信息，但我并没有找到。他们的测试结果是：

![c6f13338d3aba136779b0335dd42ccb2.png][]

## 其他功能 ##

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

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

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

### $\_ ###

**简介**

上一个表达式的值

**示例**

![2021072100160337.png][]

### $0~$4 ###

**简介**

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

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

**示例**

![e140977d1de352b03337e4e2339a65f7.gif][]

### $ ###

**简介**

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

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

**示例**

![20210721002230833.png][]

### $$ ###

**简介**

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

**示例**

![20210721002321230.png][]

### copy ###

**简介**

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

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

**示例**

![20210721002444618.png][]

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

### keys，values ###

**简介**

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

**示例**

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

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8][]

### 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);

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9][]

### debug，undebug ###

**简介**

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

**示例**

## **其他** ##

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

[--_console_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121190656
[Console - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Console
[https_developer.chrome.com_docs_devtools_console_api]: https://developer.chrome.com/docs/devtools/console/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210720175540886.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210720175727557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[20210720222213394.png]: https://img-blog.csdnimg.cn/20210720222213394.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210720231749198.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[20210720231942253.png]: https://img-blog.csdnimg.cn/20210720231942253.png
[20210721092018634.png]: https://img-blog.csdnimg.cn/20210721092018634.png
[20210720225822120.png]: https://img-blog.csdnimg.cn/20210720225822120.png
[20210720230040353.png]: https://img-blog.csdnimg.cn/20210720230040353.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210720222632292.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210720230533273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210720231500581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210720231611576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[20210720232710410.png]: https://img-blog.csdnimg.cn/20210720232710410.png
[20210720233036825.png]: https://img-blog.csdnimg.cn/20210720233036825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210720232333493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[20210720235059153.png]: https://img-blog.csdnimg.cn/20210720235059153.png
[c6f13338d3aba136779b0335dd42ccb2.png]: https://img-blog.csdnimg.cn/img_convert/c6f13338d3aba136779b0335dd42ccb2.png
[2021072100160337.png]: https://img-blog.csdnimg.cn/2021072100160337.png
[e140977d1de352b03337e4e2339a65f7.gif]: https://img-blog.csdnimg.cn/img_convert/e140977d1de352b03337e4e2339a65f7.gif
[20210721002230833.png]: https://img-blog.csdnimg.cn/20210721002230833.png
[20210721002321230.png]: https://img-blog.csdnimg.cn/20210721002321230.png
[20210721002444618.png]: https://img-blog.csdnimg.cn/20210721002444618.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210721002923319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2021072100324785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[Chrome_ -]: https://zhuanlan.zhihu.com/p/24187505
[Chrome _console_ - SegmentFault]: https://segmentfault.com/a/1190000002511877
[Chrome_ console_pw251_-CSDN]: https://blog.csdn.net/pw251/article/details/104110592