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

1. 开篇

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

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浏览器进行了一些配置。希望能对大家有所帮助。