6. The Error Console in Firefox, Tutorial
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.
- Open ⁄ Close:
- Tools »Web Developer »Error Console
- shortcut: CTRL + Shift + J
- Errors: detect & fix
- Warnings: detect & fix
- 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 |