「小技巧」console的用法，不仅仅只有console.log()

最新推荐文章于 2025-06-27 09:59:36 发布
最新推荐文章于 2025-06-27 09:59:36 发布
阅读量652 收藏 4
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ed7zgeE9X/article/details/95684976
本文介绍了JavaScript开发调试中除console.log()外的常用控制台方法。包括console.table()以表格形式输出增加可读性，console.group()对信息分组打印，console.warn()和console.error()醒目输出警告和错误信息，还有console.trace()显示调用路径等，助开发者更好调试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

640?wx_fmt=png

开篇


在JavaScript开发调试中，console.log()是我们最常用的方法，但是还有其它几个常用的方法，值得我们试一试，也许会起到意想不到的效果。


本篇文章阅读时间预计2分钟。


01

基础用法——console.log()


打印一段文本


 
打印对象

 

 
接着我们看控制台的输出展现：

 


 640?wx_fmt=png
 
从图中我们看出，无法看出对应的变量名；如果想让两个对象一起输出，我们可以使用console.log({ foo, bar })，由于一行内容显示有限，对象内容部分进行了省略，我们必须点击左边的小箭头看更详细的内容，如下图所示：

 


 640?wx_fmt=png
 


 
02

 
console.table()

 
为了增加输出的可读性，我们可以使用console.table()让其通过表格的形式进行展示，比如我们在控制台输出console.table({ foo, bar})，如下图所示：

 640?wx_fmt=png
 

 
03

 
console.group()

 
有时候，为了方便分析，你需要将一些对象变量等信息进行分组打印输出，示例如下：

 

 640?wx_fmt=png
 


 
04

 
console.warn() & console.error()

 
一些特别的信息我们需要特别强调醒目的输出出来，比如警告和错误信息，你可以使用console.warn() & console.error()，输出的展示形式如下图所示，是不是更醒目：

 640?wx_fmt=png
 
你还可以更进一步，自定义打印输出的样式，你可以使用%c 语法。你可以使用这个方法更好的区分定义来源你的哪个API调用，用户事件，示例如下：

 

 
640?wx_fmt=png

 


 
05

 
console.trace()

 
console.trace()方法用于显示当前执行的代码在堆栈中的调用路径。如下段代码所示，在控制台里清晰了展示了add()的调用轨迹

 

 640?wx_fmt=png
 


 
06

 
console.time()

 
我们在开发过程中，经常需要知道一个方法运行了多长时间，方便我们做出修改完善的判断，我们可以使用console.time()，示例如下：

 

 


 640?wx_fmt=png
 


 
07

 
console.dir()

 
console.dir()可以直观展示一个对象的所有属性和方法，示例代码如下：

 

 


 640?wx_fmt=png
 


 640?wx_fmt=gif
 


 
今天的小技巧分享就到这里，希望对你有所帮助，祝大家周末愉快，欢迎到留言区进行交流分享。

 


 
精彩推荐

 
动画基础丨点和直线

 
 
太惊艳了，这些画都是CSS的杰作！

 
 
 
css基础丨如何理解transform的matrix()用法

 
 
 
css基础丨如何理解Display的属性：None，Block，Inline，Inline-Block

 
 
 
ES6基础丨let和作用域

 
 
 
ES6基础丨const介绍

 
 
 
ES6基础丨默认参数值

 
 
 
ES6基础丨展开语法（Spread syntax）

 
 
 
ES6基础丨解构赋值（destructuring assignment）

 
 
 
ES6基础丨箭头函数（Arrow functions）

 
 
 
ES6基础丨模板字符串（Template String）

 
 
 
ES6基础丨Set与WeakSet

 
 
 
ES6基础丨Map与WeakMap

 
 
 
ES6基础丨Symbol介绍：独一无二的值

 
 
 
ES6基础丨Object的新方法

 
 
 
ES6基础丨迭代器（iterator）

 
 
 
ES6基础丨生成器（Generator）

 
 
 
数据结构基础丨栈简介（使用ES6）

 
 
 
数据结构基础丨队列简介（使用ES6）

 
 
 
JavaScript基础丨前端不懂它，会再多框架也不过只是会用而已！

 
 
 
JavaScript基础丨你真的了解JavaScript吗?

 
 
 
JavaScript基础丨回调(callback)是什么?

 
 
 
JavaScript基础丨Promise使用指南

 
 
 
JavaScript基础丨深入学习async/await

 
 
 
JS加载慢？谷歌大神带你飞!(文末送电子书)

 
 
 
19年你应该关注这50款前端热门工具（上）

 
 
 
19年你应该关注这50款前端热门工具（中）

 
 
 
19年你应该关注这50款前端热门工具（下）

 
 
