如何用谷歌浏览器分析网页速度

凯斯巴斯克斯
凯斯巴斯克斯

通过Kayce 巴斯克技术作家,Chrome DevTools&Lighthouse

在这个全面的Chrome DevTools网络分析功能参考中,探索分析页面加载方式的新方法。注意:此参考文献基于Chrome 58.如果您使用其他版本的Chrome,则DevTools的用户界面和功能可能会有所不同。检查chrome://help您正在运行的Chrome版本。

记录网络请求

默认情况下,只要DevTools处于打开状态,DevTools就会在“网络”面板中记录所有网络请求。

网络面板。
图1。网络面板

停止记录网络请求

要停止录制请求:

  • 单击 网络”面板上的“ 停止录制网络日志 ” 它变为灰色表示DevTools不再记录请求。
  • 在“网络”面板处于焦点时按Command+ E(Mac)或 Control+ E(Windows,Linux)。

清除请求

明确

单击“网络”面板上的“ 清除  ”以清除“请求”表中的所有请求。

清除按钮。
图2。清楚,用蓝色勾勒出来

跨页面加载保存请求

要跨页面加载保存请求,请选中“网络”面板上的“ 保留日志”复选框。DevTools保存所有请求,直到您禁用 保留日志

保留日志复选框。
图3。“保留日志”复选框,以蓝色标出

在页面加载期间捕获屏幕截图

捕获屏幕截图以分析用户在等待页面加载时看到的内容。

捕获屏幕截图

要启用屏幕截图,请单击“网络”面板上的“ 捕获屏幕截图  ”。启用后会变为蓝色。

在“网络”面板处于焦点时重新加载页面以捕获屏幕截图。

捕获后,您可以通过以下方式与屏幕截图进行交互:

  • 将鼠标悬停在屏幕截图上可查看捕获屏幕截图的位置。“概述”窗格中将显示一条黄线。
  • 单击屏幕截图的缩略图以过滤掉捕获屏幕截图后发生的任何请求。
  • 双击缩略图以放大缩略图。
将鼠标悬停在屏幕截图上。
图4。将鼠标悬停在屏幕截图上。“概述”窗格和“瀑布”中的黄色垂直线表示捕获屏幕截图的时间。

重播XHR请求

要重播XHR请求,请右键单击“请求”表中的请求,然后选择“ 重播XHR”

选择重播XHR。
图5。选择重播XHR

改变加载行为

通过禁用浏览器缓存来模拟首次访问者

要模拟首次使用者体验您网站的方式,请选中“ 禁用缓存”复选框。DevTools禁用浏览器缓存。这更准确地模拟了首次用户的体验,因为请求是在重复访问时从浏览器缓存提供的。

禁用缓存复选框。
图6。“禁用缓存”复选框,以蓝色标出

从“网络条件”抽屉中禁用浏览器缓存

如果要在其他DevTools面板中工作时禁用缓存,请使用“网络条件”抽屉。

  1. 打开“ 网络条件”抽屉
  2. 选中或取消选中“ 禁用缓存”复选框。

手动清除浏览器缓存

要随时手动清除浏览器缓存,请右键单击“请求”表中的任意位置,然后选择“ 清除浏览器缓存”

选择清除浏览器缓存。
图7。选择清除浏览器缓存

离线模拟

有一类新的Web应用程序,称为Progressive Web Apps,可以在服务工作者的帮助下脱机运行。在构建此类应用程序时,能够快速模拟没有数据连接的设备非常有用。

选中“ 脱机”复选框以模拟完全脱机的网络体验。

离线复选框
图8。“脱机”复选框,以蓝色标出

模拟慢速网络连接

Network Throttling 菜单模拟2G,3G和其他连接速度。

网络限制菜单。
图9。网络限制菜单,以蓝色标出

您可以从各种预设中进行选择,例如Regular或Good 2G。您还可以通过打开“网络限制”菜单并选择“ 自定义” >“ 添加”来添加自己的自定义预设。

DevTools在“ 网络”选项卡旁边显示一个警告图标,提醒您已启用限制。

