Tools of the trade: the browser-based tools the Guardian's digital team uses for coding

As a department, the Guardian's Digital Development team have quite a few preferred tools when it comes to quickly testing things, sharing short snippets of code, or producing test cases to share with other developers to quickly help debug issues. Some of them are well known and loved, others are newer and perhaps in need of publicity. This post summarises an internal email kicked off by QA Gwyn Lockett, discussing some of the tools on the Guardian's Swiss army knife of debugging.

jsFiddle

This is a pretty common one, suggested by Gwyn. jsFiddle allows developers to quickly throw together blocks of HTML, CSS and JavaScript, and instantly see the results. Not only that, but these pages can be shared and forked by other developers, making them useful when linked in questions on sites like StackOverflow. jsFiddle also has a nice feature where common JavaScript frameworks can be automatically included in the fiddle itself.

JS Bin

Suggested by our Developer Advocate, Michael Brunton-Spall, JS Bin is similar to jsFiddle but perhaps simpler and quicker. As well as the features of jsFiddle it also offers a console similar to the one bundled with the browser's developer tools, and has a much more minimalist user interface which allows you to get straight down to coding.

CodePen

CodePen, suggested by client-side developer Matt Andrews, is similar to the other tools above but is aimed equally at teaching others – its Pro mode offers a "live view" which updates as you code, and "Collab Mode" where multiple people can edit at the same time. It also features a paid-for "Professor Mode" which allows multiple people to watch one person teach a code example on a single page.

wireframe.cc

Wireframe.cc, suggested by developer Ken Lim, is a beautifully-designed tool allowing quick and simple wireframing of products. Its click-and-drag interface and limited colour palette make it simple to produce standardised "blueprints" and as with the other tools listed here, is geared up for sharing and collaboration too.

RequestBin

Developer Roberto Tyley suggested this tool (with possibly the coolest URL on the list), which in its own words, "lets you create a URL that will collect requests made to it, then let you inspect them in a human-friendly way". Rather than burying your head in server logs or browser network traces, use this to see useful information easily.

REDbot

Another suggestion from Michael Brunton-Spall: this time it's a tool which checks a page's cache headers and informs you about best practice. As Michael says, "it will let you know if you've forgotten to set the max-age correctly, if you've got static content without far future headers and so forth". Very useful.

Postman Chrome extension

Lead Android developer Rupert Bates suggested Postman, a REST client for Chrome. It allows you to quickly create HTTP requests with optional parameters, file upload support, variables and more, for testing APIs and other RESTful endpoints.

Python Tutor

A third suggestion from Michael Brunton-Spall, Python Tutor isn't strictly a tool, but an educational program showing how Python code is executed. It beautifully illustrates the flow of code and how variables and methods interact with one another, making it useful for students and teachers alike.

Python Anywhere

Developer Nicholas Tollervey, a Python guru, immediately rose to Michael's challenge and submitted PythonAnywhere as a "a funky service that, er, lets you get a hosted Python console anywhere (browser, iPhone, Android etc...)". Essentially a Python platform in the cloud, it makes for quick and accessible Python environments solely via a web browser.

Cloud9 IDE

Client-side developer James Gorrie suggested Cloud9 IDE, a masterfully-designed browser-based IDE. It's powerful and features good integration with common development tools, and even offers a free version. Proof of the power of HTML5 and the things we can build with them today.

Suggestions from Twitter

Followers of the @gdndevelopers account submitted a couple of additions to this list – here's a few of the best.

Niall Paterson seconded our recommendation of CodePen, while James Sewell told us he prefers REST Console over Postman. Former Guardian Developer Dan Vydra suggested a couple of useful tools, too: /reFiddle+/, an interactive regex editor, and Edit This Cookie, a Chrome extension for, well, editing cookies.

What are your web development must-haves? Are there any useful browser-based debugging tools we've missed? Let us know below.