Web development tools

Last updated
The Wikipedia Main Page being inspected using Firefox Firefox dev tools.jpg
The Wikipedia Main Page being inspected using Firefox

Web development tools (often abbreviated to dev tools) allow web developers to test, modify and debug their websites. 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.

Contents

Web development tools come as browser add-ons or built-in features in modern web browsers. Browsers such as Google Chrome, Firefox, Safari, Microsoft Edge, and Opera 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.

History and support

Early web developers manually debugged their websites by commenting out code and using JavaScript functions. One of the first browser debugging tools to exist was Mozilla's Firebug extension, which possessed many of the current core features of today's developer tools, leading to Firefox becoming popular with developers at the time. Safari's WebKit engine also introduced its integrated developer tools around that period, which eventually became the basis for both Safari and Chrome's current tooling. [1] [2] [3] Microsoft released a developer toolbar for Internet Explorer 6 and 7; and then integrated them into the browser from version 8 onwards. [4] [5] In 2017, Mozilla discontinued Firebug in favour of integrated developer tools. [6]

Nowadays, all modern 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. [7]

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

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] [3] [7]

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]

Firefox, Safari, Chrome, and Edge all allow users to simulate the document on a mobile device by modifying the viewport dimensions and pixel density. [18] Additionally, Firefox and Chrome both have the option to simulate colour blindness for the page. [19]

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. [20] [21] [7]

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. [22] Developers can manipulate and resend network requests. [23] [18]

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

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

JavaScript debugging

JavaScript is commonly used in web browsers. [16] Web development tools commonly include a debugger panel for scripts by allowing developers to add watch expressions, breakpoints, view the call stack, and pause, continue, and step while debugging JavaScript. [7] [3]

A console is also often included, which allow developers to type in JavaScript commands and call functions, or view errors that may have been encountered during the execution of a script. [7] [3] [16]

Extensions

The devtools API allows browser extensions to add their own features to developer tools. [27] [28]

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">Firefox</span> Free and open-source web browser by Mozilla

Mozilla Firefox is a free and open source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and anticipated web standards. Firefox is available for Windows 10 and later versions of Windows, macOS, and Linux. Its unofficial ports are available for various Unix and Unix-like operating systems, including FreeBSD, OpenBSD, NetBSD,, and other operating systems, such as reactOS. Firefox is also available for Android and iOS. However, as with all other iOS web browsers, the iOS version uses the WebKit layout engine instead of Gecko due to platform requirements. An optimized version is also available on the Amazon Fire TV as one of the two main browsers available with Amazon's Silk Browser.

<span class="mw-page-title-main">Browser wars</span> Competition between web browsing applications for share of worldwide usage

A browser war is a competition for dominance in the usage share of web browsers. The "first browser war" (1995–2001) consisted of Internet Explorer and Netscape Navigator, and the "second browser war" (2004-2017) between Internet Explorer, Firefox, and Google Chrome.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

Netscape Plugin Application Programming Interface (NPAPI) is a deprecated application programming interface (API) for web browser plugins, initially developed for Netscape Navigator 2.0 in 1995 and subsequently adopted by other browsers.

<span class="mw-page-title-main">DOM Inspector</span> Web development tool

DOM Inspector (DOMi) is a web developer tool created by Joe Hewitt and was originally included in Mozilla Application Suite as well as versions of Mozilla Firefox prior to Firefox 3. It is now included in Firefox, and SeaMonkey. Its main purpose is to inspect and edit the Document Object Model (DOM) tree of HTML and XML-based documents.

<span class="mw-page-title-main">Mozilla Application Suite</span> Discontinued Internet suite

The Mozilla Application Suite is a discontinued cross-platform integrated Internet suite. Its development was initiated by Netscape Communications Corporation, before their acquisition by AOL. It was based on the source code of Netscape Communicator. The development was spearheaded by the Mozilla Organization from 1998 to 2003, and by the Mozilla Foundation from 2003 to 2006.

QF-Test from Quality First Software is a cross-platform software tool for automated testing of programs via the graphical user interface. The program is specialized on cross-browser test automation of static and dynamic web-based applications. Version 4.1 added support for MacOS and the Apple Safari and Microsoft Edge browsers via the Selenium WebDriver. RESTful web service testing. From version 5.0, Windows applications can also be tested and modern C++ applications. Version 5.3 added support for the Chrome DevTools protocol, which allows browsers to be controlled using CDP drivers.

A browser toolbar is a toolbar that resides within a browser's window. All major web browsers provide support to browser toolbar development as a way to extend the browser's GUI and functionality. Browser toolbars are considered to be a particular kind of browser extensions that present a toolbar. Browser toolbars are specific to each browser, which means that a toolbar working on a browser does not work on another one. All browser toolbars must be installed in the corresponding browser before they can be used and require updates when new versions are released.