从“网络条件”抽屉模拟慢速网络连接

如果要在其他DevTools面板中工作时节流网络连接,请使用“网络条件”抽屉。

  1. 打开“ 网络条件”抽屉
  2. Network Throttling菜单中选择所需的连接速度。

手动清除浏览器cookie

要随时手动清除浏览器cookie,请右键单击“请求”表中的任意位置,然后选择“ 清除浏览器Cookie”

选择清除浏览器Cookie。
图10。选择清除浏览器Cookie

覆盖用户代理

要手动覆盖用户代理:

  1. 打开“ 网络条件”抽屉
  2. 取消选中自动选择
  3. 从菜单中选择用户代理选项,或在文本框中输入自定义选项。

过滤请求

按属性过滤请求

使用“ 过滤器”文本框按属性过滤请求,例如请求的域或大小。

如果您看不到文本框,则可能隐藏了“过滤器”窗格。请参见隐藏过滤器窗格

“过滤器”文本框。
图11。“过滤器”文本框,以蓝色标出

通过使用空格分隔每个属性,可以同时使用多个属性。例如,mime-type:image/gif larger-than:1K显示大于一千字节的所有GIF。这些多属性过滤器等同于AND操作。目前不支持OR操作。

以下是支持的属性的完整列表。

  • domain。仅显示指定域中的资源。您可以使用通配符(*)来包含多个域。例如,*.com 显示以所有域名结尾的资源.com。DevTools使用它遇到的所有域填充自动完成下拉菜单。
  • has-response-header。显示包含指定HTTP响应标头的资源。DevTools使用它遇到的所有响应标头填充自动完成下拉列表。
  • is。使用is:runningWebSocket资源。
  • larger-than。显示大于指定大小的资源(以字节为单位)。设置值1000等于设置值1k
  • method。显示通过指定的HTTP方法类型检索的资源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
  • mime-type。显示指定MIME类型的资源。DevTools使用它遇到的所有MIME类型填充下拉列表。
  • mixed-content。显示所有混合内容资源(mixed-content:all)或仅显示当前显示的资源(mixed-content:displayed)。
  • scheme。显示通过不受保护的HTTP(scheme:http)或受保护的HTTPS(scheme:https)检索的资源。
  • set-cookie-domain。显示具有Set-Cookie标题的资源,该标题具有Domain与指定值匹配的属性。DevTools使用它遇到的所有cookie域填充自动完成。
  • set-cookie-name。显示具有Set-Cookie名称与指定值匹配的标头的资源。DevTools使用它遇到的所有cookie名称填充自动完成。
  • set-cookie-value。显示具有Set-Cookie与指定值匹配的值的标头的资源。DevTools使用它遇到的所有cookie值填充自动完成。
  • status-code。仅显示HTTP状态代码与指定代码匹配的资源。DevTools使用它遇到的所有状态代码填充自动完成下拉菜单。

按类型过滤请求

要按请求类型筛选请求,请单击“网络”面板上的XHRJSCSS, Img媒体字体文档WS(WebSocket),清单其他(此处未列出的任何其他类型)按钮。

如果您看不到这些按钮,则可能隐藏了“过滤器”窗格。请参见隐藏过滤器窗格

要同时启用多个类型过滤器,请按住Command (Mac)或Control(Windows,Linux),然后单击。

使用Type过滤器显示JS,CSS和Doc [ument]资源。
图12。使用Type过滤器显示JS,CSS和Doc [ument]资源。

按时间过滤请求

单击并在“概述”窗格中向左或向右拖动,仅显示在该时间范围内处于活动状态的请求。过滤器是包含在内的。显示在突出显示的时间内处于活动状态的任何请求。

过滤掉2500ms左右未激活的任何请求。
图13。过滤掉2500ms左右未激活的任何请求

隐藏数据网址

数据URL是嵌入到其他文档中的小文件。您在Requests表中看到的任何请求 data:都是数据URL。

选中隐藏数据URL复选框以隐藏这些请求。

