One of the issues I often have when working on a site that has launched is that I often need to switch between the local and production versions of the site. This, of course, means that I keep each location in a different tab so I can easily change between the two. However, because both tabs look the same, there have been times in the past when I have made changes to the wrong environment.
One way that I have found to make this kind of mistake less likely is to use a Chrome Extension, Tab Modifier. Tab Modifier allows you to use a number of rules for the tab’s current domain name:
- Starts with
- Contains
- An exact match
- End with
- And, if you’re feeling really adventurous, regular expressions
In my case, my local environment uses the .test domain. So, by simple looking for a URL containing “.test” I can perform a handful of actions on the tab. For my local sites, I prepend “LOCAL – ” to the title of any pages. I chose to prepend it so that it would always be visible on a tab. All of my company’s staging sites are also subdomains on a particular domain. So I can prepend this with “DEV – .”
Another option would be to use a color-coding system. It is possible to change the favicon for a matching tab and Tab Modifier comes with many useful presets that would be perfect for this task.
One could use green for the local site, orange for dev and red for production. The reason I chose to go with changing the text is that I wanted to be able to see the actual favicon just in case it didn’t look as I expected.
Tab Modifier allows a bunch of other useful actions for your tabs as well.
- Pin the tab
- Protect the tab – you will be asked for confirmation when closing a tab
- Unique – Prevent opening a duplicate of the tab
- Muted – Precent the tab from playing sounds
I imagine that the above actions could come in handy in quite a few scenarios.