A Complete List of Web Development Tools

Thank you for your feedback on my last week's post 'A Complete List of Windows Development
Tools'. I'd like to share a list of web development tools this week. Again, the most popular and
useful tools are highlighted. Please suggest any other tools in the 'Comments' and I will add them to
the list. To receive my future posts of DEV tool list for other technologies, you are more than
welcome to follow me in Twitter or subscribe to the newsletter.
You can use Chocolatey and Microsoft Web Platform Installer (for Microsoft components) to quickly
install most of the tools below.
Chocolatey is a Machine Package Manager based on NuGet. It's somewhat like apt-get in the Linux
world. For example, you can install Fiddler by simply typing 'choco install fiddler4' in Chocolatey.
Microsoft Web Platform Installer (Web PI) - a free tool that makes getting the latest components of
the Microsoft Web Platform easy.
1. IDEs and Web Editors
Online IDEs and Web Editors/Services
Cloud9 - Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud
Codeanywhere - a collaboration platform for developers. Enabling them to share their files, folders
or entire development environments to collaborate together in real-time.
CodePen - an HTML, CSS, and JavaScript code editor in your browser with instant previews.
Codio - the cloud coding & content platform for teaching computer science
Divshot - one platform for static web hosting and Bootstrap Builder for single page apps.
ICEcoder - ICEcoder is a browser based code editor, which provides a modern approach to building
websites.
JS Bin - JS Bin is a tool that enables you to learn, experiment and teach using web technologies.
JSFiddle - An online playground for your JavaScript, HTML, CSS

Offline IDEs (Differences between Code Editor and IDE)

Visual Studio - A rich, integrated development
environment for creating stunning applications for
Windows, Android, and iOS, as well as modern web
applications and cloud services.
- Popular Visual Studio plugins for Web Development:
Chutzpah - Chutzpah is an open source JavaScript test
runner which enables you to run JavaScript unit tests
from the command line and from inside of Visual Studio.
Cobisi Routing Assistant - Browse, define, match and filter ASP.NET MVC routes within ASP.NET
applications and web sites.
CodeMaid - CodeMaid is an open source Visual Studio extension to cleanup, dig through and simplify
our C#, C++, F#, VB, PHP, JSON, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and
TypeScript coding.
CssCop - FxCop for Stylesheets - CSSCop helps you write better and more browser compatible
stylesheets. It uses the CSS Lint (csslint.net) rules engine and is completely customizable.
File Nesting - Automatically nest files based on file name and enables developers to nest and unnest
any file manually
GitHub Extension for Visual Studio - The GitHub Extension for Visual Studio makes it easy to
connect to and work with your repositories on GitHub and GitHub Enterprise from directly within
Visual Studio 2015. Clone existing repositories or create new ones and start collaborating!
JSON Schema Generator - Create JSON schemas directly from a JSON file
Lua Test Adapter - Test Adapter and Test Framework for the lua scripting language.
Mexedge Stylesheet Extension - This Visual Studio extension allows you to visualize in a tree view
form the structure of your css files right into your Solution Explorer, from media directive to classes,
ids, types and declarations as well as pseudos.
Node.js Tools for Visual Studio - Turn Visual Studio into a powerful Node.js development
environment.
NuGet Package Manager - A collection of tools to automate the process of downloading, installing,
upgrading, configuring, and removing packages from a VS Project.
PHP Tools for Visual Studio - Provides full featured support for editing and debugging PHP
programs.
Razor Generator - Generates source code from Razor files (.cshtml files), allowing them to be
compiled into your assemblies. Supports MVC, Web Pages and standalone templates.