隐藏数据URL复选框。
图14。隐藏数据URL复选框

排序请求

默认情况下,“请求”表中的请求按启动时间排序,但您可以使用其他条件对表进行排序。

按列排序

单击“请求”中任何列的标题,以按该列对请求进行排序。

按活动阶段排序

要更改Waterfall排序请求的方式,请右键单击“请求”表的标题,将鼠标悬停在“ 瀑布”上,然后选择以下选项之一:

  • 开始时间。启动的第一个请求位于顶部。
  • 响应时间。开始下载的第一个请求位于顶部。
  • 结束时间。完成的第一个请求位于顶部。
  • 总持续时间。具有最短连接设置和请求/响应的请求位于顶部。
  • 延迟。等待最短响应时间的请求位于顶部。

这些描述假设每个相应的选项从最短到最长排名。单击Waterfall列的标题可以反转顺序。

按总持续时间对瀑布进行排序。
图15。按总持续时间对瀑布进行排序。每个酒吧较轻的部分是等待的时间。较暗的部分是下载字节所花费的时间。

分析请求

只要DevTools处于打开状态,它就会在“网络”面板中记录所有请求。使用“网络”面板分析请求。

查看请求日志

使用“请求”表查看DevTools打开时所做的所有请求的日志。单击或将鼠标悬停在请求上会显示有关它们的更多信息。

请求表。
图16。请求表,以蓝色标出

“请求”表默认显示以下列:

  • 名字。资源的文件名或标识符。
  • 现状。HTTP状态代码。
  • 输入。请求的资源的MIME类型。
  • 发起人。以下对象或进程可以发起请求:
    • 解析器。Chrome的HTML解析器。
    • 重定向。HTTP重定向。
    • 脚本。一个JavaScript函数。
    • 其他。其他一些流程或操作,例如通过链接导航到页面或在地址栏中输入URL。
  • 大小。响应标头与响应主体的组合大小,由服务器提供。
  • 时间。从请求开始到响应中最后一个字节的接收的总持续时间。
  • 瀑布。每个请求的活动的视觉细分。

添加或删除列

右键单击“请求”表的标题,然后选择隐藏或显示它的选项。当前显示的选项旁边有复选标记。

将列添加到“请求”表。
图17。将列添加到“请求”表。

添加自定义列

要将自定义列添加到“请求”表,请右键单击“请求”表的标题,然后选择“ 响应标题” >“ 管理标题列”

将自定义列添加到“请求”表。
图18。将自定义列添加到“请求”表。

查看彼此相关的请求时间

使用瀑布查看彼此相关的请求时间。默认情况下,瀑布按请求的开始时间进行组织。因此,远离左侧的请求比远离右侧的请求更早开始。

请参阅按活动阶段排序,以查看可以对瀑布进行排序的不同方法。

“请求”窗格的“瀑布”列。
图19。“请求”窗格的“瀑布”列。

分析WebSocket连接的帧

要查看WebSocket连接的框架:

  1. 单击“ 请求”表的“ 名称”列下的WebSocket连接的URL 。
  2. 单击“ 框架”选项卡。该表显示了最后100帧。

要刷新表,请在“请求”表的“ 名称”列下重新单击WebSocket连接的 名称

框架选项卡。
图20。框架选项卡,以蓝色标出

该表包含三列:

  • 数据。消息有效负载。如果邮件是纯文本,则会在此处显示。对于二进制操作码,此列显示操作码的名称和代码。支持以下操作码:Continuation Frame,Binary Frame,Connection Close Frame,Ping Frame和Pong Frame。
  • 长度。消息有效负载的长度,以字节为单位。
  • 时间。收到或发送邮件的时间。

消息根据其类型进行颜色编码:

  • 传出的短信是浅绿色的。
  • 传入的短信是白色的。
  • WebSocket操作码是浅黄色的。
  • 错误是浅红色的。

查看响应正文的预览

要查看响应正文的预览:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击“ 预览”选项卡。

此选项卡主要用于查看图像。

