It’s quite unprofessional, let alone embarrassing, to post some test content on a development site only to discover you’re actually in the wrong tab and you just posted to the live site.
To avoid this I use the Stylish Add-on for Firefox to inject custom CSS into live sites I’m working on.
For example, I have the following rule for touretteshero.com:
The result is that, in my browser, the live site has a hard-to-ignore red border that acts as a clear visual reminder:
Since writing this I’m working with four distinct versions of the site: local development, remote development, remote live and remote legacy (backup of the previous version).
I’ve refined my Stylish rules accordingly to add a custom footer for each. The new rule for the live site is:
which looks like this:
Whereas the local development version looks like this:
Red = Caution, Green = Go!