F12Console的用法，以及如何Debug程序
大家好，我是IT修真院郑州分院第6期的学员王栋，一枚正直、纯洁、善良的前端程序员今天给大家分享一下，修真院官网js任务1，深度思考中的知识点——F12Console的用法，以及如何Debug程序。
1.背景介绍
什么是console？
Console 是用于显示 JS和 DOM 对象信息的单独窗口。
并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。
Chrome和FireFox都支持console。
控制台以及浏览器内置Console对象的出现，给前端开发调试带来了极大的便利。
2.知识剖析
console的用法
console.log 用于输出普通信息
console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息
console.groupEnd结束一组输出信息
console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。
console.count当你想统计代码被执行的次数(经常用到)
console.dir 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等。
console.time/console.timeEnd用于函数的计时
console.table 将传入的值以表格形式展示
如何使用断点调试？
Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
Step over next function call：执行到下一步的函数调用（跳到下一行）。
Step into next function call：进入当前函数。
Step out of current function：跳出当前执行函数。
Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
Pause on exceptions：异常情况自动断点设置。
3.常见问题
什么是断点调试？
如何Debug？
4.解决方案
什么是断点调试
断点，调试器的功能之一，可以让程序中断在需要的地方，从而方便其分析。也可以在一次调试中设置断点，
下一次只需让程序自动运行到设置断点位置，便可在上次设置断点的位置中断下来，
极大的方便了操作，同时节省了时间。
——百度百科
简单地说，断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
如何Debug？
使用cosole.log
使用断点调试
5.编码实战
console.log("%c", "padding:200px 300px;line-height:120px;" +
"background:url('http://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif') no-repeat;");
console.error("error");
console.warn("warn")
var data = [{'品名': '面包', '数量': 4}, {'品名': '牛奶', '数量': 3}];
console.table(data);
(function() {for (var i = 0; i < 5; i++) {console.count('count');}})();
console.time('计时器1');
for (var i = 0;i < 100; i++) {for (var j = 0; j < 100; j++) {}}
console.timeEnd('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {for (var j = 0; j < 1000; j++) {}};console.timeEnd('计时器2');
console.log('这是第一层');console.group();console.log('这是第二层');console.log('依然第二层');console.group();console.log('第三层了');console.groupEnd();console.log('回到第二层');
console.groupEnd();console.log('回到第一层');console.groupCollapsed('第一层');console.groupCollapsed('第二层');console.log('error');console.error('error');console.warn('error');console.groupEnd();
console.groupEnd();var obj = {name: 'c';age: '20',type: '1'};
console.dir(obj);
var arr = [1,2,3]
console.dir(arr)
var s = 'sdfs'
console.dir(s)
var n = '123'
console.dir(n)
6.扩展思考
为什么不用alert？（console的优点）
用alert调试方式对开发者太不友好；每次执行结束都需要点击一次弹窗；
而且有时候弹窗会遮住一些页面效果
alert的调试信息会中断代码，阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，实在有些麻烦。
另外，如果在循环中使用alert，会弹出很多个窗口
7.参考文献
前端开发中的JS调试技巧
http://blog.csdn.net/yin767833376/article/details/51656402
你真的了解 console 吗
https://segmentfault.com/a/1190000000481884
超完整的 Chrome 浏览器客户端调试大全
http://web.jobbole.com/89344/?utm_source=blog.jobbole.com&utm_medium=relatedPosts
chrome developer tool—— 断点调试篇
https://www.cnblogs.com/yzg1/p/5578363.html
8.更多讨论
还有那些debug技巧？
使用sources里面的
这个面板，也可以帮助快速debug。
更多问题1：如何在控制台进行代码格式化？
在sources面板选中需要格式化的js文件，然后点击pretty print。
更多问题2：alert的更多缺点？
1）.alert()是一种破坏性的方法，执行的时候弹出弹窗之后的代码就不会执行。
2）.alert()还有一个缺点就是会将参数message转换为字符串。改变原信息格式。
更多问题3：console和打断点哪个更好用？
各有特长吧，如果你要验证一个特定的函数，是不是自己想要的效果，就用console，如果不确定页面的问题出在哪儿，就用断点调试。
网友评论