WEB调试工具,神奇的console

翻译 2016年08月31日 15:06:08

在浏览器面板按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控制台一个简单的操作,如何查看页面元素,看下图就知道了
这里写图片描述

相关文章推荐

Web前端调试工具——神奇的Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介绍的是Web前端调试工具,应该...

js调试工具Console命令详解

一、显示信息的命令 复制代码 代码如下: 常用console命令 console.log('hello'); console.info('信息'); co...

js调试工具—控制台Console命令的用法

一、一般情况下我们用来输入信息的方法主要是用到如下四个:     1、console.log 用于输出普通信息     2、console.info 用于输出提示性信息     3、consol...
  • fk_d_st
  • fk_d_st
  • 2017年10月20日 15:24
  • 24

移动前端console调试面板(移动网页端调试工具)—vConsole

一个针对手机网页的前端console调试面板,并将其开源了,一个非常有用的开发调试工具。 项目地址: https://github.com/WechatFE/vConsole 。 不多介绍,以下内容直...

Web开发调试工具——FireBug

做新闻发布系统的时候,牛老师在讲CSS之前建议我们安装Firefox+FireBug的组合,便于对我们自己编写的网页进行调试。当时我的电脑里没有Firefox浏览器,因此我就想,难道只有Firefox...

Fiddler2教程(Web调试工具)

http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html

web调试工具-Fiddler断点设置(二)

在上次的Fiddler使用介绍(一)中,介绍了Fiddler工具的基础页面和功能,以及相关的设置。本贴将介绍Fiddler更强大的断点设置。 一、Fiddler断点设置     设置断点是...

whistle--全新的跨平台web调试工具

whistle是基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler+Willow,基于Java实现的Charles,及公司同事基于Node实现的Livepoo...

【Java】HTTP Web调试工具Fiddler介绍和使用教程

Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大...

whistle--全新的跨平台web调试工具

版权声明:本文由吴文斌原创文章,转载请注明出处:  文章原文链接:https://www.qcloud.com/community/article/151 来源:腾云阁 https://www.qc...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WEB调试工具,神奇的console
举报原因:
原因补充:

(最多只允许输入30个字)