你的Chrome DevTools的简单指南[+一步一步的说明]

如果你的编码知识有限，你可能会看一看开发人员的工具，然后想，“不。”

我不怪你。

几年前，我很少使用devtools是因为我不小心按下了键盘上的某个东西。我会疯狂地寻找“X”图标，认为我迟早会弄坏电脑上的某个东西。然后，当我找到“X”时，我松了一口气，就好像有一个秘密的倒计时在滴答作响。

作为背景，我从事戏剧工作多年，所以我总是倾向于戏剧。

Chrome DevTools并通过一些步骤来优化你的网站。

什么是开发人员工具?

开发人员工具(通常称为devtools)允许您在影响用户界面的浏览器上检查、测试和调试代码。营销人员、SEO专家和设计师也可以使用devtools来测试改变和优化他们的网页。

在我们进入如何使用Chrome DevTools之前，让我们先介绍一些你应该知道的事情:

• HTML, CCS和JavaScript在浏览器上运行，所以它们是你将在Chrome开发工具上工作的三种语言。
• 任何人都可以使用浏览器开发工具并操作代码。然而，这些更改只会出现在您的浏览器上，一旦您刷新页面就会消失。浏览器开发工具可以帮助您确定需要进行哪些更改。要使这些更改永久性，您必须访问后端上的代码。

1.右键单击检查页面。

右键单击要检查的网页。作为快捷键，你也可以在Mac上按“Command+Option+C”，或者在Windows、Linux和Chrome OS上按“Control+Shift+C”。然后，点击“Inspect”。

2.Chrome DevTools窗口将打开。

通过点击屏幕顶部的选项卡来浏览每个面板。跳转到本节关于顶级devtools的概述。

3.单击每个选项卡来访问这些工具。

一旦你完成了使用Chrome DevTools，你可以通过点击位于窗口右上角的“X”符号关闭它。

如何使用Chrome开发工具没有编码经验

大多数web浏览器都有自己的开发工具包，并且在特性上有很多重叠。在Chrome DevTools上，以下是最主要的功能:

• 一个设备预览测试你的网页的响应式设计
• 一个JavaScript调试器识别和修复bug
• 网络面板跟踪和分析页面请求
• 一个检查工具对样式进行更改，如字体、间距、颜色、页边距
• 一个控制台识别页面错误和警告
• performance面板检查您的网站性能，如页面速度

这里有一些使用Chrome开发工具的方法。

使用移动Chrome开发工具测试响应式设计。

Chrome DevTools上的切换设备工具栏可以让你看到你的网页在各种设备上的外观，包括iPhone模型，ipad和笔记本电脑。如果某个特定设备没有出现在列表中，您甚至可以添加自定义维度。

在最初的web开发阶段或重新设计阶段，该工具栏可以帮助您的团队可视化页面在不同视图上的呈现方式。

它可以特别有用来评估用户体验在你的页面。

例如，你的数据告诉你，用户在手机上花在博客上的时间比在台式机上花的时间少一半。当你比较一篇手机版和台式机版的文章时，你可能会发现文章的段落太长太大，给你带来负面的阅读体验。

简单的解决方法是写更短的段落，添加更多的视觉效果来分解文本。

使用相同的工具栏，您还可以测试使用较慢连接的用户对页面加载的体验。

“没有节流”意味着连接上没有中断。中低端移动设备将花费更长的时间来显示页面上的所有元素。如果完全脱机，就会看到“no internet”错误代码。

为什么这个有用?你希望你的用户在你的网站上有一个积极的体验，不管他们是谁。通过查看页面的加载方式，您可以确定需要改进的地方。

测量并优化站点速度。

对于这一步，我们将使用灯塔，这是一个开源谷歌产品，评估网页性能并提供改进机会。你可以在Chrome DevTools上运行它来测试从网站速度、搜索引擎优化到移动和桌面访问性的一切。

页面速度在你的排名中扮演着重要的角色，在进行SEO审核时，页面速度应该是最优先的。

使用灯塔来检查你的页面速度，参考上面的图片。选择“性能”和您想要测试的任何设备。然后，点击“生成报告”。一旦结果显示出来，关注“速度指数”。

良好或快速的速度指数是在0到4.3秒之间。中度地震会在4。4到5。8秒之间。如果您的索引超过5.8秒，那么您的页面会比较慢，需要进行一些修复以提高页面速度。

当你向下滚动时，另一个需要注意的部分是“机会”，这将列出降低页面加载速度的方法。

除了影响你的SEO，页面速度也会导致高跳出率。如果您想减少页面加载时间，Lighthouse工具是一个很好的起点。

预览您的设计更改。

如果你的团队想要在你的网站上可视化某些美学变化，一个快速而简单的方法就是使用检查器工具来操作代码。

开始，点击“Inspect”工具。

然后，将鼠标悬停在页面上的任何元素上，以获得页面样式的详细信息。

要更改样式，请选择要编辑的元素。“元素”面板将跳转到该元素的HTML和CSS代码。“样式”标签是你想要关注的。

下面是一个如何改变文本颜色的例子。

运行搜索引擎优化审计。

每个品牌都希望在搜索引擎上排名，因为这意味着接触到更多的人，给你的网站带来更多的流量。

为了确保你的网站保持在一个较高的位置，进行定期审计，捕捉任何可能导致你的页面排名下降的东西。使用Chrome DevTools，你可以运行一个审计灯塔，以检查什么可能会影响你的排名。

首先，单击Lighthouse选项卡。在类别和你想关注的设备下选择“SEO”。然后，点击“生成报告”。

报告将向您展示您成功的审计和改进的机会。

虽然这个搜索引擎优化审计不是全面的，但它是一个快速了解网站搜索引擎优化性能的好地方。

监控您的谷歌分析请求。

如果你在谷歌Analytics上追踪你的网站和营销活动，你最不想看到的就是肮脏的数据。

使用Chrome DevTools，你可以监控谷歌Analytics的请求，看看他们是否在Analytics Dashboard上正确报告。这样做可以确保您收集准确的数据，并帮助您识别错误。

以下是步骤:

1. 点击“网络”标签。
2. 加载网页。
3. 找到谷歌分析请求，它们总是以“__utm.gif”开始
4. 点击请求查看请求中包含了什么信息。

一旦你知道在哪里查看，Chrome开发工具可以非常容易使用。虽然一些编码知识是有帮助的，但这并不是成功使用该工具的必要条件。

最初发布于2021年4月11日早上7:00:00，更新于2021年4月12日