ReSharper - ReSharper helps your efficiently work with ASP.NET and ASP.NET MVC projects,
including markup files, with a whole pack of code analysis, coding assistance, navigation, and code
generation features. (Read more)
SideWaffle Template Pack - A side dish filled with item templates for building websites.
TypeScript for VS2013 and VS2015 - Visual Studio includes TypeScript in the box, starting with
Visual Studio 2013 Update 2.
Web Essentials - extends Visual Studio with a lot of new features that web developers have been
missing for many years.
etc
Visual Studio Code - Build and debug modern web and cloud applications. Code is free and available
on your favorite platform - Linux, Mac OSX, and Windows. Develop ASP.NET and Node applications
at lightning speed
Eclipse - a platform that has been designed from the ground up for building integrated web and
application development tooling.
- Popular Eclipse plugins for Web Development:
AngularJS Eclipse - AngularJS Eclipse Plugin extends Eclipse WTP to provide an HTML editor which
supports AngularJS expression and directive, provides an Angular Explorer view which displays
modules, controllers of your project in a tree, and provides a Javascript editor which supports
AngularJS features (modules, etc).
Bravo JSP editor - Bravo JSP editor is a WYSIWYG JSP/HTML editor. It also include a powerful DOM
modified tool, String externalize wizard. The free edition can be freely used without time limitation,
commercial used is permitted.
Eclipse WTP WebResources (EWW) - Eclipse WTP provides HTML editor with several completions
(tags, CSS styles declaration, etc) but it misses some features about Web resources (CSS, JavaScript,
Images).
Emmet - the essential toolkit for web-developers (read more).
Enide Studio - Tool Suite for Node.js, JavaScript, Java Development.
MyEclipse Blue Edition - The alternative to IBM Rational for WebSphere and Liberty Profile
development now with mobile tools for iOS 7 and Android, Java EE 7, REST + JPA reverse
engineering to make cloud, web, mobile and desktop apps.
Nodeclipse - Nodeclipse Core & Node.js (nodeclipse-1) is Eclipse plugin for the Node.js. - See more
at: https://marketplace.eclipse.org/content/nodeclipse#sthash.51c14bPb.dpuf
Tern Eclipse IDE - Tern Eclipse IDE is Eclipse plugins based on tern.java which extends JSDT
JavasScript Editor with tern to improve : JavaScript completion, JavaScript text hover, JavaScript
validation, JavaScript hyperlink

TypeScript for Eclipse - An Eclipse plug-in for developing in the TypeScript language.
VJET JavaScript IDE - VJET JavaScript IDE is an Eclipse plugin that provides a fully integrated
development environment for JavaScript - from authoring, to execution/test, and debugging.
Web Tools Platform (WTP) - The Eclipse Web Tools Platform (WTP) project extends the Eclipse
platform with tools for developing Web and Java EE applications. It includes source and graphical
editors for a variety of languages, wizards and built-in applications to simplify development, and
tools and APIs to support deploying, running, and testing apps.
WireframeSketcher Wireframing Tool - a rapid wireframing tool that helps quickly create
wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a
plug-in for any Eclipse IDE and a standalone version.
Zend Studio - The PHP IDE - The next-generation PHP IDE designed to create robust PHP apps while
boosting developers' productivity.
etc
NetBeans IDE - A free, open-source IDE that enables you to quickly and easily develop desktop,
mobile and web applications with Java, HTML5, PHP, C/C++ and more.
WebStorm - a lightweight yet powerful IDE, perfectly equipped for complex client-side development
and server-side development with Node.js.
PhpStorm - Enjoy productive PHP and web development with PhpStorm. Take advantage of deep
code understanding, top-notch coding assistance, and support for all major tools and frameworks.
Offline Web Editors
Atom - Atom is a text editor that's modern, approachable, yet hackable to the core--a tool you can
customize to do anything but also use productively without ever touching a config file.
- Popular Atom plugins for Web Development:
AngularJS support in Atom - Adds syntax highlighting and snippets to AngularJS in Atom.
atom-beautify - Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C,
CoffeeScript, TypeScript, and SQL in Atom
Atom TypeScript - JavaScript developers can now just open a .ts file and start hacking away like they
are used to.
Emmet - the essential toolkit for web-developers (read more).
Jshint - Validate JavaScript with JSHint. In realtime or on save. Supports JSX (React).
turbo-javascript - A collection of commands and ES6-ready snippets for optimizing Javascript
development productivity.
etc