预览选项卡。
图21。预览选项卡,以蓝色标出

查看回复正文

要查看请求的响应正文:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击“ 响应”选项卡。
响应选项卡。
图22。“响应”选项卡,以蓝色标出

查看HTTP标头

要查看有关请求的HTTP标头数据:

  1. 在“请求”表的“ 名称”列下单击请求的URL 。
  2. 单击“ 标题”选项卡。
标题选项卡。
图23。标题选项卡,以蓝色标出

查看HTTP标头源

默认情况下,“标题”选项卡按字母顺序显示标题名称。要按收到的顺序查看HTTP标头名称:

  1. 打开您感兴趣的请求的标题选项卡。请参阅 查看HTTP标头
  2. 单击“ 请求标头”或“ 响应标头”部分旁边的“ 查看源”

查看查询字符串参数

要以人类可读的格式查看URL的查询字符串参数:

  1. 打开您感兴趣的请求的标题选项卡。请参阅 查看HTTP标头
  2. 转到“ 查询字符串参数”部分。
查询字符串参数部分。
图24。“查询字符串参数”部分,以蓝色标出

查看查询字符串参数源

要查看请求的查询字符串参数源:

  1. 转到“查询字符串参数”部分。请参阅查看查询字符串参数
  2. 单击查看源

查看URL编码的查询字符串参数

要以人类可读的格式查看查询字符串参数,但保留了编码:

  1. 转到“查询字符串参数”部分。请参阅查看查询字符串参数
  2. 单击查看URL编码

查看cookie

要查看请求的HTTP标头中发送的cookie:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击Cookies选项卡。

有关每个列的说明,请参阅字段

Cookies选项卡。
图25。Cookies选项卡,以蓝色标出

查看请求的时间细分

要查看请求的时间细分:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击“ 计时”选项卡。

请参阅预览时序细分,以便更快地访问此数据。

有关您可能在“时序”选项卡中看到的每个阶段的详细信息,请参阅时序分解阶段

时间选项卡。
图26。时间选项卡,以蓝色标出

以下是有关每个阶段的更多信息。

有关访问此视图的另一种方法,请参阅查看时间细分

预览时间细分

要查看请求的计时细分预览,请将鼠标悬停在“请求”表的“ 瀑布”列中的请求条目上。

请参阅查看请求的时间细分,以获取访问此数据的方法,该方法不需要悬停。

预览请求的时间细分。
图27。预览请求的时间细分

时间分解阶段解释

以下是有关您在“时序”选项卡中可能会看到的每个阶段的更多信息:

  • 排队。浏览器在以下时间排队请求:
    • 有更高优先级的请求。
    • 此源已打开六个TCP连接,这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。
    • 浏览器正在短暂分配磁盘缓存中的空间
  • 停滞不前。由于排队中描述的任何原因,请求可能会停止。
  • DNS查找。浏览器正在解析请求的IP地址。
  • 代理协商。浏览器正在与代理服务器协商请求。
  • 请求已发送。请求正在发送。
  • ServiceWorker准备。浏览器正在启动服务工作者。
  • 请求ServiceWorker。请求将发送给服务工作者。
  • 等待(TTFB)。浏览器正在等待响应的第一个字节。TTFB代表Time To First Byte。此时间包括1次往返延迟和服务器准备响应所用的时间。
  • 内容下载。浏览器正在接收响应。
  • 接收推送。浏览器通过HTTP / 2服务器推送接收此响应的数据。
  • 读推。浏览器正在读取先前收到的本地数据。

查看启动器和依赖项

要查看请求的启动器和依赖项,Shift 请在“请求”表中按住并将鼠标悬停在请求上。DevTools将启动器颜色设置为绿色,依赖关系设置为红色。

查看请求的启动器和依赖项。
图28。查看请求的启动器和依赖项

当Requests表按时间顺序排序时,您悬停在请求上方的第一个绿色请求是依赖项的发起者。如果上面有另一个绿色请求,则该更高的请求是发起者的发起者。等等。

查看加载事件

