Wikipedia:Reporting JavaScript errors - Revision history

2001:448A:5021:3DC3:2828:86F1:3014:3710: /* Which one is the error? */

2024-06-27T11:38:40Z

Which one is the error?

← Previous revision		Revision as of 11:38, 27 June 2024
Line 60:		Line 60:
	* jQuery exception – typically yellow		* jQuery exception – typically yellow
	** jQuery.Deferred exception		** jQuery.Deferred exception
	* Regular expression in looping
	** Each iteration produces <b>different regular expression test results</b> even with the <b>same parameters</b>

	==See also==		==See also==

2001:448A:5021:3DC3:2828:86F1:3014:3710: /* Which one is the error? */

2024-06-27T10:39:49Z

Which one is the error?

← Previous revision		Revision as of 10:39, 27 June 2024
Line 60:		Line 60:
	* jQuery exception – typically yellow		* jQuery exception – typically yellow
	** jQuery.Deferred exception		** jQuery.Deferred exception
			* Regular expression in looping
			** Each iteration produces <b>different regular expression test results</b> even with the <b>same parameters</b>

	==See also==		==See also==

Tacsipacsi: /* Once you've opened the console... */ higher-resolution and newer-design triangle

2023-11-05T23:11:25Z

Once you've opened the console...: higher-resolution and newer-design triangle

