Posts tagged "BrowserLab for Firebug"

Testing Private Content with BrowserLab

Testing Private or Local content in BrowserLab

A recurring question we get on the BrowserLab User Forums is “How can I test pages that I have on my local machine and/or behind my firewall?”

A public URL is normally necessary because BrowserLab generates screen shots by visiting the page and taking snapshots of it in the actual browser. There are, however, three alternative methods for using BrowserLab that will allow you to test pages that are not publicly available.

BrowserLab for Firebug

The most versatile option is to use the BrowserLab for Firebug add-on for Firefox. Currently the BrowserLab for Firebug add-on supports Firefox versions 3.x to 6.x and will be extended as new versions of Firefox are released. For our add-on to work, you must have the correct versions of Firefox, our add-on and Firebug installed. Fortunately, Firefox does a really good job of helping you stay current and in sync.

The BrowserLab for Firebug add-on allows you to test private content by selecting the “Preview Local Source” option from the BrowserLab for Firebug menu in Firefox. You can also test publicly available content by selecting “Preview URL,” which simply sends the current URL to BrowserLab. When you choose the “Preview Local Source” option the add-on uploads the HTML content and assets from your machine to a private directory on Adobe’s servers, which only BrowserLab has access to. Once the files are uploaded, BrowserLab can take screen shots from that secure server. Please note, you must select the Options menu item and ensure that the read-only permission option has been set to “Allow.” You are able to test private websites and intranet pages by first navigating to the page in your browser and entering any username/passwords, once you choose “Preview Local Source” the local content from your browser is uploaded and screen shots are generated.

For more information on the precautions taken to ensure content uploaded to Adobe’s secure server for screen shots is inaccessible to any other user, please read our tech note.

Because the page is running in your Firefox browser, this also allows for some limited interactive testing of your pages. For example, if you have dynamic menus, dropdowns or similar elements on your page, you can select the “Freeze JavaScript” option, interact with your page to display those elements, and then request screen shots of the page in that state either by selecting the “Preview Local Source” menu option or pressing the hotkey combination for it (Ctrl-Shift-F12 in Windows, Command-Shift-F12 on Mac OS X)).

When using Preview Local Source, another option to be aware of is the “Preserve CSS Hacks” setting. When a website uses a browser-specific CSS hack that Firefox doesn’t recognize, it is stripped out of the final page displayed in Firefox. Since “Preview Local Source” uploads the content that is currently in your browser, it can cause previews of the page in other browsers to display incorrectly if non-Firefox hacks specific to those browsers were removed. The “Preserve CSS Hacks” can fix this by merging those missing hacks back into the content that is uploaded to our servers for testing.

Please note, the purpose of this post isn’t to cover every possible situation you can run into, but if you’re having problems getting “Preview Local Source” to work correctly, make sure to check the “Freeze JavaScript” and “Preserve CSS Hacks” options, and try bumping up the screen shot Delay setting to allow more time for the page to finish loading before screen shots are captured.

If you’d like to see all of this in action, watch our BrowserLab for Firebug video on AdobeTV.

BrowserLab for Dreamweaver

If you use Dreamweaver CS5 or CS5.5 you can test private content using the BrowserLab for Dreamweaver extension, which is included in the product.

To begin, you should first ensure that you have the most up-to-date version of Dreamweaver by choosing Help > Updates from the menu and installing any available updates. Once you have finished updating (and restarting your computer if needed), open the BrowserLab panel by choosing Window > Extensions > Adobe BrowserLab from the Dreamweaver menu. You can use the dropdown control in the panel to switch between testing private (“Local/Network”) content and public (“Server”) content. This blog post will only focus on testing private content.

The extension allows you to test private content by creating a secure tunnel between your network and a private directory on Adobe’s servers, which only BrowserLab can access and take screen shots from. (See Data Privacy Concerns, above, for more information about how your data is kept private.) For this to function properly you should have a site set up within Dreamweaver (Site > Manage Sites) with the Local Site Folder field pointing to the root of your local site. Next, in the BrowserLab panel, select the list icon to open the extension menu, choose “Permission Settings”, and make sure the Allow option is selected. These two settings allow the BrowserLab for Dreamweaver extension to know the location of your pages and related assets, and will permit it to upload them to Adobe’s servers.

We’ve taken every precaution to keep your data safe, secure, and inaccessible from any other user. If you are still concerned about the security of your files when uploading them to BrowserLab, please take a look at our tech note on this subject.

