Jump to content

Web development tools: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
add missing ref, tweak lead
add crappy history blurb
Line 8: Line 8:
Web development tools allow developers to work with a variety of web technologies, including [[HTML]], [[CSS]], the [[Document Object Model|DOM]], [[JavaScript]], and other components that are handled by the web browser.
Web development tools allow developers to work with a variety of web technologies, including [[HTML]], [[CSS]], the [[Document Object Model|DOM]], [[JavaScript]], and other components that are handled by the web browser.


==History and support==
==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 (software)|Firebug]] extension, which enabled developers to actively modify their pages. 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.<ref name="safari history"/><ref name="chrome history"/> Microsoft released a developer toolbar for [[Internet Explorer]] 6 and 7; and then integrated them into the browser from version 8 onwards.<ref name="ie devtools"/><ref name="ie toolbar"/> In 2017, Mozilla discontinued Firebug in favour of integrated developer tools.<ref name="firebug end"/>
⚫
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.<ref name="mdn"/><ref>{{cite web |title=Developer Tools |url=https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools |website=MDN |date=8 June 2023 |publisher=Mozilla Corporation |access-date=2023-07-05 |quote=Current browsers provide integrated developer tools...}}</ref>

⚫
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.<ref name="mdn"/><ref>{{cite web |title=Developer Tools |url=https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools |website=MDN |date=8 June 2023 |publisher=Mozilla Corporation |access-date=2023-07-05 |quote=Current browsers provide integrated developer tools...}}</ref>


* [[Firefox]] – {{Key press|F12}} opens the Firefox DevTools.<ref name="ff"/>
* [[Firefox]] – {{Key press|F12}} opens the Firefox DevTools.<ref name="ff"/>
* [[Google Chrome]] and [[Opera (web browser)|Opera]] – Developer Tools (DevTools)<ref name="chrome devtools"/><ref name="opera devtools"/>
* [[Google Chrome]] and [[Opera (web browser)|Opera]] – Developer Tools (DevTools)<ref name="chrome devtools"/><ref name="opera devtools"/>
* [[Internet Explorer]] and [[Microsoft Edge]] – {{Key press|F12}} opens Web Developer Tools (as of version 8)<ref name="ie devtools"/><ref name="edge devtools"/><ref name="edge overview"/>
* [[Microsoft Edge]] – {{Key press|F12}} opens Web Developer Tools (as of version 8)<ref name="edge devtools"/><ref name="edge overview"/>
* [[Safari (web browser)|Safari]] – The Safari Web Inspector has to be enabled from its settings pane.<ref name="safari enable"/><ref name="safari inspector"/>
* [[Safari (web browser)|Safari]] – The Safari Web Inspector has to be enabled from its settings pane.<ref name="safari enable"/><ref name="safari inspector"/>