专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

 
长按关注"前端达人"

 640?wx_fmt=gif
 640?wx_fmt=jpeg
 

 


                

        

    

    
  



    

      

        

            

              
                
                  前端达人
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
uni-app——Hbuildx 自定义console.log的快捷键

				
			

			

				

					qq_43201350的博客
				

				

					10-11
					
					2125
					
				

			

		

		

			
				
工具——>代码块设置——>javascript 代码块 中可修改快捷键
默认是输入 “clog”
在右边输入
{
"console.log": {
 "prefix": "log",
 "body": [
     "console.log();"
    ],
    "triggerAssist": false,
    "description": "Log output to console twice"
}
}

如图

设置后只要输入 “log” 就会出来 "console.log"

			
		

	



                

            
              



	

		

			

				
					
与生产环境中的 console.log 说再见

				
			

			

				

					liuhao9999的博客
				

				

					06-24
					
					723
					
				

			

		

		

			
				
与生产环境中的 console.log 说再见

			
		

	



              


  
              

                


	

		

			

				
					
yii2-consolelog:yii2的控制台日志

				
			

			

				

					05-27
				

			

		

		

			
				
控制台记录器
将输出转储到控制台，以进行控制台应用程序调试
安装
添加
 "pahanini/yii2-consolelog": "*"
到composer.json文件的require部分。
用法
 return [
	'id' => 'app-console' ,
	'bootstrap' => [ 'log' ],
	'components' => [
		'log' => [
			'targets' => [
				[
					'class' => 'pahanini\log\ConsoleTarget' ,
					'levels' => [ 'error' , 'warning' , 'trace' ],
				]
			],
		],
	],
	'params' => $ params ,
];
 您还可以使用color属性自定义配色方案。

			
		

	





	

		

			

				
					
yii2 console 带参数_前端猛男带你玩转Typescript（上）

				
			

			

				

					weixin_39612554的博客
				

				

					11-28
					
					336
					
				

			

		

		

			
				
随着前端技术的不断发展，typescript像一头洪水猛兽一般涌进了前端工程师的领域，同时也给javascript注入了新的生命力。接下来笔者将会从以下几个方面去了解typescript的特点以及它的基础语法。一、为什么要使用typescript在开始讲述typescript的语法之前，笔者觉得有必要对typescript的诞生背景进行一定的描述，而这一切都要从编程语言的类型说起。现有主...

			
		

	



		

			
		



	

		

			

				
					
详解前端console.log自定义打印列表图片和调试

					
最新发布

				
			

			

				

					鹏多多的博客
				

				

					06-27
					
					1209
					
				

			

		

		

			
				
本文全面介绍了JavaScript中Console对象的多样化调试功能。基础部分涵盖debug/log/info等不同级别的信息打印；数据可视化展示了表格形式的数据呈现和分组日志管理；性能调试方面包括计时器、计数器和对象结构分析；错误处理环节讲解堆栈跟踪和断言机制；高级特性包含控制台样式自定义和图片打印技巧。这些方法为开发者提供了从基础调试到复杂性能优化的全套工具，显著提升开发效率。

			
		

	





	

		

			

				
					
 yii2 / Console - yii2开发控制台应用时的还我漂漂拳

				
			

			

				

					weixin_33971205的博客
				

				

					02-24
					
					220
					
				

			

		

		

			
				
