There are three ways to open the Developer Tools menu:
CTRL + Shift + I(
option + command + Ion Mac)
1.Watch this introductory video by
Duration: 5 minutes
Traversy Mediaand learn all about the powerful tools available through in Chrome’s Developer Tools
Duration: 34 minute (Watch the video up to 33:35)
Head to the Chrome DevTools Documentation by Google. The following subsections cover what you’ll be using the Developer Tools for 95% of the time. Feel free to skip the elements you are already familiar with:
After becoming familiar with the Chrome DevTools, install and open up
Mozilla FireFox check and compare the Developer tools. You must familiarize yourself with at least 3 browsers and their Developer tools in order to be able to debug browser-specific issues.
Duration: 10 minutes
Record your video, add the URL in a text file named
devtools-part2-screencast.txt and upload it in the Assignment panel below. In case you use some other kind of recording software, upload the file in Google Drive or DropBox, share the video link and add the relevant URL in the text file.
Material based on Erik Trautman | The Odin Project