一个空间能放几个网站,网站建设公司排行榜,做公司网站比较好的,嘉兴网站开发文章目录 前言一、概述1.1 简介1.2 DevTools 初步了解 二、设备模式#xff08;Device Mode#xff09;2.1 面板概述2.2 设备切换 三、元素面板#xff08;Elements#xff09;3.1 面板概述3.2 编辑样式3.2.1 添加、启用和停用 CSS 类3.2.2 添加或移除动态样式3.2.3 快速向… 文章目录 前言一、概述1.1 简介1.2 DevTools 初步了解 二、设备模式Device Mode2.1 面板概述2.2 设备切换 三、元素面板Elements3.1 面板概述3.2 编辑样式3.2.1 添加、启用和停用 CSS 类3.2.2 添加或移除动态样式3.2.3 快速向样式规则添加背景色或颜色3.2.4 使用 Color Picker 修改颜色 3.3 编辑 DOM3.3.1 查看元素事件侦听器 四、控制台面板Console4.1 消息堆叠4.2 选择执行环境 五、源代码面板Sources5.1 面板概述5.2 格式化混淆代码5.2 断点调试5.2.1 代码行断点5.2.2 条件代码行断点5.2.3 事件监听器断点5.2.4 异常断点 六、Network 面板6.1 面板概述6.2 Requests Table 区域6.3 查看 HTTP 相关信息6.3.1 查看网络请求的参数 七、Performance 模块7.1 面板概述 八、Memory 面板九、Application 面板十、Security 面板小结 前言 我们经常用Chrome Dev Tools 来开发调试但其实只是用了他一点点的功能。Chrome Dev Tools绝对是前端性能优化中性能分析的一把利器而这个功能因为大家平时也相对较少用到今天就是想将用 Chrome Dev Tools 进行页面性能分析的技能分享给大家希望大家能在优化自己项目性能的时候更得心应手。
一、概述
1.1 简介 Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具可用来对网站进行迭代、调试和分析。打开 Chrome 开发者工具的方式有
在Chrome菜单中选择 更多工具 开发者工具在页面元素上右键点击选择 “检查”使用 快捷键 CtrlShiftI (Windows) 或 CmdOptI (Mac)
1.2 DevTools 初步了解 说实话DevTools的UI可能有点让人不知所措……有这么多标签但是如果你花一些时间去熟悉每个选项卡了解什么是可能的你可能会发现DevTools可以大大提高你的工作效率。在网页鼠标右击-检查 或者 F12 打开DevToolsChrome DevTools 主要包含以下10个部分
序号面板说明1Device Mode-设备模式打造移动设备优先的完全自适应式网站。注意该模式不可替代真实设备测试2Elements-元素面板元素面板查看Web页面的HTML与CSS最重要的是可以双击元素对当前页面进行修改3Console-控制台面板控制台面板。在这里可以查看到 JS 的错误信息也可以执行键入的JS脚本4Sources-源代码面板要用于查看web应用的资源列表和查看及调试js代码5Network-网络面板页面中各种资源请求的情况。这里能看到资源的名称、状态、使用的协议、资源类型、资源大小、资源时间线等情况6Performance-性能面板页面各项性能指标的火焰图。这里能看到白屏时间、FPS、资源加载时间线、内存变化曲线等等信息7Memory-内存面板可以记录某个时刻的页面内存情况一般用于分析内存泄露8Application-应用面板记录Web页面加载的所有资源信息包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等9Security-安全面板安全面板查看Web页面的安全和认证情况确保网站上正确地实现了HTTPS10Customize and control DevTools主菜单
二、设备模式Device Mode
2.1 面板概述 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站切换 Device Mode 按钮可以打开或关闭 Device Mode。
通过该视图控件你可以设定下面两种模式 自适应。 使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小并模拟特定设备特性
2.2 设备切换
默认是pc端的显示方式点击后以移动端格式显示再次点击便退回到pc端显示格式。
三、元素面板Elements
3.1 面板概述 Chrome DevTools 的 Elements 面板是一个非常强大的工具可帮助您深入了解和调试网页的 HTML、CSS 和 JavaScript。其可用于查看或修改HTML元素的属性、编辑DOM、编辑CSS属性、监听事件、断点等。也可以直接点击元素进行CSS、html修改此修改只会在本地生效不会上传到服务器端所以可以用来调试前端代码。
3.2 编辑样式
使用 Styles 窗格可以修改与元素关联的 CSS 样式如下图所示
3.2.1 添加、启用和停用 CSS 类 点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里可以执行以下操作启用或停用当前与元素关联的类、向元素添加新类如下图所示
3.2.2 添加或移除动态样式 我们可以在元素上手动设置动态伪类选择器例如 :active、:focus、:hover 和 :visited。可以通过两种方式在元素上设置动态状态 在 Elements 面板内右键点击某个元素然后从菜单中选择目标伪类将其启用或停用。 在 Elements 面板中选择元素然后在 Styles 窗格中点击 :hov 按钮使用复选框启用或停用当前选定元素的选择器。
3.2.3 快速向样式规则添加背景色或颜色 Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标 将鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。
3.2.4 使用 Color Picker 修改颜色 要打开 Color Picker请在 Styles 窗格中查找一个定义颜色的 CSS 声明例如 color: blue。 声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker 您可以通过多种方式与 Color Picker 交互 取色器。 通过鼠标悬停到某种颜色上去获取颜色值。当前颜色。 当前值的可视表示。当前值。 当前颜色的十六进制、RGBA 或 HSL 表示。调色板。 当前生成的几组颜色。着色和阴影选择器。色调选择器。不透明度选择器。颜色值选择器。 点击可以在 RGBA、HSL 和十六进制之间切换。调色板选择器。 点击可以选择不同的模板。
3.3 编辑 DOM Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构通过 DOM 更新实时修改页面的内容和结构。
3.3.1 查看元素事件侦听器
在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器如下图所示 启用 Ancestors 复选框时查看祖先实体事件侦听器即除了当前选定节点的事件侦听器外还会显示其祖先实体的事件侦听器启用 Framework listeners 复选框时查看框架侦听器DevTools 会自动解析事件代码的框架或内容库封装部分然后告诉您实际将事件绑定到代码中的位置。
四、控制台面板Console 在开发期间可以使用控制台面板记录诊断信息或者使用它作为 shell 在页面上与 JavaScript 交互可以查看错误信息、打印调试信息、调试js代码还可以当作JavaScript API查看。
4.1 消息堆叠 如果一条消息连续重复而不是在新行上输出每一个消息实例控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数如下图所示 如果倾向于为每一个日志使用一个独特的行条目请在 DevTools 设置中启用 Show timestamps如下图所示 由于每一条消息的时间戳均不同因此每一条消息都将显示在各自的行上如下图所示 4.2 选择执行环境
以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector 通常会看到此环境设置为 top页面的顶部框架。其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境就需要从下拉菜单中选中它们。例如如果要查看 iframe 元素的日志输出并修改该环境中存在的某个变量就需要从 Execution Context Selector 下拉菜单中选中该元素。
五、源代码面板Sources 在源代码面板中设置断点来调试 JavaScript 或者通过Workspaces工作区连接本地文件来使用开发者工具的实时编辑器。调试JavaScript保存在DevTools中所做的更改保存并运行JavaScript片段并将您在DevTools中所做的更改保存到磁盘。也用来查看加载的各种资源文件比如js、css、图片等。
5.1 面板概述
打开Source面板我们就会看到如下界面 根据上图三个区域对应分别是资源区、工作区、控制台其中资源区分为如下部分
名称描述Page展示当前Web页面所包含的资源文件在这里对工作区中的代码进行修改并不会保留刷新页面就会重置Filesystem当我们的Web页面在本地时我们就可以通过Filesystem选项卡将本地项目文件夹添加到DevTools的工作区以直接将对页面的修改保存到本地还提供对本地文件进行管理添加文件、删除文件、修改文件等。OverridesContentscript用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间Snippets可以在这里创建代码片段并独立运行和调试刷新页面不会丢失 而在工作区中我们点击行号可以添加/移除断点在断点上打开右键菜单可以禁用断点以及设置断点触发条件进行编辑比如可以设置断点在程序循环多少次后触发 而控制区这里提供有调试操作按钮以及一些调试信息的显示顶部的几个按钮便是调试代码的核心按钮 上图调试按钮红框内从左到右各个图标表示的功能分别为 下面我们介绍一下调试按钮下面的各项功能
名称描述Watch跟踪监控变量点击号添加变量名。Call Stack函数调用栈显示执行路径。Scope查看属性作用域。Beakpoints查看属性作用域。XHR/fetch Breakpoints当XHR的请求URL包含某一特定的字符串时所触发的断点。DOM Breakpoints当改变一个节点或其子元素时所触发的断点。Global Listeners全局监听器绑定在 window 对象上的事件。Event Listener Breakpoints事件发生时所触发的断点。
5.2 格式化混淆代码
在某些情况下我们需要对混淆的代码做一定的调试但这是我们看到的代码是乱成一团毫无格式可言 那我们可以点击下方的格式化按钮对代码进行格式化
5.2 断点调试 5.2.1 代码行断点 当我们知道需要调试的代码的确切位置的时候使用代码行断点。想要使用 DevTools 设置代码行断点则需要点击 Sources 选项卡打开包含您想要调试的代码行的文件并找到该代码行点击左边的行号这样一个蓝色图标就显示在行号上表明该代码行设置好断点了。 当然我们也可以在代码中使用 debugger 来设置代码行断点效果和在 DevTools 中设置是一样的。
5.2.2 条件代码行断点 当我们知道需要调试的代码的确切位置且在满足条件下才调试的时候使用条件代码行断点。想要设置条件的代码行断点这就需要点击 Sources 选项卡打开包含想要调试的代码行的文件并找到该代码行右键点击左边的行号选择添加条件断点。然后代码行下面会显示一个对话框在对话框中输入你的条件按Enter激活断点行号上出现橙色图标。 5.2.3 事件监听器断点 当想要暂停事件侦听器代码时使用事件侦听器断点。想要设置事件监听器断点这就需要点击 Sources 选项卡展开 “Event Listener Breakpoints” 窗格DevTools显示事件类别选中这些类别中的一个可以暂停该类别的任何事件或者展开类别并检查特定事件。
5.2.4 异常断点 当您想暂停引发捕获或未捕获异常的代码行时使用异常断点。想要设置异常断点就需要点击 Sources 选项卡点击暂停启用后变成蓝色。如果除了未捕获的异常外还想暂停捕获的异常请选中 “Pause on caught exceptions” 复选框。 六、Network 面板
6.1 面板概述 每个文件的加载、请求的发送都是一次网络交互在Network面板中能够看到所需资源文件是否被加载、请求的接口到底返回了没有、能够知道哪个资源没载完从而导致整个web的呈现等等。Netwrok面板中会记录应用程序的每一次网络交互信息每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等……按区域划分大概分为如下几个区域
Controls - 控制 Network 功能选项以及一些展示外观Filters - 控制在 Requests Table 中显示哪些类型的资源Overview - 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起则说明这些资源被同时检索Requests Table - 此表格列出了检索的每一个资源。 默认情况下此表格按时间顺序排序最早的资源在顶部。点击资源的名称可以显示更多信息。 提示右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列Summary - 可以一目了然地看到页面的请求总数、传输的数据总量、加载时间
6.2 Requests Table 区域
标题栏的对应描述
Name(名称): 资源的名称。Status(状态): HTTP 状态代码。Type(类型): 请求的资源的 MIME 类型。Initiator(发起): 发起请求的对象或进程。它可能有以下几种值 Parser(解析器): Chrome 的 HTML 解析器发起了请求。Redirect(重定向): HTTP 重定向启动了请求。Script(脚本): 脚本启动了请求。Other(其他): 一些其他进程或动作发起请求例如用户点击链接跳转到页面或在地址栏中输入网址。 Size(大小): 响应头的大小通常是几百字节加上响应数据由服务器提供。Time(时间): 总持续时间从请求的开始到接收响应中的最后一个字节Timeline/Waterfall(时间轴): 显示所有网络请求的可视化统计信息
6.3 查看 HTTP 相关信息
6.3.1 查看网络请求的参数 可以通过点击 query string parameters (查询字符串参数)旁边的 view URL encoded (查看 URL 编码)或 view decoded (查看解码)链接查看 URL 编码或解码格式的 query string parameters (查询字符串参数)。在使用 postman 复制相关入参时尤其实用。
七、Performance 模块
7.1 面板概述 在 Performance 面板可以查看页面加载过程中的详细信息比如在什么时间开始做什么事情耗时多久等等。相较于 Network 面板不仅可以看到通过网络加载资源的信息还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息如下图所示 录制一段时间重启页面录制整个页面加载的过程。比较常用清除这一次性能录制的记录上传页面性能录制的数据下载页面性能录制的数据多次录制时可选择要展示的性能记录是否捕捉页面加载过程的截图是否记录内存变化垃圾回收点击了即进行一次垃圾回收
八、Memory 面板
记录页面跟随时间的内存使用情况如果需要比时间轴面板提供的更多信息可以使用“配置”面板例如跟踪内存泄漏。 九、Application 面板
查看一些本地存储、会话存储、已索引数据库、Cookie、缓存、帧等。 十、Security 面板
调试当前网页的安全和认证等问题。 如果网页是安全的则会显示这样一条消息This page is secure (valid HTTPS).。通过点击View certificate可以查看main origin的服务器证书信息。如果网页是不安全的则会显示This page is not secure.。
小结 把今天最好的表现当作明天最新的起点…… 投身于天地这熔炉一个人可以被毁灭但绝不会被打败一旦决定了心中所想便绝无动摇。迈向光明之路注定荆棘丛生自己选择的路即使再荒谬、再艰难跪着也要走下去放弃曾令人想要逃离但绝境重生方为宿命。若结果并非所愿那就在尘埃落定前奋力一搏
