前端快速提高调试效率的12种 console 相关的方法(建议收藏)

目录
文章目录隐藏
  1. 1. 用 ES6 解构赋值输出变量名
  2. 3.过滤日志消息
  3. 4. 使用 printf-type 的信息
  4. 5. 带样式的风格
  5. 6. 使用类似测试的断言
  6. 7. 运行堆栈跟踪
  7. 8. 组日志消息
  8. 9. 使用定时器
  9. 10. 按名称调试和监控函数
  10. 11. 查找和修复事件监听器
  11. 12. 复制属性到剪贴板
  12. 结语

我现在在调试代码的时候基本用的都是console.log() 调试法,虽然低级,但好用呀。当然,遇到复杂点的就会借助其它工具,但日常开发中 console.log() 基本够用了。

前缀铺垫的差不多了,今天我们来看看 console.log() 中还有哪些花里胡哨的写法。

1. 用 ES6 解构赋值输出变量名

如果打印多个值的,为了区别我们一般会连同变量名打印出来:

const variableX = 42;
console.log('variableX:', variableX);
// 或者
console.log(`variableX: ${ variableX }`);

其实,还有一种很简洁的方式就是使用解构的方式:

const variableX = 42;
console.log({ variableX }); // { variableX: 42 }

2. 使用适当的打印类型

console.log() 一般这样用:

console.log('no-frills log message');

但它不是唯一的类型。消息可以被归类为information (其处理方式与console.log()相同)。

console.info('this is an information message');

警告:

console.warn('I warned you this could happen!');

错误:

console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');

或不太重要的调试信息:

console.debug('nothing to see here - please move along');

console.table()可以以更友好的格式输出对象的值。

const obj = {
    propA: 1,
    propB: 2,
    propC: 3
};
console.table( obj );

console.table()可以以更友好的格式输出对象的值

或对象的数组:

const arr2 = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 },
    { a: 7, b: 8, c: 9 }
];

console.table( arr2 );

对象的数组

其他选项包括:

  • console.dir( obj ) 显示一个 JS 对象的交互式属性列表
  • console.dirxml( element ) 显示指定的 HTML 或 XML 节点的子代元素的互动树。
  • console.clear() 清除控制台之前的所有信息。

3.过滤日志消息

浏览器以适当的颜色显示日志信息,但也可以进行过滤,以显示特定的类型。点击控制台窗格左上方的图标,就可以打开 Chrome 的侧边栏。

过滤日志消息

注意,console.debug()信息只有在查看 verbose 选项时才会显示。

4. 使用 printf-type 的信息

所有的日志类型都可以使用 c 语言风格的printf消息格式,该格式定义了一个模板,其中包含一个变量被替换的%指示器。例如:

console.log(
  'The answer to %s is %d.',
  'life, the universe and everything',
  42
);
// The answer to life, the universe and everything is 42.

5. 带样式的风格

console.log(
  '%cOK, things are really bad now!',
  `
  font-size: 2em;
  padding: 0.5em 2em;
  margin: 1em 0;
  color: yellow;
  background-color: red;
  border-radius: 50%;
  `
);

控制台中的结果:

console 带样式的风格

6. 使用类似测试的断言

类似于测试的console.assert()命令可以用来在条件失败时输出一个信息。可以用一个条件和一个或多个对象来定义断言,当该条件失败时输出,例如:

console.assert(
  life === 42,
  'life is expected to be',
  42,
  'but is set to',
  life
);

另外,也可以使用一个信息和替换值。

console.assert(
  life === 42,
  'life is expected to be %s but is set to %s',
  42,
  life
);

当条件失败时,这两个选项都会显示一个断言错误。

console 使用类似测试的断言

7. 运行堆栈跟踪

可以使用 console.trace() 输出构成当前执行点的所有函数调用的日志。

function callMeTwo() {
  console.trace();
  return true;
}
function callMeOne() {
  return callMeTwo();
}
const r = callMeOne();

跟踪显示每次调用是哪一行,并且可以在控制台窗格中折叠或展开:

 console.trace()运行堆栈跟踪

8. 组日志消息

打印日志时,可以在开头使用console.group( label ) 和结尾使用 console.groupEnd() 将日志消息分成命名组。 消息组可以嵌套和折叠或展开(console.groupCollapsed( label ) 最初显示处于折叠状态的组):

// start log group
console.group('iloop');

for (let i = 3; i > 0; i--) {

  console.log(i);

  // start collapsed log group
  console.groupCollapsed('jloop');

  for (let j = 97; j < 100; j++) {
    console.log(j);
  }

  // end log group (jloop)
  console.groupEnd();

}

// end log group (iloop)
console.groupEnd();

打印组日志消息

9. 使用定时器

console.time()console.timeEnd()这两个方法可以用来让 WEB 开发人员测量一个 javascript 脚本程序执行消耗的时间。随着 WEB 应用越来越重要,JavaScript 的执行性能也日益受到重视,WEB 开发人员知道一些性能测试机器是必须的。

console.time方法是开始计算时间,console.timeEnd 是停止计时,输出脚本执行的时间。

// 启动计时器
console.time('testForEach');

// (写一些测试用代码)

// 停止计时,输出时间
console.timeEnd('testForEach');

// 4522.303ms

这两个方法中都可以传人一个参数,作为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。对console.timeEnd的调用会立即输出执行总共消耗的时间,单位是毫秒。

10. 按名称调试和监控函数

DevTools Sources 面板(或 Firefox 中的调试器)允许打开一个文件,并通过单击行号设置断点。基于 chrome 的浏览器也允许你通过在控制台中输入debug(functionName)来设置断点,例如:

debug( doSomething );

该函数必须在全局命名空间中可用,并且浏览器将在调用它时立即启动调试器。可以使用undebug(functionName)或重新加载页面来取消调试。

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。

unmonitor(function)便是用来停止这一监听。

按名称调试和监控函数

11. 查找和修复事件监听器

Firefox DevTools Inspector 面板会在任何附加了处理程序的 DOM 元素旁边显示一个 event 图标。单击图标查看函数名,然后单击左边的箭头图标展开代码。或者,“在调试器中打开”图标将在“调试器”窗格中定位处理程序,以便可以设置断点。

查找和修复事件监听器

Chrome 的实现没有那么好,但可以通过getEventListeners()函数传递一个 DOM 节点来查看所有事件监听器。例如,getEventListeners($0)显示应用于当前 Elements 面板中高亮显示的 DOM 节点的侦听器

getEventListeners($0)显示应用于当前 Elements 面板中高亮显示的 DOM 节点的侦听器

12. 复制属性到剪贴板

控制台的copy()命令可以复制任何值到剪贴板。它可以是一个原始值、数组、对象或 DOM 节点。

当传递一个 DOM 节点时,copy()将该元素及其所有子元素的 HTML 放在剪贴板上。这与右键点击一个节点并选择复制,然后选择复制外层 HTML 是一样的。

命令 copy( document.documentElement ) 复制整个 HTML 文档。 这可以粘贴到文本编辑器中并进行美化增强可读性。

结语

以上就是今天码云笔记为大家分享的前端快速提高调试效率的 12 种 console 相关的方法,建议收藏!方法是很多,根据情况自己选着用。

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 前端快速提高调试效率的12种 console 相关的方法(建议收藏)

4 评论

  1. 最常用的还是console.log

    1. 嗯,好多开发都是,除非特殊情况

  2. console虽然有很多方法,但这么多年还是习惯了console.log(),哈哈

发表回复