20 JavaScript tools to blow your mind

16. Try visual regression testing with PhantomCSS

Every developer that’s been around for long enough has accidentally pushed a bug to production at one point or another. There’s no shame in that. Especially with UI development, it’s hard to prevent errors within CSS and HTML markup. Or is it? It turns out there is a package called PhantomCSS that helps with visual regression testing. It works by taking screenshots of before and after changes and calculating the difference between the two images.

17. Go beyond 'console.log'

Using console.log() to display data in the console while writing JavaScript apps is pretty common, but did you know you can use other console methods – such as dir() and table() – to help you visualise data while developing? 

That’s right; for a more interactive way of visualising objects in the console, use console.dir(object). If you have an array of objects you’d like to visualise, you can use console.table(array) to create a beautifully formatted table displaying all your data. Much easier on the eyes.

18. Use 'debugger'

One feature that often gets overlooked by developers is the debugger keyword. Instead of using console.log() to do some pseudo-debugging, simply add the debugger and modern browsers like Google Chrome will add a breakpoint so you can have a deeper look at your app’s state, including all local variables.

19. Remember semicolons are optional

Did you know that semicolons are (mostly) optional in JavaScript? The official JavaScript language specification has a feature called automatic semicolon insertion (ASI) that has caused riots within the community – pitchforks included. The reality is that an increasing number of developers are dropping semicolons in their JavaScript code, mostly due to personal preference. If that’s something you’re interested in doing, be sure to use a code linter such as ESLint to help you avoid some bugs and pitfalls.

20. Have a strict-typed codebase

An argument that some devs coming from other languages like to use against writing large-scale JavaScript apps is the lack of a strict type system. If that was only reason that kept them from migrating, it’s time for them to reconsider! 

There are two main projects that add an optional strict-type system to JavaScript: Flow, which was developed at Facebook, and TypeScript, developed at Microsoft. While using different strategies, both these projects aim to add catch bugs early by adding a JavaScript-friendly type system to applications.

This article was originally published in net magazine issue 285. Buy it here.

Related articles:

• 12 must-have code testing tools
• 5 hot new ways to use JavaScript
• 20 top examples of JavaScript