浅谈chrome dev tools篇二:console你的样式
来源:互联网 发布:tt风扇软件 编辑:程序博客网 时间:2024/06/08 09:06
在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息.
在输出信息前面会有一个带感叹号的黄色三角警告符号。似乎比一般的console信息要友好得多了。虽然图标是黄色的,但输出的文字仍然是黑色。另外经常用到的是输出错误信息。
信息前面会出现一个带叉的红色圆形图标。这个效果要比警告信息更友好了,字体颜色成红色了。要更牛叉莫过于对文字应用样式。而现在这一特性已经在谷歌浏览器里实现了。在Chrome的开发者工具里,console 可以加样式,可以显示缤纷的颜色,甚至图片。简直爽翻了。具体来说,是可以对输出到console控制台的文字进行CSS控制。格式如下:
下面是谷歌开发者中心上面关于chrome控制台console.log()的文档
Format Specifier
Description
%s
Formats the value as a string.
%d or %i
Formats the value as an integer.
%f
Formats the value as a floating point value.
%o
Formats the value as an expandable DOM element (as in the Elements panel).
%O
Formats the value as an expandable JavaScript object.
%c
Formats the output string according to CSS styles you provide.
1.3D Text:
2.Colorful CSS:
3.Rainbow Text:
在Chrome控制台输出图片
除了上面介绍的那些炫目的文字效果外,你还可以在Chrome控制台中显示图片,自然地,显示gif这样的动态图片也是没问题的。还是应用差不多的代码,只是将内容变成指定背景为图片。下面是一个例子:
- 浅谈chrome dev tools篇二:console你的样式
- 了不起的Chrome Dev Tools
- chrome dev tools
- 15个你不得不知道的Chrome dev tools的小技巧
- 15个你不得不知道的Chrome dev tools的小技巧
- [Nodejs] Debug-Chrome Dev Tools
- Chrome的console
- 谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer
- 谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer
- linux /dev/console /dev/ttyn /dev/pts/n的区别
- linux /dev/console、/dev/tty和/dev/null的区别
- /dev/tty,/dev/console,/dev/vc/0的初始化
- Chrome 控制台console的用法
- Chrome 控制台console的用法
- chrome中强大的console
- Chrome 控制台console的用法
- Chrome 控制台console的用法
- Chrome 控制台console的用法
- iOS Smart App Banner 智能App广告条
- HTTP协议浅析(上):简介
- UART0串口编程系列(一)
- 数组
- 替换war包中的文件
- 浅谈chrome dev tools篇二:console你的样式
- 一文读懂机器学习
- JAVA之项目的sun.jnu.encoding 和 file.encoding 的区别
- WebRTC源码分析一:音频处理流程
- Mysql 高级部分
- 关于iOS uiwebview 禁止弹出复制和粘贴功能
- Android笔记:Android 使用Intent拨打电话的两种方式以及差别
- 在ETL过程中对递归树的历史维护实验
- Lk启动流程分析