DevTools 在“网络”面板上的多个位置显示DOMContentLoadedload事件的时间。该DOMContentLoaded事件为蓝色,load事件为红色。

“网络”面板上DOMContentLoaded和加载事件的位置。
图29。“ 网络”面板中的事件DOMContentLoaded和 load事件 的位置

查看请求总数

“网络”面板底部的“摘要”窗格中列出了请求总数。警告:此数字仅跟踪自DevTools打开以来记录的请求。如果在DevTools打开之前发生了其他请求,则不会计算这些请求。

自DevTools打开以来的请求总数
图30。自DevTools打开以来的请求总数

查看总下载大小

请求的总下载大小列在“网络”面板底部的“摘要”窗格中。警告:此数字仅跟踪自DevTools打开以来记录的请求。如果在DevTools打开之前发生了其他请求,则不会计算这些请求。

请求的总下载大小
图31。请求的总下载大小

请参阅查看资源的未压缩大小以查看浏览器解压缩后资源的大小

查看导致请求的堆栈跟踪

当JavaScript语句导致请求资源时,将鼠标悬停在Initiator 列上以查看导致请求的堆栈跟踪。

堆栈跟踪导致资源请求
图32。堆栈跟踪导致资源请求

查看资源的未压缩大小

使用大请求行

单击“ 使用大型请求行” ,然后查看“ 大小”列的底部值。

未压缩资源的示例。
图33jquery-bundle.js通过网络发送的文件30.9 KB的压缩大小是,而未压缩的大小是 86.3 KB

导出请求数据

将所有网络请求保存到HAR文件

要将所有网络请求保存到HAR文件:

  1. 右键单击“请求”表中的任何请求。
  2. 选择另存为内容HAR。DevTools保存自您将DevTools打开到HAR文件以来发生的所有请求。无法过滤请求或仅保存单个请求。

获得HAR文件后,可以将其导入DevTools进行分析。只需将HAR文件拖放到“请求”表中即可。另请参阅HAR Analyzer

选择另存为内容HAR。
图34。选择另存为内容HAR

将一个或多个请求复制到剪贴板

在“ 请求”表的“ 名称”列下,右键单击某个请求,将鼠标悬停在“ 复制”上,然后选择以下选项之一:

  • 复制链接地址。将请求的URL复制到剪贴板。
  • 复制响应。将响应正文复制到剪贴板。
  • 复制为cURL。将请求复制为cURL命令。
  • 全部复制为cURL。将所有请求复制为一系列cURL命令。
  • 全部复制为HAR。将所有请求复制为HAR数据。
选择复制响应。
图35。选择复制响应

更改“网络”面板的布局

展开或折叠“网络”面板UI的各个部分,以关注对您来说重要的内容。

隐藏“过滤器”窗格

过滤

默认情况下,DevTools显示“ 过滤器”窗格。单击“ 过滤” 以隐藏它。

隐藏过滤器按钮
图36。隐藏过滤器,以蓝色标出

使用大型请求行

如果需要在网络请求表中添加更多空格,请使用大行。使用大行时,某些列还提供了更多信息。例如,“ 大小” 列的底部值是请求的未压缩大小。

“请求”窗格中的大型请求行的示例。
图37。“请求”窗格中的大型请求行的示例
使用大型请求行

单击“ 使用大型请求行” 以启用大行。

Large Request Rows按钮
图38。大请求行,以蓝色标出

隐藏“概述”窗格

隐藏概述

默认情况下,DevTools显示“ 概述”窗格。单击隐藏概述 以隐藏它。

隐藏概述按钮
图39。隐藏概述,以蓝色标出

Chrome DevTools for Beginners:开始使用HTML和DOM

这是一系列教程中的第一篇,它们将教您Web开发的基础知识。您还将了解一组名为Chrome DevTools的Web开发人员工具,可以提高您的工作效率。

在这个特定的教程中,您将了解HTML和DOM。HTML是Web开发的核心技术之一。它是控制网页结构和内容的语言。DOM也与网页的结构和内容有关,但您稍后会对此有所了解。

