F12Console的用法,以及如何Debug程序
分享人:火建强
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
两部分内容:console的常用方法,以及使用开发者工具调试js代码的几个方法。
1.console对象
console对象代表浏览器的javascript控制台,主要有两个作用:1.显示网页代码运行时的错误信息。2.提供一个命令行
接口,用来与网页代码互动
2.如何开发者工具调试js代码
使用console对象的内置方法,或者使用开发者工具的断点调试功能。
1.console对象的几种常用方法
- .log()方法:在console窗口显示信息
- .log 用于输出普通信息
.info 用于输出提示性信息
.error用于输出错误信息
.warn用于输出警示信息
.debug用于输出调试信息
- .table()方法,把有复合数据的对象作为表格显示
- .assert()方法,验证条件并输出
- .time(),.timeEnd()方法,计算一个操作消耗的时间
- 其它方法:
.group(),.groupend()方法:将显示信息分组
.dir()显示对象的所有属性
.clear():console窗口清屏
.trace():显示在堆栈中的调用路径
.profile([title])打开Javascript性能测试开关。可选参数title会在打印性能测试报告时在报告的开头输出。
.profileEnd()关闭Javascript性能测试开关并输出报告。
2.用开发者工具进行代码调试
- 使用alert()方法暂停并查看信息
- 使用console对象的上述方法
- console方法的命令行
- 开发者工具的断点调试功能
扩展思考
- 平时上网浏览,看到感兴趣的效果,可以用开发者工具直接学习和修改
- 练习和项目中的遇到的bug,可以在开发者工具中修改,以便找到找到解决办法
参考文献
- console对象
http://www.360doc.com/content/14/0917/16/14663225_410219222.shtml
- .time()方法
http://www.jb51.net/article/59126.htm
- source选项卡
http://web.jobbole.com/82562/
- 详细的开发者工具说明
http://web.jobbole.com/89344/?utm_source=blog.jobbole.com&utm_medium=relatedPosts
- 知乎
https://www.zhihu.com/question/27414902
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论