每个 WordPress Web 开发人员的最佳 Google Chrome 扩展程序

谷歌浏览器并不是第一个进入这个领域的网络浏览器,尽管多年来竞争者越来越多,但它仍然保持着最受欢迎的称号.

Chrome 自 2008 年问世以来,稳居榜首,随后轻松超越了曾经占据主导地位的 Mozilla Firefox 和 Microsoft Internet Explorer(后者在鼎盛时期的市场份额高达 90% 以上).

即使是顽固的 Foxophiles 和 Gate(s)keepers——目前仅占浏览器市场总和的 5%——也早已转向金属 maven.无论是从台式机还是移动设备上冲浪,Chrome 绝对是几乎所有国家/地区最常用的浏览器.

Most popular browsers 2021 graph
Chrome 的巨大受欢迎程度远远超过所有其他可用的浏览器.资料来源:Gs.statcounter.com

作为网络开发人员,您希望确保您设计的内容能够适应任何设备或浏览器.作为最常用的浏览器,Google Chrome 应该排在该列表的顶部.

除了将 Chrome 用作浏览器测试的一部分之外,它还有助于使用专为网络开发人员创建的工具(或扩展程序).

为此,我们整理了一份方便的 Chrome 网络开发者扩展列表,我们认为这些扩展程序确实通过了测试.继续阅读以了解它们是什么,或使用下面的跳转链接转到任何部分.

然后我们开始……

开发者天堂

除了将 Chrome 用作浏览器测试的一部分之外,它还有助于专门为 Chrome 网络开发人员创建的工具/扩展程序.

WordPress 开发人员知道 CMS 本身有多么强大,但您可以直接从 Chrome 浏览器通过一些贴心的扩展程序提高开发工作流程的效率.

Chrome 可以通过一键安装(或卸载,对于您决定不使用的任何设备)轻松完成这项工作.您还可以在浏览器栏中固定任何内容,以便快速轻松地访问.

那么让我们开始吧,深入研究最适合网络开发者的 Google Chrome 扩展程序.

博客和写作

WordPress 管理栏控制

WP admin bar

如果您曾经被 WordPress 管理栏困扰,当您尝试查看您网站的前端(有时它会阻止您希望在预览帖子时能够查看的网站重要组件) ,我们感觉到你.

这个扩展做了一件简单的事情,但它做得很好.当您单击地址栏旁边的图标时,您可以隐藏管理栏.这是一种无需退出或打开隐身窗口即可查看遗漏内容的超快速方法.

不要让近期更新的缺失吓跑您.它完全按照它应该做的,正如俗话说的……如果它没有坏,就不要修理它.

WordPress 站点管理器

WP site manager

此 Chrome 扩展程序将存储您的 WordPress 网站信息,并允许快速轻松地访问您网站的主页.它还通过将 WordPress 主题编辑器转变为 CodeMirror 编辑器来为它提供更多功能.

一旦您输入登录信息,您就可以使用 WordPress 站点管理器扩展访问您存储的站点.您可以编辑主页、向网络添加网站、调整主题和其他基本更改.

所有可用的更改都整齐地排列在页面上,以便快速进行编辑和修改.

语法

Grammarly

Grammarly 是我们迷恋的一种扩展.它不仅可以准确地帮助您识别拼写错误(带有红色下划线),还可以指出语法错误(带有绿色下划线).

最有用的功能是当您将鼠标悬停在相关单词上时,它可以方便地显示更正建议.只需点击您要使用的建议,它就会自动替换原始文本或标点符号.

它不仅适用于 WordPress 帖子.它适用于您可以输入文本的任何地方,因此可以轻而易举地改进您的文案、页面、产品甚至电子邮件.

如果您想访问高级更正和写作改进,可以使用高级订阅,它扩展到 Chrome 之外.

造型和设计

ColorZilla

ColorZilla

您是否去过一个网站,您会立即被阴影调色板所吸引? ColorZilla 可让您在当前访问的网站上轻松找到任何颜色的十六进制代码.

ColorZilla 拥有超过 500 万次下载和 130 万用户,是最流行的 Google Chrome 扩展程序之一.尽管自 2016 年以来没有更新,但它仍然像冠军一样工作.

