您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页F12 CONSOLE的用法,以及如何DEBUG程序?

F12 CONSOLE的用法,以及如何DEBUG程序?

来源:二三娱乐

1.背景介绍

Chrome中Console是用于显示JS和DOM对象信息的单独窗口。并且向JS中注入1个console对象,

使用该对象 可以输出信息到Console窗口中。在具备调试功能的浏览器上,window对象中会注册一个名为

console的成员变量,指代调试工具中的控制台,console有很多方法,比如我们最常用的log()

1.console对象

console对象代表浏览器的javascript控制台,主要有两个作用:1.显示网页代码运行时的错误信息。2.提供一个命令行

接口,用来与网页代码互动

2.如何使用开发者工具调试js代码

使用console对象的内置方法,或者使用开发者工具的断点调试功能。

2.知识剖析

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方法的命令行

开发者工具的断点调试功能

3.常见问题

什么是断点调试

什么sources选项卡?

断点调试是最基础的一个调试方法,在调试的过程中查看变量和函数的变化状态,

这使得不可见的程序运行过程变得可视化。断点调试都在source选项卡中进行。

01

a.上图source选项代码序列上的蓝色标签即为断点的标识,断点也显示在Breakpoint

选项中,可以在Breakpoint选项卡中勾掉暂时不用的断点,后面再使用的时候可以再

勾选,这样就不用再代码中翻来翻去迷失方向了。

b.这几个小图标前两个和调试时页面的两个按钮相同, 分别是暂停/开始和单步;

往右边两个向上向下的箭头意思是进入函数,和(执行完)跳出函数;后面的一个是

忽略所有断点运行,这样被避免更改完之后,点掉所有断点执行一遍在挨个加断点的尴尬

c. watch窗口: 点击“+”添加一个想要监视的变量,在整个调试过程中,这个变量会一直显示在这里,

就不用在函数之间苦苦寻找,然后再“hover”上去显示它的值,非常适合全局变量的监视。

4.扩展思考

平时上网浏览,看到感兴趣的效果,可以用开发者工具直接学习和修改

练习和项目中的遇到的bug,可以在开发者工具中修改,以便找到找到解决办法

5.参考文献(点击查看)

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务