Restoring a lost file from your cache in Chrome

Recently, I switched the software that generates this blog from a custom Perl script that I built to a Jekyll based system.

The migration itself went fairly well. I took a couple of days to get all of the templates in order, and generated pages in another directory. I switched the config so that the output goes to this url instead.

Suddenly, I noticed that my stylesheets were gone. I couldn't find my most recent backup. And unfortunately, I hadn't checked in my CSS to git, so it wasn't available there either.

Luckily, I still had an actual post page open, so I managed to get the CSS for the posts back fairly easily. But the CSS that's used on the list page is a separate file, and is only used on the list pages. I started looking for ways to restore it.

I looked in the Firefox cache. I don't use Firefox very often, and it'd been several weeks prior that I'd looked at my blog page. Chrome/Chromium are the only other browsers I have installed on my primary machine. So I started looking for solutions there.

I found out about about:cache, which gave me a list of urls that I've recently visited. I can click on them to see all of the HTTP headers (both in a hex dump view and in plain text), as well as a hex dump of the contents of the url. You can see what data your browser has for this page here and then searching for {{ site.url }}{{ page.url }}.

It's a little difficult to get the contents of a CSS file from a hex dump. Actually, it's not. It's extremely simple to do. Except when the hex dump shows you gzip'd data. Luckily, I found a pretty interesting PHP script that would take the hex dump, and output the actual text.

I won't point out that I had to go through 3 different machines and 4 different browsers before I remembered my Macbook still had a copy, as I'd most recently been working on the blog there.

File restored, blog fixed. Jekyll works. PHP and Chrome saved the day.