Project Previews with Browser Xray

To open a new preview, select an HTML file in your project and choose Preview ⟩ Preview “xyz.html” (command P) or click the button in the toolbar. Local previews will automatically update while you make changes to the related HTML and CSS files without any further action on your part.

The new Espresso preview is backed by a local HTTP server. This makes it equivalent to a published website in navigation and resource loading behavior. It also means you can preview and Xray your pages in other browsers. Choose your favorite browser from the button. The built-in server supports only static resources (which you can dynamically generate inside Espresso with Dynamo), so you can be sure that your website will work on absolutely any hosting service out there.

See Website Previews for more information about working with CMSes and interpreted languages like PHP.

Troubleshooting

Because of the frequency that Espresso refreshes files for local previews, some memory-intensive elements are not well-suited for working with in a live preview. You are likely to run into increasingly slow behavior or poor performance if you are working with a page that has a large amount of Flash elements, for instance. HTML5 audio and video elements can also sometimes misbehave.

If you need to work with pages using Flash or other media, you may want to comment out the media elements temporarily to improve performance.

You may also find that external Javascript files or images do not update as regularly in a live preview. This is because Espresso tries to cache as many external files as possible to improve performance when reloading the HTML as you make edits. If you have made recent changes to a Javascript file or image that do not appear to be showing up, try refreshing the preview by hand using Preview ⟩ Reload Page (command R) or the button in the toolbar. If the changes continue not to show up, try using Espresso ⟩ Empty Cache... to empty the file's caches, then refresh again.