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++

1. The Web Console in Firefox, Tutorial

Share it

Learn to use the Web Console tool

The Web Console is part of the Web Developer Tools and allows you to View and Inspect the Network requests and their HTTP status messages, the CSS warnings, the JS errors and provides also a Command Line for JavaScript expressions.

The main actions, while working with the Web Console, are demonstrated in the video tutorial below: open ⁄ close it, position it, view and inspect requests, errors, warnings, details, clear it, execute JS expressions.

  1. Open ⁄ Close:
    • Tools-Web Developer-Web Console
    • shortcut: CTRL + Shift + K
  2. Position
  3. Net: Network requests, HTTP status messages
  4. CSS: inspect CSS errors
  5. JS: inspect JS errors
  6. The command line

Video demonstration Firefox Web Console

1. The Web Console in Firefox, Tutorial

min video details
00:14 open Web Console -Tools menu
00:20 open Web Console -shortcut
00:22 positioning: below
00:26 positioning: window
00:36 NET requests:
00:48 HTTP status messages = 200 OK = the requested page 'web_console.html' was found and displayed
00:49 time information
01:02 HTTP status messages = 404 Not Found = the requested image 'w3video.jpg' was Not found; the value of the 'alt' attribute = 'logo' displays instead
01:11 Inspect Network Requests
01:18 CSS errors:
01:23 first CSS error is located in 'stylec.css' file, line:22
01:40 How to correct this CSS errors - video tutorial here
01:50 JS errors:
01:58 first JS error is located in 'web_console.html' file, line:14
02:13 How to correct this JS errors - video tutorial here
02:25 Web Console - Command Line:
02:28 1st Example Command Line:
02:37 we made a request to inspect the element having the id='divone', which is a div;
02:38 'Object Inspector' window for this element opens;
02:51 the property 'nextElementSibling' says 'HTML TableElement' which means that the div's next element is a table,
02:59 which is true.
03:09 2nd Example Command Line
hiding a div /changing its background color
03:50 3rd Example Command Line
arithmetic calculations