欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

小谈chrome调试命令:console.log的使用

shiping1 的头像

小谈chrome调试命令:console.log的使用

作者:贤心最后编辑:2014年10月22日18716人已阅读共收到8条评论
 

编者按:艾玛呀,排名这么靠前其实不是我想要的,事实上本文还是刚学js写的(时间大概要回溯到2011年),因此介绍的略初级,要想详读console的同学,建议绕行。或者把滚动条拉到最底部,看进阶系列。

相信从事前端开发的您,一定不会陌生这款和firebug同样强大的Chrome dev tools,它让所有的代码调试都变得如此可爱。而在它深邃的机体里,还存有一个命令:console.log。 她是用来做什么的?顾名思义,它是一个彪悍的输出记录功能,您可以从您自己的web页面上调用,然后以最快的方式转储尽可能多的信息到控制台上,从而能更醒目地让你意识到你的javascript下一步需要做什么。

那么,我将与您分享这一可爱的朋友。 首先请尝试打开你的Chrome浏览器,F12召唤出firebug,在如下界面中点击Console,然后输入13+14,回车,它将出现:

小谈chrome调试命令:console.log的使用

它就是如此灵活,无论您是否接受!其最简单的书写方式可以为:

console.log('hello world');
  1. 1
代码laycode - v1.1

你还可以加入许多参数,比如:

var you = 'you';
console.log(1,3,1,4,'love',you);
  1. 1
  2. 2
代码laycode - v1.1

在一些遍历的操作中,如果你需要一眼目睹所有结果,使用alert调试显然不足,那么你就可以借助log:

var ii, obj = {
    name:'贤心',
    sex:'男',
    age:'23'
};
for(ii in obj){
    console.log(ii+':'+obj[ii]);
}
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
代码laycode - v1.1

小谈chrome调试命令:console.log的使用

当然,console.log提供的功能远不止这些,您还可以在它的控制台中做更多的事。如果你给log传递的是一个对象或者数组、HTML元素等,控制台将会显示为一个超链接,点击它您就可以查看该元素的详细信息了,比如您可以输入:

console.log(document.body);
  1. 1
代码laycode - v1.1

那么,它将立马输出body所包含的所有元素:

小谈chrome调试命令:console.log的使用

除了console.log,console对象还能实现日志的彩色输出,这将让您的调试结果显得更清晰了:

console.warn(); //信息左侧将会出现感叹图标
console.error(); //信息左侧将会出现×图标
  1. 1
  2. 2
代码laycode - v1.1

熟练使用console.log,可以让您在javascript调试中省不少麻烦,尤其是面对庞大的框架操作。那么,从现在开始,赶紧去尝试运用吧,你将体会她更多的神奇,而不仅仅是贤心所介绍的这些。

进阶篇:
普通分类: