chrome扩展开发_适用于您的Web开发工作流程的10个顶级Chrome扩展

chrome扩展开发

As web developers we work in a very fast paced industry and staying on top of things can sometimes be a challenge. That’s why I believe we should take full advantage of whatever tools we have at our disposal to help keep our heads above water. Today I’m going to present ten Chrome extensions that are geared to optimizing your web development workflow, hopefully making you that little bit more productive.

作为Web开发人员，我们在一个快速发展的行业中工作，有时保持领先地位可能是一个挑战。 这就是为什么我认为我们应该充分利用我们拥有的任何工具来帮助我们保持头脑清醒。 今天，我将介绍十个Chrome扩展程序，这些扩展程序旨在优化您的Web开发工作流程，以期使您的工作效率提高一点。

什么是Chrome扩展程序？ (What are Chrome Extensions?)

As can be read on Chrome’s developer portal, extensions are small software programs that can customize your browsing experience. This can be anything from a spelling and grammar checker that checks your writing as you type, to a password manager that saves your login details for your favorite sites.

在Chrome的开发人员门户网站上可以看到，扩展程序是可以自定义您的浏览体验的小型软件程序。 从拼写和语法检查器(在您键入时检查您的写作)到密码管理器(可以保存您喜欢的网站的登录详细信息)，这可以是任何东西。

There are literally thousands of extensions available for Chrome, all of which can be downloaded for free from the Chrome Web Store. You can check which extensions you currently have installed by visiting the following link in your browser: chrome://extensions/.

实际上，有数千种可用于Chrome浏览器的扩展程序，所有扩展程序都可以从Chrome网上应用店免费下载。 您可以通过访问浏览器中的以下链接来检查当前已安装的扩展程序： chrome：// extensions / 。

为什么选择Chrome？ (Why Chrome?)

This article focuses on the Google Chrome browser due to its huge market share (currently 65% and rising). There are also many Chrome-based browsers which support extensions. These include Brave, Vivaldi and, coming soon, Microsoft Edge. However, we should remember that Chrome isn’t the only show in town and that many of the extensions mentioned here have a Firefox and/or Opera equivalent.

由于其巨大的市场份额(目前为65％，并且还在不断增长)，本文重点介绍了Google Chrome浏览器。 也有许多基于Chrome的浏览器支持扩展。 其中包括Brave，Vivaldi和即将推出的Microsoft Edge。 但是，我们应该记住，Chrome并不是唯一的展示，并且这里提到的许多扩展都具有Firefox和/或Opera的等效功能。

Finally, before we dive into the extensions, take a minute to remember that Chrome is proprietary software published by Google. As we all know, there are privacy concerns associated with using Google products, so maybe head over to GitHub and check out the ungoogled-chromium project instead. As the name suggests, this is Google Chromium, sans integration with Google.

最后，在我们深入研究这些扩展之前，请花一点时间记住Chrome是Google发布的专有软件。 众所周知， 使用Google产品存在隐私方面的隐忧 ，因此也许可以转到GitHub并查看ungoogled-chromium项目 。 顾名思义，这是Google Chromium，没有与Google集成。

1. Web开发人员 (1. Web Developer)

We’ll start off with the Swiss Army knife of extensions. With over 1 million users and a 4.5 star rating on the Chrome Web Store, Web Developer is something of a must have. It adds a toolbar button to Chrome which, when clicked, displays a plethora of tools that can be used on any web page. These are grouped by category (CSS, forms, images etc) and allow you to do such things as disable JavaScript, outline images with missing alt attributes, resize the browser window, validate a page’s HTML, view a page’s meta tag information and much more.

我们将从扩展瑞士军刀开始。 拥有超过100万的用户，并且在Chrome网上应用店中获得4.5星评级，Web Developer是必不可少的。 它在Chrome中添加了一个工具栏按钮，单击该按钮可显示可在任何网页上使用的大量工具。 这些按类别(CSS，表单，图像等)分组，并允许您执行以下操作：禁用JavaScript，为缺少alt属性的图像添加轮廓，调整浏览器窗口的大小，验证页面HTML，查看页面的元标记信息等等。 。

