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
Смотрите видео Google Chrome DevTools in Depth онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 30 Январь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,196 раз и оно понравилось 118 людям.