您所要做的就是抓住吸管图标,将鼠标悬停在颜色上,然后点击它以生成颜色代码.

ColorZilla 具有多种颜色工具,可满足您的任何需求,包括:吸管、颜色选择器、调色板查看器和渐变生成器.

字体忍者

Fonts Ninja

Fonts Ninja 可以识别来自任何网站的字体,所以您不用担心,WTF? ("那是什么字体?"😊)

他们拥有专有算法,可以分析字体文件以获得更准确的结果,而且最近的更新也显着提高了处理速度.

滚动任何文本以获取字体名称和 CSS 属性.主扩展窗口还将显示网站上使用的所有字体的摘要.您还可以获得有关字体的更多信息,例如有多少种可用的样式、它们的代工厂和价格(如果可以购买).

您甚至可以为字体添加书签,并在扩展程序中管理它们.

提供了高级版本.它允许 macOS/Windows 应用程序安装您在网站上发现的字体的试用版,然后您可以在任何软件中使用这些字体.

二维码生成器

QR Code Generator

二维码生成器超级好用,评价很高.

一键快速将您当前的页面转换为二维码.您可以即时从自由文本和 URL 生成二维码.

主要功能包括自动暗模式、能够将二维码下载为图像、能够创建带有徽标的自定义二维码、热键支持等.

由于开发人员将原始 URL 转换为二维码,并且其中不包含任何第三方材料,因此您创建的任何二维码都将永久有效/永不过期.(更重要的是,安全,因为它们不会跟踪您的数据或流量.)

QR code generator, generated
使用二维码生成器.来吧——扫描它!

Nimbus

Nimbus capture

Nimbus 截图 & Screen Video Recorder 是一款非常有用且用途广泛的工具.

使用 Nimbus Capture 截取屏幕截图-整个网页或屏幕的任何部分.录制整个桌面或浏览器选项卡的视频,或使用网络摄像头创建视频.使用全套编辑工具进行注释、裁剪、添加绘图、箭头、贴纸或突出显示文本.

这个扩展提供了大量的选项.这里只是一些:

  • 支持滚动&捕获屏幕截图
  • 录制另一个活动程序的视频,或来自网络摄像头的视频屏幕
  • 自定义视频屏幕分辨率和帧速率
  • 修剪和裁剪屏幕截图和视频
  • 分享屏幕截图并获得可共享的链接
  • 将屏幕截图发送到 Slack,或上传到 Google Drive 和 Google Classroom
  • 将截图保存为 PDF

考虑到您可以用它做的所有事情,免费版本感觉很好.但是,他们还提供付费版本(大约每月一杯高档咖啡的价格),其中增加了更多功能,例如添加您自己的水印,以及将 WebM 转换为 MP4 和 GIF.

Page Ruler Redux

Page Ruler Redux

Page Ruler Redux 是一个核心的 Web 开发人员扩展程序和设计器工具,可让您对 Web 元素进行像素完美的测量,以用于网站前端开发、Web 设计或任何需要精确像素测量的任务.

>

此扩展程序还允许您调整标尺大小,并调整颜色以在深色和浅色网站上实现完美对比.

WordPress 主题检测器和插件检测器

Word Theme & Plugin Detector

WordPress 主题检测器和插件检测器可以检测您当前正在查看的网站上已安装的 WordPress 主题和 WordPress 插件.

此扩展程序非常快,因为它使用开发人员自己的服务器端 API,而不是您的浏览器.

如果您从扩展程序图标下拉菜单中点击使用的主题/显示更多,您将看到使用检测到的主题的其他网站的示例,包括子主题(如果有的话)

WP theme & plugin detector, 2
NASA 的博客使用 WP 流行的二十六主题,以及许多其他网站.

WordPress Theme Detector 和 Plugin Detector 扩展汇集了一系列示例(如上所示).

另一个很酷的小功能:使用扩展程序时,它的图标在检测到 WordPress 网站时变为蓝色,如果没有则变为灰色.

生产力和组织

体式

Asana

Asana 用户很高兴.您现在可以在任何 Chrome 网站上扩展 Asana 的常用功能,进一步提高您的工作效率.

您可以在浏览网页的同时添加任务,甚至可以将您正在查看的网站作为任务输入.这还不是全部——您可以分配团队成员、工作区和描述.它是帮助您保持井井有条并专注于您的任务的完美工具.

