江湖小栈

Do Better

0%

玩转console

发表于 分类于 Hot°C：
本文字数： 2.7k 阅读时长 ≈ 2 分钟
玩转console

5分钟教你玩转console

如何打印出带css样式的信息呢？

1
2
3
4
5
/* 基础写法，使用%c即可，可以写在任何地方，然后在后面添加我们的样式。 */
/* 所有的日志类型都可以使用 c 语言风格的 printf 消息格式，该格式定义了一个模板，其中包含一个变量被替换的 % 指示器。 */
console.log("%cA %cB %cC","color:red;","color:green;","color:blue;");
/* 所以在这里我们打印的内容A为红色的，B为绿色的，C为蓝色的。 */
/* 更多样式自行探索哦。 */

打印图片（部分浏览器不兼容）

  console.log不支持直接图片输出，但我们可以用背景图曲线救国。但你没法像平时那样输出背景图，原因呢，就是你没法直接设置 width 和 height 样式。所以我们要要输出一张 300x200 的图片的话，要用 padding 来把整个区域撑开到我们需要的大小，然后还要设置 line-height 才行。

注意：

  • line-height的值为图片高度。
  • background设置图片url。
  • padding左右两边的值是图片宽度的一半。
  • padding上下的值，需要自己慢慢去尝试直到满足为止。
1
console.log("%c","line-height:200px;background:url(...);padding:150px 自定义;");

博主案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* console */
console.log("%c博客名称%cDoubleAm", "line-height:28px;padding:4px;background:#a1afc9;color:#000;font-size:16px;margin-right:15px", "color:#3fa9f5;line-height:28px;font-size:16px;");
console.log("%c网站地址%chttps://biugle.cn", "line-height:28px;padding:4px;background:#a1afc9;color:#000;font-size:16px;margin-right:15px", "color:#00bc12;line-height:28px;font-size:16px;");
console.log("%c扣扣号码%c1005760694", "line-height:28px;padding:4px;background:#a1afc9;color:#000;font-size:16px;margin-right:15px", "color:#ff9900;line-height:28px;font-size:16px;");
console.log("%c欢迎使用doublelove！", "line-height:28px;padding:5px;color:#fff;font-weight:bolder;font-size:16px;background-color:chocolate;color:#fff;");
if (window.console && window.console.log) {
  console.log(`%c页面加载消耗了 %c${(Math.round(100 * performance.now()) / 100 / 1e3).toFixed(2)}s`, "background: #fff;color: #333;text-shadow: 0 0 2px #eee, 0 0 3px #eee, 0 0 3px #eee, 0 0 2px #eee, 0 0 3px #eee;", "color:tomato;font-weight:bolder;");
  localStorage.getItem("access") || localStorage.setItem("access", (new Date).getTime());
  let e = new Date(parseInt(localStorage.getItem("access")));
  let o = `${e.getFullYear()}年${e.getMonth() + 1}月${e.getDate()}日`;
  let t = 0;
  localStorage.getItem("hit") ? t = parseInt(localStorage.getItem("hit")) : localStorage.setItem("hit", 0);
  localStorage.setItem("hit", ++t);
  console.log(`%c这是你自 %c${o} %c以来第 %c${t} %c次在本站打开控制台，你想知道什么秘密吗～`, "", "color:chocolate;font-weight:bolder;", "", "color:chocolate;font-weight:bolder;", "");
}

其他

另外还有其他 console 方法可以自己去探索

  • console.time(arg1)/console.timeEnd(arg1)
  • console.group(arg1)/console.groupCollapsed(arg1)/console.groupEnd()
  • console.assert(a == 1, 'a != 1')
  • console.clear()
  • console.table(obj)
  • console.log({arg1, arg2, arg3})
bulb