Wikipedia:Reporting JavaScript errors: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 05:42, 6 October 2025

This help page is a how-to guide.

It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines and may reflect varying levels of consensus.

Shortcuts

Info to include in bug reports

When you experience an error with gadgets or user scripts and you want to report the issue at the appropriate page, please include the following information:

What is the behaviour you're seeing?
What is the behaviour you're expecting to see?
How can the incorrect behaviour be reproduced? Describe exactly what you're doing and seeing.
Confirm that you have tried bypassing your browser cache.
Make note of the skin that you use, your browser, browser version, and operating system.
Mention relevant JavaScript errors your browser logged. To do that, open your JavaScript console, and copy the relevant error messages. Error messages usually appear in red.

You are urged to have a look at "How to Report Bugs Effectively" by Simon Tatham for hints on how to report bugs effectively, to make sure the issue you are describing can be resolved as promptly as possible.

How to open your JavaScript console

Shortcuts

Where to find your JavaScript console depends on your browser:

How to open the console
Computer	Browser	Windows/Linux	Mac
Desktop/Laptop	Chrome/Chromium Edge (version 79+) Opera (version 15+)	`Ctrl`+`⇧ Shift`+`J`	`⌥ Option`+`⌘ Command`+`J`
	Firefox	`F12`	`⌥ Option`+`⌘ Command`+`K`
	Safari	`Ctrl`+`Alt`+`C`	`⌥ Option`+`⌘ Cmd`+`C`*
	Internet Explorer Edge (up to version 78)	`F12` → Console	–
	Opera (up to version 14)	Page menu → Developer Tools → Error Console
Tablet/Mobile	Mobile operating systems do not usually have developer tools or consoles. However, some mobile browsers support remote debugging, where you connect your mobile device to a desktop via USB, and then you can access developer tools/consoles that way. Firefox USB debugging. Chrome USB debugging.

On some browsers, you may have to click on the "Console" tab once the developer tools pane opens up.

[*] In Safari, you might have to enable the Develop menu first in Preferences (⌘ Cmd+,) → Advanced → check "Show develop menu in menu bar". For OSX, use ⌥ Option+⌘ Command+I then hit esc (escape) to open the JavaScript console. Errors will appear in red.

Once you've opened the console...

Click on the "Console" tab
Scroll to the bottom of the console and look for log entries in yellow and red. Copy or screenshot these.
If there is a "triangle" you can press to expand and show more info, do so, and copy/screenshot that info too.^[1]

Which one is the error?

Unfortunately there is a lot of junk in the console. Programmers really only need one error message to debug, but the trick is getting the right error message. Here's some examples of useful error messages:

Uncaught – typically red
- Uncaught DOMException
- Uncaught Error
- Uncaught ReferenceError
- Uncaught SyntaxError
- Uncaught TypeError
- Uncaught (something in all lowercase)^[2]
jQuery exception – typically yellow
- jQuery.Deferred exception

Notes

↑ This extra info will show the stack trace, which is needed to figure out which user script and what line #.
↑ MediaWiki API error

[1] This extra info will show the stack trace, which is needed to figure out which user script and what line #.

[2] MediaWiki API error

[1]

[2]

@@ Line 12: / Line 12: @@
 == How to open your JavaScript console ==
-{{Shortcut|WP:CONSOLEERROR}}
+{{Shortcut|WP:CONSOLEERROR|Help:CONSOLE}}
 Where to find your JavaScript console depends on your browser:
 {| class="wikitable"
 |+ How to open the console
 |-
+!Computer
-! Browser !! Windows !! Mac
+! Browser !! Windows/Linux !! Mac
 |-
+| rowspan="5" |Desktop/Laptop
-| Chrome || {{Key press|Ctrl|Shift|J}} || {{Key press|Option|Command|J}}
+| [[Google Chrome|Chrome]]/[[Chromium (web browser)|Chromium]]<br />[[Microsoft Edge|Edge]] (version 79+)<br />[[Opera (web browser)|Opera]] (version 15+) || {{Key press|Ctrl|Shift|J}} || {{Key press|Option|Command|J}}
 |-
-| Edge (new versions) || {{Key press|Ctrl|Shift|J}} || -
+| [[Firefox]] || {{Key press|F12}} || {{Key press|Option|Command|K}}
 |-
-| Firefox || {{Key press|F12}} || {{Key press|Option|Command|K}}
+| [[Safari (web browser)|Safari]] || {{Key press|Ctrl|Alt|C}} || {{Key press|Option|Cmd|C}}*
 |-
+| [[Internet Explorer]]<br />[[Microsoft Edge|Edge]] (up to version 78) || {{Key press|F12}} → Console || –
-| Safari || {{Key press|Ctrl|Alt|C}} || {{Key press|Option|Cmd|C}}*
 |-
+| [[Opera (web browser)|Opera]] (up to version 14) || Page menu → Developer Tools → Error Console
-| IE or Edge (legacy versions) || {{Key press|F12}} || -
+|
 |-
+|Tablet/Mobile
-| Opera || Page menu → Developer Tools → Error Console
+| colspan="3" |Mobile operating systems do not usually have developer tools or consoles. However, some mobile browsers support remote debugging, where you connect your mobile device to a desktop via USB, and then you can access developer tools/consoles that way. [https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html Firefox USB debugging]. [https://developer.chrome.com/docs/devtools/remote-debugging/ Chrome USB debugging].
 |}
 On some browsers, you may have to click on the "Console" tab once the developer tools pane opens up.
-[*] In Safari, you might have to enable the Develop menu first in Preferences → Advanced → check "Show develop menu in menu bar". For OSX, use {{Key press|Option|Command|I}} then hit {{key press|esc}} (escape) to open the JavaScript console. Errors will appear in red.
+[*] In Safari, you might have to enable the Develop menu first in Preferences ({{keys|Cmd|,}}) → Advanced → check "Show develop menu in menu bar". For OSX, use {{Key press|Option|Command|I}} then hit {{key press|esc}} (escape) to open the JavaScript console. Errors will appear in red.
 === Once you've opened the console... ===
 [[File:Screenshot_of_Chrome_DevTools_console_tab.png|thumb|Google Chrome DevTools, Console tab]]
-[[File:Google_Chrome_DevTools_screenshot_of_triangle.png|thumb|The "triangle" can be clicked to reveal some hidden info.]]
+[[File:Chromium_DevTools_screenshot_of_triangle.png|thumb|The "triangle" can be clicked to reveal some hidden info.]]
 # Click on the "Console" tab
-# Reproduce the error (make the error happen with DevTools Console open)
 # Scroll to the bottom of the console and look for log entries in yellow and red. Copy or screenshot these.
 # If there is a "triangle" you can press to expand and show more info, do so, and copy/screenshot that info too.<ref>This extra info will show the [[stack trace]], which is needed to figure out which user script and what line #.</ref>
@@ Line 47: / Line 50: @@
 Unfortunately there is a lot of junk in the console. Programmers really only need one error message to debug, but the trick is getting the right error message. Here's some examples of useful error messages:
-* Uncaught (anything)
+* Uncaught – typically red
 ** Uncaught DOMException
 ** Uncaught Error
@@ Line 54: / Line 57: @@
 ** Uncaught TypeError
 ** Uncaught (something in all lowercase)<ref>[[mw:API:Main page|MediaWiki API]] error</ref>
+* jQuery exception – typically yellow
+** jQuery.Deferred exception
 ==See also==

Graham11 (talk | contribs)