新闻中心

建立自己的Mac工作站-浏览器配置&插件篇

  • 时间:
  • 浏览:231
  • 来源:怪兽分发

1. 开篇

本文是建立自己的Mac工作站系列的第三篇,前两篇分别为:《建立自己的Mac工作站-效率软件&系统操作篇》《建立自己的Mac工作站-VSCode配置篇》。作为Mac工作站的第三篇,本文想在前端开发的角度上,在浏览器层面上进行提效。当然了,因为有了第一篇效率软件的因素,有些能力:如翻译等我们是用不上的,所以在本文中也不再提及,有需要的同学可以自行去第一篇中查阅。本文的核心目的:只说浏览器痛点,更多面向前端开发同学——当然,后端开发同学可能更加需要

好了,废话不多说,马上开始。

2. 浏览器配置&插件

2.1 Chrome页签分组

你的浏览器是否有过这种情况?多个页签一直开着,关了又怕找不到,不关又很难点到自己想要的页签,通过Tab Group,可以解决你的难题。

  • 在浏览器中输入chrome://flags
  • 打开Tab Groups和Tab Groups Collapse
  • 现在你可以任意一个页签上右键,选择新建一个Group;或者拖拽这个页签加入其他的Group
  • Group也可以被命名,点击可以展开Group或者收起。最终你会得到一个这样的浏览器页签集合

绝对有用,快来试试吧!

2.2 自定义devtools样式

在第二篇VSCode配置中我们设置了VSCode的UI主题,再回来看Chrome的DevTools,未免有些寡淡。

现在使用Material DevTools Theme Collection插件,可以让你的DevTools也变得主题鲜明,例如:

注意:要想让插件生效,需要在DevTools > Settings > Experiments中将"Allow Custom UI Themes"打开

2.3 一键清理host缓存

如果你是一个前端/后端开发,可能要不断在日常/预发/正式环境中切换,这时就要不断的清理的host缓存,以防止host的切换因为有缓存没有生效。不知道你们都采用那种清理方式:是用浏览器自带的清除浏览器缓存,还是开一个无痕页签,亦或者打开chrome://network点点点?有了chrome-plugin-dns-cache-clean这个页签,只需要点一下,就能自动帮你做完清理host缓存的操作。

解放双手,从我做起。

注意:要想让插件生效,需要在浏览器中输入chrome://flags/#extensions-on-chrome-urls,并将其打开

2.4 一键网页全截图

截图易,截长图难。GoFullPage - Full Page Screen Capture也是一个一言不合的一键式插件,点一下,生成当前网页的全屏截图,还能对其编辑。

2.5 新建页签美观

新建的默认页签太丑啦,用Momentum插件,让你每次生成的页签都是漂亮的,不仅带时间,还能当个Todolist用。

2.5 JSON格式化&比对

这个是老生常谈了,FeHelper(前端助手)提供一个大集合的能力,想要啥都有。当然,我对大而全不是很感兴趣,所以只用了它的前两项能力。

2.6 API模拟

不仅能Mock接口返回,还能Mock Post接口调用。当你有需要的时候一定需要一个这种插件——ApiDebug Http接口调试插件。

3. 总结

本文讲解了一些Chrome浏览器的小技巧&插件,在不涉及到高阶使用的情况对Chrome浏览器进行了一些配置。希望能对大家有所帮助。

本文使用 mdnice 排版

作者:这是你的玩具车吗

链接:https://juejin.im/post/6874574855975469063

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。