提高您的 Web 开发效率

最后更新于 2020 年 10 月 13 日

如果您喜欢像我一样进行 Web 开发，那么您应该知道在 Web 浏览器中拥有强大的工具以简化您的工作并提高您的工作效率的重要性。 谷歌浏览器和 Chrome 扩展程序的综合产品就是这种情况，它将提高您的网络开发效率。

是的，Firefox 是一款出色的 Web 开发浏览器，而 Firefox 开发者版非常适合 CSS 调试和测试。 然而，Chrome 有一长串工具扩展，它们支持最新的 Web 功能和开发人员工具，使其成为许多 Web 开发人员的最爱，以提高 Web 开发人员的生产力。

Chrome 市场有一些最好的扩展，无论是旧的还是新的，都可以帮助开发人员开发和测试网站或登录页面。 下面，您将了解我建议在您的 Web 开发工具箱中“必备”的一些最佳扩展。

提高 Web 开发效率的 Chrome 扩展程序

标记助手

Tag Assistant 有助于解决各种 Google 标签的安装问题，包括 Google Analytics、Google Tag Manager 等。Tag Assistant 使您能够验证您是否在页面上正确安装了不同的 Google 标签。 只需导航到任何页面，Tag Assistant 就会告诉您存在哪些标签，报告我们发现的任何错误，并提出可以对您的实施进行改进的建议。 大多数 Google 标签都会被检查，包括 Google Analytics、Adwords Conversion Tracking、Google Tag Manager 等。

什么运行

发现运行网站的内容 - 框架、分析工具、WordPress 插件、字体 - 应有尽有。 WhatRuns 扩展程序只需单击一下即可找到您访问的任何网站上使用的技术。 它甚至可以检测到从开发人员工具和广告网络到 WordPress 插件和主题的新的和即将推出的工具和服务。 不仅如此，您还可以关注网站，以便在他们使用新技术或删除现有技术时收到通知。

Vue.js 开发工具

他的名字非常明确。 它是用于调试 Vue.js 应用程序的 Chrome 和 Firefox DevTools 扩展。 它允许您在 Chrome 开发人员工具中检查 Vue.js 组件层次结构。 您将在 Chrome DevTools 中获得一个新选项卡：“Vue”。

React 开发者工具

作为 Vue.js 开发工具，React 开发者工具是开源 React JavaScript 库的 Chrome 和 Firefox 开发工具扩展。 它允许您在 Chrome 开发人员工具中检查 React 组件层次结构。 您将在 Chrome DevTools 中获得两个新选项卡：“组件”和“分析器”。 Components 选项卡显示了在页面上呈现的根 React 组件以及它们最终呈现的子组件。 通过选择三个组件之一，您可以在右侧面板中检查和编辑其当前的道具和状态。 在面包屑中，您可以检查所选组件、创建它的组件、创建该组件的组件等。

JSON 查看器

此扩展可帮助您在浏览器中可视化来自任何网站或 API 请求的 JSON 响应。 它向您介绍了很棒的 JSON 美化体验。 它有许多独特的功能，使它很棒。 它可以帮助开发人员格式化或美化 JSON 并在图形视图中遍历属性。 它有一个友好的交互式图表，表示您的服务器响应或您在图形视图的输入部分提供的 JSON。

META SEO检查员

用于检查网页内的元数据，通常在浏览时不可见。 元数据不仅仅是通常的 HTML 元标记，还有 XFN 标记、各种微格式、最近引入的规范属性、禁止关注链接等。此扩展主要针对需要验证其站点的 HTML 以进行验证的 Web 开发人员遵循网站管理员的 Google 指南，但即使对于通常不可见但可以揭示有趣网站属性的任何页面内容感到好奇的人也是如此。 它还具有打印/导出选项，可让您打印报告或将报告另存为 PDF，或将数据复制/粘贴到您喜欢的工具中。

HTML 样式快速查看器

HTML DOM 元素样式快速查看器。 只需移动鼠标，它就会显示目标的样式。

浏览器

CSSViewer 是一个用于 Chrome 和 Firefox 的简单 CSS 属性查看器。 要启用 CSSViewer，请单击工具栏图标，然后将要检查的任何元素悬停在当前页面中。

字体忍者

从任何网站识别字体、添加书签、试用并购买它们。 它分析字体文件以获得更准确的结果。 滚动任何文本以获取字体名称和 CSS 属性。 主扩展窗口还将显示网站上使用的所有字体的摘要。 您可以获得有关字体的更多信息。 检查有多少款式可用，它们的代工厂和价格。

我喜欢自适应——移动/响应式测试

用于测试响应式网站的工具。 ILOVEADAPTIVE Chrome 扩展程序将一个按钮添加到您的工具栏。 当您单击该按钮时，它将在当前选项卡中打开您所在的 URL。 主要功能包括一次在多个设备上预览 URL、过滤设备、过滤操作系统、更改数量、缩放、显示 ios 面板、切换到横向和纵向。

网络生命力

衡量健康网站的指标。 Web Vitals 是在 Web 上提供出色 UX 的关键质量信号 (https://web.dev/vitals)。 这个扩展测量了 Core Web Vitals，提供了关于加载、交互和布局转换指标的即时反馈。 这与 Chrome 衡量这些指标并报告给其他 Google 工具的方式一致。

页面标尺 Redux

一个 Web Developer\Designer 标尺，用于获得完美的像素尺寸和定位，以测量任何网页上的元素。 Page Ruler Redux 是一个核心的 Web 开发人员和设计人员工具，可让您对 Web 元素进行像素完美的测量。 它专为网站前端开发、网页设计或您可能需要对任何网页元素进行完美像素测量的任何任务而设计。

网格尺

创建网格并轻松测量它们的距离。 它允许您创建垂直和水平网格，Photoshop 风格。 它也有一个标尺来测量网格之间的距离。

概述它

此扩展概述了网页上的每个 HTML 元素，允许您查看元素的边框。 该扩展支持所有彩虹（红色、橙色、黄色、绿色、蓝色、靛蓝和紫罗兰色）颜色。 它还具有在应用轮廓后删除轮廓的功能。

移动浏览器模拟器

在您的桌面上测试移动和响应式网页。 只需单击鼠标即可选择最常见的移动屏幕分辨率。 活动选项卡的页面将在单独的窗口中打开。

好吧，这就是我建议你应该在 Chrome 浏览器中安装的 Chrome 扩展程序列表，以提高你的网络开发效率。 是的，是的……还有其他有用且很酷的扩展，我没有包含在上面的列表中。 但是，当时机成熟时，我将继续探索其他可能会在未来博客中列出的出色扩展。