Web开发前端调试小技巧——Chrome控制台

Hello大家好,兔妞总觉得写代码很重要,调试也很重要,特别是前端,不光要看日志,还要调整样式,浏览器兔妞最喜欢用Chrome了,所以今天就为大家带来Chrome的调试技巧啦~~

首先为大家介绍一下打开控制台的方法:

首先打开需要查看的页面,如果是Mac,就两指点击,打开审查元素(inspect),如果是windows就右键打开审查元素。打开页面如图所示:

我们会看到Elements、Console、Network、Performance、Memory、Application、Security和Audits八个tab页。我们将详细讲一下每一个tab页的作用,小tab暗藏玄机呢~

>>>>

Elements

这可是调试HTML和CSS的利器呢!审查元素顾名思义就是查看元素,对每个元素进行查看。如下图是对Google的首页进行审查元素得到的效果。这个tab是左右结构,左侧就是页面的HTML结构,我们可以对其进行查看和编辑,当选中某个元素再去点击审查元素时,则会自动定位到元素;右侧则是当前元素的基本属性:分别是Styles、Computed、Event Listeners、DOM-Breakpoints和Properties。我们可以通过Styles查看选中元素的样式,并通过修改调试样式;在computed中我们可以看到选中元素的可视化模拟盒子,长款多少、padding、margin都绘制出来了;Event Listeners中我们可以看到元素被设置了什么事件;Properties绝对是个后门一样的存在,它为开发者统计了元素所具有的方法和属性。

>>>>

Console

如果说前面的Elements是主要针对于HTML与CSS,console就是JavaScript的天堂,通过console不需要断点我们就可以解决很多问题,因为Console记录了开发者在开发过程中的日志信息,也可以用来运行js脚本。

(1)我们通过代码可以执行console家族如下所示:

console.log(): 用来显示日志信息;

console.warn():显示黄色的警告信息;

console.error():显示红色的错误信息;

console.assert();当第一个参数为false时,显示第一个参数的值;

console.log(‘rabbit’);

console.warn(‘So cute’);

console.error(‘you have found the wrongrabbit!’);

console.assert(i>1, ‘i is equal to 0’);

(2)不仅可以调试信息,还可以用来计算JavaScript表达式。

>>>>

Source

主要用来设置断点,调试JS代码。

(1) DOM改变:在elements面板中可以点击指定的DOM节点上右击,在弹出的菜单中选择breakon,当选择的节点里面的子节点被增删改查时,断点会被触发。

(2) XHR声明期变化:当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHRBreakpoints栏设置的字符串匹配时,则断点就会有触发。

(3)指定事件执行:在Sources面板右侧的XHRBreakpoints栏下面是EventListener Breakpoints,列出了各种类型的事件,勾选你要监听的事件,在指定的事件执行时,断点就会有触发。

>>>>

Network

这个tab可以记录页面上的网络请求的详情信息,包括状态、资源类型、大小、所用时间、Request和Response等。

Name:是接口的名称

Status:代表请求状态

Type:请求的资源MIME类型

Initiator:标记请求发出对象

Size:从服务器下载文件的大小

Time:请求、下载时间

看到那个像个摄像机的小标识了吗?那就是屏幕捕获,点击摄像机,重新加载页面即可捕获屏幕。双击放大捕获,并可查看上一帧下一帧。

>>>>

Performance

可以通过这个面板查看网页性能的问题。

主要包括:

(1)Controls 录制开关和控制录制过程中需要记录哪些信息。

(2)Overview 网页性能的概要信息。

(3)FlameChart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。

(4)Details 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

>>>>

Memory

(1) Take Heap Snapshot: 通过创建堆快照查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题;

(2)Summary视图:显示所有对象信息,可选择一个对象展开查看详细信息。

>>>>

Application

这个tab主要负责记录网站加载的资源(存储数据、缓存数据、字体、图片、脚本、样式表等)。

>>>>

Security

这个tab用来调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

>>>>

Audits

对当前网页对网络的利用情况和网页性能进行诊断,并给出优化建议。

>>>>

自适应调节

最后要说一下左上角那个小手机标志的icon,其实那是一个自适应布局调整神器哟!点击了这个icon后我们就可以把浏览器模拟为不同终端的效果,从而调整css样式!

好啦,今天的内容就到这里啦,兔妞为大家整理的Chrome调试技巧,不知道有没有帮助呢,如果还有什么更好的用途,欢迎后台留言哦~如果喜欢文章请关注+好看哦,越点越好看~~

本文分享自微信公众号 - 萌兔it(mengtu_it)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

CM: UPDATE_PAYLOAD_FROM_ADDINSCH

然后在相应的xml stream里为对应的note 创建新的attribute sapvartype,值为T:

8320
来自专栏简单的日记

hadoop的单机版安装和HBase的搭建

1. 安装jdk1.7的环境 下载hadoop. hadoop-2.5.2.tar.gz版本

31840
来自专栏数据分析1480

大数据之脚踏实地学08--搭建Hadoop集群【2】

在《大数据之脚踏实地学07--搭建Hadoop集群【1】》中,讲解的是虚拟机的配置(包括网络设置、主机名修改和克隆等),文中我们在VMware中虚拟了3台计算机...

8820
来自专栏编程大道

从Spring的几个阶段理解其工作过程

为了便于了解Spring的工作原理,我们来研究一下,Spring是怎么加载的,Spring会经过几个阶段。

9320
来自专栏ios 技术积累

Jsoup+Htmlunit抓取图片遇到坑

Jsoup是用于解析HTML,就类似XML解析器用于解析XML。 Jsoup它解析HTML成为真实世界的HTML。

29220
来自专栏数据分析1480

大数据之脚踏实地学09--Hive嵌入式安装

经过前面几期内容的介绍,相信大家已经把Hadoop的环境搭建好了吧。正如前几期所说,Hadoop的搭建实际上最核心的就是HDFS(文件存储系统)、Map-Red...

9050
来自专栏简单的日记

大众点评CAT搭建和springBoot集成Cat

会提示输入mysql数据库的连接信息,账户和密码。可能会提示缺少\data\appdatas\cat 目录,手动添加就可以了。

61610
来自专栏Jerry的SAP技术分享

如何处理word document webservice response中奇怪的xml node

例如发现response payload里ValfromDate node里有不make sense的X node:

6920
来自专栏机器视觉CV

Beautiful Soup与运用(猫眼电影榜单)

Beautiful Soup是Python的一个HTML/XML的解析库,可以用来获取网页信息 输入文档为Unicode 编码,输出文档为UTF-8编码,不需考...

11820
来自专栏汪宇杰博客

ASP.NET Core 2.2使用IIS部署要注意的路径问题

ASP.NET Core 2.2 推出已经有一段时间了,其中有个新功能,能够使用新的AspNetCoreModuleV2并且在IIS上使用InProcess模式...

68030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励