Revolution Slider Error: Slider with alias Ads not found.

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 ( 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:
    • Tern Eclipse IDE – Tern Eclipse IDE is Eclipse plugins based on 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.
  • 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.
  • 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.
  • Ghost Inspector – Ghost Inspector lets you create and manage UI tests that check specific functionality in your website or application.
  • 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.
  • Selenium – Selenium is a suite of tools to automate web browsers across many platforms.
  • 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-and-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.
  • 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.

19 thoughts on “A Complete List of Web Development Tools

Leave a Reply