Grow your CSS skills. Land your dream job.

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

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!

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

Comments

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

  2. 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.

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

  4. supprof
    Permalink to comment#

    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

  5. Permalink to comment#

    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!

  6. Robbie Day
    Permalink to comment#

    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!

  7. Gabe
    Permalink to comment#

    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/

  8. Niall
    Permalink to comment#

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

  9. Jings
    Permalink to comment#

    Hey Chris,

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

    Thanks,
    Jings

  10. Adam
    Permalink to comment#

    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.

  11. Hein Zaw Htet
    Permalink to comment#

    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?

  12. Agree with Michael Caputo, referral would be great help.

  13. Eddy
    Permalink to comment#

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

    • Bert de Vries
      Permalink to comment#

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

  14. dj
    Permalink to comment#

    @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.

  15. Neil
    Permalink to comment#

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

  16. neuh
    Permalink to comment#

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

  17. 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

  18. Daniel
    Permalink to comment#

    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.

  19. Adam Murphy
    Permalink to comment#

    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 :[

  20. Devve Knulle
    Permalink to comment#

    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? :)

  21. Also see my startup Browserling that does the same!

  22. Kevlar
    Permalink to comment#

    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?

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

  24. Permalink to comment#

    Any Chance that we get a headless IE for MAC? Would like to use it for mac . Or should we consider Browserstack?

  25. I like it also, but, as we move into The Responsive World of mobiles and 4K monitors, more resolutions would be helpful.

  26. Hi Chris,

    1.67 years later… are you still recommending browserstack?

    Thanks, Ron

    • I used it today a bunch! I still like it. Although, if I’m doing TONS of debugging I run Parallels on my Mac. VM with Windows right on my machine. It’s just a lot faster. Although that’s just IE stuff. Browserstack shines with all the mobile emulators and such.

    • Thanks… I’m not going to spend any time comparing it to crossbrowsertesting.com.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".