Jym好😘，我是珑墨，今天给大家分享 充分利用 Console.Log：增强调试和开发 ，嘎嘎的😍，看下面。
在开发、调试或排除 Web 应用程序故障时，console.log 是开发人员最常用的工具之一。它提供了一种将数据输出到控制台的简单方法，有助于了解代码执行情况并定位问题。不过，许多开发人员只使用了 console.log 的一小部分功能。
在本文中，我将介绍许多 console.log 技巧来帮助你进行调试和开发。
基本技巧
- 多个值： 记录多个值，用逗号分隔
arduino
console.log("Message: Hi Dhanush", 10, true);- 模板文字： 使用模板文字来格式化字符串：
ini
const name = "Dhanush";
console.log(`Hello, ${name}!`);表格和分组
- console.table： 以整洁的表格格式呈现数据：
ini
const data = { name: "Dhanush", hobby: "Chess" };
console.table(data);- console.group/groupCollapsed： 使用可折叠部分组织日志：
javascript
console.group("Network Info");
console.log("IP:", "192.168.1.1");
console.groupCollapsed("Details"); // Use for initially hidden sections
console.log("MAC Address:", "AA:BB:CC:DD:EE:FF");
console.groupEnd();
console.groupEnd();- console.clear： 清除控制台以重新开始。
高级调试
- console.dir： 获取详细的对象结构视图：
ini
const person = { name: "Dhanush", hobbies: ["youtube", "chess"] };
console.dir(person);- console.assert： 仅当条件失败时才记录（对于调试假设很有用）：
ini
const age = 18;
console.assert(age >= 21, "User must be over 21");- console.count/console.countReset： 创建一个计数器，用于跟踪发生的情况：
javascript
console.count("API Calls"); // Increments each time called
console.count("API Calls");
console.countReset("API Calls"); // Resets the counter
console.count("API Calls");- console.time/console.timeEnd： 测量代码执行时间：
javascript
console.time("Loop Time");
for (let i = 0; i < 1000; i++) {
// Do something
}
console.timeEnd("Loop Time");- console.trace： 打印堆栈跟踪以精确定位发生错误的位置。
javascript
function a() {
function b() {
console.trace();
}
b();
}
a();浏览器信息和交互
console.log(console)：探索可用的控制台方法本身。
javascript
console.log(console)- console.log(navigator)： 访问浏览器信息（用户代理、语言等）。
arduino
console.log(navigator)有趣且有创意的骚操作
- ASCII 艺术： 使用控制台字符创建基本图像：
sql
console.log(" ____")
console.log(" / _ \")
console.log(" ( o.o )")
console.log(" \___/")- 改文字样式： 第二个参数加样式
console.log(
'%c改变样式',
'color: yellow; background: green; font-size: 24px;font-size:100px'
)- 输出图片：
ini
console.image = function (url, scale) {
const img = new Image()
img.crossOrigin = "anonymous"
img.onload = () => {
const c = document.createElement('canvas')
const ctx = c.getContext('2d')
if (ctx) {
c.width = img.width
c.height = img.height
ctx.fillStyle = "red";
ctx.fillRect(0, 0, c.width, c.height);
ctx.drawImage(img, 0, 0)
const dataUri = c.toDataURL('image/png')
console.log(`%c sup?` ,
`
font-size: 1px;
padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
background-image: url(${dataUri});
background-repeat: no-repeat;
background-size: ${img.width * scale}px ${img.height * scale}px;
color: transparent;
`
)
}
}
img.src = url
}
// 支持 图片地址【注意，url如果是网络图片则必须开启了跨域访问才能打印图片】
console.image("https://img1.baidu.com/it/u=3569150367,1551940601&fm=253&fmt=auto&app=138&f=GIF?w=320&h=178", 0.5);
javascript
// 支持 base64
console.image("替换为 base64 字符出", 1);- 简单动画： 将 console.clear 与多行结合起来实现基本动画。
ini
let position = 0;
const width = 20; // Width of the console "screen"
const speed = 100; // Speed of the animation (in milliseconds)
function animate() {
console.clear();
let output = '';
// Create a string with spaces followed by a dot
for (let i = 0; i < width; i++) {
if (i === position) {
output += '●'; // The moving dot
} else {
output += ' ';
}
}
console.log(output);
// Update position
position++;
// Reset position to create a looping animation
if (position >= width) {
position = 0;
}
}
// Set an interval to update the animation frame
setInterval(animate, speed);日志记录级别（取决于浏览器）
- console.log： 一般信息。
- console.debug： 调试消息（通常默认隐藏）。
- console.info： 信息消息。
- console.warn： 警告信息（通常为黄色文本）。
- console.error： 错误消息（通常为红色文本）。
javascript
console.log('This is a general information message.');
console.debug('This is a debugging message.');
console.info('This is an informational message.');
console.warn('This is a warning message.');
console.error('This is an error message.');