A Little Debugging Magic with HTML’s Base Tag
Blake Walters, Former Viget
Article Category:
Posted on
If you’ve ever been in a situation where you need to make modifications to a page or a site’s HTML, CSS or JavaScript but don’t have direct access to the source code, it can be pretty frustrating. Whether you're working on client’s live site or if you’re helping someone remotely, you have to somehow make the contents of the site editable locally.
There are tons of tools out there to automate the process of crawling a site and downloading all the necessary files. There are Unix command line tools like wget that have plenty of tutorials for downloading websites, and graphical interfaces like Net Vampire for Windows and SiteSucker for Mac OS X. But if you want a faster method with fewer files to download, the HTML spec has you covered.
The base tag is a really simple way to set a default URL (or default target) for every relative path on a page. This includes links to stylesheets, sources of script tags and even relative hrefs in anchors. Just save out the raw HTML from your favorite browser, open up the saved document in a code or text editor and place the base tag in the head element with its href attribute pointed toward the fully qualified URL of the live site:
<head>
<base href="https://www.viget.com" />
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" />
</head>
Now you can open that very document in a browser and it should appear exactly as if it were running from the site itself. From our example above, every relative path will use viget.com as its base path, so the stylesheet we linked to will actually be located at “ldquo;viget.com/css/master.css” (which doesn’t exist, by the way).
To make changes, just remember that all new paths will use the base href value, so any changes will have to happen inline - CSS changes will have to be directly placed in-page in a style tag and JavaScript in a script tag - or use fully qualified urls to a known domain (so paths like “http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” for loading jQuery from Google, for instance, will still work just fine). This is a great way to easily debug code that you just don’t have direct access to.
One thing to remember though, be sure to check your base tag before deploying any code you may have been working on locally. If it happens to be pointing to a staging server or anything other than your live domain, you might run into trouble serving up relatively pathed files from the wrong location. Happy debugging!
