Developer tools in web browsers
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.
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 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
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
- ↑ 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).
- ↑ JavaScript Debuggers Available for Netscape Browsers. Netscape, archived from the original on July 23, 2004 ; accessed on December 13, 2017 (English).
- ^ Mike Ratcliffe: The History of Firebug. In: Ramblings of a madman. September 25, 2013, accessed December 13, 2017 .
- ↑ January Honza Odvarko: Saying Goodbye to Firebug. In: Mozilla Hacks. October 24, 2017, accessed December 14, 2017 .
- ↑ Discovering Internet Explorer Developer Tools. In: Microsoft Developer Network. Retrieved December 13, 2017 .
- ^ Opera Dragonfly documentation. Version history. Opera Software, accessed December 13, 2017 .
- ↑ Console Standard. WHATWG , accessed December 13, 2017 .