作为 web 开发人员, 我们在一个节奏非常快的行业中工作, 并且始终掌握最新信息有时是一个挑战. 这就是为什么我相信我们应该充分利用我们所拥有的一切工具来帮助我们保持头脑清醒. 今天, 将介绍十个 Chrome 扩展, 它们旨在优化您的 Web 开发工作流, 希望能让您的工作效率提高一点.
什么是 Chrome 扩展程序?
可以在 Chrome 的开发人员门户网站 https://developer.chrome.com/extensions 上阅读, 扩展是一些小软件程序, 可以定制你的浏览体验. 这可以是任何东西, 从拼写和语法检查器, 检查您的写作键入, 密码管理器, 保存您最喜欢的网站登录细节.
Chrome 可以使用数千种扩展程序, 所有这些扩展程序都可以从 Chrome 网上应用店免费下载. 您可以访问浏览器中的以下链接: Chrome:// extensions / https://www.html.cn/chrome://extensions/ , 检查您当前安装的扩展程序.
为何选择 Chrome?
本文关注的是 Google Chrome 浏览器, 因为它拥有巨大的市场份额(目前占 65%, 且还在增长). 还有许多基于 Chrome 的浏览器支持扩展. 其中包括 Brave,Vivaldi 以及即将推出的 Microsoft Edge. 然而, 我们应该记住, Chrome 并不是唯一的展会, 这里提到的许多扩展都有 Firefox https://addons.mozilla.org/en-US/firefox/ 或 Opera https://addons.opera.com/en/ 版本.
最后, 在深入讨论扩展之前, 花一分钟的时间记住 Chrome 是 Google 发布的专有软件. 我们都知道, 使用谷歌产品会带来隐私问题, 所以不妨去 GitHub 看看 ungoogle -chromium 项目 https://github.com/Eloston/ungoogled-chromium . 顾名思义, 这是 Google Chromium, 没有与谷歌整合.
1. Web 开发人员
我们将从 Swiss army knife 扩展开始. 拥有超过 100 万的用户和 4.5 星的 Chrome 网络商店评级, Web Developer 是必备的. 它在 Chrome 浏览器上添加了一个工具栏按钮, 点击这个按钮, 就会显示出可以在任何网页上使用的大量工具. 它们按类别 (CSS, 表单, 图像等) 进行分组, 允许您禁用 JavaScript, 列出缺少 alt 属性的图像, 调整浏览器窗口大小, 验证页面的 HTML, 查看页面的元标记信息等等.
你可以在这里下载.
2. 您的框架的开发人员工具
如果您正在使用 JavaScript 框架开发应用程序并且您没有使用该框架的开发人员工具, 那么您可能做错了. 让我以 vue 为例进行解释.
如果您有一个需要调试的 Vue 应用程序, 或者您只是想看看幕后发生了什么, 那么您做什么? 检查页面的源代码将显示 Vue 正在呈现的 HTML, 但 Vue 应用程序还有更多内容. 组件的道具, 数据或计算属性怎么样? 或者你的应用程序的状态或路由? 你如何检查这些?
好消息是 vue.js 开发工具可以满足您的需求. 只需安装扩展程序并在运行 Vue 开发版本的页面上打开它, 即可确切了解应用程序中发生的情况.
以下是为三大框架下载开发工具的链接.
● Vue
● React
● Ember
3. Daily 2.0 - Source for Busy Developer
由于我们工作在一个快节奏的行业, 跟上新闻和时事有时可能是一个挑战. 进入 Daily 2.0, 这是一个扩展, 它收集了互联网上最新的 Web 开发和技术文章, 并以吸引人的 masonie 风格显示在新标签页上.
扩展程序易于使用. 当您安装它时, 系统会要求您从一系列您感兴趣的类别中进行选择, 而 Daily 2.0 会对其余类别进行选择. 将鼠标悬停在新标签页的侧栏上可以根据标签和来源过滤 Feed.
你可以在这里得到它.
4. Toggl Button: 生产力和时间跟踪器
如果你是一个忙碌的自由职业者, 如果你是远程工作, 或者你只是需要跟踪你在项目上花费的时间, 那么 Toggl 就适合你.
此扩展程序要求您在使用之前创建帐户. 登录后, 可以使用 Toggl 帐户中存储的所有数据快速轻松地实时跟踪生产力. 它配备了内置的番茄钟计时器, 以及一系列互联网服务 (如 GitHub,Trello 和 Slack) 的集成. 我最喜欢的功能之一是它会在您闲置并且计时器正在运行时弹出通知, 允许您丢弃时间.
Toggl 可以在这里下载.
5. Lighthouse
Lighthouse 是一个开源的, 自动化的工具, 用于提高 Web 页面的性能和质量. 您可以通过 Chrome Web Store 安装它, 或者从 Chrome 60 版本开始, 您可以直接从浏览器的 DevTools 的 audit 选项卡运行它(按 F12 并选择 audit).
打开 Lighthouse 后, 单击 Generate report 并选择要包含哪些审计类别. Lighthouse 将对页面运行所选的审计, 并生成关于页面执行情况的报告. 从那里, 您可以使用失败的审计作为如何改进页面的指示器. 每个审计还包括进一步阅读和潜在修复的链接.
Lighthouse 是由谷歌制作的, 大概和他们的搜索引擎使用相同的排名因子. 这意味着它可以为你提供一些关于如何优化网站的最佳建议.
你可以在这里下载.
6. OneTab
所以情况就是这样. 当你突然遇到意外错误时, 你正在使用你的网络应用程序. 您需要花费几个小时来跟踪修复, 当您完成修复时, 您的浏览器中会打开一大堆标签. 将这些添加到您昨天正在处理的项目的选项卡中, 以及所有那些尚未完全阅读的文章, 很快就会发现自己处于标签混乱状态.
这是 OneTab 扩展可以帮助您重新获得理智的地方. 每当您发现自己有太多标签时, 请单击 OneTab 图标将所有标签转换为列表. 当您需要再次访问选项卡时, 可以单独还原或一次性还原. 如果使用得当, 这个扩展可以提高生产力.
OneTab 可以从这里下载.
7. CSS Peeper
CSS Peeper 将自己称为为设计师量身定制的 CSS 查看器, 它允许您提取 CSS 并构建漂亮的样式指南. 它通过允许您检查页面上任何元素的 CSS 规则并以简单但组织良好的方式呈现所有样式信息来实现此目的. 它还列出了页面的所有颜色和图像, 可以将其复制到剪贴板, 或者只需按一下按钮即可导出.
此扩展比浏览器的内置 Inspect Element 功能更容易使用, 唯一的缺点是您无法动态更改元素的样式.
你可以在这里找到 CSS Peeper.
8. User CSS
此扩展与 CSS Peeper 密切配合, 提供了一种快速简便的方法来添加自定义 CSS 网页. 安装后, 用户 CSS 易于使用 - 您单击扩展图标并在侧面面板中输出您的样式.
此扩展的一个很好的功能是您的自定义 CSS 样式是持久的. 这意味着您还可以使用它永久隐藏您经常访问的网站上令人分心的功能, 例如 Twitter 上的趋势小部件.
您可以在此处下载 User CSS.
9. Web Developer Checklist
一个新项目的实施在最好的时候可能会有压力 - 有很多东西需要记住和协调. 例如, 您是否记得验证网站的 HTML? 你检查了 SEO 吗? 可访问性检查怎么样? 你是通过 Google Page Speed 运行的吗? 名单还在继续.
这是 Web Developer Checklist 扩展可以提供帮助的地方. 它会分析违反最佳做法的网页, 并允许您在将其发送给客户之前发现网站中的问题区域. 该扩展程序是优秀的 WebDevChecklist.com http://webdevchecklist.com/ 的伴侣.
Web Developer Checklist 可以在这里下载.
10. Tampermonkey
用户脚本是一些小型计算机程序, 允许您更改网页的行为. 这些可用于各种任务, 例如根据您的偏好调整网站布局, 为页面添加额外功能或自动执行重复性任务.
Tampermonkey 是一个用户脚本管理器 - 一个扩展, 允许您管理和运行用户脚本, 以及创建自己的脚本. 这是最后一项功能, 它已经在列表中占据了一席之地, 因为您可以使用 Tampermonkey 来简化您的 Web 开发工作流程. 例如, 我最近正在研究一个需要测试的大型表格. 我没有每次手动输入值, 而是编写了一个 Tampermonkey 脚本来为我做这件事, 为我节省了无数的击键次数.
Tampermonkey 可以在这里下载.
结论
在这篇文章中, 我们查看了十个我常用的 Chrome 扩展程序, 以推动您的 Web 开发工作流程. 我希望这给了你一些灵感, 但请记住, 这个清单并非详尽无遗.
来源: http://www.css88.com/top/10523.html