先给出个console大全贴
* console.info()和console.debug()都是console.log方法的别名,它们完全一样。
* warn方法和error方法也是输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;error方法输出信息时,在最前面加一个红色的叉,表示出错。其他用法都一样。
平日里,console.log就是当成stdout来打印打印js的变量用,其实还是有些酷酷的玩法。
看看console.log的API有哪些:
%s :Formats the value as a string.
如图所示,格式化输出字符串,超出部分就会衔接在末尾
%d or %i :Formats the value as an integer.
如图所示,格式化输出整型
计算机做的是截取整数位(和计算机精度有关),而不是四舍五入
![技术分享](data:image/png;base64,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)
%f :Formats the value as a floating point value.
如图所示,格式化输出浮点数
*‘undefined‘是console.log的返回值
%c :Formats the output string according to CSS styles you provide.
如图所示,可以自定义css样式输出
除了玩文字,还可以玩图片,嘿嘿
%o :Formats the value as an expandable DOM element (as in the Elements panel).
如图所示,将一个DOM元素进行html展开
%O :Formats the value as an expandable JavaScript object.
如图所示,将一个js对象进行树状展开
来点轻松的,
百度的console.log: