A Little Debugging Magic with HTML’s Base Tag
Blake Walters, Former Viget
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:
<base href="https://www.viget.com" />
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" />
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).
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!