You can download it here.

您可以在此处下载 。

2.您的框架的开发人员工具 (2. Your Framework’s Developer Tools)

If you’re developing an app with a JavaScript framework and you’re not using that framework’s developer tools, then you’re probably doing it wrong. Let me explain using Vue as an example.

如果您正在使用JavaScript框架开发应用程序，并且未使用该框架的开发人员工具，那么您可能做错了。 让我以Vue为例进行说明。

If you have a Vue app which you need to debug, or you just want to see what’s going on under the hood, then what do you do? Inspecting the page’s source will show you the HTML that Vue is rendering, but there is much more to a Vue app than that. What about a component’s props, data or computed properties? Or your app’s state or routing? How do you inspect any of those?

如果您有需要调试的Vue应用程序，或者只想了解引擎盖下发生了什么，那么您该怎么办？ 检查页面的源代码将向您显示Vue正在呈现HTML，但是Vue应用程序的功能远远不止于此。 组件的道具，数据或计算属性如何？ 还是您应用的状态或路由？ 您如何检查其中任何一个？

The good news is that the Vue.js dev tools have you covered. Simply install the extension and open it up on a page running a development build of Vue to see exactly what is happening in your app.

好消息是您已经了解了Vue.js开发工具。 只需安装扩展程序，然后在运行Vue开发版本的页面上将其打开，即可查看您的应用程序中发生了什么。

Here are links to download the dev tools for the big three frameworks.

这里是下载三大框架的开发工具的链接。

• Vue

  Vue

• React

  React

• Ember

  余烬

3. Daily 2.0 –繁忙的开发人员资料 (3. Daily 2.0 – Source for Busy Developer)

As we work in a fast paced industry, keeping up with news and goings on can sometimes be a challenge. Enter Daily 2.0, an extension that gathers the latest web development and tech posts from around the internet and presents them in an attractive masonry-style lay out on your new tab page.

当我们在快速发展的行业中工作时，紧跟新闻和最新动态有时可能是一个挑战。 输入Daily 2.0，这是一个扩展，可以从Internet上收集最新的Web开发和技术文章，并在新标签页上以引人入胜的砌体样式显示它们。

The extension is easy to use. When you install it you are asked to pick from a bunch of categories that interest you and Daily 2.0 does the rest. Hovering over the sidebar on the new tab page allows you to filter your feed based on tags and sources.

该扩展程序易于使用。 安装后，系统会要求您从您感兴趣的类别中进行选择，Daily 2.0将完成其余的工作。 将鼠标悬停在新标签页的侧边栏上，即可根据标签和来源过滤供稿。

You can get it here.

你可以在这里得到 。

4.切换按钮：生产力和时间跟踪器 (4. Toggl Button: Productivity & Time Tracker)

If you’re a busy freelancer, if you work remotely, or if you just need to track the time you’re spending on a project, then Toggl is for you.

如果您是一个忙碌的自由职业者，如果您是远程工作，或者只需要跟踪花费在项目上的时间，那么Toggl非常适合您。

This extension requires you to create an account before you can use it. Once you’re logged in it enables quick and easy real time productivity tracking with all the data stored in your Toggl account. It comes with a built-in Pomodoro timer, as well as integrations for a whole host of internet services (such as GitHub, Trello and Slack). One of my favorite features is that it will pop up a notification when you’ve been idle and the timer was running, allowing you to discard the time.

此扩展程序要求您创建一个帐户，然后才能使用它。 登录后，它可以使用存储在Toggl帐户中的所有数据快速，轻松地实时跟踪生产力。 它带有内置的Pomodoro计时器，以及与整个Internet服务(例如GitHub，Trello和Slack)的集成。 我最喜欢的功能之一是，当您闲置且计时器正在运行时，它将弹出一个通知，使您可以舍弃时间。

