【工具】充分利用 Console.Log：增强调试和开发

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.');