by Josh Hatwich
One thing to understand up front is that Edge content only works on modern browsers. In Preview 3 that means IE9+, Firefox 4+, the latest Safari and Chrome on the desktop – the latest iOS and Android Webkit browsers on mobile. We are working on better down-level browser support, but until that is added you would have to do extra work outside Edge to provide an alternate down-level experience.
There have been a handful folks reporting that their composition fails to open after a save. It is a scary thing to see the blank page come up after spending hours creating a composition. Folks will be running into fewer of these kinds of issues as the product matures, but in the meanwhile a little debugging goes a long way; it is generally pretty easy to recover your work.
1. Open the HTML file in Dreamweaver.
2. Select the xyz_edge.js file in the related file list. If you don’t see xyz_edge.js in the related files list, select "Live View" which causes Dreamweaver to rescan the related files.
3. Observe the error on Line 18. The quote is double-escaped and makes it impossible for Edge to read the file.
4. Fix the error and the warning goes away. In the example above the string is “double-escaped” which means there is an extra ‘\’.
1. Open your page in the browser.
2. Right-click and choose “Inspect Element”
Note: On Safari you have to enable Developer tools before you will see the option to Inspect Element
Note: On Firefox, you have to install Firebug http://getfirebug.com/
4. Make sure the Console tab is selected, you should see any errors displayed.
5. Click the file + line number (to the right of the error)
Hosting, Deployment and Related Problems
Not only do the files need to be deployed, they also need to end up where the composition expects them. You must copy the /images folder and the /edge_includes folders to your web server. Note: the site management in Dreamweaver and other site management tools may not "see" the images and scripts that an Edge composition requires, so be sure you select and transfer all of the required resources (upload/put the folders and their contents in addition to the HTML file).
The easiest way to determine whether you are having a problem with resource deployment is to use the inspector in Chrome or Safari or Firebug in Firefox to see what files are being requested and whether they are found or not.
The Network tab is most useful for this type of investigation. You should see requests for several edge_includes/XXX.js files, the request for your composition’s xyz_edge.js file followed by requests for any images used by your composition.
The above screenshot shows a 404 (not found) error. That means the file “Adobe_logo.svg” was not found.
In the xyz_edge.js file that file is referenced via a relative path.
In order for the Adobe_logo.svg file to be found, there must be a folder named “images” that is a peer of the xyz.html file and the images folder must contain Adobe_logo.svg.
In order for some web browsers to understand SVG images properly, they need to be served in a particular manner by your web server. If this is not setup properly then the SVG will not display.