Web development tools

From HandWiki
Short description: Software used to test the UI of a website or web application
Page inspector with element picker and CSS property editor

Web development tools (often called devtools or inspect element) allow web developers to test and debug their source 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 modern web browsers.[1] Browsers such as Google Chrome,[2] Firefox,[3] Internet Explorer, Safari,[4] Microsoft Edge[5] and Opera,[6] have built-in tools to help web developers,[7] 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,[8][failed verification] popular web browsers have included more features geared for developers.[9]

Web developer tools support

Several notable web browsers 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.

  • Firefox – opens the Web Console / Browser Console (since Firefox 4).[10][11] The Web Console applies to a single content tab; the Browser Console applies to the whole browser.[12] Many add-ons also exist, including Firebug.
  • Google Chrome – Chrome Developer Tools (DevTools)[13]
  • Internet Explorer and Microsoft Edge – opens Web Developer Tools (as of version 8)[14][15]
  • Opera – Opera Dragonfly[16][failed verification]
  • Safari – Safari Web Development Tools[17] (as of version 3)[citation needed]
  • Open Source and GitHub Repositories – Open-source tools often leverage platforms like GitHub for issue tracking, bug reporting, and community collaboration. Developers can raise issues, contribute code, and engage with the development team directly. GitHub repositories serve as centralized hubs for codebase management and community interaction.

Most used 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 key tends to be another common shortcut.[18]

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.[19]

In addition to selecting and editing, the HTML elements panels will usually also display properties of the DOM object, such as display dimension, and Cascading- style sheet properties.[20]

3D page inspector, a feature of Firefox versions 11 to 46

Firefox versions 11 to 46 were equipped with a 3D page inspector using WebGL, where the nesting of elements was visualized with layers protruding from the page surface.[21][22]

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, and the appearance of style sheets can be tested in real time.[23][24]

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.[25]

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 record of the time it takes to render the page, memory usage, and the types of events which are taking place.[26][27]

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

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.[29][30][31]

Interactive Web Elements: Incorporating Animations, Transitions, and Effects

Intelligence reinvigorates pages, connecting with clients and directing them through an enthralling computerized venture.[32]

  • CSS Transitions and Animations:

Adding inconspicuous movement to components to upgrade client commitment and draw consideration.

  • JavaScript Libraries for Animation:

Libraries like jQuery and Green Sock give progressed movement abilities and work on complex connections.

  • Parallax Scrolling and Micro Interactions:

Parallax makes a feeling of profundity, while miniature communications enchant clients with inconspicuous input.

Extensions and plugins

Modern web browsers support the use of plugins or extensions to add or augment functionality.[33] There are many common plugins that can provide a diverse range of additional features.

See also

  • Web development life cycle

References

  1. ↑ "What are browser developer tools?". Mozilla Corporation. https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools. "Every modern web browser includes a powerful suite of developer tools." 
  2. ↑ "Chrome DevTools". https://developer.chrome.com/docs/devtools/. 
  3. ↑ "Firefox DevTools User Docs". https://firefox-source-docs.mozilla.org/devtools-user/index.html. 
  4. ↑ "Safari Developer Tools overview". https://support.apple.com/en-gb/guide/safari-developer/dev073038698/mac. 
  5. ↑ "Microsoft Edge DevTools documentation". https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing/. 
  6. ↑ "Explore advanced features: Streamline development with developer tools". https://help.opera.com/en/opera36/explore-advanced-features/#developerTools. 
  7. ↑ "Developer Tools". Mozilla Corporation. 8 June 2023. https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools. "Current browsers provide integrated developer tools..." 
  8. ↑ "Growing Demand for Web Developers". 5 February 2009. http://www.brighthub.com/internet/web-development/articles/25776.aspx. 
  9. ↑ Kshitij, Sobti (2012-06-29). "Browsers are the new IDE for Web Development". http://devworks.thinkdigit.com/Software/Browsers-are-the-new-IDE-for-Web_9995.html. 
  10. ↑ "The Browser Console" (in en-US). https://hacks.mozilla.org/2013/08/the-browser-console/. 
  11. ↑ "Web Console" (in en-US). https://developer.mozilla.org/en-US/docs/Tools/Web_Console. 
  12. ↑ "Browser Console". Mozilla Developer Network. 13 August 2016. https://developer.mozilla.org/en/docs/Tools/Browser_Console. 
  13. ↑ "Chrome DevTools Overview - Google Chrome". https://developer.chrome.com/devtools. 
  14. ↑ McCormick, Libby (3 November 2017). "F12 Developer Tools (Windows)" (in en-us). http://msdn.microsoft.com/en-us/library/ie/hh673541(v=vs.85).aspx. 
  15. ↑ erikadoyle. "Microsoft Edge Developer Tools - Microsoft Edge Development" (in en-us). https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide. 
  16. ↑ "Opera Browser | Faster, Safer, Smarter Web Browser" (in en). http://www.opera.com/dragonfly/. 
  17. ↑ "Tools - Safari - Apple Developer" (in en). https://developer.apple.com/technologies/safari/developer-tools.html. 
  18. ↑ piyushagg (27 January 2021). "Browser Developer Tools". https://www.geeksforgeeks.org/browser-developer-tools/. 
  19. ↑ McCormick, Libby (3 March 2016). "Introduction to F12 Developer Tools (Windows)" (in en-us). http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx. 
  20. ↑ "Inspect and Edit Pages and Styles | Tools for Web Developers" (in en). https://developers.google.com/chrome-developer-tools/docs/elements. 
  21. ↑ Jey (10 January 2012). Firefox gets 3D page inspector tool. http://devlup.com/tech-articles/browsers/firefox-gets-3d-page-inspector-tool/3554/. Retrieved 1 July 2021. 
  22. ↑ "3D view - Firefox Developer Tools | MDN". https://developer.mozilla.org/en-US/docs/Tools/3D_View. "From Firefox 47 onwards, 3D view is no longer available." 
  23. ↑ "Resources Panel - Google Chrome". https://developers.google.com/chrome-developer-tools/docs/resources. 
  24. ↑ "Firefox Debuts New Developer Toolbar" (in en-US). https://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/. 
  25. ↑ "Measure Resource Loading Times | Tools for Web Developers" (in en). https://developers.google.com/chrome-developer-tools/docs/network. 
  26. ↑ "Profiles Panel - Google Chrome". https://developers.google.com/chrome-developer-tools/docs/profiles. 
  27. ↑ McCormick, Libby (3 March 2016). "F12 developer tools console error messages (Windows)" (in en-us). http://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx. 
  28. ↑ McCormick, Libby (3 March 2016). "Using the Profiler Tool to analyze the performance of your code (Windows)" (in en-us). http://msdn.microsoft.com/en-us/library/gg699341(v=vs.85).aspx. 
  29. ↑ "New Firefox Command Line helps you develop faster" (in en-US). https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/. 
  30. ↑ "Opera Browser | Faster, Safer, Smarter Web Browser" (in en). http://www.opera.com/dragonfly/documentation/console/. 
  31. ↑ "Using the Console  |  Tools for Web Developers" (in en). https://developers.google.com/chrome-developer-tools/docs/console. 
  32. ↑ Abdur Rehman, Syed (2023-08-12). "Web Development: Navigating the Digital Frontier with Expertise and Innovation". https://techfusionist.com/web-development-expert-pioneering-innovation-in-online-realm/. 
  33. ↑ "More browser features, fewer plugin updates | Firefox" (in en-US). https://www.mozilla.org/en-US/plugincheck/more_info.html. 



Retrieved from "https://handwiki.org/wiki/index.php?title=Web_development_tools&oldid=3373110"