<span class="mw-page-title-main">Firebug (software)</span> Web development add-on for Firefox

Firebug is a discontinued free and open-source web browser extension for Mozilla Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.

<span class="mw-page-title-main">Acid3</span> Online HTML rendering test

The Acid3 test is a web test page from the Web Standards Project that checks a web browser's compliance with elements of various web standards, particularly the Document Object Model (DOM) and JavaScript.

Opera Dragonfly is a web development tool that was integrated into the Opera web browser from Opera versions 9.5 through 12.18, similar to Firebug and development tools built into Mozilla Firefox and Google Chrome.

Web storage, sometimes known as DOM storage, is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity and no information sent in HTTP headers. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, it is designed to partially replace the object element and the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. As of 2020, HTML video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML audio is a subject of the HTML specification, incorporating audio input, playback, and synthesis, as well as speech to text, all in the browser.

ContentTools is an open-source WYSIWYG editor for HTML content written in JavaScript/CoffeeScript by Anthony Blackshaw of Getme Limited.

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of web app that can be installed on a device as a standalone application. PWAs are installed using the offline cache of the device's web browser.

References

  1. ↑ Hatcher, Timothy (16 January 2016). "10 Years of Web Inspector". WebKit. Retrieved 13 February 2024.
  2. ↑ "10 Years of Chrome DevTools". Chromium Blog. Retrieved 13 February 2024.
  3. 1 2 3 4 5 6 Odell, Den (2014). "Browser Developer Tools". Pro JavaScript development: coding, capabilities, and tooling. New York, NY: Apress / Springer. pp. 423–437. ISBN   978-1-4302-6269-5.
  4. ↑ McCormick, Libby (3 November 2017). "F12 Developer Tools (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  5. ↑ "Microsoft Releases IE Developer Toolbar". 10 May 2007. Retrieved 2007-05-11.
  6. ↑ "Saying Goodbye to Firebug – Mozilla Hacks - the Web developer blog". Mozilla Hacks – the Web developer blog. Retrieved 13 February 2024.
  7. 1 2 3 4 5 6 "What are browser developer tools?". MDN. Mozilla Corporation. Retrieved 2023-07-05.
  8. ↑ "Firefox DevTools User Docs". Firefox Source Docs. Retrieved 2023-07-05.
  9. ↑ "Chrome DevTools". Chrome Developers. Retrieved 2023-07-05.
  10. ↑ "Explore advanced features: Streamline development with developer tools". Opera help. Retrieved 2023-07-05.
  11. ↑ "Microsoft Edge DevTools documentation". Microsoft Learn. Retrieved 2023-07-05.
  12. ↑ "Overview of DevTools - Microsoft Edge Development". Microsoft Learn. 7 December 2023. Retrieved 13 February 2024.
  13. ↑ Brosset, Patrick (7 September 2021). "What's New With DevTools: Cross-Browser Edition". Smashing Magazine. Retrieved 13 February 2024.
  14. ↑ "Web Inspector". Apple Developer Documentation. Retrieved 13 February 2024.
  15. ↑ "Enabling features for web developers". Apple Developer Documentation. Retrieved 13 February 2024.
  16. 1 2 3 Chinnathambi, Kirupa (6 July 2016). JavaScript Absolute Beginner's Guide. Pearson Education. ISBN   978-0-134-49862-1.
  17. ↑ "Inspect and Edit Pages and Styles | Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  18. 1 2 Brosset, Patrick (27 June 2023). "Useful DevTools Tips and Tricks". Smashing Magazine .
  19. ↑ Lyles, Taylor (11 March 2020). "Google now allows devs to view visual limitations in its Chrome dev tools". The Verge . Retrieved 13 February 2024.
  20. ↑ "Resources Panel - Google Chrome". Chrome Developers. Retrieved 2018-09-06.
  21. ↑ "Firefox Debuts New Developer Toolbar". The Mozilla Blog. Retrieved 2018-09-06.
  22. ↑ "Measure Resource Loading Times | Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  23. ↑ Claburn, Thomas. "Google adds 16 features to Chrome 117 Developer Tools". The Register . Retrieved 13 February 2024.
  24. ↑ "Profiles Panel - Google Chrome". developers.google.com. Retrieved 2018-09-06.
  25. ↑ McCormick, Libby (3 March 2016). "F12 developer tools console error messages (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  26. ↑ McCormick, Libby (3 March 2016). "Using the Profiler Tool to analyze the performance of your code (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  27. ↑ Bisson, Simon (11 February 2020). "Developer tools in the new Microsoft Edge". InfoWorld . Retrieved 13 February 2024.
  28. ↑ "devtools - Mozilla | MDN". developer.mozilla.org. 10 August 2023. Retrieved 13 February 2024.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.