Toggl can be downloaded here.

Toggl可以在这里下载 。

5.灯塔 (5. Lighthouse)

Lighthouse is an open-source, automated tool for improving the performance and quality of your web pages. You can either install it via the Chrome Web Store or, as of Chrome version 60, you can run it directly from the Audits tab of the browser’s DevTools (press F12 and select Audits).

Lighthouse是一个开放源代码的自动化工具，用于改善网页的性能和质量。 您可以通过Chrome网上应用店安装它，也可以从Chrome 60版开始，直接从浏览器的DevTools的“ 审核”标签中运行它(按F12并选择审核 )。

Once you have opened Lighthouse, click Generate report and optionally select which audit categories to include. Lighthouse will run the selected audits against the page, and generate a report on how well the page did. From there, you can use the failing audits as indicators of how to improve the page. Each audit also includes links to further reading and potential fixes.

打开Lighthouse之后，单击Generate report ，然后选择要包括的审核类别。 Lighthouse将对页面进行选定的审核，并生成有关页面效果的报告。 从那里，您可以将失败的审核用作改进页面的指示。 每次审核还包括指向进一步阅读和潜在修补程序的链接。

Lighthouse is produced by Google, and presumably uses the same ranking factors as their search engine. This means it can offer you some of the best advice out there on how to optimize your site.

Lighthouse是由Google生产的，大概使用与其搜索引擎相同的排名因子。 这意味着它可以为您提供有关如何优化网站的一些最佳建议。

You can grab it here.

你可以在这里抓住它 。

6. OneTab (6. OneTab)

So here’s the situation. You’re working on your web app when suddenly you run up against an unexpected bug. You spend a couple of hours tracking down a fix and by the time you’re finished, you have a whole bunch of tabs open in your browser. Add those to the tabs from the project you were working on yesterday, as well as all those articles you haven’t quite got round to reading yet, and pretty soon you find yourself in tab chaos.

这就是这种情况。 当您突然遇到意外错误时，您正在使用Web应用程序。 您花了几个小时来跟踪修复程序，到完成时，您已经在浏览器中打开了很多选项卡。 将这些内容添加到您昨天从事的项目的选项卡中，以及尚未完全阅读的所有那些文章中，很快您就会陷入混乱。

This is where the OneTab extension can help you regain a measure of sanity. Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once. Used properly, this extension can give you quite the productivity boost.

这是OneTab扩展程序可以帮助您恢复理智的地方。 每当发现自己的标签过多时，请单击OneTab图标将所有标签转换为列表。 当您需要再次访问这些选项卡时，可以单独或一次全部还原它们。 正确使用此扩展程序可以大大提高您的生产率。

OneTab can be downloaded from here.

可以从此处下载 OneTab。

7. CSS窥视器 (7. CSS Peeper)

CSS Peeper bills itself as a CSS viewer tailored to designers, which allows you to extract CSS and build beautiful style guides. It does this by allowing you to inspect the CSS rules for any element on a page and presenting all of the style information in a simplistic, yet well-organized manner. It also lists all of a page’s colors and images, which can be copied to your clipboard, or exported at the touch of a button.

CSS Peeper自称是为设计师量身定制CSS查看器，可让您提取CSS并构建漂亮的样式指南。 为此，您可以检查页面上任何元素CSS规则，并以一种简单而井井有条的方式显示所有样式信息。 它还列出了页面的所有颜色和图像，可以将其复制到剪贴板中，也可以通过触摸按钮将其导出。

This extension is considerably easier to use than the browser’s built-in Inspect Element functionality, the only downside is that you cannot change an element’s styles on the fly.

该扩展程序比浏览器内置的Inspect Element功能更易于使用，唯一的缺点是您不能即时更改元素的样式。

You can find CSS Peeper here.

您可以在此处找到CSS Peeper 。

8.用户CSS (8. User CSS)

This extension goes hand in glove with CSS Peeper, offering a quick and easy way to add custom CSS a web page. Once installed, User CSS is easy to use — you click the extensions icon and enter your styles in the side panel that slides out.