Evernote Web Clipper

Evernote

如果您是 Evernote 的狂热用户,那么还有一个让您欢呼的理由.使用 Evernote Web Clipper 扩展程序,您可以将整个网页或简化的剪辑保存到您选择的笔记本中.

您还可以注释您的选择或截取完整屏幕截图.这是跟踪您的想法和灵感的好方法.

Toggl Track

Toggle Track

Toggl Track 扩展程序将计时器放入任何网络工具中,允许快速、实时地跟踪生产力,并将所有数据存储在您的 Toggl 帐户中.

无论您是使用 Trello、Slack、Asana、Todoist、Jira、Notion 还是 100 多种集成工具之一,无需打开新标签即可开始跟踪时间.Toggl Track 计时器现在还可以通过自动提醒满足您的番茄钟需求.

一个标签

OneTab

我们都经历过……你发现自己打开的标签太多,混乱变得混乱、模糊文本并耗尽内存.

OneTab 的解决方案?最多可节省 95% 的内存并减少标签混乱.只需单击扩展图标即可将所有选项卡转换为列表.当您需要再次访问这些选项卡时,您可以单独恢复它们,也可以一次性全部恢复它们.

他们还提供隐私保证,声明有关您的选项卡的信息绝不会传输或披露给 OneTab 开发人员.

HubSpot 销售

Hubspot Sales

超过 80 万客户对此扩展程序赞不绝口,Hubspot Sales 是广受欢迎且非常有用的 Chrome 扩展程序.

安排电子邮件、跟踪打开和使用 Hubspot 的销售生产力工具点击、将消息从 CRM 记录到 Gmail,并与您的团队共享电子邮件模板.您还可以预订会议,会议将通过您的 Google 日历同步.它甚至有移动应用程序,适用于 iOS 和安卓.

您需要一个 Hubspot 帐户才能使用该扩展程序,但可以免费获得.还有一个付费版本,它增加了自动个人外展的功能,并增加了对模板、会议安排、电子邮件跟踪等的限制.

这组特殊的工具构成了公司的"销售中心".它是一个更大的 CRM 平台套件中的一个,Hubspot 将其分为多个类别(例如营销、服务、运营等),每个类别都有自己的集成和相关费用.

有关设置 & 的一些重要原则、实践和技巧使用 Hubspot,从我们的会员论坛中查看这些文章:为什么 &如何知道您发送的电子邮件是否已打开,以及使用 Hubspot 的电子邮件扩展程序来增加您的销售额和改进流程.

网站性能

SimilarWeb

Similar Web

Similarweb 是一款极具竞争力的终极数字情报工具,可以 360 度全方位了解您的行业、竞争对手和客户.

访问任何网站的流量和关键指标,包括参与率、流量排名、关键字排名和流量来源.

Similarweb 扩展程序直接从您的浏览器工具栏为您提供了类似 web.com 的全部内容.只需单击一下,您就可以获得所访问的任何网站的深入统计数据.

需要注意的是,并非整个互联网上的所有站点都存储在 SimilarWeb 的数据库中,因此如果您刚开始或目前没有很多页面浏览量,您可能看不到您站点的统计信息.

app.telemetry

App.telemetry

App.telemetry 安装后,通过在浏览器中单击其图标,可以轻松快速地测试您网站的速度.通过为您列出的类别以及总加载时间,您可以准确了解可以提高网站速度的哪些方面.

其页面速度监视器根据 W3C 导航时间显示页面加载期间每个步骤的偏移量和持续时间.访问页面后,您会在状态栏中看到加载时间,点击即可获得详细信息.

您可以看到的一些类别包括重定向、缓存、DNS 查找和加载事件.虽然它不显示详细的统计信息,但如果您需要一种在开发过程中快速检查网站进度的方法,这是一个很好的解决方案.

网络开发者核对清单

Web Developer Checklist

Toptal 的 Web Developer Google Chrome 扩展程序是对开发者最有用的工具之一,可分析和检查您的网页是否有任何严重违反网页设计最佳做法的情况.

它寻找 SEO、可用性、可访问性和性能(页面速度)等.

打开 SEO 统计数据

Open SEO Stats

