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

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

通过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 70.0.3538.67版本更新说明

修改了27项功能:


Symbol.prototype.description

JavaScriptA description property is being added to Symbol.prototype. This provides a more ergonomic way of accessing the description of a Symbol. Previously, the description could be only be accessed indirectly through the Symbol.protoype.toString().

TLS 1.3

SecurityTLS 1.3 is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise.

The <rp> element defaults to display:none

CSSThe default style of the <rp> element is changed to “display:none” instead of “display:inline” even if it is not inside the <ruby>element as defined in HTML specification. This behavior is implemented in the UA style sheet, but the web author can override it. Behavior in other browsers: – Edge: display:inline (outside <ruby>), display:none (inside <ruby>) – Firefox: display:none – Safari: display:inline, display:none (inside <ruby>)

The ontouch* APIs default to disabled on desktop

DOMTo avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop devices (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as `addEventListener(“touchstart”, …)` is not being affected.

Update behavior of CSS Grid Layout percentage row tracks and gutters

CSSThis updates the behavior of percentage row tracks and gutters in grid containers with indefinite heights. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS WG has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.

WebUSB on Dedicated Workers

DeviceWebUSB is enabled inside dedicated worker contexts. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.

Priority Hints

Network / ConnectivityPriority Hints provide developers a way to indicate a resource’s relative importance to the browser, allowing more control over the order resources are loaded. Many factors influence a resource’s priority in browsers. These include type, visibility, and preload status of a resource. Priority Hints introduces a developer-set “importance” attribute allowing developers to influence the computed priority of a resource. Supported importance values are auto, low, and high.

RTCPeerConnection.getConfiguration()

Web RTCThis change implements getConfiguration() according to the WebRTC 1.0. Specifically it returns the last configuration applied via setConfiguration(), or if setConfiguration() hasn’t been called, the configuration the RTCPeerConnection was constructed with.

Remove AppCache from non-secure contexts

SecurityAppCache is now removed from insecure contexts. AppCache is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for an XSS. This will remove that attack vector by only allowing it over HTTPS. This feature was deprecated in Chrome 67.

Remove HTMLFrameSetElement’s anonymous getter.

DOMDeprecate and remove HTMLFrameSetElement’s anonymous getter which is non-standard.

Remove OS build number from user-agent string

Network / ConnectivityThe OS build number (for example, “NJH47F” or “OPM4.171019.021.D1” on Android) has been removed from the user-agent identification (User-Agent header and navigator.userAgent) on Android and on iOS. The iOS change follows Safari’s implementation and freezes the build number as “15E148” instead of removing it. This will prevent abuses of that information such as exploit targeting and fingerprinting. It’ll also bring Chrome closer in line with RFC 7231 section 5.5.3.

Shadow DOM v0

Web ComponentsChrome and other browsers implemented the new version, see https://www.chromestatus.com/features/4667415417847808. V0 is deprecated at M70, and will be removed in M73, around, April 2019. If you are still using this consider migrating to the new API or upgrading your Polymer library. Use –disable-blink-features=ShadowDOMV0 for testing if your site works without Shadow DOM V0 APIs. For more info: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h-JwMiPUnuU/sl79aLoLBQAJ

Shape Detection API

MultimediaPhotos and images constitute the largest chunk of the Web, and many include recognisable features, such as human faces, text, or QR codes. Detecting these features is computationally expensive, but, particularly on mobile devices, hardware manufacturers have long been supporting these features. This API allows accessing hardware-accelerated detectors where available. This is expected to be in origin trials in Chrome 70.

Support Opus in mp4 (ISO-BMFF) with Media Source Extensions (MSE)

MultimediaOpus is an audio codec already supported by the HTML5 src attribute on <url> elements. This applies to mp4, ogg, and webm containers as well as in webm containers using Media Source Extensions. This change adds support for the Opus codec in the mp4 container to MSE.

Support codec and container switching with MSE using SourceBuffer.changeType()

MultimediaThis change adds the SourceBuffer.changeType() method to improve cross-codec or cross-bytestream transitions during playback with Media Source Extensions.

globalThis

JavaScript`globalThis` enables a universal mechanism to access the global object even in strict functions or modules, regardless of the platform.

‘name’ attribute for dedicated workers

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。你所做的改变已经消失了

在Chrome中与Flash说再见

今天,Adobe宣布计划在2020年底停止支持Flash。

20年来,Flash帮助塑造了您在网络上玩游戏,观看视频和运行应用程序的方式。但在过去的几年里,Flash变得不那么常见了。三年前,80%的桌面Chrome用户每天都会访问一个使用Flash的网站。今天使用率仅为17%并且继续下降。

这一趋势表明,网站正在迁移到开放式网络技术,这种技术比Flash更快,更节能。它们也更安全,因此您可以在购物,银行业务或阅读敏感文档时更安全。它们还适用于移动设备和桌面设备,因此您可以随时随地访问自己喜爱的网站。

这些开放式网络技术成为Chrome去年年底的默认体验,当时网站开始需要您的许可才能运行Flash。Chrome将在未来几年内继续淘汰Flash,首先要求您在更多情况下允许运行Flash,并最终在默认情况下禁用Flash。到2020年底,我们将从Chrome中完全删除Flash。

如果您定期访问今天使用Flash的网站,您可能想知道这会对您产生什么影响。如果站点迁移到打开Web标准,除了您将不再看到在该站点上运行Flash的提示之外,您不会发现太多差异。如果该站点继续使用Flash,并且您授予站点运行Flash的权限,则它将在2020年底之前运行。

与Adobe,其他浏览器和主要发布商进行了大量密切合作,以确保网络已准备好无Flash。我们今天支持Adobe的发布,我们期待与大家合作,让网络变得更好。

使用或修复 Flash 音频和视频

借助 Adobe Flash 插件,您可以在计算机上通过 Chrome 收听和观看 Flash 音频和视频内容。

注意:Adobe 将于 2020 年底停止支持 Flash。要想详细了解在 2020 年底之前 Chrome 如何与 Flash 协作,请访问这篇 Chrome 博客

允许网站播放 Flash 视频、动画和游戏

请仅允许 Flash 在您信任的网站上运行。某些网站可能会利用 Adobe Flash Player 来损害您的计算机。

在退出 Chrome 后,系统不会保存您的 Flash 设置。下次打开 Chrome 时,您必须重新允许之前添加的网站来使用 Flash。

  1. 当您访问您信任且包含 Flash 内容的网页时,点击点击即可启用 Adobe Flash Player
  2. 点击允许

网站需要使用 Flash 才能正常运行

如果某网站无法正常运行,您可能需要更改设置来允许该网站使用 Flash。

  1. 在网址的左侧,点击“锁定”图标 Lock 或“信息”图标 查看网站信息
  2. 点击底部的网站设置
  3. 在随即显示的新标签页中,依次点击“Flash”右侧的向下箭头 向下箭头 然后 允许
  4. 返回该网站并重新加载页面。

更改您的 Flash 设置

禁止所有网站使用 Flash

  1. 在计算机上打开 Chrome。
  2. 依次点击右上角的“更多”图标 更多 然后 设置
  3. 点击底部的高级
  4. 在“隐私设置和安全性”下方,点击内容设置
  5. 点击 Flash
  6. 关闭顶部的先询问(推荐)

移除已禁止或已允许使用 Flash 的网站

  1. 依次点击右上角的“更多”图标 更多 然后 设置
  2. 点击底部的高级
  3. 在“隐私设置和安全性”下方,点击内容设置
  4. 点击 Flash
  5. 点按网站右侧的“移除”图标 Remove

解决 Flash 出现的问题

如果 Flash 无法正常运行,或者您看到以下错误消息,请尝试按照下文介绍的问题排查步骤操作。

  • Adobe Flash 版本太旧,因此已被屏蔽
  • 无法加载插件
  • 该网页已屏蔽以下插件
  • 该插件不受支持
  • 插件 (Shockwave Flash) 未响应

第 1 步:开启 Flash

请仅允许 Flash 在您信任的网站上运行。

  1. 在计算机上打开 Chrome。
  2. 转到提供相应视频或游戏的网站。
  3. 在网址的左侧,点击“锁定”图标 Lock 或“信息”图标 查看网站信息
  4. 点击底部的网站设置
  5. 在随即显示的新标签页中,依次点击“Flash”右侧的向下箭头 向下箭头 然后 允许
  6. 返回该网站并重新加载页面。

第 2 步:更新 Flash

  1. 在计算机上打开 Chrome。
  2. 在顶部的地址栏中,输入 chrome://components,然后按 Enter 键。
  3. 找到“Adobe Flash Player”。
  4. 点击检查是否有更新
  5. 如果您看到“组件未更新”或“组件已更新”,则表明您的组件是最新版本。
  6. 返回到包含 Flash 内容的页面。如果 Flash 内容没有自动打开,请点击左上角的“重新加载”图标 Reload

第 3 步:更新 Chrome

  1. 在计算机上打开 Chrome。
  2. 点击右上角的“更多”图标 更多
  3. 点击更新 Google Chrome。如果您没有看到此按钮,则表明您的 Chrome 是最新版本。
  4. 点击重新启动
更新 Chrome 时遇到问题?了解如何解决 Chrome 更新问题

第 4 步:重新安装 Flash

确保您只通过 Adobe 的网站安装 Flash。
  1. 在计算机上打开 Chrome。
  2. 转到 adobe.com/go/chrome
  3. 在“第 1 步”下方,选择计算机的操作系统。
  4. 在“第 2 步”下方,选择列有“PPAPI”的选项。
  5. 点击立即下载,然后按照步骤安装 Flash。

修正其他 Flash 错误

系统显示“以下插件已崩溃”错误消息或显示插件图标 插件

  1. 如果 Adobe Flash 无法自动重新启动,请将其强行关闭:
    1. 点击右上角的“更多”图标 更多
    2. 依次点击更多工具 然后 任务管理器
    3. 选择“插件:Shockwave Flash”。
    4. 点击结束进程
  2. 关闭“任务管理器”窗口,然后返回包含 Flash 内容的网页。
  3. 点击左上角的“重新加载”图标 Reload

设置默认搜索引擎

您可以将地址栏(多功能框)用作搜索框。地址栏会自动使用 Google 进行搜索,但您也可将其他搜索引擎设为默认搜索引擎。

如果 Google 一直是您的默认搜索引擎,但突然不是了,则表明您的系统可能已遭到恶意软件的攻击。获取恢复 Chrome 设置的相关帮助

设置默认搜索引擎

  1. 在计算机上打开 Chrome。
  2. 依次点击右上角的“更多”图标 更多 接着 设置
  3. 在“搜索引擎”下方,点击“地址栏中使用的搜索引擎”旁边的向下箭头 向下箭头
  4. 选择新的默认搜索引擎。

如果您已尝试设置搜索引擎但发现无效,则意味着您的计算机上可能存在恶意软件。获取恢复 Chrome 设置的相关帮助

添加、修改或移除其他搜索引擎

  1. 在计算机上打开 Chrome。
  2. 依次点击右上角的“更多”图标 更多 接着 设置
  3. 在“搜索引擎”下方,点击管理搜索引擎
  4. 找到“其他搜索引擎”。
    • 添加:点击“其他搜索引擎”右侧的添加。填写文本字段,然后点击添加
    • 设为默认搜索引擎:依次点击相应搜索引擎右侧的“更多”图标 更多 接着 设为默认搜索引擎
    • 修改:依次点击相应搜索引擎右侧的“更多”图标 更多 接着 修改
    • 删除:依次点击相应搜索引擎右侧的“更多”图标 更多 接着 从列表中移除

文本字段填写提示

“搜索引擎”字段

请输入相应搜索引擎的标签或名称。

“关键字”字段

请为相应搜索引擎输入您要使用的文字快捷方式。这样一来,您便可以在地址栏中输入设置的关键字来快速打开相应搜索引擎。

“网址(用“%s”代替搜索字词)”字段

请输入相应搜索引擎的结果页对应的网址,然后使用 %s 代替搜索字词。

要查找并修改结果页对应的网址,请执行以下操作:

  1. 转至您要添加的搜索引擎。
  2. 执行一次搜索。
  3. 将搜索结果页的网址复制并粘贴到“网址”字段中。搜索结果页的网址与网站网址有所不同。
    • 例如,如果您搜索“soccer”,Google 搜索结果的网址就是 http://www.google.com/search?q=soccer
  4. 将网址中的搜索字词替换为 %s
    • 例如,如果您使用的是 Google 搜索结果网址,那么您的搜索引擎网址将为 http://www.google.com/search?q=%s

在 Chrome 上搜索网络信息

您可以在互联网上、书签列表和浏览记录中快速找到所需内容。

  1. 在计算机上打开 Chrome。
  2. 在顶部的地址栏中,输入您的搜索内容。
  3. 点击相应结果或按 Enter

在网页中搜索

您可以在计算机上的网页中查找特定字词或短语。

  1. 在计算机上,在 Chrome 中打开一个网页。
  2. 依次点击右上角的“更多”图标 更多 接着 查找
  3. 在右上角显示的栏中输入搜索字词。
  4. 按 Enter 键搜索网页。
  5. 系统会以黄色突出显示匹配内容。您可以使用滚动条上的黄色标记查看所有匹配内容在网页中的位置。

提示:您也可以使用键盘快捷键,通过按 Ctrl+F(Windows、Linux 和 Chrome 操作系统)或 ⌘+F (Mac) 来快速查找字词或短语。

搜索字词或图片

您可以在网页上查找特定字词、短语或图片的更多相关信息。

  1. 在计算机上,在 Chrome 中打开一个网页。
  2. 突出显示某个字词、短语或图片。
  3. 在计算机上右键点击它。如果使用的是 Mac 设备,则按住 Ctrl 的同时点击。
  4. 点击相应选项,即可使用您的默认搜索引擎开始搜索。例如,您可能会看到诸如“使用 Google 搜索‘帝企鹅’”或“使用 Bing 搜索此图片”之类的内容。

使用标签页和建议

您不仅可在 Chrome 中打开任意多个标签页,还可查看所有标签页并在它们之间自如切换。

打开新的标签页

在 Google Chrome 窗口顶部,点击右侧最后一个标签页旁的“打开新的标签页”图标 打开新的标签页,或使用键盘快捷键

  • Windows 和 Linux:Ctrl + t
  • Mac:⌘ + t

点击标签页并将其拖到 Google Chrome 窗口外面。

要打开新窗口,请使用键盘快捷键:

  • Windows 和 Linux:Ctrl + n
  • Mac:⌘ + n

从计算机的桌面上或文件夹中,将相应文件拖到 Google Chrome 标签页中。如果可以打开该文件,光标将显示“添加”图标 添加

在计算机中浏览并选择想要打开的文件。打开新的标签页,然后使用键盘快捷键:

  • Windows 和 Linux:Ctrl + o
  • Mac:⌘ + o
  • Windows 和 Linux:按住 Ctrl 的同时点击链接
  • Mac:按住 ⌘ 的同时点击链接

定制“打开新的标签页”页面

在打开新的标签页后,您会在搜索框下方看到自己经常访问的网站。

  • 要访问某个网站,请点击对应图标。
  • 要移除或修改某个网站,请将光标指向对应图标。在该图标的右上角,点击“更多”图标 更多

添加自定义背景图片

您可以上传照片,以用作 Chrome 的背景。

点击新标签页右下角的“设置”图标 设置

排列标签页

要更改标签页的排列顺序,请沿浏览器窗口顶部拖动标签页。

  • 要将标签页固定在左侧,请右键点击相应标签页,然后选择固定标签页。已固定标签页的尺寸较小,并且只显示网站的图标。
  • 要取消固定标签页,请右键点击相应标签页,然后选择取消固定标签页

关闭标签页

在相应标签页的右上角,点击“关闭”图标 关闭,或使用键盘快捷键:

  • Windows 和 Linux:Ctrl + w
  • Mac:⌘ + w
  • 关闭窗口中的所有标签页。
  • 在相应窗口顶部的角落,点击“关闭”图标 关闭
    • Windows 和 Linux:在屏幕右上角。
    • Mac:在屏幕左上角。

    您也可以使用键盘快捷键关闭窗口:

    • Windows 和 Linux:Alt + F4
    • Mac:⌘ + Shift + w

您可以按照下列步骤将 Google Chrome 完全关闭。

  1. 打开 Chrome 菜单。
    • Windows 和 Linux:在顶部的菜单栏上,点击 更多
    • Mac:在顶部的菜单栏上,点击 Chrome
  2. 关闭 Google Chrome。
    • Windows 和 Linux:点击退出
    • Mac:点击退出 Google Chrome

您也可以使用键盘快捷键关闭 Google Chrome:

  • Windows 和 Linux:Ctrl + Shift + q
  • Mac:⌘ + q

恢复标签页或窗口

如果您无意中关闭了某个标签页或窗口,则可以使用键盘快捷键将其重新打开:

  • Windows 和 Linux:Ctrl + Shift + t
  • Mac:⌘ + Shift + t

强行关闭页面或应用

如果标签页、窗口或扩展程序无法正常运行,您可以使用 Chrome 的任务管理器将其强行关闭。

  1. 点击右上角的“更多”图标 更多
  2. 依次点击更多工具 接着 任务管理器
  3. 选择您要关闭的网页、扩展程序或应用。
  4. 点击结束进程

将 Chrome 设为您的默认浏览器

“开始”菜单

如果您将 Chrome 设为默认浏览器,那么您点击的任何链接都会自动在 Chrome 中打开。

 

将 Chrome 设为您的默认网络浏览器

如果您尚未在计算机上安装 Google Chrome,请先下载并安装 Chrome

Windows 10
  1. 点击计算机上的“开始”菜单 “开始”菜单
  2. 点击“设置”图标 设置
  3. 打开您的默认应用:
    • 原始版本:依次点击“系统”接着 默认应用 。
    • 创作者更新:依次点击“应用”接着 默认应用
  4. 在底部的“网络浏览器”下方,点击您当前使用的浏览器(通常是 Microsoft Edge)。
  5. 在“选择应用”窗口中,点击 Google Chrome

为便于您日后轻松地打开 Chrome,请按照以下步骤将 Chrome 快捷方式添加至您的任务栏:

  1. 在计算机上打开 Chrome。
  2. 在底部的 Windows 任务栏中,右键点击 Chrome。
  3. 点击固定到任务栏
Windows 8 及更低版本
  1. 点击计算机上的“开始”菜单 “开始”菜单
  2. 点击控制面板
  3. 依次点击程序 接着 默认程序 接着 设置默认程序
  4. 在左侧列表中选择 Google Chrome
  5. 点击将此程序设置为默认值
  6. 点击确定
Mac
  1. 在计算机上打开 Chrome。
  2. 点击右上角的“更多”图标 更多
  3. 点击设置
  4. 在“默认浏览器”部分中,点击将 Google Chrome 浏览器设为默认浏览器
    • 如果您看不到此按钮,则表明 Google Chrome 已是您的默认浏览器。

导入书签和设置

您可以切换浏览器,同时不会丢失您的设置和为您喜爱的网站添加的所有书签。您的设置可能会包含以下信息,具体取决于您使用的浏览器:

  • 浏览记录
  • 默认主页
  • 书签
  • 默认搜索引擎
  • 已保存的密码

将书签添加到 Chrome

要从大多数浏览器(如 Firefox、Internet Explorer 和 Safari)导入书签,请按以下步骤操作:

  1. 在计算机上打开 Chrome。
  2. 点击右上角的“更多”图标 更多
  3. 依次选择书签 接着 导入书签和设置
  4. 选择包含待导入书签的程序。
  5. 点击导入
  6. 点击完成
  1. 打开 Chrome。
  2. 转到 google.com/bookmarks
  3. 使用您登录 Google 工具栏时所用的 Google 帐号登录。
  4. 在左侧,点击导出书签。您的书签就会以 HTML 文件格式下载到您的计算机上。
  5. 点击右上角的“更多”图标 更多
  6. 依次选择书签 接着 导入书签和设置
  7. 从下拉菜单中选择以前导出的书签(HTML 文件)
  8. 选择选择文件

从其他所有浏览器导入书签

  1. 在您的计算机上,将书签从浏览器中导出为 HTML 文件。
  2. 打开 Chrome。
  3. 点击右上角的“更多”图标 更多
  4. 依次选择书签 接着 导入书签和设置
  5. 从下拉菜单中选择以前导出的书签(HTML 文件)
  6. 选择选择文件

如果您尚未在 Chrome 中创建任何书签,那么这些书签将会显示在书签栏中。

如果您已在 Chrome 中创建了书签,那么这些书签将会显示在名为“已导入”的新文件夹中。

在 Chromebook 上

  1. 打开 Chrome。
  2. 点击右上角的“更多”图标 更多
  3. 依次选择书签 接着 书签管理器
  4. 点击左上角的整理
  5. 从下拉菜单中选择从 HTML 文件导入书签
  6. 上传您保存的 HTML 文件。

打开您的书签

  1. 依次点击右上角的“更多”图标 更多 接着 书签
  2. 如果您已在 Chrome 中创建了书签,请查找名为“已导入”的新文件夹。

详细了解如何保存、查看和修改书签

在所有设备上获取书签

在所有设备上使用同一 Google 帐号登录 Chrome。默认情况下,您的书签将在所有设备上同步。

详细了解如何在所有设备上获取书签

导入的书签将显示在何处

如果 Chrome 中之前没有任何书签,那么导入的书签将显示在书签栏中。

如果 Chrome 中之前已有书签,那么导入的书签将添加到书签栏末尾的“其他书签”文件夹中。

详细了解如何使用书签栏

将书签移动到另一个浏览器

如果您决定使用其他浏览器,则可以导出自己所有的 Chrome 书签。

  1. 在计算机上打开 Chrome。
  2. 点击右上角的“更多”图标 更多
  3. 依次选择书签 接着 书签管理器
  4. 依次点击顶部的“更多”图标 更多 接着 导出书签

Chrome 会将您的书签导出为 HTML 文件。您可以使用此文件将书签导入另一个浏览器。