Console除了花式炫技外还可以这么用

2023-11-25 06:06:27

Console：不仅仅是调试神器，还有这些妙用

引言

Console.log作为JavaScript中的日志输出工具，其功能远不止调试信息。合理运用它，还可以输出错误信息、调用堆栈信息，甚至函数名等信息。这篇文章将深入探讨Console.log的妙用，为你的JavaScript开发之旅提供灵感。

搭建本地代理服务器

本地代理服务器（本地服务器）通过模拟真实服务器的工作环境和流程，可以辅助调试程序。它的优势在于跨域问题可以轻松解决，只需要在代理中设置跨域即可，无需额外配置。

前端错误输出

虽然浏览器自带控制台可以显示前端错误信息，但有时它无法追踪到真实错误位置。通过源映射（source-map）工具，可以将编译后的代码还原为原始代码，从而让浏览器定位到真实错误位置。

输出函数名

为每个函数起一个独有名字，并使用Console.log打印时，函数名和日志内容将同时输出。这有助于快速定位错误源头。

function fn(arg1, arg2) {
  const funcName = fn.name;
  console.log(funcName, arg1, arg2);
}

输出调用堆栈

通过getCaller()方法，可以打印函数的调用堆栈信息，包括方法名、文件路径和行号。这对于查错很有帮助。

function getCaller() {
  const orig = Error.prepareStackTrace;
  // 用空数组准备堆栈调用
  Error.prepareStackTrace = (_, stack) => stack;
  // 获取堆栈数组
  const stack = new Error().stack;
  // 恢复原样
  Error.prepareStackTrace = orig;

  return stack[2];
}

const caller = getCaller();

console.log('调用的方法为: ', caller.getMethodName());
console.log('所在文件为: ', caller.getFileName());
console.log('调用行数为: ', caller.getLineNumber());