之所以放到此专栏主要是该文章对我们学习yii2-queue有很大帮助。
我们经常使用yii2开发命令行应用，也会遇到比如让用户在命令行输入信息、选择等操作，今天为大家介绍的这个yii2的Console类轻松的帮你搞定这件事情，有了它，你的命令行应用将更加高逼格。
为了学习更简单，我们用问答的形式开始。
Console在哪里？
Consol...

			
		

	





	

		

			

				
					
yii2 console 带参数_前端开发调试：浏览器console方法总结

				
			

			

				

					weixin_40000702的博客
				

				

					11-30
					
					697
					
				

			

		

		

			
				
今天突发奇想，准备总结下console的各个函数。以前都是只用一个console.log(),查了一下发现有好多，就记下来，方便以后查阅。速记consoleConsole对象提供浏览器控制台的接入，不同浏览器是不一样的，这里介绍普遍存在的Console.assert()判断第一个参数是否为真，false的话抛出异常并且在控制台输出相应信息Console.clear()清空控制台Console.co...

			
		

	





	

		

			

				
					
yii2 console相关

				
			

			

				

					wuxing164的博客
				

				

					08-11
					
					361
					
				

			

		

		

			
				
class ExampleController extends \yii\console\Controller{
    // 命令 "yii example/create test" 会调用 "actionCreate('test')"
    public function actionCreate($name) { ... }

    // 命令 "yii example/index ci

			
		

	





	

		

			

				
					
JavaScript调试之console.log调试的一个小技巧分享

				
			

			

				

					10-19
				

			

		

		

			
				
日常开发中经常会需要console来查看当前对象的值。当然用debugger会更全面的查看，但是...下面这篇文章主要给大家分享了关于JavaScript调试之console.log调试的一个小技巧，需要的朋友可以参考借鉴，下面来一起看看吧。

			
		

	





	

		

			

				
					
React-native调试小技巧，在Logcat输出console的log,不用摇晃也能弹出Debug 弹窗

				
			

			

				

					hahahhahahahha123456的博客
				

				

					07-15
					
					1495
					
				

			

		

		

			
				
当初新学React-native的时候，也是感觉一脸懵逼，只能看官网，看视频，去找qq群，没人帮助自己。一点一点肯，慢慢的跳坑，然后再跳出来，学到现在，也不敢说能参透notejs的原理，但是 我会把自己遇到的一些小技巧记下来，方便后人采纳。

很多新手好比调试网络接口的时候会很苦恼，为什么呢？ 一是因为对fetch的不熟悉，不知道这样写对不对，想通过打log的方式去看看程序执行的过程，但是reac...

			
		

	





	

		

			

				
					
Yii2之控制台命令篇（console）

				
			

			

				

					weixin_34413802的博客
				

				

					10-27
					
					600
					
				

			

		

		

			
				
控制台命令

Yii 中有一个拥有丰富功能的控制台，它们主要用于创建网站后台处理的任务。在项目根目录下执行相关操作，有意思的事，可以通过 yii 自带的功能，列出当前已有的命令。

1、查看当前项目控制台已有的脚本命令

正如你在截图中看到，Yii 中已经定义了一组默认情况下可用的命令：

AssetController - 允许合并和压缩你的 JavaScript 和 CSS 文件。 在 资源 ...

			
		

	





	

		

			

				
					
yii2 console 集成swoole 执行异步任务,例如注册邮件,发送短信

				
			

			

				

					01-23
				

			

		

		

			
				
yii2 console 集成swoole 执行异步任务,例如注册邮件,发送短信
使用方法:http://blog.csdn.net/nextvary/article/details/79136058

			
		

	





	

		

			

				
					
Yii2的console使用

				
			

			

				

					weixin_30527143的博客
				

				

					03-28
					
					111
					
				

			

		

		

			
				
在/console/controllers新建你的控制器
<?
php namespace console\controllers; 
use Yii;
 use yii\console\Controller;
 class TestController extends Controller {
　　　　写自己的方法
}

回到yii advanced的根目录执行:yi...

			
		

	





	

		

			

				
					
yii2 console的使用

				
			

			

				

					Terry - 专注外贸B2C
				

				

					02-03
					
