您的Chrome开发工具简单指南[+逐步说明]

如果您的编码知识有限，您可能会看一看开发人员工具并思考，“不。"

我不怪你。

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

就上下文而言，我做了多年的戏剧，所以我总是倾向于戏剧。

事实证明，devtools并不像看上去那么可怕。虽然它们是为开发人员设计的，但营销人员、设计师和其他非开发人员也可以使用它们来运行审计和测试网站更改。

让我们介绍一下使用的各种方法镀铬工具并通过一些步骤来优化您的网站。

什么是开发工具？

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

在我们了解如何使用Chrome开发工具之前，让我们先介绍一些您应该知道的事情：

• HTML、CCS和JavaScript在浏览器上运行，因此它们是您将在Chrome开发者工具上使用的三种语言。
• 任何人都可以使用浏览器开发工具来操作代码. 但是，更改只会显示在浏览器上，并且在刷新页面后消失。浏览器开发工具可帮助您确定需要进行哪些更改。要使这些更改永久化，您必须访问后端的代码。

1.右键单击以查看页面。

右键单击要检查的网页。作为快捷方式，您还可以在Mac上按“Command+Option+C”，或在Windows、Linux和Chrome操作系统上按“Control+Shift+C”。然后，单击“检查”

2.Chrome DevTools窗口将打开。

通过单击屏幕顶部的选项卡来导航每个面板。跳到这一部分有关顶级开发工具的概述。

3.单击每个选项卡以访问工具。

使用Chrome开发工具完成后，可以通过单击窗口右上角的“X”符号来关闭它。

如何在没有编码经验的情况下使用Chrome开发者工具

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

• 设备预览测试网页的响应性设计
• JavaScript调试器识别并修复错误
• 网络面板跟踪和分析页面请求的步骤
• 检查工具更改样式的步骤，例如字体、间距、颜色、边距
• 控制台识别页面错误和警告的步骤
• A p执行小组检查您的网站性能，如页面速度

下面是一些使用Chrome开发者工具的方法。

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

Chrome DevTools上的“切换设备”工具栏允许您查看网页在各种设备上的外观，包括iPhone型号、iPad和笔记本电脑。如果列表中没有特定设备，您甚至可以添加自定义尺寸。

在初始web开发阶段或重新设计期间，此工具栏可以帮助您的团队可视化页面在不同视口中的呈现方式。

评估风险尤其有用用户体验在你的页面上。

例如，假设你的数据告诉你，在手机上，用户花在你博客上的时间比在桌面上的时间少一半。当你比较手机和桌面上的一篇文章时，你可能会发现这些段落太长太大，造成了负面的阅读体验。

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

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

“无节流”表示连接没有中断。从中端到低端的手机显示页面上的所有元素需要更长的时间。如果您完全脱机，您将看到“无internet”错误代码。

这为什么有用？你希望你的用户在你的网站上有一个积极的体验，无论他们的连接。通过查看页面加载情况，您可以确定需要改进的地方。

测量并优化你的网站速度。

对于此步骤，我们将使用灯塔，这是一款开源的谷歌产品，可评估网页性能并提供改进机会。你可以在ChromeDevTools上运行它来测试一切，从网站速度和SEO到移动和桌面上的可访问性。

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

要使用Lighthouse检查页面速度，请参阅上图。选择“性能”和要测试的设备。然后，点击“生成报告”。结果显示后，关注“速度指数”

好的或快的速度索引介于0到4.3秒之间。中等的速度索引介于4.4到5.8秒之间。如果索引超过5.8秒，则页面速度较慢，需要进行一些修复以提高页面速度。

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

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

预览您的设计更改。

如果您的团队希望可视化某些美学变化在您的网站上的外观，那么一种快速简便的方法是使用inspector工具来操作代码。

要开始，请单击“检查”工具。

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

要更改样式，请选择要编辑的图元。“元素”面板将跳转到该元素的HTML和CSS代码。“样式”选项卡是您想要关注的内容。

下面是一个如何更改文本颜色的示例。

运行搜索引擎优化审计。

每个品牌都想在搜索引擎上排名，因为这意味着接触更多的人，获得更多的网站流量。

为了确保您的网站保持较高的排名，请定期进行审核，以发现任何可能导致您的页面排名下降的内容。使用ChromeDevTools，您可以对Lighthouse进行审计，以检查哪些因素可能会影响您的排名。

要开始，请单击灯塔选项卡。在类别和您想关注的设备下选择“SEO”。然后，单击“生成报告”

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

虽然这个SEO审计并不全面，但它是一个快速了解站点SEO性能的好地方。

监控您的谷歌分析请求。

如果你在Google Analytics上跟踪你的网站和营销活动，你最不想要的就是脏数据。

使用ChromeDevTools，您可以监视来自Google Analytics的请求，并查看它们是否在Analytics仪表板上正确报告。这样做将确保您收集准确的数据，并帮助您识别错误。

以下是步骤：

1. 单击“网络”选项卡。
2. 加载你的网页。
3. 如果要查找Google Analytics请求，它们将始终以“\uuutm.gif”开头
4. 单击请求以查看请求中包含哪些信息。

一旦你知道该去哪里看，Chrome开发者工具就会非常容易使用。虽然一些编码知识是有帮助的，但没有必要成功使用该工具。