Google Chrome DevTools in Depth
► DevTools is a set of web developer tools built directly into the Google Chrome browser that is indispensable for helping modern developers build better web pages.
DevTools allows us to inspect and edit elements on webpages, run JavaScript, diagnose and fix bugs, and gain a greater understanding of how our webpages are performing. All without leaving the browser.
In addition to a deep dive of the Elements Inspector and the JavaScript Console, we examine local and session storage, using DevTools as a text editor and saving any changes permanently from within DevTools.
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.
► Timestamps:
0:00 Start
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 ( plus 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: https://github.com/craigabourne/html-...
► Links used in the video:
Google Developers page on DevTools: https://developers.google.com/web/too...
The Box Model: https://developer.mozilla.org/en-US/d...
The Document: https://developer.mozilla.org/en-US/d...
Console group: https://developer.mozilla.org/en-US/d...
► This video is part of the Developer Tools playlist: • Developer Tools
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Watch video Google Chrome DevTools in Depth online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 30 January 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,196 once and liked it 118 people.