Browser Inspection Tools – Accessing – HTML+CSS Live Editing

Accessing

Right click + "Inspect Element"

OR

>> "Tools" >> "Developer Tools"

This appears:

HTML+CSS Live Editing

Beautify bad web design [link]

...by adding styles

...and changing colors

...and removing styles.

We can also change elements, attributes, and text:

What is this circle?

The Magnifying Glass

Why's it not centered?

Another margin/padding/size indicator:

This is at the bottom of the styles tab for each element.

Debugging Javascript

Painful without browser inspection tools.

There should be a timed counter below:

0

Super-powered debugging

Breakpoints, expression watching, and more!

Play around here.

Elements >> Properties

Useful when writing Javascript that needs to access an element together with its parent element, child element, next element, etc.

Improve webpage performance

Network

^Also useful for troubleshooting

Audit

Profiler

Timeline