Web development tools
{{Short description|Software used to test the UI of a website or web application}}
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.
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. Microsoft released a developer toolbar for Internet Explorer 6 and 7; and then integrated them into the browser from version 8 onwards. In 2017, Mozilla discontinued Firebug in favour of integrated developer tools.
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.
- Firefox – {{Key press|F12}} opens the Firefox DevTools.
- Google Chrome and Opera – Developer Tools (DevTools)
- Microsoft Edge – {{Key press|F12}} opens Web Developer Tools. Microsoft incorporates additional features that are not included in mainline Chromium.
- Safari – The Safari Web Inspector has to be enabled from its settings pane.
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 press|F12}} key tends to be another common shortcut.
=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.
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.{{Cite web|url=https://developers.google.com/chrome-developer-tools/docs/elements |title=Inspect and Edit Pages and Styles {{!}} Tools for Web Developers|website=Google Developers|language=en|access-date=2018-09-06}}
Firefox, Safari, Chrome, and Edge all allow users to simulate the document on a mobile device by modifying the viewport dimensions and pixel density. Additionally, Firefox and Chrome both have the option to simulate colour blindness for the page.
=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.{{Cite web|url=https://developers.google.com/chrome-developer-tools/docs/resources|title=Resources Panel - Google Chrome |website=Chrome Developers |access-date=2018-09-06}}{{Cite web|url=https://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/|title=Firefox Debuts New Developer Toolbar|website=The Mozilla Blog|language=en-US|access-date=2018-09-06}}
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.{{Cite web|url=https://developers.google.com/chrome-developer-tools/docs/network|title=Measure Resource Loading Times {{!}} Tools for Web Developers|website=Google Developers|language=en|access-date=2018-09-06}} Developers can manipulate and resend network requests.
=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.{{Cite web|url=https://developers.google.com/chrome-developer-tools/docs/profiles|title=Profiles Panel - Google Chrome|website=developers.google.com|access-date=2018-09-06}}{{Cite web|url=http://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx|title=F12 developer tools console error messages (Windows)|last=McCormick|first=Libby|website=msdn.microsoft.com|date=3 March 2016 |language=en-us|access-date=2018-09-06}}
These features allow developers to optimize their web page or web application.{{Cite web|url=http://msdn.microsoft.com/en-us/library/gg699341(v=vs.85).aspx|title=Using the Profiler Tool to analyze the performance of your code (Windows)|last=McCormick|first=Libby|website=msdn.microsoft.com|date=3 March 2016 |language=en-us|access-date=2018-09-06}}
==JavaScript debugging==
JavaScript is commonly used in web browsers. 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.
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.
=Extensions=
The devtools API allows browser extensions to add their own features to developer tools.
See also
References
{{reflist|refs=
{{cite web |last1=Bisson |first1=Simon |title=Developer tools in the new Microsoft Edge |url=https://www.infoworld.com/article/3526412/developer-tools-in-the-new-microsoft-edge.html |website=InfoWorld |access-date=13 February 2024 |language=en |date=11 February 2020}}
{{cite web |last1=Claburn |first1=Thomas |title=Google adds 16 features to Chrome 117 Developer Tools |url=https://www.theregister.com/2023/08/17/chrome_117_developer_tools/ |website=The Register |access-date=13 February 2024 |language=en}}
{{cite web |last1=Brosset |first1=Patrick |title=Useful DevTools Tips and Tricks |url=https://www.smashingmagazine.com/2023/06/popular-devtools-tips/ |website=Smashing Magazine |language=en |date=27 June 2023}}
{{cite web |last1=Lyles |first1=Taylor |title=Google now allows devs to view visual limitations in its Chrome dev tools. |url=https://www.theverge.com/2020/3/11/21174735/google-chrome-dev-tools-new-color-blind-friendly |website=The Verge |access-date=13 February 2024 |language=en |date=11 March 2020}}
}}
{{Authority control}}