Brackets - A modern, open source text editor that understands web design.
Coda - a commercial and proprietary web development application for Mac OS X.
Dreamweaver - The all-in-one web authoring toolset now helps you build modern sites that adapt to
fit any size screen, and you can make them look great with beautiful, high-quality images from new
Adobe Stock.
Expresso (including CSSEdit) - a web editor for Mac OS X.
HTMLKit - edit with full-control. Code helpers, generators and shortcuts including Zen Coding are
there when you need them.
Notepad++ - Notepad++ is a free source code editor and notepad replacement that support several
languages.
- Popular Notepad++ plugins for Web Development:
(You can install Notepad++ plugins in its Plugins menu)
Emmet - the essential toolkit for web-developers (read more).
JSLint - a static code analysis tool used in software development for checking if JavaScript source
code complies with coding rules.
JSMin - a filter that removes comments and unnecessary whitespace from JavaScript files.
JSON Viewer - Displays the selected JSON string in a tree view.
read more about this here
Rapid CSS - Rapid CSS editor makes it easy to create, design and edit modern CSS-based websites.
Stylizer - helps you style websites in a fraction of the time.
Sublime Text - Sublime Text is a sophisticated text editor for code, markup and prose.
- Popular Sublime Text plugins for Web Development:
AngularJs Sublime Text 2 Bundle - provides snippets for all the available AngularJS api calls. The
snippets are activated both in HTML and CoffeeScript.
AutoFileName - autocomplete file names in Sublime Text.
Chai Completions - provides full completions for the Chai Assertion Library in Sublime Text
CoffeeComplete Plus (CC+) - a Sublime Text 2 plugin that scans your CoffeeScript files on demand
and makes autocomplete suggestions for you.
DocBlockr - a package for Sublime Text 2 & 3 which makes writing documentation a breeze.
DocBlockr supports JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript,

Java, Apex, Groovy, Objective C, C, C++ and Rust.

Emmet - the essential toolkit for web-developers (read more).
SublimeCodeIntel - full-featured code intelligence and smart autocomplete engine
TextMate - a general-purpose GUI text editor for Mac OS X
TopStyle - a powerful HTML5 & CSS3 editor for Windows.
WebMatrix - a free, lightweight, cloud-connected web development tool for you to create, publish,
and maintain your website with ease.
2. Web Browser Tools
Chrome - a freeware web browser developed by Google.

Popular Chrome Tools for Web Development:

Accessibility Developer Tool - accessibility audit and element properties.
Appspector - Detect web applications and javascript libraries run on browsing website.
BuiltWith Technology Profiler - find out what the website you are visiting is built with using this
extension.
Code Cola - a chrome extension for editing online pages' css style visually.
Codota - Turns your browser into a powerful code viewer that brings android and java code snippets
to life. Codota analyzes code snippets in web pages and helps read, understand and save the code.
ColorZilla - Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
DevTools Theme: Zero Dark Matrix - A highly customized dark theme for Devtools.
EditThis Cookie - a cookie manager. You can add, delete, edit, search, protect and block cookies!
F12 - The built-in Chrome developer tools
Firebug Lite for Google Chrome - Firebug Lite is not a substitute for Firebug, or Chrome Developer
Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual
representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and
Box Model shading. It provides also some cool features like inspecting HTML elemements with your
mouse, and live editing CSS properties.
Font Playground - Preview your site with Google web fonts and get the css code.
IE Tab - Display web pages using IE within Chrome. Supports ActiveX controls, Sharepoint, ICBC,
alipay.

