Debugging Chrome extensions - DevTools Tips
197Extensions 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://goo.gle/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 Chrome for Developers → https://goo.gle/ChromeDevs
#DevToolsTips
Other Videos By Chrome for Developers
| 2023-10-17 | @scope - New in Chrome 118 |
| 2023-10-17 | Adobe Express: On-the-go creativity powered by the web |
| 2023-10-11 | Adding alpha to color - GUI Snippets |
| 2023-10-11 | fluffy-center - CSS Podcast Tips |
| 2023-10-11 | Debug Chrome extensions |
| 2023-10-10 | How do I center a div? |
| 2023-10-10 | New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more! |
| 2023-10-05 | Progressive Web Apps (PWAs): New features & APIs |
| 2023-10-04 | Thinking on ways to solve RELATIVE COLORS |
| 2023-10-03 | What’s new in DevTools: Chrome 118 |
| 2023-09-29 | Debugging Chrome extensions - DevTools Tips |
| 2023-09-29 | Source maps - DevTools Tips |
| 2023-09-26 | Array grouping - New in Chrome 117 |
| 2023-09-26 | transition-behavior - New in Chrome 117 |
| 2023-09-25 | Render a web page - CSS Podcast Tips |
| 2023-09-22 | bfcache - New in Chrome 117 |
| 2023-09-22 | What’s new in DevTools: Chrome 116-117 |
| 2023-09-21 | Why is my animation glitching? |
| 2023-09-20 | We are Chrome for Developers |
| 2023-09-19 | Exciting things are coming |
| 2023-09-14 | Workspace - DevTools Tips |