您的位置：首页 > Web前端 > JavaScript

利用Console来调试JS程序、Console用法总结

2016-05-13 00:00 375 查看
摘自：http://blog.163.com/zhangmihuo_2007/blog/static/27011075201452522824347/

Chrome的开发者工具分为8个大模块，每个模块及其主要功能为：

Element标签页：用于查看和编辑当前页面中的HTML和CSS元素。

Network标签页：用于查看HTTP请求的详细信息，如请求头、响应头及返回内容等。

Source标签页：用于查看和调试当前页面所加载的脚本的源文件。

TimeLine标签页：用于查看脚本的执行时间、页面元素渲染时间等信息。

Profiles标签页：用于查看CPU执行时间与内存占用等信息。

Resource标签页：用于查看当前页面所请求的资源文件，如HTML，CSS样式文件等。

Audits标签页：用于优化前端页面，加速网页加载速度等。

Console标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

目录：

一、什么是Console

二、什么浏览器支持Console

三、为什么不直接使用alert或自己写的log

四、console.log(object[,object,.....])

五、console.debug，info，warn，error

六、console.assert(expression[,object,...])

七、console.clear()

八、console.dirxml(node)

九、console.trace()

十、console.group(object[,object,...]),groupCollapsed,groupEnd

十一、console.time(name)/console.timeEnd(name)

十二、console.profile(name)/console.profileEnd()

十三、console.count([title])

十四、console.table(data)

十五、console.dir(function)

十五、tab键代码补全

十五、百度首页的彩蛋！

一什么是Console

Console是用于显示JS和DOM对象信息的单独窗口。并且向JS中注入1个console对象，使用该对象可以输出信息到Console窗口中。

二什么浏览器支持Console

很多人可能都知道Chrome和FireFox(FireBug)中都支持Console。而其他浏览器都支持不好。比如IE8自带的开发工具虽然支持Console，但功能比较单调，显示对象的时候都是显示[Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7虽然可以安装DeveloperToolbar，但也不支持console。Safari、Opera都支持Console，但使用上都没有FireBug和Chrome的方便。现在firebug推出了firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug几乎一样。详见http://getfirebug.com/firebuglite

三为什么不直接使用alert或自己写的log

使用alert不是一样可以显示信息，调试程序吗？alert弹出窗口会中断程序，如果要在循环中显示信息，手点击关闭窗口都累死。而且alert显示对象永远显示为[object]。自己写的log虽然可以显示一些object信息，但很多功能支持都没有console好，看完后面console的介绍就知道了。

（部分比较鸡肋的方法没有列出来，用粗蓝标出来的是常用的方法）

四、console.log(object[,object,.....])

Console.log是最简单输出信息到console窗口的方法，支持多个参数，该方法会把这些参数组合在一起显示

我们首先来写一段倒计时的代码

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>倒计时</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
</head>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<h1>倒计时：<span>10</span></h1>
<scripttype="text/javascript">
$(document).ready(function(){
varnum=$("h1span").first();
vari=9;
varinterval=setInterval(function(){
num.text(i);
i--;
console.log("当前数值："+i);
if(i<0){
clearInterval(interval);
}
},1000);
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航