1 note &

6 Web Development Extensions You Should Be Using (But Aren’t)

As developers we’re relying on web development tools more than ever before. And the more we depend on them the smarter and more effective they’re becoming.

A large chunk of tools we depend on are browser extensions. And with an endless array of them to choose from, (Google Chrome has over 50K), are you finding the best ones out there?

Of course, we all know and use a handful of the most popular extensions available but there are many that you’re probably not aware of and really should be using to boost your web development skills and lighten your coding load.

Below are 6 browser extensions you probably haven’t come across and must make room for in your web development toolkit:

1. JSON view

We all know how frustrating it is to have to download JSON files in order to view them. With the JSONView extension you can view a JSON file in your browser without having to download it.

The document is formatted, highlighted, plus arrays and objects can be collapsed. So, even if the JSON document contains errors, JSONView will still show the raw text.

Once you’ve got JSONView installed, check out http://jsonview.com/example.json to see the extension in action!

Get it: https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc

2. Live Reload

Reloads the page automatically when file changes are made, except for CSS and JavaScript file changes.

When you’re busy coding away the last thing you want to do is keep reloading the page each time you make CSS and JavaScript file changes. Live Reload helps out by applying your CSS and JavaScript changes without reloading the page.

When it comes to other file changes (html, image, server-side script, etc) Live Reloader automatically reloads the page.

Get it: https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei

3. Dotjs

Dotjs is a Google Chrome extension that executes JavaScript files in ~/.js based on their filename.

Dotjs makes it super easy to spruce up your favorite pages using JavaScript.

All files in ~/.js have jQuery 1.6 loaded, regardless of whether the site you’re hacking uses jQuery. And ~/.js/default.js is loaded on every request, meaning you can stick plugins or helper functions in it.

Get it: http://defunkt.io/dotjs/

4. CoffeeConsole

A Chrome extension that lets you do CoffeeScript right from the console in Chrome’s Web Inspector.

CoffeeConsole is a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window.

Get it: http://snook.ca/archives/browsers/coffeeconsole

5. jQuery API Browser

Quickly browse through jQuery API documentation with autocomplete search.

A simple extension for jQuery developers that allows you to quickly search through API documentation.

Displays a short method description, a list of available parameters, and provides a direct link of this method on the jQuery site. All alternate signatures for the current method are also shown.

Get it: https://chrome.google.com/webstore/detail/abefhanahjellfbchdmkjdcchkogijhk

6. Github Commits & Diffs

This Crossrider extension, developed by Dor Kalev, lets you see all the diffs for every commit on a single page.

Instead of having to spend time browsing through every commit to find out what the diffs are, you can now view them all on one page.

Get it: http://crossrider.com/install/2247-github-commits+diffs

If you know of an awesome extension that you think we should have added, let us know in the comments below.

Filed under web development browser extension javascript

  1. crossrider posted this