How To Test JavaScript Code In A Browser
Tags: javascript, testing, html, webdev
Published: 2019-02-14 11:58:36

---
title: How To Test JavaScript Code In A Browser
published: true
description: Check out six popular tools and techniques for performance testing and debugging your application's JavaScript code in a browser, like JSFiddle and CodePen.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gqf983qw0p4cs216sozg.jpg
tags: #javascript #testing #html #webdev 
---

Testing JavaScript can be a pain. A lot of tools, techniques, and frameworks have been developed to make the process as painless as possible. While some of these tools like Mocha, Jasmine and Jest provide a testing structure, some others like Istanbul and Blanket generate code coverage reports too. Different methods of testing JavaScript code in a browser have different prospects and consequences. It is hard to narrow down on one tool or technique for all solutions!

Let us have a quick look at some of the most popular ways to test JavaScript code in a browser.

##1. JSFiddle##
Whether you are working with JavaScript or frameworks like React and Vue, [JSFiddle](http://jsfiddle.net/) is the tool for you. It is an online tool to write and test JavaScript code in a browser. It was launched as "Mooshell" in 2009. If your working on a web application and using any kind of JavaScript library then JSFiddle is something worth a look. The interface is extremely simple and you just need to type some JavaScript or even add some HTML and CSS to it and instantly see the results. Test your JavaScript code snippets before adding them to your project using JSFiddle!

##2. Cross Browser Testing Tools ##
Although you can easily use tools like JSFiddle and CodePen to test your JavaScript code, these won’t show you how your code outputs in different browsers or mobile browsers. In case you want to test your code for cross-browser compatibility you need to use online cross-browser testing tools like [LambdaTest](https://goo.gl/CvaBNC). It enables live interactive browser testing, automated screenshot testing, responsive layout testing, and smart visual UI testing. The tool will speed up your testing cycles a lot and help you with browser specific issues in your code.

##3. Karma + Jasmine + Google Chrome##
[Karma](https://github.com/karma-runner/karma-chrome-launcher/issues/154) is a tool that lets you test JavaScript code in a browser for a lot of testing purposes. However, it does not test the code itself. It executes the code but relies on third-party libraries like Jasmine and Mocha for testing. Apart from that, it requires a real browser. Thus Google Chrome must be installed on your local machine for this method of JavaScript to work. It launches Google Chrome in headless mode for its operation.

##4. CodePen##
[CodePen](https://codepen.io/#) is one of the best online tools to test your HTML, CSS and JavaScript code online. This community of developers has a lot to teach! This open-source learning environment probably has probably the largest community of developers with a whopping 330000 registered users constantly working towards developing amazing front-end applications. It is one of the best platforms to build and deploy a website, show the world your work and build test cases.

##5. JSBin##
[JSBin](https://jsbin.com/?html,output) is a neat and clean alternative to JSFiddle. If you want something with an easier to understand and less cluttered interface, then JSBin is the tool for you. The platform has a free and a pro-access. For advanced features like private bins and unlimited dropbox sync you need to go pro, however, you can easily test any combination of HTML, CSS, and JavaScript using JSBin general access.

##6. Liveweave##
[Liveweave](https://liveweave.com/) is yet another coding playground where you can test your JavaScript code. It has live preview capabilities and comes equipped with a ruler to help you with responsive designing. Its code-hinting feature for HTML, CSS, and JavaScript makes it easy for beginners to type the code. Apart from that, you can download your project as a .zip file using Liveweave and also add and use external libraries such as jQuery, AngularJS, Bootstrap etc. quite easily in your code.

These were some of the most popular ways to test your JavaScript code in a browser. Apart from this, you may even use tools like CSSDeck and Dabblet too. These are equally good and easy to use. Apart from that, Firebug and Chrome Developer Tools have Javascript console, where you can type JavaScript code for execution. Same applies to Internet Explorer 8+, Opera, Safari and potentially a lot of other modern browsers.

Source: [dzone.com](https://dzone.com/articles/how-to-test-javascript-code-in-a-browser)