Previewing for Fun and Profit
What's there to write about preview mode? It previews stuff, right? OK, well, yes, but there are some hidden goodies you might not have found.
But first and foremost, Preview is for previewing the page you're currently working on, and you'll very quickly find yourself using Cmd-2 and Cmd-3 to switch between Edit and Preview mode for the current tab.
Staying up to date
If you are working on a static HTML file, Coda will update the preview as you make changes, without you having to save the file, even for remote files.
For dynamic server-parsed languages like PHP, the preview is updated when you save.
If you are editing a CSS file that is referenced from a separate HTML file via the <link> tag, Coda will update the preview of the HTML file when you save the CSS file. A handy way to use this is to split the tab, put your HTML preview in one split, and your CSS editor in the other.
(There may be some unusual cases where saving the CSS file does not update the preview of the HTML file -- please send us an email if this happens to you. We've also heard that a lot of you want the preview to update as you edit the CSS file without having to save. We hear you!)
Safari is not an island
As much as we love Safari, there are still other web browsers in the world, and you wouldn't be the world-famous web developer that you are if you just ignored them. That's why we added that little button to the right of the preview address bar.
Click and hold to open a pop-up menu of all your installed web browsers. Choose a browser to preview the current page in it. Once an external browser has been chosen, you can just single click to preview with it.
View source
Good old View Source, the web developer's best friend! Click on the angle-brackets icon in the lower-left of the preview view to toggle the source of the current page. Here's the fun part -- the source is editable, so you can make changes and flip back to the preview.
Unfortunately, it's not currently possible to propagate the changes made here back to your actual editor document, so they're only temporary (unless you copy and paste them). But it's still useful if you're trying to hunt down a misplaced tag, experiment with some new copy, or (my favorite) change the headlines on CNN.
Console yourself
Clicking the speech balloon button in the bottom bar of the preview will toggle the JavaScript console. If your JavaScript is logging errors (what? bugs?), this is where you'll find them.
Double-clicking a JavaScript error takes you back to the offending line in the editor.
Errors will accumulate over time, so use the Clear button when you're ready for a clean slate.
Inspector gadget
To toggle the DOM inspector, click the magnifying glass button in the bottom bar of the preview. With the DOM inspector active, roll your mouse over the various elements on your page.
Coda will highlight each element as you roll over it, and the CSS hierarchy of that element will be shown as a breadcrumb trail in the bottom bar.
Clicking an element will "lock on" to it, allowing you to navigate up the hierarchy by clicking segments in the breadcrumb trail.
The X button to the left of the breadcrumb trail will unlock the DOM inspector again, and clicking once more will turn it completely back off.
Go home quick
One final preview tip: If you're connected to a Site, don't forget about the "View Site Homepage" menu item in the Sites menu. This takes you directly to your root URL in preview real quick like.
There you have it, then. Not too many surprises to be found in Preview mode, but hopefully a nice intro for those who may not have fully explored it yet.