Chrome Development Tools
To show the Development Tools section you can :-
[CTRL]+[SHIFT]+C - show the Elements Tab
[CTRL]+[SHIFT]+I - shows the last Tab you used
or
Right Click on an area of the web page and
select Inspect to show the Elements tab
(NO changes made here will be saved live...when you refresh ALL changes will be LOST)
Selecting an Element
There are a few ways to see the code for a particular element on the web page.
You can...
Click on the TOP LEFT (Figure 1, above) 'select an element' icon
then move the mouse pointer
to the element you want on the web page. The code in the elements
tab will change to line up with wherever you place your mouse
pointer - just click on the element you want to see the code for.
If you want to cancel the 'select an element' option just click on figure 1 again.
OR before you open the Development Tools you could RIGHT CLICK
on the element you want to see the code of and then choose INSPECT
and the Development Tools tab will open at the relevant code you clicked on.
OR you can just look for the code on the elements tab and click on it in there.
Looking at CSS Code for an Element
Use the section on right to see CSS code relating to
the element you selected on the left (Elements Tab).
You can change the values and see where it sets the
values (sometimes) which may give you a good idea as to
what is going on.
If you need to ADD a new STYLE RULE you can click on the + (see
Figure 2, above) and it will create a new section just below
the + (somewhere around figure 3, above) where you can click it and
add your style rule.
NOTE
You can also RIGHT CLICK on the elements TAG (eg <p>) and choose
the EDIT AS HTML from there.
This will let you add/change the details of the element (attribute/style etc).
Because this shows the tag in full you could even add a NEW tag above it to see
what it looks like.
Changing Text of an Element
In order to change the text of an element, first locate the element
that holds the text (eg.. the <p> element) and then RIGHT CLICK
on the actual text you want to change.
When the popup menu appears select either the EDIT TEXT
option or the EDIT AS HTML option.
NOTE
You can also RIGHT CLICK on the elements TAG (eg <p>) and choose
the EDIT AS HTML from there.
You can also add/change an attribute/style this way as well.