Extensions are built on web technologies like HTML, CSS and JavaScript and let you extend Chrome to make it your own. In this video, Jecelyn and Oliver look at how DevTools can be used to debug extensions during development and give a few tips and tricks along the way.
Chapters:
0:00 Intro
0:43 What are Chrome extensions?
1:10 Enable dev mode & load unpacked extensions
1:35 View errors
1:55 Reload & refresh extensions
2:19 Inspect service worker
2:36 Debug memory
2:57 Beware of alive service worker
3:30 What are content scripts?
3:50 Debug content scripts
4:29 Configure to not ignore content scripts
4:50 Reorder Content scripts tab
5:01 Terminate service worker
5:25 Learn more
Resources:
https://bit.ly/oliver-focus-mode
https://goo.gle/chrome-extensions-samples
https://goo.gle/chrome-extensions-101
https://goo.gle/mv3-content-scripts
https://goo.gle/devtools-breakpoints
Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Oliver Dunk → https://goo.gle/oliverdunk_
Chrome DevTools → https://goo.gle/chromedevtools
Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#DevToolsTips