Chrome Dev Tools for Beginners - Become a better Web Developer
Chrome Dev Tools is amazing tool for web developers. Chrome devtools has loads of great and useful features that will make web development easier for programmers. In this video I will introduce some of my favourite and most used features in Chrome Dev Tools.
I study programming here: https://skl.sh/3cYxUP5
Host your blog here: https://bit.ly/2S4757y
My courses:
React basics: https://skl.sh/2XAKn7u
HTML & CSS for beginners: https://skl.sh/34wvGUH
Draft.js basics: https://skl.sh/3cJ5Hw4
Connect with me:
Website: https://tuomokankaanpaa.com
My newsletter: https://tuomokankaanpaa.com/newsletter
Twitter: / tumee
Skillshare: https://www.skillshare.com/r/user/tume
#chromedevtools #webdevelopment #devtools
Timestamps
00:00 What is this video about
00:41 Open Dev Tools
01:05 DOM ELEMENTS INSPECTOR
01:38 Hovering DOM elements
01:46 VIew & edit element attributes
02:28 View element styles & box model
02:56 JAVASCRIPT CONSOLE
03:26 Testing Javascript selectors
04:33 Executing Javascript live on the website
05:37 NETWORK INSPECTOR
06:28 View request information
08:34 Copy/paste request as JS & cURL
09:04 NETWORK CONDITIONS
09:58 TAKE A SCREENSHOT (whole page)
11:20 LOCAL STORAGE INSPECTOR
12:35 DEVICE MODE