Google Chrome DevTools Deep Dive #SigmaSchool

🎥 This is a deep dive into Google Chrome DevTools, which is a set of web developer tools built directly into the Google Chrome browser. DevTools helps us to inspect and edit elements on webpages, run JavaScript, diagnose and fix bugs, and gain greater understanding into how our webpages are performing. Put simply, Chrome DevTools is indispensable for helping modern developers build better websites and web applications.

In addition to a deep dive of the Elements Inspector and the JavaScript Console, we also examine local and session storage, using DevTools as a text editor and saving any changes permanently from within dev tools. We also look at DevTools network features, site security and how to run an audit of the performance of any website - performing one ourselves on the BBC website and then unpacking the results.

💡 This video is part of the Tools, Tips & Tricks for Developers Playlist:

⏱ Timestamps:
4:35 - Devices Toolbar
6:24 - Security Panel
8:48 - Audit Panel
11:25 - Elements Inspector (HTML & Style panes)
25:25 - JavaScript Console Console commands + tips & tricks)
42:36 - Sources Panel (Including using DevTools as a text editor)
46:24 - Network Panel
49:37 - Applications Tab (Local & Session Storage)

💻 Get the code:
BurgerBase project repo:

🌏 Links used in the video:

The Box Model:
The Document:
Console group:

👍 Social Media:




📩Email: sigmaschool@outlook.com

💾 Code & Projects:

web dev,tutorial,code,learncode,coding,programming,javascript,js,react,css,css3,html5,frontend,codenewbies,100daysofcode,front end,craigcodes,lambda school,code bootcamp,bootcamp,sigmaschool,sigmaschoolhq,sigma school,sigma school coding,sigma school uk,devtools chrome tutorial,chrome console javascript,chrome console tricks,chrome console tutorial,inspect elements,devtools inspect element,devtools console,devtools audit,chrome devtools,chrome developer tools,