![5bc10d511e237cd887130bd6e1cf45c9.png](https://i-blog.csdnimg.cn/blog_migrate/301b170d6c1a9d470c69890af93f9c3a.jpeg)
一、先简单的介绍一下chrome的控制台
1.Windows: 打开chrome浏览器,按f12就可以轻松的打开控制台(这里着重介绍下mac的,其实都一样,只是博主只有mac ?) 2.mac:打开chrome浏览器,按fn+ f12就可以轻松的打开控制台(原谅我在此给百度打了一下广告,emmmm....我会考虑向他们收取广告费的..)![71aeb2e849bbc8187c6274ff3bc41560.png](https://i-blog.csdnimg.cn/blog_migrate/cd5e676dcad2b9dd949d28765ae58143.jpeg)
![4a50e5d30acd14b501ffbae56cb98d43.png](https://i-blog.csdnimg.cn/blog_migrate/ae97ca2f5ad9bc6ee08d5cb1b842d571.jpeg)
![427aeb82c967832bd4fff8be925df5c8.png](https://i-blog.csdnimg.cn/blog_migrate/d9021c0e76f189b5a99b49e1abc00e8c.jpeg)
![858e11f3da82f05c412a370df4923e0d.png](https://i-blog.csdnimg.cn/blog_migrate/d298f7ebc55db30ec958a0a7fecb59a8.jpeg)
![3c9e2f940c07823d0e0eb1884bd3a71c.png](https://i-blog.csdnimg.cn/blog_migrate/1c59d62f11cd87e3046e5c62c20d0a80.jpeg)
let arr = [
{name:'张三',age:13},
{name:'李四',age:14},
{name:'王五',age:15},
{name:'小明',age:16},
{name:'小华',age:17},
];
for (let item of arr) {
console.log(item);
};
运行一下代码,发现要比alert好多了有木有~
![aabcd1f35d290a9504423b8bd7ab12ce.png](https://i-blog.csdnimg.cn/blog_migrate/ddc119bd2f3a5bb5148b47283492f601.jpeg)
![d2edd54d05ae7817bb2597b339064d43.png](https://i-blog.csdnimg.cn/blog_migrate/71729f07418e507a9f07f9b26312095c.jpeg)
![9cdf120b9d5016295ae4f2ce78b4dda5.png](https://i-blog.csdnimg.cn/blog_migrate/5252608086409c222678bf373b4c0491.jpeg)
二、一般情况下我们用来输入信息的方法主要是用到如下五个
console.log 用于输出普通信息
console.info 用于输出提示性信息
console.error 用于输出错误信息
console.warn 用于输出警示信息
console.debug 用于输出调试信息
![3aeb8eb4a906fc4716c8814d2877e6ca.png](https://i-blog.csdnimg.cn/blog_migrate/175cd1320f6d021e4ad772521cd061b0.jpeg)
有小伙伴发现自己输入一个console方法后,想换行结果运行了,此时肯定一脸的懵逼?,告诉你一个小技巧,
shift
+return(enter)
就可以换行啦,开不开心,意不意外!?
三、其实console还提供了其他的方法供我们使用,我们可以在控制台输入console打印一下查看
![9f8a01a4915ad1df82c711a3e48e2761.png](https://i-blog.csdnimg.cn/blog_migrate/a953c5b0fd65ffb99572889c574ce187.jpeg)
四、console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种
例:console.log('%d年%d月%d日',2011,3,26);
console.log('圆周率是%f',3.1415926);
输出如下:
![8e87b0993932c8d1bbb68ede2694e6ec.png](https://i-blog.csdnimg.cn/blog_migrate/282510bddf12585d4b3449f214948b3d.jpeg)
let dog = {
name:'金毛',
color:'黄色',
};
console.log('%o',dog);
输出如下:
![2f3ec9233144abc59d0bb746a5e3a96d.png](https://i-blog.csdnimg.cn/blog_migrate/a8a828f7e996b9dff140eb8676dbb5f7.jpeg)
五、console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码
例:<body>
<table id="mytable">
<tr>
<td>Atd>
<td>Atd>
<td>Atd>
tr>
<tr>
<td>bbbtd>
<td>aaatd>
<td>ccctd>
tr>
<tr>
<td>111td>
<td>333td>
<td>222td>
tr>
table>
body>
<script type="text/javascript">
window.onload = function ()
{
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
script>
输出如下:
![da56bcdff6c7b39328b84313c496e1bd.png](https://i-blog.csdnimg.cn/blog_migrate/1fbde4a07b5664175f69612848a24394.jpeg)
六、console.group输出一组信息的开头,console.groupEnd结束一组输出信息
例:console.group('aaa');
console.warn('aaa.aaa');
console.groupEnd();
输出如下:
![b6e1ff22bf6ee627310612498b3c1173.png](https://i-blog.csdnimg.cn/blog_migrate/2bdab4b8ec588ff4bf9f07692203dcf5.jpeg)
七、console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台
例:
let isDebug = false;
console.assert(isDebug,'为false时输出的信息');
输出如下:
![91a45ca295bdd461088d8f4878719b15.png](https://i-blog.csdnimg.cn/blog_migrate/1ccdc5d6759aa08a28966ee46a251598.jpeg)
八、console.count 统计代码被执行的次数
例:function myFunction () {
console.count('myFunction被执行的次数');
};
myFunction();
myFunction();
myFunction();
输出如下:
![91a45ca295bdd461088d8f4878719b15.png](https://i-blog.csdnimg.cn/blog_migrate/1ccdc5d6759aa08a28966ee46a251598.jpeg)
九、console.dir 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等
例:var myObject = {
name:'aa',
age:12,
sex:'man',
myFunc: function () {
cpnsole.log('hello');
}
};
console.dir(myObject);
输出如下:
![1881a34ddcf3ec1afbfc26623e144a45.png](https://i-blog.csdnimg.cn/blog_migrate/3f2a953d1c6dcf54aa8ff53bc9253fc6.jpeg)
十、console.time 计时开始,console.timeEnd 计时结束
例:// 用console.time来统计实例化1000000个对象所需时间
console.time('Array initialie');
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd('Array initialie');
输出如下:
![172fae7c96cfaa37f25f119151411fa0.png](https://i-blog.csdnimg.cn/blog_migrate/d8abf1d1fbb200e171f9611bf8a47a43.jpeg)
十一、再说下使用console.log的一些技巧
指定输出文字的样式
利用控制台输出图片
// text
console.log('%c 你看 ','color:red;font-size:5em;background-color:yellow');
// 3D Text
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
// Rainbow Text
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
// Colorful CSS
console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em");
// 输出动态图
console.log("%c ", "background: url(http://g.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=7408a51e88d4b31cf0699cbfb2e60b49/c9fcc3cec3fdfc03aca05de5d73f8794a5c22696.jpg) no-repeat center;padding-left:640px;padding-bottom: 242px;");
输出如下:
![7927bc22b11986285ab1ff4f18911c0c.png](https://i-blog.csdnimg.cn/blog_migrate/a7050cbf83d25bb834b3fedb38f43d92.jpeg)
![1bf70cd14cc572aa4678fcb266ba6c59.png](https://i-blog.csdnimg.cn/blog_migrate/6c69ade7a25f200293c9ad84532df7f3.jpeg)
![5d74cd88ac16b3bd9188810a5e31b9ba.png](https://i-blog.csdnimg.cn/blog_migrate/426fdf5faeed1d118269811fca2e423f.jpeg)
![2836fd665052e6591e92203e3850b385.png](https://i-blog.csdnimg.cn/blog_migrate/bad42cdaa9cbd1ea0cb3c7adb5159401.png)
![61708177b0524e2b8b729560baa71c39.png](https://i-blog.csdnimg.cn/blog_migrate/f59cdbc3e528984d3a04abc6938eecac.jpeg)
![f8ab46a09fdadb8e946e46cd8e0994aa.png](https://i-blog.csdnimg.cn/blog_migrate/fa27e926e9fc29614ccef05a92a07b11.jpeg)