1. The opening

This article is the third in a series on building your own Mac workstation. The first two articles are “building your own Mac workstation – efficient software & system operation” and “building your own Mac workstation -VSCode configuration”. As the third Mac workstation article, this article wants to improve the browser level from the perspective of front-end development. Of course, because of the factors of the first efficiency software, some abilities, such as translation, are not used by us, so it is no longer mentioned in this paper. Students who need it can refer to the first article by themselves. The core purpose of this article: just say browser pain points, more front-end development students – of course, back-end development students may need more.

All right, without further ado, let’s get started.

2. Browser configuration & plug-ins

2.1 Chrome TAB groups

Has this ever happened to your browser? Multiple tabs are always open, but you are afraid that you can’t find them when you close them, and it is difficult to find the tabs you want when you close them. Through Tab Group, you can solve your problems.

  • Enter Chrome ://flags in your browser
  • Open Tab Groups and Tab Groups Collapse
  • Now you can right-click on any of the tabs and select New Group; Or drag and drop the TAB to join another Group
  • Groups can also be named. Click to expand or collapse a Group. You end up with a collection of browser tabs like this

It definitely works. Come and try it!

2.2 Customizing devTools styles

In the second VSCode configuration, we set up the VSCode UI theme, but back to Chrome DevTools, it’s a bit lackluster.

Now you can use the Material DevTools Theme Collection plugin to make your DevTools thematic as well, for example:


Note: For the plugin to work, open “Allow Custom UI Themes” in DevTools > Settings > Experiments

2.3 Clearing the Host Cache with one click

If you are a front-end/back-end developer and are constantly switching between daily/pre-release/formal environments, you need to constantly clean up the host cache to prevent host switching from taking effect because there are caches. Don’t know if you use the way of cleaning up, is to use the browser’s own to clear the browser cache, or open a non-trace TAB, or open chrome: / / network dot points? With the Chrome plugin-dns-cache-clean TAB, you can automatically clean the host cache with a single click.

Free hands, start with me.

Note: For the plugin to work, type chrome://flags/#extensions-on-chrome-urls into your browser and open it


2.4 Full screenshot of one-click web page

Screenshots are easier than long shots. Gofullpage-full Page Screen Capture is also a one-click plugin that generates full-screen screenshots of current web pages and allows you to edit them with one click.


2.5 New tabs are beautiful

The new default TAB is ugly. Use Momentum to make every TAB you generate beautiful, timed, and Todolist.


2.5 JSON Formatting & Comparison

This is a cliche. FeHelper provides a large set of capabilities that can do anything you want. Of course, I’m not very interested in big and all, so I just used the first two abilities.


2.6 API simulation

Not only can the Mock interface return, but also the Mock Post interface call. The ApiDebug Http interface debugging plugin is something you’ll need when you need it.


3. Summary

This article explains some Chrome tips & add-ons that configure Chrome without involving advanced use. I hope I can help you.

This article is formatted using MDNICE