==Features==
==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.<ref>{{cite web |author=piyushagg |title=Browser Developer Tools |url=https://www.geeksforgeeks.org/browser-developer-tools/ |website=GeeksforGeeks |date=27 January 2021 |access-date=2023-07-05}}</ref>
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.<ref name="mdn"/>


===HTML and the DOM===
===HTML and the DOM===
Line 54: Line 56:


<ref name="ie devtools">{{Cite web|url=http://msdn.microsoft.com/en-us/library/ie/hh673541(v=vs.85).aspx|title=F12 Developer Tools (Windows)|last=McCormick|first=Libby|website=msdn.microsoft.com|date=3 November 2017 |language=en-us|access-date=2018-09-06}}</ref>
<ref name="ie devtools">{{Cite web|url=http://msdn.microsoft.com/en-us/library/ie/hh673541(v=vs.85).aspx|title=F12 Developer Tools (Windows)|last=McCormick|first=Libby|website=msdn.microsoft.com|date=3 November 2017 |language=en-us|access-date=2018-09-06}}</ref>
<ref name="ie toolbar">{{cite web | url = http://www.betanews.com/article/Microsoft_Releases_IE_Developer_Toolbar/1178822985 | title = Microsoft Releases IE Developer Toolbar | date = 10 May 2007 | access-date=2007-05-11}}</ref>
<ref name="edge devtools">{{cite web |title=Microsoft Edge DevTools documentation |url=https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing/ |website=Microsoft Learn |access-date=2023-07-05}}</ref>
<ref name="edge devtools">{{cite web |title=Microsoft Edge DevTools documentation |url=https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing/ |website=Microsoft Learn |access-date=2023-07-05}}</ref>
<ref name="edge overview">{{cite web |title=Overview of DevTools - Microsoft Edge Development |url=https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/overview |website=Microsoft Learn |access-date=13 February 2024 |language=en-us |date=7 December 2023}}</ref>
<ref name="edge overview">{{cite web |title=Overview of DevTools - Microsoft Edge Development |url=https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/overview |website=Microsoft Learn |access-date=13 February 2024 |language=en-us |date=7 December 2023}}</ref>
Line 62: Line 65:
<ref name="mdn">{{cite web |title=What are browser developer tools? |url=https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools |website=MDN |publisher=Mozilla Corporation |access-date=2023-07-05 |quote=Every modern web browser includes a powerful suite of developer tools.}}</ref>
<ref name="mdn">{{cite web |title=What are browser developer tools? |url=https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools |website=MDN |publisher=Mozilla Corporation |access-date=2023-07-05 |quote=Every modern web browser includes a powerful suite of developer tools.}}</ref>
<ref name="ff">{{cite web |title=Firefox DevTools User Docs |url=https://firefox-source-docs.mozilla.org/devtools-user/index.html |website=Firefox Source Docs |access-date=2023-07-05}}</ref>
<ref name="ff">{{cite web |title=Firefox DevTools User Docs |url=https://firefox-source-docs.mozilla.org/devtools-user/index.html |website=Firefox Source Docs |access-date=2023-07-05}}</ref>

<ref name="safari history">{{cite web |last1=Hatcher |first1=Timothy |title=10 Years of Web Inspector |url=https://webkit.org/blog/5718/10-years-of-web-inspector/ |website=WebKit |access-date=13 February 2024 |date=16 January 2016}}</ref>
<ref name="chrome history">{{cite web |title=10 Years of Chrome DevTools |url=https://blog.chromium.org/2018/09/10-years-of-chrome-devtools.html |website=Chromium Blog |access-date=13 February 2024 |language=en}}</ref>
<ref name="firebug end">{{cite web |title=Saying Goodbye to Firebug – Mozilla Hacks - the Web developer blog |url=https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/ |website=Mozilla Hacks – the Web developer blog |access-date=13 February 2024}}</ref>

}}
}}


Revision as of 08:18, 13 February 2024

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.

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 enabled developers to actively modify their pages. 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] Microsoft released a developer toolbar for Internet Explorer 6 and 7; and then integrated them into the browser from version 8 onwards.[3][4] In 2017, Mozilla discontinued Firebug in favour of integrated developer tools.[5]

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

  • Firefox – F12 opens the Firefox DevTools.[8]
  • Google Chrome and Opera – Developer Tools (DevTools)[9][10]
  • Microsoft Edge – F12 opens Web Developer Tools (as of version 8)[11][12]
  • Safari – The Safari Web Inspector has to be enabled from its settings pane.[13][14]

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

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

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

3D page inspector, a feature of Firefox versions 11 to 46

Firefox versions 11 to 46 were equipped with a 3D page inspector using WebGL, where the nesting of elements was visualized with layers protruding from the page surface.[17][18]

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

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

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

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

JavaScript debugging

JavaScript 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.[25][26][27]

Extensions and plugins

Modern web browsers support the use of plugins or extensions to add or augment functionality.[28] There are many common plugins that can provide a diverse range of additional features.

See also

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. ^ McCormick, Libby (3 November 2017). "F12 Developer Tools (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  4. ^ "Microsoft Releases IE Developer Toolbar". 10 May 2007. Retrieved 2007-05-11.
  5. ^ "Saying Goodbye to Firebug – Mozilla Hacks - the Web developer blog". Mozilla Hacks – the Web developer blog. Retrieved 13 February 2024.
  6. ^ a b "What are browser developer tools?". MDN. Mozilla Corporation. Retrieved 2023-07-05. Every modern web browser includes a powerful suite of developer tools.
  7. ^ "Developer Tools". MDN. Mozilla Corporation. 8 June 2023. Retrieved 2023-07-05. Current browsers provide integrated developer tools...
  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. ^ "Enabling features for web developers". Apple Developer Documentation. Retrieved 13 February 2024.
  14. ^ "Web Inspector". Apple Developer Documentation. Retrieved 13 February 2024.
  15. ^ McCormick, Libby (3 March 2016). "Introduction to F12 Developer Tools (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  16. ^ "Inspect and Edit Pages and Styles | Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  17. ^ Jey (10 January 2012). "Firefox gets 3D page inspector tool". Devlup. Archived from the original on July 9, 2021. Retrieved 1 July 2021.
  18. ^ "3D view - Firefox Developer Tools | MDN". developer.mozilla.org. From Firefox 47 onwards, 3D view is no longer available.
  19. ^ "Resources Panel - Google Chrome". Chrome Developers. Retrieved 2018-09-06.
  20. ^ "Firefox Debuts New Developer Toolbar". The Mozilla Blog. Retrieved 2018-09-06.
  21. ^ "Measure Resource Loading Times | Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  22. ^ "Profiles Panel - Google Chrome". developers.google.com. Retrieved 2018-09-06.
  23. ^ McCormick, Libby (3 March 2016). "F12 developer tools console error messages (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  24. ^ McCormick, Libby (3 March 2016). "Using the Profiler Tool to analyze the performance of your code (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  25. ^ "New Firefox Command Line helps you develop faster". Mozilla Hacks – the Web developer blog. Retrieved 2018-09-06.
  26. ^ "Opera Browser | Faster, Safer, Smarter Web Browser". www.opera.com. Retrieved 2018-09-06.
  27. ^ "Using the Console  |  Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  28. ^ "More browser features, fewer plugin updates | Firefox". Mozilla. Retrieved 2018-09-06.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Web_development_tools&oldid=1206848601"