Which web browser should I use to test (basically debug) my HTML code?

I need to debug and not preview the code.

The following browsers are the mainstream options that get updated and have influenced me:

  • Firefox
  • Google Chrome
  • Chromium
  • Firefox Developer Edition

Which of the above has better (comparably!) tools to test debug and live with the HTML/CSS3/JS codes?

Note: If you suggest any, please tell the reasons, and more importantly be unbiased because I want to end up with a better browser, not your favorite browser.

  • The Chromium browser doesn't go gr8 with linux... Jun 13 '15 at 13:58
  • 1
    We don't compare software here. Please rephrase your question to ask for a browser which has the features (that are more specific than 'to test debug and live...') you want. Jun 13 '15 at 14:32
  • And how exactly do you debug HTML?? I understand for JS, but html/css...? Jun 13 '15 at 14:32
  • well All the html and js and css combined i refer html as the complete web tech. Jun 13 '15 at 16:12
  • I've heard good things about browserstack though it costs $$. It aggregates multiple platforms into a single instance for testing/debugging. browserstack.com Jun 15 '15 at 3:16

Short answer:

All of them.

Long answer:

As a web developer you won't get around testing and debugging your applications regularly with multiple browsers. No matter how much you like BrowserX and dislike BrowserY, when the bug only occurs in BrowserY, you need to debug it with the tools BrowserY provides. So as a web developer you need to relinquish the mindset of "your" browser and get used to using all of them simultaneously for development.

However, many browsers use the same rendering engine and only differ by the user interface around them. When a website works in one browser of the family, it usually works in all of them. So for testing during development (proper QA testing before release is a different issue), you need one browser of each family:

  • Google's Blink: Chrome, Chromium, Opera (recent versions) and a large number of niche browsers all use the Blink rendering engine and the V8 Javascript engine.
  • Apple's WebKit: Blink is based on WebKit, so they are still very similar. But both projects start to diverge, which means testing on both branches becomes more and more necessary. The most well-known browser which uses Webkit is Apple's Safari.
  • Mozilla's Gecko: The most well-known user is Firefox, as well as any other Mozilla-based products.
  • Microsoft's Trident/Edge: Used by Microsoft Internet Explorer, obviously, and more subtly by many other programs on Windows which display HTML content as a secondary function. MSIE was always a major headache for web developers due to Microsoft's update policy. Newer versions are only available for the newest Windows version at their release date, which means in contrary to other browsers, older versions retain considerable market share. To make matters worse, it is very tricky to install multiple versions of IE on the same operating system. But fortunately Microsoft has finally understood that developers are important to them, so the development tools for Internet Explorer 11 got an emulation mode for earlier versions down to the antique version 5. The emulation is quite reliable, so you only need IE11 to test the whole IE family. Using virtual machines with multiple versions is usually not necessary anymore.

The biggest problem with these is that while recent versions of Safari are only available on iOS, Internet Explorer 11 is only available on Windows 7 or later. So you either still need at least two operating systems or need to do without testing one of them. Microsoft conveniently provides free-of-cost virtual machines pre-configured with various combinations of Windows OS + Internet Explorer intended for testing web pages/apps.

  • Great answer. I would also add that some testing on mobile phones and tablets also necesary to be sure the site works or degrades gracefully on more fancy platforms. Ultimately, developers should consider the most typical browsers that target users are expected to use.
    – Alejandro
    Jun 14 '15 at 14:23

Basically the correct answer is all of them plus the W3 Reference Amaya and the compatibility checker(s). Ideally you test as many as possible including older, but common, versions and mobile devices.

There are quite a few online resources that can help:

  • Browser Stack - Paid for Cross browser testing
  • Modern IE - Download Virtual Machines configured with IE 6-11
  • You can also download things like the Android SDK which includes device emulators.

Well I'll suggest IE11, Google Chrome And Firefox

Why 3? Simple

  1. When you make a cross-browser application you need to test that your design looks most identical as possible.
  2. Firefox offers good developers tools for debugging And many grates plugins like response design, dropper, etc.
  3. IE allows to view the page like previous versions of IE, like IE8, (I don't like it but is still quite popular)
  4. Each Browser offers consoles withs different way to show errors And in some cases is more easy identify it.

I would recommend to use all of the above.

Not the answer you're looking for? Browse other questions tagged or ask your own question.