iMacros for Chrome - Automate your web browser. Record and replay repetitious work. You can use
this tool to test your web pages.
JSONView - validate and view JSON documents
kimono - Turn websites into structured APIs from your browser in seconds
ng-inspector for AngularJS - ng-inspector is a browser extension that displays an inspector panel
showing the AngularJS scope hierarchy in the current page in real time, as well as which controllers
or directives are associated with which scope.
Postman - a Web REST client that allows you to enter and monitor HTTP requests and responses.
Build, test, and document your APIs faster.
Proxy SwitchyOmega - Manage and switch between multiple proxies quickly & easily.
Resolution Test - An extension for developers to test web pages in different screen resolutions, with
an option to define your own resolutions.
Responsive Inspector - allows viewing media queries of visited websites. It is very useful when
developing responsive web layouts as it can visually show what resolutions are defined in css
stylesheets.
Responsive Web Design Tester - a quick and easy way to test your responsive website.
Tampermonkey - the most popular userscript manager for Google Chrome. You can manage and edit
all your userscripts; enable and disable your scripts with 2 clicks, etc.
Web Developer - adds a toolbar button to the browser with various web developer tools. This is the
official port of the Web Developer extension for Firefox.
WhatFont - The easiest way to identify fonts on web pages.
YSlow - YSlow analyzes web pages and suggests ways to improve their performance based on a set
of rules for high performance web pages.

Edge - initially developed under the codename Project Spartan, is a web browser in development by
Microsoft.
F12 - the built-in Edge developer tools
Firefox - a free and open-source[18] web browser developed by the Mozilla Foundation and its
subsidiary
Popular Firefox Tools for Web Development:

ColorZilla - Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
Firebug (Firefox's F12) - Firebug integrates with Firefox to put a wealth of development tools at your
fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in
any web page
FoxyProxy Standard - FoxyProxy is an advanced proxy management tool that completely replaces
Firefox's limited proxying capabilities. For a simpler tool and less advanced configuration options,
please use FoxyProxy Basic.
Greasemonkey - Customize the way a web page displays or behaves, by using small bits of
JavaScript.
iMacros for Firefox - Automate Firefox. Record and replay repetitious work. If you love the Firefox
web browser, but are tired of repetitive tasks like visiting the same sites every days, filling out
forms, and remembering passwords, then iMacros for Firefox is the solution you've been dreaming
of! Web Developers can use this tool for automated test purposes.
Rainbow Color Tools - Color picker and eyedropper + saving colors and trying out colors with drag
and drop.
Stylish - Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes
and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. You can even
customize Firefox and other programs themselves.
Tiny JavaScript Debugger - TinyJSD is a JavaScript debugger for privileged code running Mozilla
products like Firefox, Thunderbird, SeaMonkey. It serves to debug the application as well as
extensions written in JavaScript.
User Agent Switcher - The User Agent Switcher extension adds a menu and a toolbar button to
switch the user agent of a browser.
YSlow - YSlow analyzes web pages and suggests ways to improve their performance based on a set
of rules for high performance web pages.
Web Developer - The Web Developer extension adds various web developer tools to the browser.
Internet Explorer (IE) - web browser developed by Microsoft
Popular IE Tools for Web Development:
HttpWatch - an HTTP data viewer and debugger extension
F12 - The built-in IE developer tools
Firebug Lite for IE - a bookmarklet that provides a lightweight version of Firebug.
Web Accessibility Toolbar - The WAT for IE can assist in evaluating a web page for compliance to the
Web Content Accessibility Guidelines version 2.0 (WCAG 2.0).
Opera - a web browser developed by Opera Software.

Popular Opera Tools for Web Development:

Dragonfly - a JavaScript application used to debug local and remote Web pages.
Firebug Lite for Opera - a bookmarklet that provides a lightweight version of Firebug.
JsonViewer - Extension formats and highlights JSON data loaded from file or server
Web Developer - The Web Developer extension adds a toolbar button to the browser with various
web developer tools. This is the official port of the Web Developer extension for Firefox.
Safari - web browser developed by Apple
Popular Safari Tools for Web Development:
Dam Bugs Bug Report - take screenshots and report bugs using your Damn Bugs account. Capture
any web page, make annotations, and attach files.
Firebug Lite for Safari - a bookmarklet that provides a lightweight version of Firebug.
Fontface Ninjua - recognize, try, and download any font on the Internet.
JSONAce - Formats and syntax highlights JSON while viewed inside of browser using the ACE editor.
JsonView - Formats and syntax highlights JSON files inside the browser.
ng-inspector for AngularJS - ng-inspector is a browser extension for Chrome and Safari that displays
an inspector panel showing the AngularJS scope hierarchy in the current page in real time, as well
as which controllers or directives are associated with which scope.
node-navi - JavaScript projects often include more dependencies than the average human brain can
keep track of. Using small modules to orchestrate your project is great, but is troublesome to
navigate across modules. node-navi is a Safari extension which attempt to solve this problem by
adding links to require ('module') declarations and dependencies in JS files, package.json,
bower.json, etc. on Github.
Responsive Browser - Responsive Browser is a Safari extension bar to help you design and code
responsive websites and apps.
Unicode Character Identifier - provides a contextual menu item to look up selected characters and
display Unicode information in a popover.
Web Inspector - Web Inspector is your command center, giving you quick and easy access to the
richest set of development tools ever included in a web browser. With Web Inspector, you see
Safari's developer tools in a clean, unified interface designed to make developing web applications
for OS X and iOS more efficient.
3. Testing & Diagnostics (Debugging, Performance) Tools
General Web Testing & Diagnostics Tools

Browser screenshots by Microsoft - See how your site renders across a selection of common
browsers and devices. Powered by BrowserStack.
BrowserStack - an amazing cloud of virtual machines running dozens of browsers on as many
operating system. A fantastic cross-browser testing tool that has optional Visual Studio integration.
Fiddler - a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the
Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with
incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be
extended using any .NET language.
Glimpse - provides real time diagnostics & insights to the fingertips of hundreds of thousands of web
developers daily
GTmetrix - gives you insight on how well your site loads and provides actionable recommendations
on how to optimize it.
iMacros - Whatever you do with a web browser, iMacros can automate it from web automation/web
scripting, to data extraction, to web testing, and much, much more.
MITE by keynote - A free desktop-based tool for testing and verification of mobile Web content.
PageSpeed Tools by Google - The PageSpeed tools analyze and optimize your site following web best
practices.
PageSpeed Insights - PageSpeed Insights analyzes the content of a web page, then generates
suggestions to make that page faster.
RemoteIE by Microsoft - Free test service using Azure RemoteApp to run IE on your Windows, Mac,
iOS or Android device.
Runscope - helps you monitor your web API and web service performance and solve problems fast.
Site scan by Microsoft - Run a quick static code scan on any URL to check for out-of-date libraries,
layout issues and accessibility
TestCafe by Devexpress - automates QA processes and test your websites and apps across browsers,
operating systems and devices.
YSlow - analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web
sites
JavaScript, jQuery, AngularJS Testing & Diagnostics Tools
Buster.JS - a browser JavaScript testing toolkit and a node.js testing toolkit.
Chutzpah - Chutzpah is an open source JavaScript test runner which enables you to run JavaScript
unit tests from the command line and from inside of Visual Studio.
Google JS Test (gjstest) - a fast javascript unit testing framework that runs on the V8 engine, without
needing to launch a full browser.

Jasmine - Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not
rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, Node.js projects,
or anywhere that JavaScript can run.
jQuery's TestSwarm - provides distributed continuous integration testing for JavaScript.
Karma - a JavaScript test-runner built with Node.js, and meant for unit testing.
Mocha - a feature-rich JavaScript test framework running on Node.js and the browser, making
asynchronous testing simple and fun.
Protractor - end to end testing for AngularJS
QUnit - QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery,
jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code,
including itself!
Sinon.JS - Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any
unit testing framework.
WebStorm - WebStorm provides facilities for running JavaScript unit tests against a local or remote
test server. You can run test cases, methods, or entire test files.
yolpo - A tool to see the execution of plain and simple JavaScript code
ASP.NET Testing & Diagnostics Tools
.NET Memory Profiler - Find Memory Leaks and Optimize Memory Usage in any .NET Program
ANTS Performance Profiler - Profile and boost the performance of your .NET applications
DebugDiag - designed to assist in troubleshooting issues such as hangs, slow performance, memory
leaks or memory fragmentation, and crashes in ASP.NET app and any other user mode processes.
Sos.dll - The SOS Debugging Extension (SOS.dll) helps you debug managed programs (e.g. ASP.NET
process) in the WinDbg.exe debugger and in Visual Studio by providing information about the
internal common language runtime (CLR) environment.
Visual Studio Debugger- Debug .NET and native C++ apps in user mode and use the edit-an-continue feature to correct simple code errors without recompiling. Included in Visual Studio.
Visual Studio Profiling / Performance Wizard - You can use the Performance Wizard to collect
performance data for an ASP.NET Web application. You can profile a Web application that is open in
Visual Studio, or you can profile an ASP.NET Web site that is located on your local computer and not
open in the Visual Studio IDE.
Windbg - The most advanced and comprehensive debugging tool. Together with SOS.dll, it can be
used to debug ASP.NET apps too.
4. Web Optimization Tools

JavaScript Optimization
AjaxMin - The Microsoft Ajax Minifier enables you to improve the performance of your web
applications by reducing the size of your Cascading Style Sheet and JavaScript files.
Chirpy - VS addin to mash, minify, and validate your javascript, stylesheet, and dotless files. Behind
the scene, it uses Google Closure Tools, YUI Compressor for .Net, Ajax Minifier, or Uglify.js to minify
and mash all of your precious assets.
Closure compiler - The Closure Compiler is a tool for making JavaScript download and run faster. It
is a true compiler for JavaScript.
JSLint - a JavaScript program that looks for problems in JavaScript programs. It is a code quality
tool.
JSMin - JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files.
Packer - A JavaScript Compressor.version 3.0
YUICompressor - The Yahoo! JavaScript and CSS Compressor
CSS Optimization
AjaxMin - The Microsoft Ajax Minifier enables you to improve the performance of your web
applications by reducing the size of your Cascading Style Sheet and JavaScript files.
CSSCompressor - Use CSS Compressor to compress CSS (CSS 1, CSS 2, CSS 2.1 & CSS 3) to reduce
CSS code size and make your website load faster.
CSSTidy - CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file
(available for Windows, Linux and OSX) which can be controlled per command line and as PHP
script (both with almost the same functionality).
Minify - Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.
YUICompressor - The Yahoo! JavaScript and CSS Compressor
Image Optimization
OptiPNG - a PNG optimizer that recompresses image files to a smaller size, without losing any
information.
PNGGauntlet - Combines PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs
PNGOUT - a tool which can optimize PNG files created by other programs.
ASP.NET Optimization
combres - ASP.NET and MVC performance optimization library
Search Engine Optimization

Anchor Text Over Optimization Report - This tool is used to identify your anchor text diversity and
highlight those areas where you are at risk for anchor text over optimization.
Bing Webmaster Tools - ask bing to index your website
Copyscape - search for copies of your page on the web.
Google Search Console - teach google to index your website
Keyword Tool - Get 750+ google keyword suggestions for free.
Microsoft Free SEO Toolkit - Start with the free download, review your website, and make changes
fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestions helps improve
the relevance of your website in search results right away.
http://www.coffeecup.com/
SEO Browser - see your website like a search engine sees it.
Seobin - This free SEO tool will help you optimize title tags and tweak meta description tags.
Optimizing title tag and description tag is crutial if you want to rank better for your keywords,
because the title and description tag is what shows up in the SERP.
SEO overview tool - Displays domain strength, links, image seo, social counts & mentions,
page/technical seo, pagespeed and more.

http://scottge.net/2015/07/28/a-complete-list-of-web-development-tools/