目标

您将通过实际构建自己的网站来学习Web开发。当您完成DevTools for Beginners系列中的所有教程时,您完成的站点将如图1所示

完成的网站。
图1。完成的网站

在本教程结束时,您将了解:

  • HTML和DOM如何创建您在网页上看到的内容。
  • Chrome DevTools如何帮助您尝试HTML和DOM更改。
  • HTML和DOM之间的区别。

你还有一个真正的网站!您可以使用此站点来托管您的简历或博客。

先决条件

在尝试本教程之前,请完成以下先决条件:

  • 如果您不熟悉HTML,请阅读HTML 入门
  • 下载Google Chrome网络浏览器。本教程使用一组内置于Google Chrome中的Web开发工具,称为Chrome DevTools。

设置你的代码

您将在名为Glitch的在线代码编辑器中构建您的站点。

  1. 打开源代码。在本教程中,此选项卡将被称为编辑器选项卡
    编辑器选项卡。
    图2。编辑器选项卡
  2. 单击dfb1。“项目选项”菜单将在左上角打开。
    “项目选项”菜单。
    图3。“项目选项”菜单
  3. 单击“重新混音”。Glitch会创建项目的副本,您可以编辑该项目并随机为项目生成新名称。内容与以前相同。
    重新混合的项目。
    图4。重新混合的项目
  4. 如果您打算完成本系列的下一个教程,请单击“ 登录”并使用您的GitHub或Facebook帐户登录Glitch。如果您未登录,则在关闭编辑选项卡后,您将无法编辑此项目。
  5. 点击查看直播。将打开一个新选项卡,显示实时页面。在本教程中,此选项卡将被称为实时选项卡
    实时标签。
    图5。实时标签

添加内容

你的网站很空。请按照以下步骤添加一些内容!

  1. 编辑器选项卡中,替换<!-- You're "About Me" will go here. --> 为<h1>About Me</h1>
    ... 
    <body> <p> 您的网站!</ p> <main> <h1> 关于我</ h1> </ main>   ...
      
      
        
      
    
    新代码在编辑器选项卡中突出显示。
    图6。新代码在编辑器选项卡中突出显示
  2. 实时标签中查看您的更改。文本About Me在页面上可见。它比文本的其余部分大,因为<h1>元素代表一个部分标题。您的Web浏览器会自动为较大字体的标题设置样式。
    新标题在实时标签中可见。
    图7。新标题在实时标签中可见
  3. 返回编辑器选项卡<p>I am learning HTML. Recent accomplishments:</p>在下面的行中插入<h1>About Me</h1>
    ... 
    <body> <p> 您的网站!</ p> <main> <h1> 关于我</ h1> <p> 我正在学习网页开发。最近的成就:</ p> </ main>   ...
      
      
        
        
      
    
    新代码在编辑器选项卡中突出显示。
    图8。新代码在编辑器选项卡中突出显示
  4. 实时标签中查看您的更改。
  5. 返回编辑器选项卡,添加您的成就列表:
    ... 
      <p> 我正在学习网络开发。最近的成就:</ p> <ul> <li> 了解如何在Glitch中设置我的代码。</ li> <li> 向我的HTML添加了内容。</ li> <li> TODO:了解如何使用Chrome DevTools试验内容更改。</ li> <li> TODO:了解HTML和DOM之间的区别。</ li> </ ul> ......
      
        
        
        
        
      
    
    新代码在编辑器选项卡中突出显示。
    图4。新代码在编辑器选项卡中突出显示
  6. 再次,返回实时选项卡以确保新内容正确显示。
    新列表在实时选项卡中可见。
    图4。新列表在实时选项卡中可见

尝试Chrome DevTools中的内容更改

如果您正在开发包含大量HTML的大页面,您可以想象在编辑器选项卡和实时选项卡之间来回数百次以查看更改可能有点单调乏味,特别是如果您不知道究竟要放在页面上的是什么。Chrome DevTools可以帮助您体验内容更改,而无需离开实时标签。

了解HTML和DOM之间的区别

