- vừa được xem lúc

Debugging Chrome extensions - DevTools Tips

0 0 12

Người đăng: Chrome for Developers

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://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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Chrome 88 - What’s New in DevTools

New to DevTools in Chrome 88:. . What’s new in DevTools (Chrome 88) → http://goo.gle/3owkBMr.

0 0 39

- vừa được xem lúc

New in Chrome 88: Manifest v3, aspect-ratio, digital goods API, and more!

Chrome 88 is rolling out now! You can now upload extensions using manifest v 3 to the Chrome Web Store. The aspect-ratio CSS property makes it easy to set the aspect ratio on any element.

0 0 30

- vừa được xem lúc

Thinking on ways to solve a SIDENAV

In today’s GUI challenge we create a responsive, accessible slide out side navigation user experience using CSS and JS. The sidenav works on multiple browsers, screen sizes and input devices.

0 0 45

- vừa được xem lúc

Dithering - HTTP 203

How do you take an image with 256 shades of grey and map it to an image with just two colors? Jake and Surma go down the monochrome image dithering rabbit hole and explain how different dithering tech

0 0 44

- vừa được xem lúc

Submission shoutouts for SIDENAV

We asked the community to build a sidenav component your way and you all delivered! Check out the submissions:. @a_nurella → http://goo.gle/3j9bmQm. @mayeedwin1 → http://goo.

0 0 28

- vừa được xem lúc

JavaScript counters the hard way - HTTP 203

You’ve seen loads of counter tutorials online, but they’re all a bit wrong… or at least most of them are. Jake and Surma dissect different techniques and identify how to make the counter work accurate

0 0 46