					7264
					
				

			

		

		

			
				
控制台应用

Yii框架完美支持控制台应用，其在 Yii 中的结构与 Yii 的 web 应用非常相似。一个控制台应用，包括一个或多个 [[yii\console\Controller]]（通常在控制台环境中被称作“命令”）。 如 Web Controller 一样，每一个 [[yii\console\Controller]] 也可以包含有一个或多少的动作。

（译者注：控制台即win 下

			
		

	





	

		

			

				
					
yii2 console 控制台的使用

				
			

			

				

					落子無悔
				

				

					08-22
					
					3283
					
				

			

		

		

			
				
yii2 console 控制台的使用

 

 console/controllers/  下的Demo


&lt;?php
namespace console\controllers;
use Yii;
use yii\console\Controller;

class DemoController extends Controller {
    public function acti...

			
		

	





	

		

			

				
					
Yii2 console

				
			

			

				

					冰恋冬的专栏
				

				

					12-14
					
					570
					
				

			

		

		

			
				
yii2 自带控制台操作console，主要用于数据处理，定时操作等等
直接一个操作小实例：
yii目录有console文件夹，你的控制台操作即在这个文件夹下， 而必须有个入口文件（yii）
我的目录如下：
 
 
console下的控制器文件夹下：此处为了简单，直接修改Rbaccontroller.php代码为


基本内容准备就绪，我们直接访问控制台，进行操作：
cmd -

			
		

	





	

		

			

				
					
Yii2 console控制台

				
			

			

				

					freedom_fd的博客
				

				

					09-30
					
					395
					
				

			

		

		

			
				
Yii2 console控制台
在console 地下创建控制器

<?php 
namespace console\controllers;

use yii\console\Controller;
use yii\console\ExitCode ;
use yii\helpers\Console;


class HelloController extends Controller
{...

			
		

	





	

		

			

				
					
yii2使用console

				
			

			

				

					一杯苦恰啡的博客
				

				

					12-05
					
					2322
					
				

			

		

		

			
				
使用console之前，需要配置php环境变量。windows的略过。这里记录一下linux配置环境变量。# vim /etc/profile
加入如下两行代码,下面的路径根据具体的php目录和mysql目录进行修改
PATH=$PATH:/usr/local/webserver/php/bin:/usr/local/webserver/mysql/bin
export PATH
保存后执行命令
#

			
		

	





	

		

			

				
					
在yii2中创建控制台命令（console）

				
			

			

				

					梦情与你的博客
				

				

					06-18
					
					3158
					
				

			

		

		

			
				
今天我们共同学习一下在yii2中创建命令。
一 、 首先 根目录下console目录就是配置的地方
1、查看当前项目控制台已有的脚本命令

正如你在截图中看到，Yii 中已经定义了一组默认情况下可用的命令：

AssetController - 允许合并和压缩你的 JavaScript 和 CSS 文件。 在 资源 - 使用 asset 命令 一节可获取更多信息。
CacheController ...

			
		

	





	

		

			

				
					
console.log基本使用

				
			

			

				

					09-01
				

			

		

		

			
				
console.log()是JavaScript中最基本和常用的用法之一，它可以在浏览器的控制台中打印信息。基本使用方法如下：
1. 使用console.log()打印一个变量的值：
```javascript
let name = "HHHHH";
console.log(name); // HHHHH
```
2. 使用console.log()打印带有字符串的信息：
```javascript
let name = "HHHHH";
console.log(`my name is: ${name}`); // my name is: HHHHH
```
3. 使用console.log()打印多个变量或值：
```javascript
let name = "HHHHH";
let age = 18;
console.log(name, age); // HHHHH 18
```
4. 使用console.log()打印带有描述信息的变量或值：
```javascript
let name = "HHHHH";
let age = 18;
console.log("message:", name, age); // message: HHHHH 18
```
通过console.log()方法，可以方便地在控制台中查看变量的值、输出测试信息或进行调试。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* *2* [console.log() 的小技巧](https://blog.csdn.net/Hannaaa/article/details/121149740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
-  *3* [console.log(console.log) = ?](https://blog.csdn.net/lefex/article/details/105721791)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值