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

2. The Inspect tool in Firefox, Tutorial

Share it

Learn to use the Inspect tool

Part of the Web Developer Tools, the Inspect tool allows you to Inspect the elements on a web page. By selecting one element at the time you can view the corresponding HTML and the CSS rules that applies to it, you can modify ⁄ deactivate existing CSS rules or add new ones.

You can play around any element, Inspect it and modify it as you like, without any worry. These modifications are temporary, viewable by YOU only, on your own computer. Once you refresh your web Browser, they disappear.

  1. Open ⁄ Close:
    • Tools-Web Developer-Inspect
    • shortcut: CTRL + Shift + I
    • hover over element-right click-Inspect Element
  2. Usage:
    • how to
    • navigate
    • HTML: view
    • CSS: view ⁄ modify...

Video demonstration Firefox Inspect tool

2. The Inspect tool in Firefox, Tutorial

min video details
00:10 OPEN ⁄CLOSE Inspect tool:
00:10 open Inspect tool -Tools menu
00:16 close Inspect tool -Tools menu
00:19 open Inspect tool -shortcut
00:23 close Inspect tool -shortcut
00:25 open Inspect tool-right click on the element-Inspect Element
00:31 close Inspect tool-click on 'x' sign
00:39 USE Inspect tool:
00:39 hover your mouse over the element you want to inspect
00:52 select the element you want to inspect by clicking on it
00:54 Note1: only one element can be selected ⁄inspected at a time
01:00 click 'Inspect' button to select a different element
01:07 navigate between parent and child elements
01:21 explaining: 'Image gallery' is a link (a), contained by a paragraph (p) which has a class called 'centr', included in html body's page (body), included in the root element of the html document (html)
01:31 3D view
01:44 inspect the HTML for the selected element
01:47 the selected element 'Earth' is an 'li'= a list item, also a child of an unordered list 'ul'
01:56 inspect the CSS rules for the selected element
02:03 modify the values of the CSS rule for the selected element
02:11 disable CSS rules for the selected element
02:18 add CSS rules to the selected element
02:50 Note2: these changes aren't permanent, they disappear when the page is refreshed (F5)