关闭

WEB调试工具,神奇的console

150人阅读 评论(1) 收藏 举报
分类:

在浏览器面板按F12就可以进入调试界面,里面的很多功能对前段开发用处很大。

Element:主要是用来调试网页中的html标签代码和css样式代码
Network:查看网页的http通信情况,包括MethodTypeTimeline(网络请求的时间响应情况)等
Source:查看JS文件、调试JS代码
Timeline:查看js的执行时间,页面元素渲染时间等
Profiles:用来查看网页的性能,比如CPU和内存消耗
Resources:用来查看加载的各种资源文件,比如js、css、图片等
Audits:可以分析当前网页,可以快速的分析出哪些资源被使用、哪些资源没有使用,然后提出建议
Console:可以查看错误信息、打印调试信息、调试js代码,还可以当作Javascript API查看

下面来详细的介绍console的功能和用法:
(1)如果想清空控制台,可以点击左上角那个 Chrome 控制台console的用法来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。
这里写图片描述

(2)现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。下面我们用console.log来替换,感受一下它的魅力。
这里写图片描述

(3)console.count,当你想统计代码被执行的次数
这里写图片描述

(4)美元符号命令返回最近一次表达式执行的结果,什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而0DOM1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined。
这里写图片描述

(5)最后说一下chrome控制台一个简单的操作,如何查看页面元素,看下图就知道了
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8091次
    • 积分:283
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:8篇
    • 译文:5篇
    • 评论:1条
    文章分类
    最新评论