家好,我是 Echa。
今天来分享 50 个超实用的 Chrome 浏览器扩展!
JSON Viewer Pro 用于可视化JSON文件。其核心功能包括:
输入界面如下:
格式化之后:
JSONVue 是一个JSON数据查看器,主要用来格式化JSON数据:
Library Sniffer 是一款给开发者使用的工具,能够探测当前网页所使用的类库、框架和服务器环境,为开发者提供了方便。
Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展,可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。
WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。
使用PerfectPixel插件可以将设计图加载至网页中,与已成型的网页进行重叠对比,以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。
可以使用此扩展程序快速清除缓存,无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量,包括:应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。
VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具,它可以让用户使用点击式和拖放式界面来查看网站的元素。
Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播,按住Ctrl,并将鼠标悬浮在元素上,即可查看其信息:
CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义,CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。
EditThisCookie 是一个 cookie 管理器。可以添加,删除,编辑,搜索,锁定和屏蔽cookies。
React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后,将在 Chrome DevTools 中获得两个新选项卡:"⚛️ Components" 和 "⚛️ Profiler":
Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件,可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。
Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件,在Chrome中安装了Firebug Lite插件以后,开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容,其包含了基本的HTML、CSS以及Javascript的调试功能,用于帮助网页前端开发工程师快速地调试网页,以便及时地找到网页中的BUG并及时修复。
HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示,详细信息可以在浏览器的开发者工具中查看。
Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox,并且可以在这些浏览器支持的任何平台上运行,包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox浏览器插件,提供URL转发、修改HTTP请求和结果、插入脚本等功能。
Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。
此插件允许直接从浏览器发送跨域请求,而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头,并将 Access-Control-Allow-Origin 设置为 *.
ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具,可让从网页等中选择颜色值。
CSS Peeper 用于检查和复制元素样式的优秀工具,使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上,然后单击鼠标即可复制元素的样式。
24. Dimensions
Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件,该插件在点击启动插件图标后,可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量,同时还可以通过使用快捷键来快速启用或关闭该插件的功能,简单实用。
Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。
ColorZilla 是一款功能强大地提取网页色彩的工具;也是个快速的对颜色进行调节的Chrome插件,许多的用户将这款软件称呼为颜色吸取插件,它提取的颜色是非常的多样化,还可生产css颜色的代码等。
当我们想查看网页中文字的字体时,最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢?WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标,再点需要查看为文字即可:
Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。
使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。
Toby 是一款 Chrome 新标签页工具,能够将未读的标签页分组显示在新标签页中,这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口,将你的标签页都拖进 Toby 中,就不需要实时开着占地方了。
该扩展提供了每日热门开发者新闻,不需要再浪费时间搜索高质量的文章了。
Momentum 拥有漂亮的新标签页面,每日更新精彩背景壁纸图片,可设置每日新鲜事焦点以及跟踪待办事项,无广告,无弹窗。
The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡,在可配置的时间之后未查看的选项卡将在后台自动挂起,从而释放该选项卡消耗的内存和 CPU。
Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复,从而达到节省内存的作用。
Octotree 旨在让 GitHub 体验更好。通常,为了检查 Github 中的子文件夹,需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构,这有助于更好地理解文件夹结构。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。
ax DevTools 是一个快速、轻量级但功能强大的测试工具,由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。
OctoLinker 可以将特定语言的语句(如 include、require 或 import)转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时,只需将鼠标悬停在链接的文件上并单击即可打开。
此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。
Check My Links 是一个链接检查器,它可以抓取网页并查找损坏的链接。
Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告,该报告汇总了引起某种警告或错误的所有链接。
Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。
Ghostery 是强大的隐私保护扩展程序。其主要有以下功能:
AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。
番茄工作法(Pomodoro®)时间管理助理。• 长短两种休息时间 • 带有倒计时显示的工具栏图标 • 追踪Pomodoro历史和统计讯息 • 可配置的长休间隔 • 可配置的定时器时长 • 桌面与新标签页通知 • 超过20种音效可选的声音通知 • 计时器秒针走动音效
Loom 可以用来快速录制视频,并且能够将录制的视频上传到指定的网页中,Loom还支持在用户点击启动插件时,立即捕捉屏幕图像,同时开始视频录制操作,还可以将录制好的视频复制到粘贴板中存储。
GoFullPage 是一款全屏截图插件(整个网页截图),完整捕获您当前页面的屏幕,进行滚动截图,而无需任何额外的权限。单击扩展程序图标,然后将其传输到屏幕快照的新标签页中,可以在其中将其下载为图像或PDF,甚至只需拖动即可,保存到桌面。
BetterViewer 可以提供更好的图像查看体验,旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时,只需在页面右键点击图片,选择“在新标签页中打开图片”即可。
svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。
第一步, 先关注我】
大家好, 我是胡侃侃。
相信绝大部分人心中最好用的浏览器是谷歌Chrome浏览器,它简洁、快速、稳定、而且有着丰富的拓展插件。 然后我这里用了十几年的Chrome吐血推荐Microsoft Edge 浏览器。
而且Microsoft Edge 浏览器本身是基于基于谷歌 Chromium 内核的全新浏览器,具有像Chrome 浏览器一样的高效稳定的特点。 Microsoft Edge浏览器, 最大的优势在于和系统深度整合, 还实现了Chrome账号轻松同步。 Edge内置的网页休眠功能同样也是好用到起飞。 当然用Edge来替换掉手上的国产浏览器也是一个不错的决定。
传送门>>
本篇是基于Chrome和Edge浏览器的插件, 通过使用这些插件来提高浏览器的效率, 让本身已经非常方便的浏览器, 更加强大和增加效率。 本文浏览器插件下载是以Edge浏览器为准, 在Chrome下面有同名的插件, 需要大家自己去搜索一下。 但Chrome因为Google被关闭访问的问题, 所以有些插件获得并没有那么容易。
在Edge外接程序界面直接搜索和下载, 传送门>>
下面我们来点评一下有哪些神级插件, 可以让我们的工作效率得到翻倍提升吧。
一句话点评, ublock origin,比adblock功能更强,资源占用更低。
来自值友的@GN-001的点评,
ublock现在已经非吴下阿蒙了,adblock已经老已了,ublock的元素抓取比较麻烦,adblock方便点,但是adblock太臃肿了,大家打开第一个页面ublock而可以,但adblock无法拦截!而且占用很高!我用adblock很久了后来出现这个问题,我就在群里问了下他们,他们叫我试试ublock后面就再也没有换回去了!ublock的抓取元素是有问题的,多个元素在一起他不能一起抓只能一个一个,但他有个问题,他一次只能抓一个,你重新抓的时候他之前抓的就失效,不知道是我不会操作还是本来就有这个问题!adblock就完全没有这个问题,adblock交互好点!易用点!
传送门>>
传送门>>
老牌广告拦截器, 一款被称为最佳广告拦截的工具,在谷歌开发者商店有着破十亿的下载量,可想而知它是多受欢迎的呢!Adblock的强项就是拦截过滤网页广告,无论是视频广告、横幅广告,还是弹窗广告,它都能有效拦截。
AdBlock 是最好的广告拦截工具,拥有超过 6500 万用户,同时也是最受欢迎的扩展程序之一,下载量已突破 3.5 亿!
传送门>>
Infinity New Tab Pro 让你可以自定义你的新标签页. Infinity新标签页 (Pro) 将原生新标签页替换为您保存的书签,并提供了多种快捷实用的功能。 自定义标签页,可以将网页装扮成类似安卓的应用,支持多种搜索引擎切换,支持切换各种精美壁纸,具有 数据备份同步功能。
谷歌很多功能现在都已经无法使用了, 我过去很多信息都保留在Gmail里面, 这里使用这个可以访问google搜索,gmail,谷歌学术搜索等谷歌产品, 不包含Youtube 谷歌Drive。 传送门>>
有人说: 如果一个浏览器没有安装油猴,那可以说是没有灵魂的。油猴脚本与扩展的功能大致相同,都是赋予浏览器更多实用功能,但相比之下更加轻便。
在Microsoft Edge上面, 油猴叫做Tampermonkey。 最早是Mozilla Firefox的一个附加组件, 在FF上面叫Greasemonkey。它让用户安装一些脚本使大部分HTML为主的网页于用户端直接改变得更方便易用。Greasemonkey可替网页加入些新功能、修正网页错误、组合来自不同网页的数据、或者数繁不及备载的其他功能。写的好的Greasemonkey脚本甚至可让其输出与被修改的页面集成得天衣无缝,像是原本网页里的一部分。
现在油猴也是一个跨浏览器的用户脚本插件, 支持Edge,Chrome,FF等多种主流浏览器。
传送门>>
安装完成油猴以后, 可以看到浏览器右上角有一个油猴的图标, 点击图标, 点击获得新脚本, 即来到了油猴的安装脚本页面。
我这里举个例子, 我看微博, 只想看我关注过的人, 去除一些不需要的微博推荐, 这样的过滤脚本, 在油猴里面叫做, Yet Another Weibo Filter。
我们来到了油猴脚本安装页面Greasy Fork, 可以直接点击, 安装此脚本。 也可以查看这个脚本被下载过多少次。
如上图, 搜索, Yet Another Weibo Filter。
其实很多用户, 和我一样并不希望进入 GreasyFork,去手动查找用户脚本,或者我根本就不知道这个网站是不是有可以优化的脚本。 那么下载这个Userscript+, 这个脚本可以自动发现适合当前网站的脚本。
暴力猴是一个开源的脚本管理器, 暴力猴是一款非常强大浏览器脚本的管理工具。暴力猴的使用要更加方便,而且同样强大,通过安装相应站点的脚本信息,我们可以更加方便的进行各类操作。例如:电影站点的解析、网盘的高速下载、资源搜索与下载、广告屏蔽等等。 回头我会仔细说说暴力猴和油猴。
值友点评:violent monkey易用性比tamper高多了。
传送门>>
传送门>>
值友@娜娜奇推荐: 目前用的crxMouse,也不知道是不是最优解。这个还支持超级拖拽。目前发现这个插件,如果在新建空白tab中和加载失败的页面中会鼠标手势失效
也有值友推荐了smartUp手势, 这个我没有用过, 我也展现出来供大家参考。
传送门>>
值友点评: lastpass安全性不如keepassxc,多机同步可以用网盘中转,手机也一样用
传送门>>
传送门>>
这个扩展可以让你上网只记住一个密码,便可以登录所有需要密码的网站。在安装该扩展之后首次登录需要密码的网站时,扩展会自动记录下你的密码,下一次就不需要输入了。虽然会记录你的密码,但这个扩展一定是安全的,所以不必担心安全问题。
LastPass是免费的密码管理器,跨平台同步,自动登录, 只需要记住一个账户密码, 就可以管理所有账户密码。 解决了密码难记的问题。
风险提示: 银行密码重要信息密码不要交给他管理, 另外这个只有密码提示, 无法找回密码。
同样的一个密码管理器
传送门>>
工具很强大,支持的笔记很多,支持ervernote, onenote, 语雀,为知等所有主流笔记,支持markdown,支持图床,体验绝对比原版的好。传送门>>
传送门>>
印象笔记·剪藏(Evernote Web Clipper), 使用印象笔记·剪藏扩展程序一键保存精彩网页内容到印象笔记帐户,不用复制粘贴编辑再整理,信息收集快人一步。看见什么,「剪」什么。 调研好帮手,剪藏任意文章或网页, 保存到指定笔记本,并添加网页, 用印象笔记同步到任意设备, 搭建个人知识库。
传送门>>
免费的笔记管理软件和印象笔记·剪藏一样的功能,可以保持网页内容至OneNote,OneNote为Win10系统自带office软件。
官方出品的浏览器主题皮肤, 使用全新浏览器主题个性化设置 Microsoft Edge,此主题的灵感源自 Master Chief 在神秘的外星人环形世界(称为 Halo)中的历险经历。此主题更改了浏览器和新标签页的外观,营造出灵感源自游戏的精美而又引入入胜的视觉体验。你还可以将不同主题应用至各个个人资料,以便轻松区分家庭、学校或工作。传送门>>
传送门>>
该插件可以帮助用户在打印网页或者PDF文件之前对打印的内容进行调整,比如调节打印的字体大小、去除打印页面中的所有图片、删除网页中的广告、删除多余的文字等方便的自定义打印的功能。
传送门>>
优秀的截图插件, 可以捕获任何网页的全部或部分。添加注释,评论,模糊敏感信息,以及一键上传。
传送门>>
图片助手(ImageAssistant)是一款运行于chromium(chrome环境下开发)及其衍生浏览器(如:360安全浏览器、360极速浏览器、猎豹浏览器、百度浏览器、UC浏览器等)提供分析、提取网页中的图片并以多种筛选方式辅助用户选取下载等功能的浏览器扩展软件。
传送门>>
是否看到网页、微博上的视频很想保存留念或使用, 这个插件一键下载网页中的视频
传送门>>
使用更纯净的百度 1.屏蔽百度广告推广 2.阻止百度追踪 3.去除百度资讯与热榜。
这篇文章总结了前面几篇关于Edge浏览器经验的合集, 每一个都是本人自己尝试过无数次以后的经验总结,分享给大家,
收藏不等于会了。
收藏不等于会了。
收藏不等于会了。
收藏是点赞的十倍, 为什么, 同学们!
这么养眼的文章难道不点赞吗? 点赞美三代, 关注富一生!
更多的内容欢迎关注我的个人号来查找,这样也方便交流。
全文完~~
ublime Text 已成为了目前最流行的代码编辑器之一。它的反应速度、简单易用性以及丰富的插件生态,让众多前端开发者们为之倾倒。
为了帮助开发者们更便捷地使用 Sublime Text ,我们决定制作一个 Sublime Text 扩展列表,它包含了我们日常使用的一些插件。当然,如果我们所列举的插件中没有你喜欢的,也随时欢迎你在评论中与我们分享它们。
1.插件包管理器
首先,我们将从包管理器开始。Package Control 是 Sublime Text 的插件包管理器,它提供了 Sublime 中插件包的安装与删除。若你没有安装它,那么我们后续推荐的插件,你也就无法尝试咯。
2.JavaScript 与 NodeJS 代码段
一个用于编写常见 JavaScript 代码段的集合插件。为什么要费劲逐个敲下 document.querySelector('selector')文本,你只需要利用快捷键 qs,并按下 Tab键,剩下的代码,Sublime 将帮你自动补全。
3.Emmet
与上述的插件类似,Emmet 也是一款让你更快捷编码的插件。但 Emmet 适用于 HTML 与 CSS 代码的编写,它可以让你一次性输入长标签、嵌套元素或者整个页面模板。
如果你觉得 Emmet 有些复杂,那么你可以尝试一个叫做 HTML 代码段的插件。它更简单易用,并且使用文档写的也很直接。
译者注:Emmet 的前身是大名鼎鼎的 Zen coding,相信前端开发者们不会陌生。这里再分享一个使用手册,希望对你有所帮助。
4. Advanced New File
一款助你在 Sublime 中快速创建新文件的插件。你只需要使用菜单,并利用快捷键 ctrl+alt+n打开提示框,写入新文件的路径,即可配置新文件。
该插件还支持自己编写路径保存,甚至文件夹的名称也可以自动完成。
5. Git
一款可以直接在 Sublime 命令选项面板中工作的 Git 集成插件。该插件提供了一些常用的 Git 命令,你可以在 Sublime 中完成,诸如添加、提交或查看 Git 日志等功能。
6. GitGutter
一个非常实用的 Sublime 扩展。它会告诉你自上次 Git Commit 以来已经改变的代码行,并给出相应的概述。你也可以用它来与你已提交到 Git 上的文件进行详细的对比。
7. Side Bar Enhancements
在 Sublime Text 中,你可以在左侧面板中了解正在进行的项目。虽然,它为你提供了一些使用文件的基本选项,但默认的操作是相当有限的。
当你右键菜单选项的时候,这个插件将会为你提供超过 20 个选项来增强你的可操作性。包括在浏览器中打开、复制以及其他有用的功能。
8. ColorPicker
一个小巧实用的取色器。它可以快速地抓取十六进制的色值,使用非常简单。你可以在单独的窗口打开它,从调色板中取色,或使用滴管在屏幕的任意位置取色。
9. Placeholders
Sublime Text 3 有一个内置的 Lorem Ipsum(占位符) 生成器,你可以使用它来创建虚拟文本。而该插件则扩展了占位符生成器的功能,你就可以通过 Sublime Text 快速地生成占位符图像、表单、列表和表。
10. DocBlockr
一个可以向函数添加详细注释的插件。DocBlockr 可以帮助你轻松地为函数添加相应的描述,包括参数、返回的值和变量类型。
11. SublimeCodeIntel
一个智能代码自动补全插件,它能帮你索引你的源文件,并能让你快速地找到并跳转到相应的函数中。
所以,这个扩展适用于流行以及相对冷门的编程语言。
12. Minify
一个代码美化与压缩的插件,适用于 CSS、HTML、JavaScript、JSON 和 SVG.
此包依赖于外部 Node.js 库进行缩小和美化,故你需要单独安装它们。
npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo
13. Sublime Linter
此插件能够帮助开发人员检测代码中存在的语法错误,不规范的或者错误的代码写法。它支持各类开发语言。
但 Sublime Linter 本身只是一个基础的框架,所以使用的时候,你还需要安装单独的插件来满足不同语言的使用需求。
14. Color Highlighter
你可以在许多 IDE 和文本编辑器中看到颜色高亮功能,而 Sublime 中是不支持颜色预览的。但是,有了这款插件,在你使用 Sublime 时就能够帮你检测出 CSS 文件中的颜色码。无论是 Hex 码,或是 RGB 码都能很好的显示。
15. Language Packs
虽然 Sublime Text 具有超过 50 种编程语言代码的高亮显示。但是,仍然有部分框架和 Web 开发语言,目前还不支持。不过,由于编辑器插件的性质,社区也能够为任何编程语言创建和提供相应的包。
额外的彩蛋:主题
在 Sublime Text 上安装一个漂亮的主题,势必会使你能够更愉快地编写代码。当然,这里也有一些我们喜欢的主题与你分享:
感谢你的阅读。若你有所收获,欢迎点赞与分享。
注:
英文原文:15 Awesome Sublime Text Plugins For Web Development
作者:Danny Markov
译者:IT程序狮
译文地址:
https://zhuanlan.zhihu.com/p/52545760
*请认真填写需求信息,我们会在24小时内与您取得联系。