javascript – 风格化的控制台日志记录

前端之家收集整理的这篇文章主要介绍了javascript – 风格化的控制台日志记录前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我在Facebook上,并且控制台打开时,我看到下面的图像.他们怎么做到这一点

解决方法

就像在Firebug中一样,您可以使用%c来设计控制台日志输出.看看我们如何实现Facebook的例子:
  1. console.log("%cStop!","color: red; font-family: sans-serif; font-size: 4.5em; font-weight: bolder; text-shadow: #000 1px 1px;");

由于它支持CSS属性,我们甚至可以在其中“绘制”图像:

  1. (function(url) {
  2. // Create a new `Image` instance
  3. var image = new Image();
  4.  
  5. image.onload = function() {
  6. // Inside here we already have the dimensions of the loaded image
  7. var style = [
  8. // Hacky way of forcing image's viewport using `font-size` and `line-height`
  9. 'font-size: 1px;','line-height: ' + this.height + 'px;',// Hacky way of forcing a middle/center anchor point for the image
  10. 'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',// Set image dimensions
  11. 'background-size: ' + this.width + 'px ' + this.height + 'px;',// Set image URL
  12. 'background: url('+ url +');'
  13. ].join(' ');
  14.  
  15. console.log('%c',style);
  16. };
  17.  
  18. // Actually loads the image
  19. image.src = url;
  20. })('https://i.cloudup.com/Zqeq2GhGjt-3000x3000.jpeg');

猜你在找的JavaScript相关文章