← Previous revision		Revision as of 23:11, 5 November 2023
Line 42:		Line 42:
	=== Once you've opened the console... ===		=== Once you've opened the console... ===
	[[File:Screenshot_of_Chrome_DevTools_console_tab.png\|thumb\|Google Chrome DevTools, Console tab]]		[[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		# Click on the "Console" tab

Novem Linguae: /* How to open your JavaScript console */ add tablet/mobile

2023-09-08T10:43:41Z

How to open your JavaScript console: add tablet/mobile

← Previous revision		Revision as of 10:43, 8 September 2023
Line 1:		Line 1:
	<noinclude>{{Wikipedia how to\|WP:RJE\|WP:JSERROR}}</noinclude>		<noinclude>{{Wikipedia how to\|WP:RJE\|WP:JSERROR}}
			</noinclude>

	== Info to include in bug reports ==		== Info to include in bug reports ==
Line 17:		Line 18:
	\|+ How to open the console		\|+ How to open the console
	\|-		\|-
			!Computer
	! Browser !! Windows/Linux !! Mac		! Browser !! Windows/Linux !! Mac
	\|-		\|-
			\| rowspan="5" \|Desktop/Laptop
	\| [[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}}		\| [[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}}
	\|-		\|-
Line 28:		Line 31:
	\|-		\|-
	\| [[Opera (web browser)\|Opera]] (up to version 14) \|\| Page menu → Developer Tools → Error Console		\| [[Opera (web browser)\|Opera]] (up to version 14) \|\| Page menu → Developer Tools → Error Console
			\|
			\|-
			\|Tablet/Mobile
			\| 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.		On some browsers, you may have to click on the "Console" tab once the developer tools pane opens up.

Ahecht: /* How to open your JavaScript console */ fix link

2023-04-18T00:00:36Z

How to open your JavaScript console: fix link

← Previous revision		Revision as of 00:00, 18 April 2023
Line 12:		Line 12:

	== How to open your JavaScript console ==		== How to open your JavaScript console ==
	{{Shortcut\|WP:CONSOLEERROR\|Help:~~Console~~}}		{{Shortcut\|WP:CONSOLEERROR\|Help:CONSOLE}}
	Where to find your JavaScript console depends on your browser:		Where to find your JavaScript console depends on your browser:
	{\| class="wikitable"		{\| class="wikitable"

Ahecht: /* How to open your JavaScript console */ update

2023-04-17T23:59:39Z

How to open your JavaScript console: update

← Previous revision		Revision as of 23:59, 17 April 2023
Line 12:		Line 12:

	== How to open your JavaScript console ==		== How to open your JavaScript console ==
	{{Shortcut\|WP:CONSOLEERROR}}		{{Shortcut\|WP:CONSOLEERROR\|Help:Console}}
	Where to find your JavaScript console depends on your browser:		Where to find your JavaScript console depends on your browser:
	{\| class="wikitable"		{\| class="wikitable"
Line 19:		Line 19:
	! Browser !! Windows/Linux !! Mac		! Browser !! Windows/Linux !! Mac
	\|-		\|-
	\| 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}} \|\| –
	\|-
⚫	\| Opera \|\| Page menu → Developer Tools → Error Console
	\|}		\|}
	On some browsers, you may have to click on the "Console" tab once the developer tools pane opens up.		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... ===		=== Once you've opened the console... ===

Ruslik0: copyedit

2023-04-06T20:28:23Z

copyedit

← Previous revision		Revision as of 20:28, 6 April 2023
Line 21:		Line 21:
	\| Chrome \|\| {{Key press\|Ctrl\|Shift\|J}} \|\| {{Key press\|Option\|Command\|J}}		\| Chrome \|\| {{Key press\|Ctrl\|Shift\|J}} \|\| {{Key press\|Option\|Command\|J}}
	\|-		\|-
	\| Edge (new versions) \|\| {{Key press\|Ctrl\|Shift\|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}}
Line 27:		Line 27:
	\| Safari \|\| {{Key press\|Ctrl\|Alt\|C}} \|\| {{Key press\|Option\|Cmd\|C}}*		\| Safari \|\| {{Key press\|Ctrl\|Alt\|C}} \|\| {{Key press\|Option\|Cmd\|C}}*
	\|-		\|-
	\| IE or Edge (legacy versions) \|\| {{Key press\|F12}} \|\| -		\| IE or Edge (legacy versions) \|\| {{Key press\|F12}} \|\| –
	\|-		\|-
	\| Opera \|\| Page menu → Developer Tools → Error Console		\| Opera \|\| Page menu → Developer Tools → Error Console
Line 46:		Line 46:
	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:		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 – typically red
	** Uncaught DOMException		** Uncaught DOMException
	** Uncaught Error		** Uncaught Error
Line 53:		Line 53:
	** Uncaught TypeError		** Uncaught TypeError
	** Uncaught (something in all lowercase)<ref>[[mw:API:Main page\|MediaWiki API]] error</ref>		** Uncaught (something in all lowercase)<ref>[[mw:API:Main page\|MediaWiki API]] error</ref>
	* jQuery exception - typically yellow		* jQuery exception – typically yellow
	** jQuery.Deferred exception		** jQuery.Deferred exception

SD0001: /* Once you've opened the console... */ usually not required, errors logged while the console was not open are visible

2023-02-05T08:08:11Z

Once you've opened the console...: usually not required, errors logged while the console was not open are visible

← Previous revision		Revision as of 08:08, 5 February 2023
Line 40:		Line 40:

	# Click on the "Console" tab		# 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.		# 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>		# 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>

Whoop whoop pull up: /* How to open your JavaScript console */ Linux shortcuts generally track Windows ones

2022-11-23T17:18:30Z

How to open your JavaScript console: Linux shortcuts generally track Windows ones

← Previous revision		Revision as of 17:18, 23 November 2022
Line 17:		Line 17:
	\|+ How to open the console		\|+ How to open the console
	\|-		\|-
	! Browser !! Windows !! Mac		! Browser !! Windows/Linux !! Mac
	\|-		\|-
	\| Chrome \|\| {{Key press\|Ctrl\|Shift\|J}} \|\| {{Key press\|Option\|Command\|J}}		\| Chrome \|\| {{Key press\|Ctrl\|Shift\|J}} \|\| {{Key press\|Option\|Command\|J}}

Novem Linguae: Undid revision 1098085200 by 37.202.112.112 (talk) - test edits

2022-07-14T04:15:00Z

Undid revision 1098085200 by 37.202.112.112 (talk) - test edits

← Previous revision		Revision as of 04:15, 14 July 2022
Line 35:		Line 35:
	[*] 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 → 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 ~~<sup>Superscri<ref name="undefined" />pt text</sup>~~opened the console... ===		=== Once you've opened the console... ===
	[[File:Screenshot_of_Chrome_DevTools_console_tab.png\|thumb\|Google Chrome DevTools, Console tab]]		[[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:Google_Chrome_DevTools_screenshot_of_triangle.png\|thumb\|The "triangle" can be clicked to reveal some hidden info.]]