Making Sure that Updates Were Applied to a Web Page with HTML Comments

When modifying a website, the effects to the page are usually apparent. But when the changes only affect the backend, how do you know you're not viewing the old page? A successful update results in the same content being displayed as before the changes. Maybe the updated page was uploaded to the wrong location. Let's see how HTML comments can help.

Lately, I've been replacing old hard-coded Google Analytics code used to track external links and downloadable files with a call to a user-defined function. The function reviews the link information and adds custom tracking code as necessitated by what's being linked to (see Future Proofing Your Google Analytics Code for Tracking PDFs). The problem is that there's no way to differentiate the hard-coded solution and the results of the user-defined function.

If the page being updated was on a development server, some text could be added and displayed to the page. But with a live website, it's best to avoid the visitors from seeing the test. This is where HTML comments are handy. We just need to add the following to the page:

<!-- here -->

Since we're using comments, the word "here" doesn't get displayed to the screen. Instead, it can be found in the page's source code. The code can be viewed by:

  1. Right-click the page which contains the HTML comment
  2. Click
    • View Page Source for Firefox
    • View source for Internet Explorer

With the code window open, we just need to look for the text manually or by using the find feature (Ctrl + F). The HTML comment can be removed once we know we're viewing the updated code.

3 Comments

  • #3 Marc Towler on 10.29.11 at 2:57 pm

    Well I mainly use Git as my set up, the point of this along with most, if not all DVCS systems is that there is one place that you upload your latest code to, or download it from.
    Unless you specifically choose to get an older version of the code, you will not have to worry about if you have the latest or not when you retrieve the code.
    The best way to get started would probably be using a site like http://bitbucket.org to practise with it all, I have learnt a lot from using that site.
    It supports Git, SVN, Mercurial etc so there is always a lot of flexibility in what you can use.

  • #2 Patrick Nichols on 10.26.11 at 4:56 pm

    To be honest, I'm not very familiar with DVCS (Distributed Version Control System?). But it's something that been in the back of my mind for a while now. Which option do you use?

    In the end, if someone utilizes a DVCS or uploads the files manually via FTP, wouldn't there still be an issue knowing if the updated code went to the correct place? I would imagine that you still need to tell the DVCS where to send the file. If the update only affected the backend, there wouldn't be a way to verify the file was sent to the right place.

  • #1 Marc Towler on 10.25.11 at 8:04 am

    Would this not be the perfect place for a DVCS to be implimented between the test and live servers?
    Whilst utilizing HTML comments can be useful, it is not always practical.

Leave a Comment