打开 SEO 统计(以前称为 PageRank 状态),当您在浏览器中单击其按钮时,它会显示 Alexa、Google、Compete 和 Quantcast 的页面排名,从而帮助您了解自己在互联网上的位置.

它还能够显示WHOIS信息,以及在搜索引擎(包括谷歌、必应和雅虎)中编入索引的页面数量.

此外,它还显示缓存统计信息(Archive.org、Google),以及获取有关反向链接、社交、地理 IP 位置等的信息.

如果您选择高级帐户,则可以解锁更多有用的功能.

Ubersuggest – SEO 和关键字创意 >

Ubersuggest

Ubersuggest 提供了一种快速了解您正在浏览的网站的 SEO 及其排名的关键字的方法.

安装后,转到 Google、YouTube 或 Amazon,然后执行搜索.您将在那里看到有关关键字和搜索词的数据.在您搜索的任何给定关键字上,点击搜索栏旁边的"查看全部"以访问更多关键字和 SEO 见解.

Ubersuggest SEO 扩展也有图表和趋势、反向链接数据、相关关键词、"人们也在搜索"、趋势和趋势.长尾关键字,以及自定义您的位置和语言.

灯塔

Lighthouse

虽然 WMPU DEV 的 SmartCrawl 在评估您网站的性能方面更为彻底,但您可能想知道其他一些第三方网站的平均性能.这就是 Lighthouse 开发者扩展程序派上用场的地方.

在审核页面时,Lighthouse 会对其进行一系列测试,然后生成有关页面表现的报告.在这里,您可以将失败的测试用作指示您可以采取哪些措施来改进您的应用.

只需安装插件,点击它的图标,它就会通过 Lighthouse 自动开始分析.

Tag Assistant for Conversions Beta(由 Google 提供) )

Tag Assistant for Conversions Beta

Tag Assistant for Conversions Beta 版可帮助验证您用于衡量 Google Ads 转化情况的网站实施情况.

Tag Assistant 使您能够通过模拟广告点击、到达您的网站、浏览网站并最终转化来逐步完成整个用户旅程.

分步指南将突出显示潜在问题或错误配置,并最终让您知道何时正确记录了转换.

WordPress 开发

WordPress.org 插件 SVN 链接

WP Plugins SVN Link

这不是典型的扩展程序-浏览器顶部没有显示按钮.相反,会为 WordPress 插件目录中的页面显示一个按钮.

安装此扩展后,在通常的下载按钮下方,您还会看到一个 SVN 存储库按钮.点击后,您将能够直接查看插件的代码.

在决定下载插件之前,您将能够深入了解代码的质量.您将有机会在安装插件之前捕获膨胀或恶意代码,帮助您在灾难发生之前避免灾难.

MySQL 管理员

My SQL Admin

此 Google Chrome 开发者扩展程序可让您更轻松地管理 MySQL 数据库.它为您提供了 MySQL 服务器的管理 GUI,类似于 phpMyAdmin、Sequel Pro.

MySQL 管理功能包括:

  • 连接MySQL服务器(4.1或更高版本),使用SSL连接MySQL服务器,通过SSH2端口转发连接MySQL服务器
  • 显示已连接服务器的统计信息和进程列表(自动刷新)、表列表和所选表的行
  • 创建和删除表,插入和更新行
  • 导出数据库

链接重定向跟踪

Link Redirect Trace

Link Redirect Trace 旨在取代所有其他"部分解决方案"扩展,并且是一体化的重定向路径分析器,可为您提供每个重定向的全貌——HTTP 标头、Rel-Canonicals、robots.txt、链接权力、信任和风险分析.

对链接、重定向和 REL 规范进行高级、全面且最重要的正确分析.使用此扩展程序进行 SEO 分析、页内 SEO、页外 SEO、竞争对手分析等.

在安装另一个 Chrome 扩展程序之前,请注意此功能可能已包含在您已经使用的 SEO 工具或 WordPress 插件中.

CSS Peeper

CSS Peeper

以简单、组织良好的方式检查样式,&使用 CSS Peeper 的美妙方式.

CSS Peeper 是为设计师量身打造的 Chrome CSS 扩展查看器,让您可以专注于设计而不是挖掘代码.

需要知道网站上的行高、字体或按钮大小吗?使用此扩展程序轻松检查 Web 上对象、颜色和资产的隐藏 CSS 样式.

