Chrome Dev Tools: Elements Tab

Published: 24 August 2015
on channel: freeCodeCamp.org

27,428

259

Info and mini-lesson on the Elements tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/too...

We will be using the webpage http://www.mckellen.com/ per suggestion of Free Code Camp user kmiasko.

Please check out the Chrome Dev Tools documentation at https://developers.google.com/web/too...

If you right click and select 'Inspect element', you can have access to the elements tab. You can change text, background color, text color, and any other CSS or HTML you'd like!

These changes don't set up automatically, so don't use this as an IDE or a place to create or edit anything you want to save. You can set up something called "persistant authoring" to save.

Cascade, inherit, and other css rules still apply, so keep that in mind as you play around. Additionally, overridden styles will be shown as having a strike through them.

It should also be noted that all of the code you're seeing in this 'tree' is current HTML, not original onload. If you use javascript or jquery to change something, it will be updated on this tree.

Padding, border, and margins are easily inspected and edited using the colorful box on the right or bottom side.

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

On this page of the site you can watch the video online Chrome Dev Tools: Elements Tab with a duration of 16 minute 40 second in good quality, which was uploaded by the user freeCodeCamp.org 24 August 2015, share the link with friends and acquaintances, this video has already been watched 27,428 times on youtube and it was liked by 259 viewers. Enjoy your viewing!

10,668

367