These days, your website visitors have a wide variety of browser options to use, such as Firefox, Internet Explorer, Safari, Chrome, and others. Unfortunately, these browsers may not all show your page consistently. When designing web pages it is important to preview your designs in multiple browsers to check how the page will be displayed. Thankfully, Dreamweaver makes it easy for us to preview our web pages in multiple browsers. In fact, you can specify up to twenty different browsers in its Preview in Browser feature.
To add a browser in Dreamweaver, you need to have it installed on your computer. When Dreamweaver is installed, it attempts to locate all installed web browsers. However, you can also add browsers manually by following the instructions below.
First, you need to access the browser settings. To do so, on the Menu bar, click the File Menu, point at Preview in Browser and click Edit Browser List…
You will see the Preferences dialog box displaying the Preview in Browser options.
Browsers that are already available in Dreamweaver are listed in this dialog box.
You will see an Add Browser dialog box.
Click the Browse… button next to the Application field.
Depending on your operating system, you will see the Program Files or Program Files(x86) folder on a PC. On a Macintosh, you will see the Applications folder.
Now you will need to find the executable file for the browser you want to add. As far as I’m concerned, finding the executable file is the hardest part of adding a browser!
Here are the file paths on Windows 7 (64 bit) for a few different browsers:
- Internet Explorer – C:\Program Files (x86)\Internet Explorer\iexplore.exe
- Mozilla Firefox – C:\Program Files (x86)\Mozilla Firefox\firefox.exe
- Opera – C:\Users\username\AppData\Local\Opera\Opera.exe
- Google Chrome – C:\Users\username\AppData\Local\Google\Chrome\Application\Chrome.exe
In the examples of Chrome and Opera above the username would be replaced with the name you are logged in to the computer with. Also, be aware that by default the AppData folder is hidden. If you need help to make hidden files visible, see Show Hidden Files and Folders in Windows 7 or Vista.
Here are the file paths on Mac OSX 10.74 (Lion) for a few different browsers:
- Safari – Macintosh HD:Applications:Firefox.app
- Firefox – Macintosh HD:Applications:Safari.app
Once you find the executable file, double click on it to selected it. You then see the Add Browser window again.
This time, the Name and Application fields contain values. Since my computer already had Internet Explorer and Firefox installed, this example shows Google Chrome being added. You can change the name to a more appropriate name if you want, or you can accept the default name. If you want to this browser to have a keyboard shortcut associated with it, click the checkbox for Primary or Secondary browser. Be aware that you can only have one Primary browser, and one Secondary browser.
To finish adding the browser, click the OK button at the bottom of the Preferences window.
To open a page in a browser, you can go to File, then point at Preview in Browser and click the browser name.
The page you were viewing in Dreamweaver will then appear in that browser. If you set the browser to be a primary or secondary browser, you will see the shortcut keys you can use to open the browser after the browser name in Dreamweaver. If you are on a Mac and have trouble previewing your page using the shortcut keys, see our blog article Understanding Mac Keyboard Shortcuts.
Now, you can preview your web pages in any of the browsers you have set up using Dreamweaver.