网络开发人员

Web Developer

拥有近 100 万用户和 4.5 星评级,可以肯定地说,Web Developer 是 Google Chrome 最适合网络开发者的扩展程序之一.

由 Chris Pedrick 开发,此扩展程序添加了一个小工具栏,其中包含与图像、信息、调整大小、表单等相关的各种 Web 开发人员工具.

发条

Clockwork

Clockwork 为 PHP 开发人员提供了一套开发工具.它提供了一个新面板,其中包含调试和分析 PHP 脚本所需的所有信息,包括请求数据、应用程序日志、数据库查询、路由和应用程序运行时的可视化.

Clockwork 使用服务器端组件收集所有相关数据并轻松与任何 PHP 项目集成.它支持基于 Laravel、Slim 2 和 CodeIgniter 2.1 的应用程序.

XDebug Helper

XDebug Helper

此 Google Chrome 扩展程序有助于调试、分析和跟踪 PHP 代码,而无需费力处理 POST/GET 变量或 cookie.

XDebug Helper 对于使用支持 Xdebug 的 PHP 工具(如 PHPStorm、Eclipse 与 PDT、Netbeans 和 MacGDBp)或任何其他与 Xdebug 兼容的分析工具(如 KCacheGrind、WinCacheGrind 或 Webgrind)的 PHP 开发人员非常有用.

重要提示:您需要处于开发者模式(在 chrome 上://extensions/页面)才能正常工作.

不要担心显示的上次更新(2016 年).最近 2021 年 7 月的 WP 评论是 5 星级评论,我们同意-它仍然很棒.

Wappalyzer

Wappalyzer

Wappalyzer 是 Elbert Alias 于 2009 年开发的工具,是一款 Google Chrome 扩展程序,可让开发人员识别构成网站后端的各种技术.

Wappalyzer 是一个开源的跨平台实用程序,能够检测 1000 多种技术,包括内容管理系统、电子商务平台、网络框架、服务器软件、分析工具等.

窗口调整器

Window Resizer

多亏了 Google 的移动优先索引计划,开发人员现在比以往任何时候都更重要的是测试网站的响应式设计-这就是 Window Resizer 的用武之地.

此 Google Chrome 扩展程序会调整浏览器窗口的大小,以便您可以根据各种分辨率测试您的响应式设计.提供了最常见的屏幕尺寸(适用于笔记本电脑、台式机和移动设备),但您也可以输入自己自定义的窗口尺寸.

标签调整大小

Tab Resize

你只有两只眼睛,难免会注视同一个地方.即便如此,在多个窗口之间拆分屏幕通常非常有用,无论是复制内容还是学习教程.使用此扩展程序,您可以将屏幕拆分为四个窗口,或者垂直和水平两个窗口.

它还具有"空标签"选项,它会自动创建其他空标签,或者"单个标签",它只会更改当前标签.将 CURRENT 选项卡和向右的选项卡调整为单独窗口上的布局.

通过多显示器支持,Tab Resize 使分屏变得容易.

我们为开发者推荐的最佳 chrome 扩展程序列表到此结束.

没有像 Chr(H)ome 那样的地方

考虑到 Google Chrome 浏览器的广泛使用和流行,再加上其易用性、速度、可靠性以及扩展程序和主题形式的大量工具选择,将其作为您的浏览器是明智的选择发展.

十多年来,Chrome 一直忙于为 Web 开发人员提供大量最好的 chrome 扩展——从最基本和通用的设计到开发工具,适用于那些面向编程语言(如 HTML、PHP、CSS 等)的工具.

这里有无限可能……构建适合您个人工作流程的收藏.值得一提的是,其中一些扩展程序要求您输入个人信息,例如您网站的登录信息.虽然我们在使用这些扩展程序的免费版本时没有遇到任何问题,但在提供个人凭据之前请务必谨慎行事.

如果您正在寻找有关此主题的更多好读物,请查看这些其他文章:

对持续学习的渴望和可供您使用的杀手级工具包,磨练您的开发人员技能可能是无限的.作为 WPMU DEV 成员,Lucas Ondata Marketing,请说:您将拥有令人羡慕的"为与网站打交道的英雄的实用腰带".

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论