javascript调试器控制台（Chrome）中的颜色

debugcn 发表于 Dev

珍露卡·斯卡里（Jeanluca Scaleri）

我注意到此站点生成的输出。我不知道他们是怎么做到的，但是看起来不错。我想知道这是如何工作的。如何生成这些形状和颜色。也有某种梯度。

这是来自控制台输出的复制粘贴（无颜色）：

◢◤◢◥◢◤◤◢◥◣◤◥◢◣◢◤◣◢◤◥◢◢◢◤◢◢◤◢◥◤◢◣◣◥◤◥◤◢◣◥◣◢◢◤◣◤◣◤◢◣◢◢◤◢◣◤◥◤◣◥◤◥◢◣◤◣◤◥◣◤◣◢◣◥◢◥◤◥◤◣ 
|▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▇█▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▃▇███▆▕▁▁▃▇████▍▕▁██▍▕▁▃▇█████████▇▃▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▂██▕▁▁██▍▕██▍▕▁▁▁▁▁▁██▍▄██▕▁▁▅▃▕▁▁▁▁██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▄██▕▁▁▁██▍▕██▂▕▁▁▁▁▁▂██▕▁██▍▕▁██▂▕▁▁▂██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▂▄▆██▕▁▁▁▁▁██▍▕▁██████████▕▁▁▁██▍▕▁███████▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ 
▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁██▍▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁unconed▕▁▁▁▁▁▁ 
◥◣◤◣◥◣◢◣◤◥◤◢◤◣◥◥◢◥◢◢◤◢◣◤◤◢◤◢◣◤◢◥◢◤◥◣◥◣◥◢◥◢◥◢◣◤◥◣◢◢◥◢◤◥◢◥◤◥◤◥◤◣◢◤◢◣◤◢◣◤◥◣◢◤◤◥◤◥◣◢

乍得·希拉（Chad Scira）

我写了Console.js https://github.com/icodeforlove/Console.js，以使我们更容易做到这一点

Console.styles.register({
  brshadow: 'box-sizing: border-box; background-image: -webkit-linear-gradient(top, rgb(81, 162, 189), rgb(68, 105, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0px; background-position: initial initial; background-repeat: initial initial;',
  shadow: 'box-sizing: border-box; color: rgb(68, 105, 133); background-image: -webkit-linear-gradient(top, rgb(99, 199, 231), rgb(68, 105, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 0, 0, 0.2) 3px 3px 0px, rgb(128, 190, 220) 0px 0px 20px; background-position: initial initial; background-repeat: initial initial;',
  white: 'color: white'
});

那你就可以做到

console.log('◢◥◤◥◤◢◤◥◢◥◢◤◢◣◥◤◢◥◢◢◣◤◥◣◥◤◢◤◣◥◤◥◤◢◣◥◣◥◢◥◤◥◣◢◤◢◥◢◣◤◢◣◢◥◢◥◣◤◢◣◥◤◢◢◥◢◥◢◥◢◣◥◢◣◥◣◢◥◣◤'.brshadow);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▇█▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▃▇███▆'.shadow + '▕▁▁'.white + '▃▇████▍'.shadow + '▕▁'.white + '██▍'.shadow + '▕▁'.white + '▃▇█████████▇▃'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▂██'.shadow + '▕▁▁'.white + '██▍▕██▍'.shadow + '▕▁▁▁▁▁▁'.white + '██▍▄██'.shadow + '▕▁▁'.white + '▅▃'.shadow + '▕▁▁▁▁'.white + '██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▄██'.shadow + '▕▁▁▁'.white + '██▍▕██▂'.shadow + '▕▁▁▁▁▁'.white + '▂██'.shadow + '▕▁'.white + '██▍'.shadow + '▕▁'.white + '██▂'.shadow + '▕▁▁'.white + '▂██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '▂▄▆██'.shadow + '▕▁▁▁▁▁'.white + '██▍'.shadow + '▕▁'.white + '██████████'.shadow + '▕▁▁▁'.white + '██▍'.shadow + '▕▁'.white + '███████'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white);
console.log('▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + '██▍'.shadow + '▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁'.white + 'unconed'.shadow + '▕▁▁▁▁▁▁'.white);
console.log('◢◣◢◢◣◢◤◥◤◥◣◢◣◣◤◢◣◢◣◢◢◥◤◥◢◥◢◥◣◥◢◤◢◥◢◣◤◣◢◤◢◤◣◢◥◢◣◥◣◢◣◥◢◣◣◤◥◢◣◥◢◤◢◣◤◣◤◣◤◢◤◣◢◣◢◣◢◤◥◤'.brshadow);

由于他格式化的方式，这并不容易...但是其他方式仍然很困难

在此处输入图片说明