W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

Firefox Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

6. The Error Console in Firefox, Tutorial

Share it

Learn to use the Error Console tool

The Error Console tool is part of the Web Developer Tools. When accessed, the Error Console window displays all errors, warnings and messages which occur on a web page together with a small descriptive and also the file name where the error was found and the line number. Thus, it can be corrected.

  1. Open ⁄ Close:
    • Tools »Web Developer »Error Console
    • shortcut: CTRL + Shift + J
  2. Errors: detect & fix
  3. Warnings: detect & fix
  4. Evaluate Code

Video demonstration Firefox Error Console

6. The Error Console in Firefox, Tutorial

min video details
00:10 OPEN ⁄CLOSE Error Console:
00:10 open Error Console -Tools menu
00:12 close Error Console -click on 'x'
00:15 open Error Console -shortcut
00:45 DETECTING Errors ⁄Warnings:
00:45 the web page on the right side: loading ⁄refreshing ⁄mouse over-out the green rectangle
00:50 no errors ⁄warnings display in the Error Console
00:57 the web page on the left side: loading ⁄refreshing the page
01:07 3 warnings display in Error Console
01:10 on mouse over-out the green rectangle: 2 errors display in Error Console
01:17 All: 3 warnings (css) + 2 errors (js)
01:27 Correcting ERRORS:
01:27 1st error: line 14 in 'error_console.html' file
01:29 1st error: open 'error_console.html' Page Source
01:40 1st error: 'getElementByIp'=incorrect; 'getElementById' = correct
01:48 1st error: open source code file in notepad++
01:54 1st error: applying the correction
01:58 1st error: saving the modification
02:06 1st error: refreshing the page
02:10 1st error: mouse over-out the green rectangle
02:12 1st error: no longer displays
02:13 2nd error: following the same steps as in the first case
03:07 2nd error: no longer displays
03:36 Correcting WARNINGS:
03:36 1st warning: clicking the link to open the Page Source
03:47 1st warning: there's an extra dot which must be removed
03:57 1st warning: open source code file in notepad++
04:02 1st warning: applying the correction
04:04 1st warning: saving the modification
04:19 1st warning: refreshing the page
04:19 1st warning: no longer displays
04:24 2nd warning: following the same steps as in the first case
04:58 2nd warning: no longer displays
05:15 3rd warning: following the same steps as in previous cases
05:48 3rd warning: no longer displays
06:06 now that we fixed the errors and warnings, both pages look the same
06:12 EVALUATE code