此扩展与CSS Peeper紧密结合，提供了一种快速简便的方法来添加自定义CSS网页。 安装后，用户CSS易于使用-单击扩展图标，然后在滑出的侧面板中输入样式。

One nice feature of this extension is that your custom CSS styles are persisted. This means you can also use it to permanently hide distracting features on websites you frequent, for example, the trending widget on Twitter.

此扩展的一个不错的功能是可以保留您的自定义CSS样式。 这意味着您还可以使用它永久隐藏您经常访问的网站上分散注意力的功能，例如Twitter上的趋势控件。

You can download User CSS here.

您可以在此处下载User CSS 。

9. Web开发人员清单 (9. Web Developer Checklist)

Going live with a new project can be stressful at the best of times — there are a whole bunch of things to remember and coordinate. For example, did you remember to validate the site’s HTML? Did you check the SEO? What about accessibility checks? Did you run it through Google Page Speed? The list goes on.

在最佳情况下，开展一个新项目可能会带来很大压力-需要记住和协调很多事情。 例如，您还记得验证站点HTML吗？ 您检查了SEO吗？ 可访问性检查如何？ 您是否通过Google Page Speed运行它？ 清单继续。

This is where the Web Developer Checklist extension can help. It analyses a web page for violations of best practices and allows you to discover problem areas in your website before you hand it off to your client. The extension is a companion to the excellent WebDevChecklist.com.

这是Web Developer Checklist扩展可以提供帮助的地方。 它会分析网页中是否存在最佳做法，并允许您在将网站移交给客户之前发现网站中的问题区域。 该扩展是出色的WebDevChecklist.com的伴侣。

Web Developer Checklist can be downloaded here.

Web Developer Checklist可以在这里下载 。

10.坦佩猴 (10. Tampermonkey)

Userscripts are little computer programs that allow you to alter the behavior of a web page. These can be used for a variety of tasks, such as tweaking a site’s layout to your preferences, adding extra functionality to a page, or automating repetitive tasks.

用户脚本是很小的计算机程序，可让您更改网页的行为。 这些可用于各种任务，例如根据您的喜好调整网站的布局，为页面添加额外的功能或自动执行重复性任务。

Tampermonkey is a userscript manager — an extension that allows you to manage and run userscripts, as well as create your own. And it’s this last capability that has earned it a place on the list, as you can use Tampermonkey to great effect to streamline your web development workflow. For example, I was recently working on a large form which I needed to test. Instead of manually entering the values every time, I wrote a Tampermonkey script to do that for me, saving me countless keystrokes.

Tampermonkey是一个用户脚本管理器，它是一个扩展，可让您管理和运行用户脚本以及创建自己的脚本。 正是这最后一项功能使其名列前茅，因为您可以使用Tampermonkey来极大地简化Web开发工作流程。 例如，我最近正在处理需要测试的大型表格。 我没有每次都手动输入值，而是编写了Tampermonkey脚本来为我执行此操作，从而节省了无数次击键。

Tampermonkey can be found here.

Tampermonkey可以在这里找到 。

结论 (Conclusion)

In this post we have looked at ten of my favorite Chrome extensions to boost your web development workflow. I hope this has given you some inspiration, but please remember that this list is by no means exhaustive.

在这篇文章中，我们研究了十个我最喜欢的Chrome扩展程序，它们可以改善您的Web开发工作流程。 我希望这能给您一些启发，但是请记住，此列表绝不是详尽无遗的。

If I’ve missed your favorite extension, or you have a gem to share with other readers, I’d be glad to hear from you in the comments below.

如果我错过了您最喜欢的扩展程序，或者您想与其他读者分享您的瑰宝，我很高兴在下面的评论中收到您的来信。

Thanks for reading.

谢谢阅读。

翻译自: https://www.sitepoint.com/10-top-chrome-extensions-for-your-web-development-workflow/

chrome扩展开发