Web development tools (often called devtools or inspect element) allow

web developers A web developer is a programmer who develops World Wide Web applications using a client–server model. The applications typically use HTML, CSS, and JavaScript in the client, and any general-purpose programming language in the server. is used ...

to test and

debug In computer programming and software development, debugging is the process of finding and resolving '' bugs'' (defects or problems that prevent correct operation) within computer programs, software, or systems. Debugging tactics can involve ...

their code. They are different from

website builder Website builders are tools that typically allow the construction of websites without manual code editing. They fall into two categories: * online proprietary tools provided by web hosting service companies. These are typically intended for serv ...

s and

integrated development environment An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of at least a source code editor, build automation tools an ...

s (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the

user interface In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine fr ...

of a website or

web application A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serv ...

. Web development tools come as browser add-ons or built-in features in

web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...

s. Most popular web browsers, such as

Google Chrome Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, ...

Firefox Mozilla Firefox, or simply 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 ...

Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...

Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an impor ...

Microsoft Edge Microsoft Edge is a proprietary, cross-platform web browser created by Microsoft. It was first released in 2015 as part of Windows 10 and Xbox One and later ported to other platforms as a fork of Google's Chromium open-source project: Androi ...

and

Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libre ...

, 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 The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript ...

, CSS, the DOM,

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often ...

, and other components that are handled by the web browser. Due to increasing demand from web browsers to do more, popular web browsers have included more features geared for developers.

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. *

– opens the Web Console / Browser Console (since Firefox 4). The Web Console applies to a single content tab; the Browser Console applies to the whole browser. Many addons also exist, including Firebug. *

– Chrome Developer Tools (DevTools) *

and

– opens Web Developer Tools (as of version 8) *

–

Opera Dragonfly 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. It supports debugging JavaSc ...

– Safari Web Development Tools (as of version 3)

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 A context menu (also called contextual, shortcut, and pop up or pop-up menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choice ...

. Alternatively the key tends to be another common shortcut.

HTML and the DOM

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. 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. Firefox_3D_tilt

Firefox versions 11 to 46 were equipped with a 3D page inspector using

WebGL WebGL (Short for Web Graphics Library) 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 ...

, where the nesting of elements was visualized with layers protruding from the page surface.

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. 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 The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, w ...

are being sent and received.

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. These features allow developers to optimize their web page or web application.

JavaScript debugging

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.

Extensions and plugins

Modern web browsers support the use of

plugins Plug-in, plug in or plugin may refer to: * Plug-in (computing) is a software component that adds a specific feature to an existing computer program. ** Audio plug-in, adds audio signal processing features ** Photoshop plugin, a piece of software t ...

or extensions to add or augment functionality. There are many common plugins that can provide a diverse range of additional features.

References

{{reflist Web development Programming tools