有哪些好用的谷歌浏览器插件,谷歌浏览器插件开发教程

浏览器是开发人员最强大的工具。 99% 的人不会 100% 地利用他们的浏览器。这里有 30 个浏览器扩展，如果你能合理充分利用将大大提升你的开发效率。

1. WhatFont

"WhatFont"，是一款帮助用户快速识别网页中字体信息的工具。

当你在浏览网页时，如果看到了一款你喜欢的字体，但不知道具体是什么字体，那么这时候使用 WhatFont 就非常方便了。安装好插件后，在浏览网页时，只需将鼠标移动到感兴趣的字体上，WhatFont 就会立即显示出该字体的详细信息，包括字体名称、大小、颜色等等。

此外，WhatFont 还可以识别字体的变形和阴影效果，并且支持在 Google Fonts 和 Typekit 上搜索字体，方便用户在设计网页时挑选字体。

总的来说，WhatFont 是一款非常实用的工具，可以帮助用户识别网页中的字体信息，方便用户在自己的设计工作中使用。

***/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

2.WhatRuns

这个谷歌插件名为"WhatRuns"，它是一款用于帮助用户快速了解一个网站使用了哪些技术、框架和库的工具。使用该插件，用户只需访问一个网站，然后点击"WhatRuns"插件的图标，即可获得该网站使用的技术列表，这包括：

1. 服务器信息：Web服务器、主机、IP地址、DNS记录等
2. 编程语言：该网站使用的编程语言（例如，Java、PHP、Python、Ruby等）
3. 前端框架：该网站使用的前端框架，例如React、Vue.js等
4. CMS：如果网站使用了一种内容管理系统，那么WhatRuns插件也可以帮助用户识别出来
5. Javascript库：该网站使用的Javascript库（例如jQuery、AngularJS等）
6. Fonts：该网站使用的字体名称以及字体来源

此外，WhatRuns插件还提供了一个代码查看器，用于查看网站的源代码，并且还可以查看页面的http header和页面截图。

总之，WhatRuns是一个功能强大且易于使用的工具，可以帮助网页开发人员快速了解网站的技术栈，也可以帮助其他人在学习过程中更好地了解网站的技术。

***/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en

3. Web Developer

"Web Developer"，它是一款功能强大的工具，为开发人员和网站管理员提供了各种网页开发和设计工具，以提高其工作效率。使用该插件，用户可以在浏览网页时快速检查页面的各种属性，例如HTML、CSS和Javascript代码等等，同时提供了一系列调试工具，可以帮助用户诊断和修复网页的问题。

以下是该插件提供的一些功能：

1. 检查和编辑页面元素：可以查看页面的HTML和CSS，并通过可视化界面轻松编辑和调整页面元素。
2. 改变页面样式：可以轻松更改页面的CSS属性，以查看不同样式的页面。
3. 重置CSS：可以通过单击按钮轻松重置页面的CSS，以帮助您更好地了解它的样式。
4. 调试Javascript：提供了一组调试工具，例如调试器、断点、控制台、Javascript错误窗口等，以帮助您诊断和修复Javascript错误。
5. 检查网站性能：提供了一组性能分析工具，以帮助您检查网站的速度、加载时间等性能指标。
6. 显示图像信息：可以查看页面中所有图像的详细信息，包括大小、格式、分辨率等。
7. 检查网页响应：可以检查页面在不同分辨率下的显示效果，以确保您的网站对所有用户都能够适当地响应。

总之，Web Developer是一个功能强大、易于使用的工具，它可以帮助开发人员和网站管理员在网页设计和开发的过程中更加高效、准确地完成各种任务，并且可以帮助他们诊断和修复网页的问题，以提高网站的质量和性能。

***/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

4. Daily.dev

这个谷歌插件名为 "Daily.dev – News for Busy Developers"，它提供了一个聚合技术博客和新闻的平台，以帮助忙碌的开发人员随时了解最新的技术动态和趋势。

这个插件的主要功能是提供一个方便的入口，让用户可以轻松地获取来自各种博客和新闻网站的最新技术文章。这些文章是由社区推荐和筛选的，确保了它们的质量和可读性。

插件支持多种主题，包括前端开发、后端开发、数据科学、人工智能、云计算等等。用户可以根据自己的兴趣和需求，选择自己感兴趣的主题，以获取相关的文章和新闻。

除此之外，插件还提供了一些额外的功能，例如在 Chrome 的新标签页中显示最新文章和新闻、保存和分享感兴趣的文章等等。这些功能可以提高用户的生产力，同时让用户可以更轻松地跟上最新的技术趋势。

***/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied

5. JSONView

"JSONView"，它是一个用于在浏览器中查看和分析 JSON 数据的工具。

通常情况下，当我们在开发或测试网络应用程序时，我们需要查看网络请求返回的 JSON 数据，以便了解应用程序的运行情况和分析数据。而浏览器默认提供的 JSON 数据显示方式通常是不够友好的，难以直观地查看和分析。