Once you’ve followed these steps, activate the site you want to test in Dreamweaver by selecting it from the Sites menu in the Files panel. When the page you want to test is displayed, select the Preview button in the BrowserLab panel. Your page and all necessary assets will be uploaded to our servers, BrowserLab will open in your default browser, and screen shots will be returned (you’ll be asked to log in if BrowserLab was not running already). In addition to allowing you to test your local pages, this integration allows you to test interactive states of the page such as rollovers and tabs by switching to Live View in Dreamweaver, interacting with your page, choosing Freeze JavaScript to freeze the page state, and then clicking the Preview button in the BrowserLab panel to generate screen shots for that state in all your selected browsers.

If you’d like to see BrowserLab for Dreamweaver in action, watch our BrowserLab for Dreamweaver video on AdobeTV.

Allow BrowserLab Egress IP access

The final option for testing private content with BrowserLab is simply to allow BrowserLab to direct access to your content by granting permission to BrowserLab’s egress IP addresses. You can find more details in our blog post covering this topic. To reiterate our warning from that post – If you have confidential information then it may be best not to use this method for testing secure content, or to only allow our IP addresses access while you are actively testing. The primary reason for port forwarding would be if you have a webserver at home or in a small office and don’t have access to a staging server on the Internet. In most cases, this should not be done unless you know what you are doing.

Conclusion

BrowserLab is a versatile and easy to use testing tool to help you achieve cross-browser consistency and can be used with private, local and public content. It is fast and secure, and takes the hassle out of cross browser testing. Once you start using it, you might wonder how you ever got along without it.

Mark Rausch
BrowserLab Engineer

BrowserLab for Firebug and Firefox 6 compatibility

Update, August 18, 2011: Our new BrowserLab for Firebug extension, v1.0.0.1175P.307209, with compatibility for Firefox 6 is now live on the Mozilla Add-ons Exchange.

For those of you using our BrowserLab for Firebug extension, we wanted to let you know that there is a temporary incompatibility with the recently released Firefox 6. We’ve submitted an updated extension (v 1.0.0.1175P.307209) to the Mozilla Exchange team, and expect it to be available to you within the next couple of days. To check for updates, just choose Tools > Add-ons in Firefox 6, then choose Extensions.

If you’ve never tried BrowserLab for Firebug, this AdobeTV movie shows it in action.

Bruce Bowman
Adobe BrowserLab product manager
twitter: @brucebowman

BrowserLab 1.6.3 with new Mac OS X browsers is now live

Today we have released a new version of BrowserLab for you, v1168P.306117, which has some nice improvements:

  • Chrome 13 beta was updated to the final release (Windows)
  • Firefox 4 was added (Mac OS X)
  • Firefox 5 was added (Mac OS X)
  • Flash Player was updated to v10.3 (Mac OS X)

We also updated our BrowserLab for Firebug Add-on for Firebug 1.8. You can find it on the Mozilla Add-ons page, or if you already have it installed, it will be updated when you update your Add-ons.

Finally, we have removed support for some older browsers now that they’ve significantly declined in usage. Safari 4 (Mac OS X), and Firefox 3 and 3.6 (Mac OS X and Windows) have been removed.

Bruce Bowman
Adobe BrowserLab product manager
twitter: @brucebowman

BrowserLab for Firebug and Firebug 1.8.0 compatibility

Update, August 11, 2011: Our new BrowserLab for Firebug extension, v1.0.0.1168P.306117, is now live on the Mozilla Add-ons Exchange.

For the most part, our current BrowserLab for Firebug extension is compatible with Firebug 1.8.0 which was released earlier this week. There is one very important part that is not working – Preview Local Source. We have a fix for this, and it is currently being tested and will be submitted to Mozilla for their testing process this week. I expect a new BrowserLab for Firebug to be available publicly within a week.

I’ll tweet, and update this blog when it is final and live.

If you’re not sure what BrowserLab for Firebug is, check out this short AdobeTV video.

Bruce Bowman
Adobe BrowserLab product manager
twitter: @brucebowman

BrowserLab for Firebug, and Firefox 5

As of July 12, 2011, a new version of our BrowserLab for Firebug extension is now available on the Mozilla Exchange. This version is compatible with Firefox versions 3.x – 5.x.

