大家好，我叫CUGGZ。今天分享50个超级实用的Chrome浏览器扩展！JSON1,JSONViewerProJSONViewerPro用于可视化JSON文件。其核心功能包括：支持格式化JSON数据并使用属性或图表展示。使用痕迹导航深入了解JSON属性。在输入区域写入自定义JSON。导入本地JSON文件。使用上下文菜单下载JSON文件。网址过滤器。改变主题。自定义CSS。复制属性和值。输入界面如下：格式化后：2.JSONVueJSONVue是一个JSON数据查看器，主要用于格式化JSON数据：网站技术3.库Sniffer库Sniffer是开发者的工具，可以检测当前网页使用的URL类库、框架和服务器环境为开发人员提供了便利。4.WappalyzerWappalyzer扩展可用于识别网站背后的底层技术。通过此扩展，可以查明特定应用程序是否是用React、Vue、Angular、PHP等编写的。还提供对有关Web服务器、编程语言、框架、内容管理系统、分析工具、数据库的信息的访问，和更多。5.WhatRunsWhatRuns扩展程序只需单击一下即可找到任何网站上使用的技术。开发调试6.WellDoneCode的PerfectPixel使用PerfectPixel插件将设计图加载到网页中，并与形成的网页进行对比，帮助开发者和设计者规范网页的像素精度。这是一个可以优化前端页面显示的Chrome扩展。7.ClearCache你可以使用这个扩展快速清除缓存，无需任何确认对话框、弹窗等。清除的数据和数量可以在选项页面自定义，包括：applicationcache,cache,cookies,downloads、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和WebSQL。8.VisBugVisBug是一种使用JavaScript构建的开源网页设计调试工具，允许用户使用点击和拖放界面查看网站元素。9.DebugCSSDebugCSS是一个帮助调试CSS的插件。他可以显示页面元素的轮播，按住Ctrl，将鼠标悬停在元素上可以查看它的信息：10.CSSViewerCSSViewer是一个高效的网络开发者Chrome扩展。顾名思义，CSSViewer可以显示您在任何网页上悬停的元素的CSS属性。11.EditThisCookieEditThisCookie是一个cookie管理器。可以添加、删除、编辑、搜索、锁定和阻止cookie。12.ReactDeveloperToolsReactDeveloperTools是开源JavaScript库React的ChromeDevTools扩展。它允许我们在ChromeDevTools中检查React组件层次结构。安装此插件后，您将在ChromeDevTools中获得两个新选项卡：“??Components”和“??Profiler”：Components选项卡显示页面上渲染的根React组件，以及它们最终渲染的子组件。Profiler选项卡用于记录性能信息。13、Vue.jsdevtoolsVue.jsdevtools是一款基于chrome浏览器调试Vue.js应用的插件，可以大大提高开发者的调试效率。支持用户分析调试DOM结构数据结构。14.AuguryAugury可以帮助开发者在GoogleChrome浏览器中调试分析Angular应用。15.FirebugLiteforGoogleChromeFirebugLite是Firefox浏览器中著名的开发者工具firebug插件移植到Chrome的插件。在Chrome中安装FirebugLite插件后，开发者可以像在Firefox浏览器中使用firebug一样熟悉调试网页内容的方式，包含基本的HTML、CSS和Javascript调试功能，帮助网页前端开发工程师快速调试调试网页，及时发现和修复网页中的BUG。16.HTMLValidatorHTMLValidator将HTMLValidator添加到Chrome的开发者工具中。HTML页面的错误数在浏览器状态栏中以图标显示，详细信息可在浏览器的开发者工具中查看。17.WebDeveloperWebDeveloper扩展为带有各种Web开发工具的浏览器添加了一个工具栏按钮。该扩展适用于Chrome和Firefox，并将在这些浏览器支持的任何平台上运行，包括Windows、macOS和Linux。18、RequestlyRequestly是Chrome和Firefox的浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。19.WindowResizerWindowResizer主要用于调整浏览器窗口的大小，以模拟各种屏幕分辨率。20.ResponsiveViewerResponsiveViewer是一个Chrome扩展，可以在一个视图中显示多个屏幕。此扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。21.MoesifOrigin&CORSChanger该插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖RequestOrigin标头并将Access-Control-Allow-Origin设置为*。22.ColorPickEyedropperColorPickEyedropper是一个放大的吸管和颜色选择器工具，可以让你从网页等中选择颜色值。23.CSSPeeperCSSPeeper是一个优秀的检查和复制元素样式的工具。使用CSSPeeper，您可以将鼠标悬停在网页中的任意元素上，然后点击鼠标复制该元素的样式。24.DimensionsDimensions是一个Chrome页面元素测量插件，可以帮助用户测量网页上各种元素属性之间的距离。点击启动插件图标后，插件可以测量图片、输入框、按钮以及测量视频、上下左右等页面元素的方向和大小。同时，您可以通过快捷键快速启用或禁用插件功能，简单实用。25.SitePaletteSitePalette用于生成一个调色板。设计师和前端开发人员的必备工具。您可以使用此插件轻松获得网站的配色方案。26.ColorZillaColorZilla是一款强大的网页颜色提取工具；它也是一个用于快速调整颜色的Chrome插件。很多用户称这款软件为吸色插件。它提取的颜色非常多样。它还可以生成css颜色代码等。Eyedropper-获取页面上任何像素或区域的颜色。类似于Photoshop和PaintShopPro中的高级颜色选择器。WebColorAnalyzer-分析任何网页上的DOM元素颜色以找到相应的元素。终极CSS渐变生成器。带有7个预装调色板的调色板查看器。颜色历史最近选择的颜色。显示标签名称、类别、数量、尺寸等元素信息。光标下的轮廓元素。自动将生成或采样的颜色以CSSRGB、Hex和其他格式复制到剪贴板。使用键盘快速采样页面颜色的键盘快捷键。Font27、WhatFont当我们要查看网页中文字的字体时，最常用的方法是在控制台中查看文字的字体样式。有更容易的方法吗？WhatFont是一个用于查看网络字体的Chrome扩展。只需单击扩展图标，然后单击以文本形式查看：28.字体NinjaFontsNinja可以识别字体，添加书签，可以从任何网站试用和购买。选项卡29，BrowserStack使用BrowserStack快速启动扩展在任何浏览器中启动新的测试会话。最多可设置12个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。30、TobyToby是Chrome的新标签页工具，可以在新标签页中对未读标签页进行分组显示，从而可以关闭所有未读标签页。分组相当于多个Chrome窗口。将你的标签拖入Toby，这样你就不需要实时打开它们来占用空间。31.daily.dev这个扩展提供每日流行的开发者新闻，无需浪费时间寻找高质量的文章。32.MomentumMomentum全新精美标签页，每天更新精彩背景壁纸图片，可设置每日新鲜事物的焦点和跟踪待办事项，无广告，无弹窗。33.TheGreatSuspenderTheGreatSuspender是一个轻量级扩展，用于减少Chrome的内存占用。如果同时打开多个选项卡，未查看的选项卡将在一段可配置的时间后自动挂起在后台，释放该选项卡占用的内存和CPU。34、SessionBuddySessionBuddy是一款Chrome插件，可以帮助用户查看、添加、编辑当前网站的Session状态。用户可以使用该插件保存网站当前状态，以便在关闭Chrome或关闭电脑后恢复，从而节省内存。Github35，OctotreeOctotree旨在让GitHub体验更好。通常，为了检查Github中的子文件夹，您需要手动单击文件夹并导航。Octotree扩展解决了这个问题。此扩展在项目的左侧显示了存储库的目录结构，这有助于更好地理解文件夹结构。1_EKF88oqIyX6FzgueCKdtXg.gif36,FileIconsforGitHubandGitLabGitHub和GitLab的文件图标可以用特定文件类型的图标替换GitHub和GitLab上的原始文件图标。Web测试37.axDevToolsaxDevTools是一种快速、轻量级但功能强大的测试工具，由axe-core提供支持，axe-core是世界上最受信任的可访问性测试引擎，由Deque开发。使用axDevTools在网站开发过程中查找并修复更多可访问性问题。38.OctoLinkerOctoLinker可以将特定于语言的语句（例如include、require或import）转换为链接。当打开一个包含多个导入语句的文件并想快速打开它时，只需将鼠标悬停在链接文件上并单击即可打开它。39.WebDeveloperChecklist这个扩展可以帮助Web开发人员分析网页是否违反了最佳实践。40.CheckMyLinksCheckMyLinks是一个链接检查器，可以抓取网络并找到损坏的链接。41.CheckbotCheckbot是一种用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它创建一个报告，总结所有导致某种警告或错误的链接。42.PageSpeedInsightsGooglePageSpeedInsights是一款旨在优化所有设备上的网页并提高网页加载速度的工具。43.MetaSEOInspectorMETASEOinspector是一款GoogleChrome插件，可以帮助用户分析网页的元信息，得到SEO评价。PrivacyAds44.GhosteryGhostery是一个强大的隐私保护扩展。主要有以下功能：广告拦截：Ghostery内置的广告拦截工具，可以去除网页上的广告，让网页不再杂乱无章，让你专注于想看的内容。保护您的隐私：使用Ghostery查看和阻止您浏览的网站上的跟踪器，并控制哪些跟踪器收集数据。增强的反跟踪功能还可以匿名化数据以进一步保护隐私。提高浏览速度：Ghostery的智能阻止功能会自动阻止和取消阻止跟踪器以满足页面质量标准、加快页面加载并优化页面性能。45.AdBlockAdBlock用于阻止YouTube、Facebook、Twitch和其他您喜欢的网站上的广告和弹出窗口。效率利器46、番茄钟（Pomodoro?）时间管理助手。?短时和长时休息?带倒计时显示的工具栏图标?跟踪番茄钟历史和统计数据?可配置的长时休息间隔?可配置的计时器持续时间?桌面和新标签通知?超过20种声音效果可供选择声音通知?计时器秒针移动声音。47.LoomLoom可以用来快速录制视频，并将录制的视频上传到指定的网页。Loom还支持在用户点击启动插件时立即抓取屏幕图像，同时开始录像，还可以将录制的视频上传，将视频复制到剪贴板进行存储。48、GoFullPageGoFullPage是一款全屏截图插件（整个网页的截图），可以完整截取你当前页面的屏幕，进行滚动截图，无需任何额外权限。点击扩展图标，它将被转移到屏幕截图的新标签页，在那里它可以作为图像或PDF下载，甚至可以简单地拖动，保存到您的桌面。49.BetterViewerBetterViewer可以提供更好的图片查看体验，旨在取代基于Chrome浏览器的内置图片查看模式。使用时，只需在页面上右击图片，选择“在新标签页中打开图片”即可。50.svg-grabbersvg-grabber是一个快速预览和获取网站所有svg的工具。可用于预览、下载和复制站点中所有SVG图标和插图的代码。
