Difference between revisions of "Web page diagnostic tools"

Latest revision as of 13:31, 18 July 2022

Many browsers can act as platforms for diagnostic tools. You can analyze Web pages built with any version of Joomla by using them. These browser tools have many built-in features such as a DOM Inspector, JavaScript Debugger, Network Inspector, Resources Inspector, Storage Inspector, Profiler, Error Log, Remote Debugging, etc. These tools make it easier to see and debug exactly what is being processed by a browser when rendering a web page.

Mozilla Firefox Web Browser[edit]

Web Developer toolbar (Firefox, Flock, Seamonkey)
Joomla Developer Toolbox - a collection of essential extensions for web developers (Firefox)

Internet Explorer Web Browser[edit]

Note Full support for Internet Explorer was discontinued on June 15, 2022.

MSIE 8+, press Shift+F12 or click the Developer Tools icon in the command bar
DebugBar (MSIE 5 - 11, free for personal use)
Users of Office XP and later may also install the Script Debugger via Office Setup. (The debugger is not installed by default.)
See also Microsoft's Tools for Debugging Web Applications and Add-Ons

Opera Web Browser[edit]

Opera has a built-in diagnostic tool. See Streamline development with developer tools

Safari Web Browser[edit]

Apple Safari Web development tools ( )
WebKit Drosera JavaScript Debugger ( WebKit: )

@@ Line 1: / Line 1: @@
-Many browsers can act as platforms for diagnostic tools. You can analyze Web pages built with any version of Joomla.
+Many browsers can act as platforms for diagnostic tools. You can analyze Web pages built with any version of Joomla by using them. These browser tools have many built-in features such as a DOM Inspector, JavaScript Debugger, Network Inspector, Resources Inspector, Storage Inspector, Profiler, Error Log, Remote Debugging, etc. These tools make it easier to see and debug exactly what is being processed by a browser when rendering a web page.
-== Mozilla Firefox Web Browser ==
+<noinclude>{{RightTOC}}</noinclude>
-* [http://addons.mozilla.org/firefox/1843/ Firebug] (Firefox 1.5+) (For more information, please watch [[Using Firebug With Your Joomla Website|the free video tutorial on using Firebug with Joomla]].)
+=== Mozilla Firefox Web Browser ===
-[[File:Screenshot-368firebug.png|left|thumb|Firebug at work]]
+* [https://addons.mozilla.org/en-US/firefox/addon/web-developer Web Developer] toolbar (Firefox, Flock, Seamonkey)
-<div style="clear:both;">
+* [https://addons.mozilla.org/en-US/firefox/collections/71746/joomla-developer-toolbox/ Joomla Developer Toolbox - a collection of essential extensions for web developers] (Firefox)
-* [http://addons.mozilla.org/firefox/60/ Web Developer] toolbar (Firefox 1+, Flock, Seamonkey)
-</div>
-* [http://addons.mozilla.org/firefox/2104/ Simple CSS Viewer] (Firefox 1.5)
-== Internet Explorer Web Browser ==
-* [http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038 Microsoft Internet Explorer Developer Toolbar] (MSIE 7)
-* [http://www.debugbar.com/?langage=en DebugBar] (MSIE 5 - 8, free for personal use)
-* MSIE 8+, press SHIFT+F12 or click the [http://msdn.microsoft.com/en-us/library/cc304131(VS.85).aspx Developer Tools] icon in the command bar
-* Users of Office XP and later may also install the "Script Debugger" via Office Setup. (The debugger is not installed by default.)
-== Opera Web Browser ==
+=== Internet Explorer Web Browser ===
-Opera has a built-in diagnostic tool called Dragonfly.
+'''Note''' Full support for Internet Explorer was discontinued on June 15, 2022.
-When viewing the page, right click and choose "Inspect Element" to start Dragonfly.
+* MSIE 8+, press ''Shift+F12'' or click the ''Developer Tools'' icon in the command bar
-* [http://www.opera.com/dragonfly/documentation/ Introduction to Opera Dragonfly] (Opera 10+)
+* [https://www.debugbar.com/?langage=en%20 DebugBar] (MSIE 5 - 11, free for personal use)
-{{#ev:youtube|BeTzJ-HGLo4}}
+* Users of Office XP and later may also install the ''Script Debugger'' via Office Setup. (The debugger is not installed by default.)
-== Safari Web Browser ==
+* See also Microsoft's [https://docs.microsoft.com/en-us/windows/win32/win7appqual/tools-for-debugging-web-applications-and-add-ons Tools for Debugging Web Applications and Add-Ons]
-* How to enable the [http://developer.apple.com/internet/safari/faq.html#anchor14 Safari 3.x Developer Menu] ({{os|mac}} {{os|win}})
-* [http://webkit.org/blog/61/introducing-drosera/ WebKit Drosera JavaScript Debugger] ({{os|mac}} WebKit: {{os|linux}})
+=== Opera Web Browser ===
+Opera has a built-in diagnostic tool. See [https://help.opera.com/en/opera36/explore-advanced-features/#developerTools Streamline development with developer tools]
+=== Safari Web Browser ===
+* Apple Safari [https://developer.apple.com/safari/tools/ Web development tools]  ({{os|mac}} {{os|win}})
+* [https://webkit.org/blog/61/introducing-drosera/ WebKit Drosera JavaScript Debugger] ({{os|mac}} WebKit: {{os|linux}})
 <noinclude>
-[[Category:Itemised lists]]
+[[Category:Development Reference]]
-[[Category:Templates]]
-[[Category:References]]
 [[Category:Template Development]]
+[[Category:Template Reference]]
 </noinclude>