这里是修真学院的前端小教室。每篇文章分享自【背景介绍】【知识分析】【常见问题】【解决方案】【编码实践】【扩展思考】【更多讨论】【参考文献】八篇深入剖析前端这方面的知识/技能，本文分享：【如何使用F12控制台，如何调试程序？]1.背景介绍Chrome中的Console是一个单独的窗口，用于显示JS和DOM对象信息。并在JS中注入一个console对象，使用这个对象向Console窗口输出信息。在有调试功能的浏览器上，window对象中会注册一个名为console的成员变量，它指的是调试工具中的控制台。console的方法有很多，比如我们最常用的log()1.console对象console对象代表浏览器的javascript控制台，主要有两个作用：1.在网页代码运行时显示错误信息。2、提供与网页代码交互的命令行接口2、如何使用开发者工具调试js代码使用控制台对象内置的方法，或者使用开发者工具的断点调试功能。二、知识分析1、控制台显示信息命令。log()方法：在控制台窗口中显示信息。log用于输出一般信息。info用于输出提示信息。error用于输出错误信息。warn用于输出警告信息。debug用于输出调试信息。table()方法将具有复合数据的对象显示为表格。assert()方法验证条件并输出.time()和.timeEnd()方法来计算操作消耗的时间其他方法：.group(),.groupend()方法：组显示信息。dir()显示对象的所有属性。clear()：清除控制台窗口。trace()：显示堆栈中的调用路径。profile([title])打开Javascript性能测试开关。打印性能测试报告时，可选参数title会在报告开头输出。.profileEnd()关闭Javascript性能测试开关并输出报告。2、使用开发者工具进行代码调试的方法使用alert()方法暂停和查看信息使用console对象的上述方法console方法命令行开发者工具的断点调试功能3、常见问题什么是断点调试什么来源标签？断点调试是最基本的调试方法。在调试过程中，可以查看变量和函数的变化状态，使看不见的程序运行过程可视化。断点调试在源选项卡中执行。01一个。上图中source选项的代码序列上的蓝色标签是断点的标识，断点也显示在Breakpoint选项中。可以在Breakpoint选项卡中勾选暂时不用的断点，以后用到的时候再勾选，就不用在代码里翻来覆去迷路了。b.这些小图标的前两个与调试时页面上的两个按钮相同，分别是暂停/启动和单步；右边上下两个箭头分别表示进入函数和（执行完）跳出函数；后面一个是忽略所有断点并运行，避免点所有断点一个一个加断点的尴尬一。C。watch窗口：点击“+”添加一个你要监控的变量，在整个调试过程中，这个变量会一直显示在这里，这样你就不用在函数之间苦苦搜索，然后“悬停”显示它的值，非常适合监控全局变量。4.延伸思维。平时上网看看感兴趣的效果。您可以使用开发者工具直接学习和修改练习和项目中遇到的错误。您可以在开发者工具中修改它们以找到解决方案。5.参考文档（点击查看）consoleobject.time()方法源码tab开发者工具详细说明知乎5.更多讨论1.分享者问：为什么不推荐使用alert调试？度娘回复：一方面，传统的alert调试方式已经逐渐不能满足前端开发的各种场景。还有alert调试方式弹出的调试信息，窗口确实不是很美观，而且会挡住部分页面内容，实在是不友好。另一方面，警报的调试信息会中断代码并阻止页面继续呈现。这就意味着开发者在调试完成后，必须手动清除这些调试代码，实在是太麻烦了。小姐姐问：栈空间有什么区别？2、分享者回复：1、栈（操作系统）：由操作系统自动分配和释放，存放函数参数值、局部变量值等，其操作方式类似于数据结构中的栈；2、堆（操作系统）：一般由程序员分配和释放。如果程序员不释放它，它可能会在程序结束时被OS回收。分配方式类似于链表。二、栈缓存方式的区别：1、栈使用一级缓存。它们通常在调用时在存储空间中，调用完成后立即释放；2.堆存放在二级缓存中，生命周期由虚拟机决定。是由垃圾回收算法决定的（并不是一旦成为孤儿对象就可以回收）。所以调用这些对象的速度比较低。3、栈数据结构的区别：堆（数据结构）：堆可以看成是一棵树，如：堆排序；堆栈（数据结构）：一种先进后出的数据结构。3、王爷大哥：console.warn();你能打印出警告图标吗？阿飞哥回复：出示下图“我们相信人人都可以成为工程师，现在就开始，找个师兄指导你入门，学习的路上不再迷茫，技巧就在这里IT修真学院：http://www.jnshu.com，初学者转行互联网行业的聚集地。”欢迎加入IT交流群565734203与大家一起探讨交流