We expect to see new major versions of Firefox more frequently, which will temporarily create an incompatibility for BrowserLab for Firebug. We will do our best to update our extension quickly when there are incompatibilities. In the mean time, consider holding off on upgrading Firefox if using the BrowserLab for Firebug extension is a critical workflow for you.

Bruce Bowman
BrowserLab product manager

BrowserLab for Firebug and Firefox 5 incompatibility

Note: As of July 12, 2011, the updated extension is now available on the Mozilla Exchange.

For those of you using version 1.0.0.1009P.274944 of our BrowserLab for Firebug extension, we wanted to let you know that it is not compatible with the recently released Firefox 5. This is just a temporary incompatibility – We’ve submitted an updated extension (v 1.0.0.1117P.302658) to the Mozilla Exchange team, and expect it to be available to you within the next few days.

For those of you that may not have tried BrowserLab for Firebug, this AdobeTV movie may help you decide if you can use it in your workflows.

Generally, when new versions of Firebug or Firefox are released, incompatibilities may be created that keep our BrowserLab for Firebug extension from working until it is updated. Although this is not unusual with Firefox extensions, we’re going to try to anticipate these changes so we can provide you with new versions of our BrowserLab for Firebug extension as quickly as possible. Fortunately, Firefox has an excellent update mechanism that will notify you automatically when there are new versions. If the BrowserLab for Firebug extension is a critical part of your workflow, you might want to consider waiting to update Firefox and/or Firebug until you also see an update to our extension.

 

Bruce Bowman
Adobe BrowserLab product manager
twitter: @brucebowman

BrowserLab v1.6 is now live

Coinciding with the release of Creative Suite 5.5, we’re now live with BrowserLab v1.6. This release adds some nice new features, such as Follow Links, URL History, new Italian and Spanish language support, as well as workflow improvements with BrowserLab for Dreamweaver. BrowserLab can be used in the following ways, one of which is sure to fit into your workflow:

  • BrowserLab Client: Access BrowserLab in your web browser, enter the URL, and do your cross-browser testing.
  • BrowserLab for Firebug: This Firefox extension allows you to test local content, that might have been changed using Firebug. It also enables you to test sites that are behind HTTP Authentication – just open your site in Firefox, log-in, then use BrowserLab for Firebug to Preview Local Source. We have a short AdobeTV movie showing this workflow
  • BrowserLab for Dreamweaver: Using Adobe Dreamweaver CS 5 or CS 5.5, you can send your current document to BrowserLab. This works with files that are on your Remote or Local servers. Using Dreamweaver’s powerful Freeze JavaScript feature, you can browse your site in the built-in WebKit browser, get it into a state, freeze, then send that to BrowserLab. BrowserLab will render your page, in that frozen state across all of the browsers in your Browser Set. Another AdobeTV movie shows the BrowserLab for Dreamweaver workflow.

On behalf of the whole BrowserLab Team, I’m happy to announce the immediate availability of BrowserLab v1.6. We hope you enjoy using it as much as we enjoy making it!

Bruce Bowman
Adobe BrowserLab product manager
twitter: @brucebowman

 

BrowserLab for Firebug update

BrowserLab for Firebug has been updated for compatibility with Firefox 4 and Firebug 1.7. It is now available for download from the Mozilla Exchange, and can be updated by using the Add-ons Manager in Firefox.

If you’re new to our BrowserLab for Firebug extension, you may be wondering why you would need it. BrowserLab for Firebug extends the usefulness of the BrowserLab service by enabling you to test pages that are not published on an internet web server. You can preview your html pages in Firefox on your local computer, then use BrowserLab for Firebug to push the local source to the BrowserLab service, where it will be rendered in multiple browsers. This means you can use all the power of Firebug to poke, change and debug your page locally, then test those changes/fixes across browsers in BrowserLab.

Another good reason to use BrowserLab for Firebug is to test sites behind HTTP authentication. E.g., let’s say you’re working on a new site for a client, and have the site hosted on a test server you use. Because the site is confidential, you’ve enabled simple HTTP authentication on the site. If you tried to view a page on this site using the BrowserLab client at http://browserlab.adobe.com, you’d find that the authentication prevents our browser servers from seeing your pages. But with BrowserLab for Firebug, you’d simply open Firefox, log into your site, then use BrowserLab for Firebug to Preview Local Source to the service, and see your page rendered in multiple browsers.

We hope you enjoy BrowserLab for Firebug!

Bruce Bowman
Adobe BrowserLab product manager
twitter: @brucebowman