BetterSource
Finally! Firefox’s had it for years, Google Chrome’s had it since its launch — even IE’s got colored syntax highlighting! Yet, Safari — being one of the most cutting-edge browsers out there otherwise — misses this easy yet important feature.
And here’s the beauty of this problem — Safari 5 supports extensions. Now, people can fill in the blanks and give Safari hundreds of new features. These user-contributed extensions has been Firefox’s biggest advantage over the years.
Everything is different now. In my opinion, the implementations found in Chrome and Firefox are inferior compared to Safari’s elegant way of handling both installation and management of extensions.
What’s BetterSource? It’s an extension that will show the (original) source code in colored syntax highlighting. The code will open in a new tab (instead of an own window like Safari normally does).
It will also display line numbers. Lastly, it’s possible to show the generated source1 — that is, the final end-product made by a combination of the rendering the browser itself is responsible for, as well as the original HTML sent from the server. And most importantly — DOM manipulations and other changes in the code made by JavaScript.
-
Generated source is what you see when you right (or control) click the current web page and choose “Inspect Element”. (Assuming you’ve activated the Developer menu — if not, you’ll find the option in Safari > Settings > Advanced). ↩
