Using Adobe BrowserLab with Dreamweaver CS5

BrowserLab is an additional online service offered by Adobe and now integrated with Dreamweaver CS5 which allows users to preview any page in multiple browsers across multiple platforms. BrowserLab ensures cross-browser site compatibility and allows users to preview and compare page design screenshots individually or in grouped browser sets.

If Adobe BrowserLab is open while in Dreamweaver Live View, BrowserLab will take a picture of the webkit rendering engine as it renders the page in Dreamweaver rather than an actual browser such as Chrome or Safari.

Opening BrowserLab

To open Adobe BrowserLab:

  1. Go to the Window menu.
  2. Select the Extensions option.
  3. Click on Adobe BrowserLab.
  4. Click Preview on the BrowserLab panel to open a browser to the BrowserLab website.

Alternatively, you can also:

  1. Go to the Document toolbar.
  2. Click the Globe icon.
  3. Select Preview in Adobe BrowserLab. This will open a browser to the BrowserLab website.

The first time BrowserLab is accessed, you will be prompted to log in with your Adobe ID and password. Once logged in, Dreamweaver will upload the open page into BrowserLab's staging server, which will then take screenshots in the designated browsers.

Note: An Adobe ID is required to use BrowserLabs. If you do not currently have an Adobe ID, you can obtain one on the login page or the Adobe website.

Customize Browsers

In the top, left corner of the BrowserLab window, the name of the browser you are viewing will be displayed. You can preview other browsers by clicking on the down-pointed triangle beside the browser name.

To choose a different set of browsers:

  1. Go to Browser Sets.
  2. Select Add New Browser.
  3. Name the new setlist.
  4. Check the boxes on the browsers you'd like to use for testing.

There is no limit to the number or sort of browsers that can be added to a setlist.

Preview in New Browser Setlist

To preview a page using a new browser setlist in BrowserLab:

  1. Click Test.
  2. Click on the small Refresh button within BrowserLab.

Doing this will have Dreamweaver resend the information site information to BrowserLab and new screenshots will then be taken.

Delaying Snapshots

In the upper right hand corner of the BrowserLab window, there is a delay option which provides users the ability to prolong the timeframe before BrowserLab takes a snapshot of the page. This ensures that items such as AJAX widgets or complicated CSS have a chance to load.

Other Features

Other notable features of Adobe BrowserLab include:

  • Ruler Guide - allows users to see how elements on their webpage align and size up in designated browsers. This feature can be activated under the View > Show Rulers.
  • 2Up - allows users to preview their site in browsers simultaneously. This view allows the use of other tools such as Ruler Guide and Onion Skin.
  • Onion Skin - allows users to overlay the designated browser previews from 2Up atop one another to display the slight differences between the two previews. This allows for fine-tuning of object placement and text.

Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.