适用于Web设计和开发的基本Chrome扩展

几年前，最经典的浏览器 网络开发者 是 火狐。 该浏览器具有一系列工具和扩展，因此可以高效，轻松地设计和调试Web。 但是Google浏览器的成功最终使开发人员更喜欢在最常用的浏览器上创建页面。 因此，我们不仅拥有许多出色的工具，而且还可以找到大量的扩展程序，这些扩展程序将帮助我们更准确，更高效地对网站进行编程。

Chrome开发者控制台

Google Chrome浏览器内置了自己的开发者工具。 这些工具就是我们所谓的“开发控制台”，我们可以随时通过按键盘上的F12键来启动它。 同样从“选项”>“更多工具”> 开发人员工具部分 .

如我们所见，此开发人员控制台为我们提供了一系列工具，这些工具在测试和调试任何网站（无论是我们的网站还是在网络上发布）时都非常有用。 在本节中，我们可以找到9个工具，分别位于标签中：

• 安慰 –自动检测网络错误的控制台，以便我们可以快速修复它们。
• 元素 ：显示页面的HTML和CSS，并允许我们即时对其进行修改。
• 来源 ：向我们显示一个表格，其中包含页面上已加载的所有资源。
• 商业网络 ：一个标签，从中可以看到该页面与服务器的所有连接，它下载的所有资源以及加载每个服务器所需的时间。
• 性能 –网​​络性能测试。
• 内存 ：允许您转储内存以进行分析。
• 应用领域 ：允许我们在PC上本地查看由网络创建的所有文件。
• 安保行业 ：允许我们审核网页的安全性。
• Lighthouse –用于识别和修复性能，可访问性和用户体验问题。

它是我们可以找到的最完整的开发人员控制台之一。 但是也很难掌握，因为既然数据是原始数据，我们将不得不更深入地进行更改和基本测试。 并且，因此，有扩展。

扩展以方便网页设计

尽管使用Chrome的开发人员工具，我们几乎可以完成所有工作，但是某些任务却很复杂，并且使我们花费的时间比应有的长。 因此，如果要简化此任务，可以采用以下扩展。 当然，所有这些都是完全免费的。

Window Resizer：在不同屏幕尺寸上测试网络

当我们制作网页时，适应所有类型的屏幕和分辨率非常重要。 无论我们是通过智能手机，平板电脑，超宽屏还是小型笔记本电脑访问它，所有元素都必须正确调整。 由于很可能我们手边没有那么多的屏幕，因此我们能做的最好的就是求助于 窗口大小调整器 延期。

此扩展使我们可以轻松调整浏览器窗口的大小，以模拟垂直和水平的不同分辨率。 我们可以选择默认的分辨率，也可以创建自己的分辨率。 我们甚至可以使用简单的键盘快捷键对其进行更改。

Wappalyzer：深入了解任何网站的技术

网站不再仅用HTML和CSS编写。 如今，页面具有其他语言（例如JavaScript或PHP），这些语言使我们能够创建具有各种内容的动态网站。 此外，他们通常还拥有CMS和一系列第三方脚本和API，可帮助我们进行调整。

如果我们具有编程知识，则可以通过分析标头轻松找到所有信息。 但是，如果我们不想使其复杂化，只需单击一下就可以完成，这要归功于 Wappalyzer 。 通过此扩展，我们可以了解网站使用的框架，CMS以及运行它的服务器。

图书馆嗅探器：Wappalyzer的简单替代方案

图书馆嗅探器 是与前一个扩展非常相似的扩展，因此没有太多要强调的地方。 多亏了它，我们将能够轻松地了解网页所使用的技术，但是我们将以一种更加伪装的方式来实现：从地址栏本身。 在URL的右侧，我们可以看到一个图标，该图标将指示所使用的CMS，以及所包含的框架和第三方服务。

什么字体：您喜欢字体吗？ 找出是什么

每个网站的样式标记之一是字体，即字体。 资料来源。 网页可以让浏览器使用默认字体，或者，如果您想要特定的字体类型，则可以在代码中指定它。 如果我们分析网站的代码，我们可以看到它是否具有指定的来源。 但是，如果我们不想使自己复杂化，最简单的方法是安装 什么字体 ，将自动进行扩展的扩展程序。

Web Developer：用于Web设计的多功能工具栏

通常，Web开发人员需要访问各种功能和工具，以便启用或禁用脚本，或显示或隐藏所有照片。 谢谢 网络开发经理 我们将能够在任何网站的顶部添加开发栏。

在此栏中，我们将能够即时修改页面的HTML和CSS代码。 例如，我们可以更改照片的大小，屏幕的分辨率，甚至停用元素和服务，例如JavaScript，通知甚至cookie。 检查页面在各种情况下的行为至关重要。

代码Cola，“动态”更改CSS

大，小，红色，黑色，白色，居中，对齐……网站的字母和其他元素看起来如何更好？ 我们随时可以使用Chrome开发人员工具进行测试 代号可乐 我们将能够实时“实时”查看页面上任何元素的样式。

此扩展使我们能够更改字体，颜色，样式，甚至文本和已加载到网络上的任何元素的字体，颜色，样式，甚至方向和大小。 所有这些都来自一个非常简单的菜单，这使我们不必在编辑器中修改任何代码。

Web开发人员清单：分析您的网站以遵循良好做法

创建网站是一项漫长而复杂的工作，并且很容易在此过程中犯错。 即使我们多次检查一切正常，也可能会忽略某些内容。 非常感谢 Web开发人员清单 我们将能够在浏览器中添加一个简单的清单，因此，我们可以确保浏览器的每一个重要点都得到满足。

我们将从基本实践中看到，例如检查指向Google优化和SEO任务的链接。 我们可以标记一个接一个地完成的所有任务，因此我们不会错过任何事情。

检查我的链接：链接断开了吗？ 修理它

Google不喜欢链接断开的网站。 这是最常见的定位惩罚之一。 如果我们的网站上有很多链接，并且我们有CMS，则可以使用它来检查所有内容，并找出哪些工作正常或哪些故障。 但是，如果我们不使用CMS，事情就会变得非常复杂。

多亏了 检查我的链接 扩展程序，我们将能够一目了然地看到哪些链接已断开或已停止工作。 因此，我们可以编辑页面以更正它们，或者最好将其删除，从而避免Google的相应制裁。