Web developer tools

2019-01-28 - Authored by: Marc Raffalli
html
css
tools
theme

Chrome DevTools

Written with screenshots from Chrome 71.0.3578.98. The interface may differ based on theme and version.

Elements

Element style rules and tools:

Mouse over the three dots on the bottom right of any element CSS rules

Sources

Network

Console

Device toolbar

The device toolbar allows to simulate different screens / devices to test the responsive behavior.

Settings

Access the settings of the DevTools by pressing F1 or by clicking on the three dots on the top right of the DevTools panel => Settings

The same panel allows to dock the DevTools on different sides of the browser or having it on a separate window.

More

Read more on the official documentation