The following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements.
We told you about BrowserLab here on Webmonkey when it first showed up as part of Dreamweaver CS5 in April. It’s a hosted service that lets web developers preview their work across multiple browsers and operating systems in a single environment. Since it’s a hosted service, Adobe can update the backend with the latest code from all the popular browser engines as they’re updated in the real world.
It integrates fully with Creative Suite 5, so if you’re using Dreamweaver, you can launch BrowserLab previews at any point in your workflow and test your live code against all the major browsers.
Adobe may eventually turn BrowserLab into a paid service (the cost will likely be between $200-300 per year), but if you sign up for access before April 30, 2011, you can secure an account for a full year at no charge. All you need is an Adobe ID login, which is free.
The new features of the include a BrowserLab add-on for Firebug and the ability to smart-align screenshots. There are also some further integrations with Creative Suite 5. To walk us through using these new features, Webmonkey has collaborated with Scott Fegette, a technical product manager for Dreamweaver and BrowserLab.
So, take it away, Scott.
Testing Pages With the BrowserLab Add-On for Firebug
The ability to use BrowserLab in any Flash-enabled browser has always been one of BrowserLab’s benefits, but the only way you could get to a screenshot of anything aside from the initial page as it loaded (like interactive menus/states/content/etc.) was to use Dreamweaver’s BrowserLab integration to send the current state of your page –- with edits and interactive elements -– directly to BrowserLab.
Using the new BrowserLab for Firebug (alongside the magnificent Firebug plug-in itself) within Firefox allows you to send the current state of your local page in Firebug – including design and CSS tweaks you may have made directly in Firebug – right up to BrowserLab and see how that handy hack you just added works across all the browsers.
This new Firefox plug-in will help you be effective with BrowserLab whether you’re in Dreamweaver or Firefox, and make the smooth BrowserLab experience more attainable within any workflow you may have established for yourself.
Once it’s installed, right-click the BrowserLab icon on the lower right corner of your browser, or right-click the page you’re viewing. You can also use the “Tools” menu.
Here’s a video that provides a more in-depth look at the Firebug integration:
“Smart Align” your screenshots
The new Smart Align feature lets you specify an alignment point on one screen shot, and then align all of your other screen shots to that point.
You’ve had the ability to custom-register your screenshots in BrowserLab for a while now. You just drag out from the upper left corner of your rulers in 2-up view and adjust for page-level offsets directly.
The idea was to let you be able to adjust for page-level misalignments and focus on a particular area of your page or application accurately, particularly within Onion-Skin View, where a page-level offset will ruin any changes of a “clean” view of your pages together. But in practice, the workflow was clunky, hard to master and ultimately inefficient. This feature has been redesigned, here’s the new workflow.
Click the Alignment icon. You’ll immediately get a “virtual loupe” you can drag across the current screenshot and find the area you’d like to align everything to. Finding a good, clear area like a corner or recognizable markup element is best -– particularly one you know will be reasonably consistent across browsers.
Then, either choose to align everything to that point, or reset your alignment (i.e. your zero point) to that point. By choosing to align all, you’ll get a quick status window that lets you know the progress (this does take some horsepower), and the accuracy of the matches BrowserLab finds.
And once it’s completed, you should be able to flip into Onion-Skin View and see that particular area of your page perfectly (or very close to perfectly) aligned with the other screenshots. This truly allows you to adjust for global inefficiencies and really use BrowserLab for some minute, fine-grained detail work.
BrowserLab goes local
I’d also like to talk about a feature Adobe launched in May that enhances BrowserLab’s integration with Dreamweaver. When testing content in Dreamweaver’s Live View using BrowserLab’s Local setting, BrowserLab “sees” what Live View sees. This lets you test content that you’re working on privately without publishing it to the internet, such as sites on your local web server. You can also test local content served by intranet web servers and content management systems like WordPress, Drupal or Joomla.
This works by securely pushing content to the BrowserLab service and ultimately delivering that content into the list of available browsers. BrowserLab leaves you in full control of what content is allowed to leave your system via permission settings, which lets you maintain an allow/deny list of URLs.
Also, when content is requested by a page you’re testing, BrowserLab references that list before pushing that content to the BrowserLab servers. If a URL isn’t in the allow/deny list, you’ll be prompted before uploading the content. The allow/deny list works with partial URLs too, meaning that the first portion of a URL must match the entire URL stored in the list.
You can set your file location preference and adjust permission settings in Dreamweaver.
If you’re new to to BrowserLab, try it out for free. As a part of the Adobe CS Live family of online services, you’ll receive 12 months of complimentary access.
This tutorial was authored by Scott Fegette, a technical product manager in Adobe’s Creative Suite Web business. He manages Adobe Dreamweaver and BrowserLab.