在您开始从Chrome DevTools编辑内容之前,了解HTML和DOM之间的区别很有帮助。学习的最佳方式是通过示例:

  1. 转到实时选项卡。在页面底部,您会看到文字A new element!?!
    在页面底部的文字'一个新的元素!?!' 看得见。
    图9。在页面底部A new element!?!可以看到 文本
  2. 返回编辑器选项卡,尝试查找此文本index.html。它不存在!
    在index.html中找不到神秘文本。
    图10。神秘的文字A new element!?!无处可寻index.html
  3. 返回实时选项卡,单击鼠标右键A new element!?!,然后选择“ 检查”
    检查一些文字。
    图11。检查一些文字

    DevTools会在您的页面旁边打开。<div>A new element!?!</div>突出显示为蓝色。虽然DevTools中的这个结构看起来像你的HTML,但实际上它是DOM树

    DevTools在页面旁边打开。
    图12。DevTools在页面旁边打开

当您的页面加载时,浏览器会使用您的HTML来创建页面的初始内容。DOM表示页面的当前内容,可以随时间变化。<div>A new element!?!</div由于<script src="new.js"></script>HTML底部的标记,神秘内容会添加到您的网页中 。此标记会导致某些JavaScript代码运行。您将在以后的教程中了解有关JavaScript的更多信息,但现在将其视为可以更改页面内容的编程语言。在这种特殊情况下,JavaScript代码会添加<div>A new element!?!</div>到您的页面中。这就是为什么这个神秘文本在您的实际页面上可见,而不是在您的HTML中。

编辑DOM

如果您想在不离开实时标签的情况下快速尝试内容更改,请尝试使用DevTools。

  1. 在DevTools中,右键单击Your site!并选择“ 编辑为HTML”
    将节点编辑为HTML。
    图13。将节点编辑为HTML
  2. 替换<p>Your site!</p>为下面的代码。
    <header> <p> <b> 欢迎来到我的网站!</ b> </ p> <button> 下载我的简历</ button> </ header>
      
      
    
    将节点编辑为HTML。
    图14。将节点编辑为HTML
  3. CommandEnter(Mac)或ControlEnter (Windows,Linux,Chrome OS)保存更改,或单击框外部。您的更改会自动显示在您网页的实时视图中。该文本Your site! 已被新内容替换。
    新内容会立即显示在页面上。
    图15。新内容会立即显示在页面上

此工作流程仅适用于试验内容更改。如果您重新加载页面或关闭选项卡,您的更改将永远消失。如果您正在使用此工作流程并且想要保存更改,则需要手动将这些更改复制到HTML。

接下来的几节将向您展示更多可以从DOM树更改内容的方法。

重新排序节点

您还可以更改DOM节点的顺序。例如,在您的网页上,导航菜单位于底部附近。将其移至顶部:

  1. <nav>在DevTools 的DOM树中查找节点。
    nav节点在DevTools中以蓝色突出显示。
    图16。nav节点在DevTools中以蓝色突出显示
  2. <nav>节点拖到顶部,这样它就是<body>节点下面的第一个子节点。
    将导航节点拖到顶部。
    图17。将导航节点拖到顶部

    <nav>节点现在显示在页面顶部。

    导航节点位于页面顶部。
    图18。导航节点位于页面顶部

删除节点

您还可以从DOM树中删除节点。

  1. DOM树中,单击<div>A new element!?!</div>。DevTools突出显示蓝色节点。
    选择要删除的节点。
    图19。选择要删除的节点
  2. Delete键盘上的键。该<div>A new element!?!</div>节点将从DOM树中删除。
    该节点已被删除。
    图20。该节点已被删除

复制您的更改

你几乎完成。您已在DevTools中对页面进行了一些更改,但它们尚未保存到您的源代码中。

  1. 重新加载您的实时标签。您在DOM树中所做的更改将消失。特别是,文本Your site!返回页面顶部,文本A new element!?!返回到底部。
    你所做的改变已经消失了。
    图21。你所做的改变已经消失了