Developer tools in web browsers

from Wikipedia, the free encyclopedia

Developer tools in web browsers are tools built into web browsers that assist web developers and designers in their work. In addition to external tools such as HTML editors and liners for the programming languages ​​used, the browser tools are an important aid for examining websites directly in the browser. Even if the tools of the individual browsers are developed independently of one another, the most important tools are present in all browsers and are very similar to one another.

history

The first browser, WorldWideWeb , already had tools with an integrated editor for HTML files that were specifically aimed at web developers, but not developer tools in the current sense. These only came with the introduction of JavaScript . Because JavaScript, unlike HTML, is not fault-tolerant, browsers initially displayed errors in modal dialog boxes when running JavaScript . In order not to bother normal users with these errors, but at the same time not to hide them from developers, the decision was finally made to enter the errors in a special log that could be viewed if necessary.

A website can be seen in the upper half, a paragraph is framed and highlighted. The lower half shows the developer tools with several tabs, "Documents" is selected. In the tab below the tree structure of the page is shown, here too an element is highlighted. To the right of it is another tab selection, here "Styles" is selected, below that some CSS properties are shown.
Developer tools "Dragonfly" in Opera 12.16 (2013)

Around the same time, the first browser extensions for web developers were also created, including JavaScript debuggers , the most famous of which is Venkman . In early 2006 the first version of Firebug was released, which also worked as a browser extension for Firefox . Firebug was inspired by various extensions and united their tools under a common interface. Firebug quickly gained popularity and shaped the following developer tools significantly. Similar tools have been integrated directly into other browsers since 2008, including Internet Explorer 8 and Opera .

All major desktop browsers now offer directly integrated developer tools that are very similar in many respects.

Tools

Even if many tools are similar in the different browsers, there are differences in details. This can affect the designation of the tools as well as the range of functions and operation. Some special tools are also only available in individual browsers. The following describes the tools as they are available in most browsers.

You can usually open the overview of these tools from the browser using the key combination Shift + Ctrl + i .

Browser console

The developer tools have several tabs at the top, “Console” is selected. An error message is highlighted in red below a toolbar in the main area: “Uncaught TypeError: Cannot read propert 'firstChild' of null” Below is an input line.
Browser console with error message in Chrome (2016)

The browser console has evolved from the error log and continues to lead the JavaScript error messages on, as well as warnings when parsing of HTML and CSS . Other messages are also listed there. In addition to the browser itself console, messages can also be output from JavaScript using the API. At the same time, the console can also evaluate JavaScript expressions and thus serves as a REPL .

HTML inspector

A tool is available for working with the HTML document, which displays it in its tree structure, i.e. visualizes the Document Object Model . The content and attributes of the nodes can be viewed and edited. It is possible to display the rendered element on the page for a node in the tree and, conversely, to find the node in the tree for an element on the page.

CSS inspector

The browser window shows a darkened webpage with a paragraph highlighted. All CSS selectors that apply to the selected element and the associated rules are listed on the right. All rules start with a check box that can be used to deactivate them, rules that are overwritten by other rules are crossed out.
CSS inspector in Firefox 10 (2012)

Integrated in the HTML inspector there is the possibility to examine the styles defined via CSS . For the currently selected node, all CSS rules that are applied to it and the CSS properties that result from them are displayed. Particularly important properties such as those of the box model are particularly emphasized.

JavaScript debugger

The JavaScript Debugger allows you to debug JavaScript code by executing and viewing the code step by step. Source maps can be used to work with the original code even if the page only contains a minimized version or has been translated from a language such as C to asm.js or WebAssembly . Well-known JavaScript libraries can be recognized and skipped when debugging. Separate entry points are available for JavaScript, which, like service workers , is executed independently of individual web pages.

Network console

The network console provides detailed information about which resources are involved, how big they are, whether they were loaded from the cache or via the network, how long the transfer took, the metadata of the request and related information.

Performance console

The performance console answers questions about the performance of the page. It contains a profiler for JavaScript and can also provide indications of a reduced frame rate .

Simulators

Simulators are available for various aspects , in particular to investigate behavior on mobile devices . A different screen size can be tested without having to reduce or enlarge the browser window, touch events can be simulated with the mouse , and the network speed can be reduced. For special interfaces such as the Geolocation API , certain values ​​can be specified instead of using the real values.

Connection to mobile browsers

Since troubleshooting is often only possible to a limited extent in mobile browsers, many desktop browsers offer the option of establishing a connection to a mobile browser and examining the page loaded there with the tools of the desktop browser, which often provides more reliable results than simulators and emulators .

More tools

In addition to the tools mentioned, there are numerous others, but they are less common. For example, Firefox has its own tool to help you work with the Web Audio API , which visualizes the audio graph. In addition to web pages, the tools can also often be used for code within the browser, for example for debugging extensions according to the browser extension standard.

Individual evidence

  1. ↑ Displaying Errors with the JavaScript Console. In: Client-Side JavaScript Guide. Netscape Communications Corporation, 1999, archived from the original March 2, 2000 ; accessed on December 13, 2017 (English).
  2. ↑ JavaScript Debuggers Available for Netscape Browsers. Netscape, archived from the original on July 23, 2004 ; accessed on December 13, 2017 (English).
  3. ^ Mike Ratcliffe: The History of Firebug. In: Ramblings of a madman. September 25, 2013, accessed December 13, 2017 .
  4. ↑ January Honza Odvarko: Saying Goodbye to Firebug. In: Mozilla Hacks. October 24, 2017, accessed December 14, 2017 .
  5. ↑ Discovering Internet Explorer Developer Tools. In: Microsoft Developer Network. Retrieved December 13, 2017 .
  6. ^ Opera Dragonfly documentation. Version history. Opera Software, accessed December 13, 2017 .
  7. ↑ Console Standard. WHATWG , accessed December 13, 2017 .

Web links