Clearly marking your staging server

Web developers often have development, staging, and production (live) servers. If you’re like me you typically have several browser windows open at a time, some opened to the staging server, some to dev, and some to production. And you probably sometimes open the wrong browser window and start testing, finding it hard to figure out why the change you just made on the staging server doesn’t seem to be appearing.

What you need is a way to make it easy to see which server you are on. Create an include file at the top of each page on the site. On the staging and development servers, the include file consists of a big banner at the top of the page with a colored background and "Staging server" or "Development Server" in big letters. The banner also has links to the other two servers. On the production server, the include file is empty. Now just make that you set up your source-control software to ignore the include file (you are using source control software, aren’t you?) and you’re all set.

As an alternative, you can also set your include file up to conditionally display the banner depending upon what server you’re on, but I’ve found that can get messy when several developers are running the code in their own local development environments or when you have multiple, load-balanced production servers.