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.

Open ⁄ Close:
- Tools-Web Developer-Web Console
- shortcut: CTRL + Shift + K
Position
Net: Network requests, HTTP status messages
CSS: inspect CSS errors
JS: inspect JS errors
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	1^st 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	2^nd Example Command Line hiding a div /changing its background color
03:50	3^rd Example Command Line arithmetic calculations