2. The Inspect tool in Firefox, Tutorial
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.
- Open ⁄ Close:
- Tools-Web Developer-Inspect
- shortcut: CTRL + Shift + I
- hover over element-right click-Inspect Element
- 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) |