Web development tools

Jump to: navigation, search

Web development tools allow web developers to test and debug their code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

Web development tools come as browser add-ons or built-in features in web browsers. The most popular web browsers today, Google Chrome, Firefox, Opera, Internet Explorer, UC browser and Safari,[1] have built-in tools to help web developers, and many additional add-ons can be found in their respective plugin download centers.

Web development tools allow developers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser. Due to increasing demand from web browsers to do more,[2] popular web browsers have included more features geared for developers.[3]

Web developer tools support

The five most popular web browsers[4] have support for web developer tools that allow web designers and developers to look at the make-up of their pages. These are all tools that are built into the browser and do not require additional modules or configuration.

Common features

The built-in web developer tools in the browser are commonly accessed by hovering over an item on a webpage and selecting the "Inspect Element" or similar option from the context menu. Alternatively the F12 key tends to be another common shortcut.[15]

HTML and the DOM

HTML and DOM viewer and editor is commonly included in the built-in web development tools. The difference between the HTML and DOM viewer, and the view source feature in web browsers is that the HTML and DOM viewer allows you to see the DOM as it was rendered in addition to allowing you to make changes to the HTML and DOM and see the change reflected in the page after the change is made.[16]

In addition to selecting and editing, the HTML elements panels will usually also display properties of the DOM object, such as display dimension, and CSS properties.[17]

Web page assets, resources and network information

Web pages typically load and require additional content in the form of images, scripts, font and other external files. Web development tools also allow developers to inspect resources that are loaded and available on the web page in a tree-structure listing.[18][19]

Web development tools also allow developers to view information about the network usage, such as viewing what the loading time and bandwidth usage are and which HTTP headers are being sent and received.[20]

Profiling and auditing

Profiling allows developers to capture information about the performance of a web page or web application. With this information developers can improve the performance of their scripts. Auditing features may provide developers suggestions, after analyzing a page, for optimizations to decrease page load time and increase responsiveness. Web development tools typically also provide a timeline features provides a record of the time it takes to render the page, memory usage, and the types of events which are taking place.[21][22]

These features allow developers to optimize their web page or web application.[23]

Javascript debugging

JavaScript is commonly used in web browsers. Web development tools commonly include a panel to debug scripts by allowing developers to add watch expressions, breakpoints, view the call stack, and pause, step over, step into, and step out of functions while debugging JavaScript.

A JavaScript console is commonly included. The consoles allow developers to type in JavaScript commands and call functions, or view errors that may have been encountered during the execution of a script.[24][25][26]

Common Tools

Modern web development world makes use of some tools which come handy in website development. These tools include the libraries, frameworks, programming languages, text editors, database, Local server, collaboration tools, and communities.

jQuery: It is a small yet high-speed JavaScript Library with great features which streamlines HTML document traversing, animating and event handling.

Bootstrap: It is a popular framework which is used to develop mobile-responsive websites implementing HTML, CSS, and JS frameworks.

ASP.Net: Developed by Microsoft, ASP.Net is a framework to build web applications.

PHP: One of the most utilized programming languages in the world, PHP acquires almost 67% of the top million websites across the globe.

Notepad++: Notepad++ is used under the MS Windows environment. It is a source code editor with a support for various programming languages.

MySQL: MySQL is a common name among the open-source databases with a huge usage all over the world.

XAMPP: This free local server contains Perl, PHP, MariaDB and offers easy to install Apache distribution.

Slack: It is a team collaboration tool which allows messaging through it and that makes it hugely productive.

Stack Overflow: Stack Overflow is considerably the biggest community with 4.7 million programmers assisting one another.


Extensions and plugins

Modern web browsers support the use of plugins or extensions to add or augment functionality.[28] There are many popular plugins that add additional features than those supported by the built-in developer tools. Features can range from being able to disable JavaScript and CSS to being able to edit cookies with greater ease.[29][30][31][32]

See also


  1. ^ http://www.fraakz.com/top-web-browsers-in-2012.html
  2. ^ http://www.brighthub.com/internet/web-development/articles/25776.aspx
  3. ^ http://devworks.thinkdigit.com/Software/Browsers-are-the-new-IDE-for-Web_9995.html
  4. ^ http://www.webdevelopersnotes.com/articles/popular-web-browsers.php
  5. ^ https://developer.chrome.com/devtools
  6. ^ http://msdn.microsoft.com/en-us/library/ie/hh673541(v=vs.85).aspx
  7. ^ https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide
  8. ^ https://developer.apple.com/technologies/safari/developer-tools.html
  9. ^ Safari version history
  10. ^ https://hacks.mozilla.org/2013/08/the-browser-console/
  11. ^ https://developer.mozilla.org/en-US/docs/Tools/Web_Console
  12. ^ "Browser Console". Mozilla Developer Network. 13 August 2016. Retrieved 15 March 2017. 
  13. ^ http://tips.webdesign10.com/web-developer-toolbar.htm
  14. ^ http://www.opera.com/dragonfly/
  15. ^ https://developers.google.com/chrome-developer-tools/docs/overview#access
  16. ^ http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx
  17. ^ https://developers.google.com/chrome-developer-tools/docs/elements
  18. ^ https://developers.google.com/chrome-developer-tools/docs/resources
  19. ^ http://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/
  20. ^ https://developers.google.com/chrome-developer-tools/docs/network
  21. ^ https://developers.google.com/chrome-developer-tools/docs/profiles
  22. ^ http://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx
  23. ^ http://msdn.microsoft.com/en-us/library/gg699341(v=vs.85).aspx
  24. ^ https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/
  25. ^ http://www.opera.com/dragonfly/documentation/console/
  26. ^ https://developers.google.com/chrome-developer-tools/docs/console
  27. ^ "100+ Web Development Tools You Need to Avail Today - Intlum". website design company in Kolkata, India - Intlum. 2018-04-18. Retrieved 2018-05-18. 
  28. ^ https://www.mozilla.org/en-US/plugincheck/more_info.html
  29. ^ https://chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en
  30. ^ https://addons.mozilla.org/en-US/firefox/addon/web-developer/
  31. ^ https://addons.opera.com/en/extensions/details/the-developer-briefcase/?display=en
  32. ^ https://developer.apple.com/technologies/safari/extensions.html