#106: Use BrowserStack for Live Web-Based Cross Browser Testing

by: Chris Coyier

Dec 12 2011

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive elements, nothing. Real cross-browser testing means opening those websites in real live browsers. Some people use virtual machines to do that testing, but that can be resource intensive in more ways than one.

BrowserStack is the holy grail of cross-browser testing. Real virtual machines that you can run and test with right in your browser, including localhost!

Running Time: 7:35

Download Video File

Something I didn't mention in the video: the browsers come pre-loaded with all the development tools you would need. For instance, open up IE 8 and you'll get Firebug Lite, the IE developer tools, and Companion.js

Subscribe to The Thread

  1. Renato Alves

    Great Screencast Chris. As always, bringing great content to the table. :)

    Reply ↓
  2. Mark Mitchell

    This is really nice. I also like http://crossbrowsertesting.com which goes a step further adding iOS and Android platforms. Both are very good. Nice job Chris. I have been surprised how few people seem to know these solutions exist.

    Reply ↓
  3. Michael Caputo

    It’s too bad they don’t have a referral system of some kind…

    Reply ↓
  4. supprof

    thank you very mutch chris Coyer
    you are doing a great job here
    so i saw your screen cast number 100 titled : #100: Let’s Write Semantic Markup and it was awesome. may be you can show us how the right way to style this semantic Markup. and how to use css3 in safe way with javascript.
    thank you very mutch

    Reply ↓
  5. antho

    Hi Chris, I’m visiting your site following your tweet from my android phone. I am now wondering why can t I see the video without downloading it? Is that a choice that you have made? If it’s the case, could you explain why?
    anyway, thank you for this great site!

    Reply ↓
  6. Robbie Day

    Is your decision not to support IE 7 with any styling out of protest to encourage visitors to update their browser?

    If not, I’d love to hear what’s behind that call.

    Thanks a ton for the post, I’ve been looking around for a good browser testing environment like this one!

    Reply ↓
  7. Gabe

    I like how they have a prepaid model in addition to their monthly subscription model. I try avoid monthly subscription services at all costs (so to speak). I have enough bills, and it’s too easy to wind up with a bunch of stuff that I only occasionally use but that I’m being charged for every month.

    If/when my business really takes off I may give this a shot, but I’m going to stick with Virtualbox/VM for my testing needs for now. It takes awhile to get VMs downloaded and set up, but once it’s all done it works great and it’s free.

    I work on a Mac, I followed this tutorial and have had good success: http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

    Reply ↓
  8. Niall

    a second for crossbrowsertesting.com same idea but much more options for browsers, mobile & operating systems,

    Reply ↓
  9. Jings

    Hey Chris,

    great Video. Just one Question. What Plugin do you use to log in to Browserstack?

    Thanks,
    Jings

    Reply ↓
  10. Adam

    Great intro vid to what looks like a very handy tool.

    Hope you are getting a commission because I’m off to signup now (after I check out your MAMP video).

    Oh and kudos for the IE7 protest.

    Reply ↓
  11. Hein Zaw Htet

    I want you to upload video file as .zip or .rar to reduce download time. Because connection in Myanmar is too bad.

    by the way, how to find topic ideas for CSS-Tricks?

    Reply ↓
  12. VIP Airport

    Agree with Michael Caputo, referral would be great help.

    Reply ↓
  13. Eddy

    Is it just me or does the downloadable video freeze at 4:32?

    Reply ↓
    • Bert de Vries

      Here at 4:12
      Weird.
      On line the video doesn’t run at all.

  14. dj

    @chris … What happend different in this screencast – ?change settings? I normally have no problem downloading and watching any of them. This one loads (seems like forever;but, really was 2 and 1/2 minutes) for a long time before starting; then, only plays about 4 seconds of material. Both screencasts before and after this one – seem to work fine! If you can tell from this explanation what changes – I’d really be interested in knowing to help understand the setting parameters better.

    Reply ↓
  15. Neil

    Really useful thanks Chris, looks like Browserstack like your screencast too, on their homepage!

    Reply ↓
  16. neuh

    Can you also test Samsung and/or LG’s Web TV browser? (message sent my TV…)

    Reply ↓
  17. Krsiak Daniel

    hi,

    thanks for sharing this site

    btw, as guys mentioned above
    video was lagging and froze like 2 times

    no slow net on my side ;]
    watching on DOWN. 90Mb/s, UP. 65Mb/s, ping 14ms speed

    Reply ↓
  18. Daniel

    I think this is a great solution, but has anyone else noticed how their time seems to be faster than everyone elses when you buy in hour blocks? hmmmm…. Silly trick to play, especially when a few of their features really need to be improved.

    Reply ↓
  19. Adam Murphy

    Spoon.net is a GREAT means of actually testing virtual applications, you can test all major browsers and versions easily without much work at all, better prices and much much faster speed (nice you’re testing it locally), only downside is windows only :[

    Reply ↓
  20. Devve Knulle

    In their FAQ on the BrowserStack site they say they run this on “Windows OS”, and I couldn’t tell from the vid whether you could select different Windows OS’es or just Windows 7. What if you need to see your site in Vista or XP, to see how poorly your otherwise great-looking web fonts get rendered? :)

    Reply ↓
  21. Peteris Krumins

    Also see my startup Browserling that does the same!

    Reply ↓
  22. Kevlar

    Seems the tech savvy here could easily just set up virtual machines for each platform. And, then you’re done.

    And, avoid paying fees to some vendor.

    That a dumb suggestion?

    Reply ↓
  23. Mikw

    Awesome stuff, just a suggestion, would be awesome if you make your vid louder.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~