彩色的控制台(console)信息输出技巧

应用场景:日常开发中,我们通常会对请求进行封装以便更好的适应我们自己的项目,为了区别于一般的打印信息,我们可以在封装请求拦截器和响应拦截器的时候加上彩色的打印信息,使其突出显示在控制台。
使用技巧:主要通过%c占位符来使输出的文字具有样式。
举例:我们想要在请求接口以及接口响应时,对请求接口的方法,请求的参数id以及请求的url进行打印。
在请求拦截器中,突出蓝色背景:
console.log(
  `%c ${method} No.${reqId} `,
  'background:#409EFF;color:#fff;font-weight:bold;border-radius:2px;padding:2px;margin-right:1em;',
  url
);
在相应拦截器中,突出绿色背景:
console.log(
  `%c Res No.${reqId} `,
  'background:#67C23A;color:#fff;font-weight:bold;border-radius:2px;padding:2px;margin-right:1em;',
  url
);

 

posted @ 2022-06-23 10:11  南无、  阅读(397)  评论(0)    收藏  举报