JSONView 就是为了解决这个问题而设计的。这个插件会自动检测浏览器中返回的 JSON 数据，并将其格式化成易于阅读的格式，例如层级缩进、颜色区分等等。这使得用户可以更容易地查看和理解 JSON 数据。

此外，JSONView 还支持将 JSON 数据保存到本地，并提供了一些其他有用的功能，例如将 JSON 数据复制到剪贴板、展开或折叠 JSON 数据等等。这些功能可以提高用户的生产力，并让用户更轻松地分析和处理 JSON 数据。

总之，JSONView 是一个非常实用的工具，可以大大提高开发人员在浏览器中分析和处理 JSON 数据的效率。

***/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en

6. Window Resizer

这个谷歌插件名为 Window Resizer，主要用于在开发和设计过程中调整浏览器窗口的大小，以便更好地测试和预览不同分辨率的网页和应用程序。它可以轻松地调整浏览器窗口大小和分辨率，使开发人员和设计师能够快速测试网站在各种不同分辨率和设备上的外观和功能。

此插件支持自定义浏览器窗口大小和分辨率，允许用户添加自己的自定义尺寸。用户可以选择从多个预设尺寸中选择，例如各种桌面和移动设备的尺寸，以及全屏和自定义尺寸。

该插件非常易于使用，并且可以在工具栏中轻松访问。用户可以通过单击插件图标来打开插件，选择所需的尺寸，然后单击应用即可立即更改窗口大小。Window Resizer 还具有快捷键和选项，可根据需要进行配置。

***/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

7. JSONLite

json-lite是一个用于浏览JSON数据的Chrome扩展程序。它提供了一个直观的用户界面，使用户能够轻松地查看和分析JSON数据。该扩展程序支持将JSON数据解析为树形结构，同时还提供了语法高亮和格式化选项。此外，它还支持将JSON数据复制到剪贴板，以便进一步处理。用户可以通过直接在Chrome浏览器中打开json文件或在Web应用程序中访问JSON数据来使用此扩展程序。总之，json-lite是一个非常实用的工具，可以帮助用户更好地了解和处理JSON数据。

8. Responsive Viewer

Responsive Viewer，它可以帮助开发人员和设计师在浏览器中预览网站的响应式设计，以检查网站在不同设备和分辨率下的外观和布局。

该插件提供了一个简单的工具栏，其中包含常见的移动和桌面设备分辨率的选项，例如 iPhone、iPad、Android、MacBook Pro 等。用户可以在这些选项中选择一个设备，并在浏览器中呈现网站以查看它在选定设备上的外观和行为。此外，用户还可以自定义分辨率和屏幕方向，并将其保存为自定义选项以供以后使用。

使用 Responsive Viewer 可以帮助开发人员和设计师在不同设备和分辨率下快速测试网站的响应式布局和设计，并且可以节省时间和努力。

***/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en

9. BrowserStack

这个Chrome插件是BrowserStack提供的，它是一款基于云的跨浏览器测试平台。该插件允许用户在Chrome浏览器中直接访问BrowserStack的测试工具，而无需离开浏览器或打开其他应用程序。这个插件可以帮助网站和应用程序开发人员快速测试他们的产品在各种浏览器和设备上的兼容性。

具体来说，这个插件可以让用户轻松地模拟各种不同的浏览器和设备环境，包括各种桌面浏览器（如Chrome，Firefox，Safari和IE）以及移动设备和平板电脑。用户只需在Chrome浏览器中点击一下，即可在BrowserStack的云平台上运行测试，从而确保他们的产品在各种设备和浏览器上的正常运行。

此外，该插件还具有实时调试功能，允许开发人员在测试过程中快速发现并修复问题。它还支持本地测试，并提供自动化测试的功能。总之，这个插件可以帮助开发人员更快地测试和调试他们的产品，并确保产品在各种浏览器和设备上都能正常运行。

***/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb?hl=en

10. Awesome Screenshot

Awesome Screenshot and Screen Recorder 是一款可以让用户在Chrome浏览器上截屏、录制视频和做标记。这款插件可用于创建演示文稿、教程和文档，方便用户与团队、客户和其他利益相关方共享。

使用该插件，用户可以在网页上截取整个屏幕、可见的窗口、选定区域或选择元素，并使用画笔、文本框、箭头、形状等工具对其进行标记、注释和编辑。另外，该插件还提供屏幕录制功能，用户可以录制整个屏幕、选定区域或单个窗口，并进行编辑和导出。

使用Awesome Screenshot，用户可以将截图和录制的视频保存到本地硬盘或云存储服务（如Google Drive、Dropbox、Box等），也可以将其分享到社交媒体或邮件中。此外，该插件还支持在截图和录制的视频上添加水印和文本。

Awesome Screenshot是一款功能强大的浏览器插件，适用于个人和企业用户，可以提高工作效率和团队协作。

***/webstore/detail/awesome-screenshot-and-sc/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en

结束

由于篇幅和时间问题，今天的内容就分享到这里，剩下的20个我将在接下来的文章里进行介绍，敬请期待。在你的日常开发中，别忘记尝试下些 Chrome 插件。如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。