Debugging Chrome extensions - DevTools Tips (Дата оригинальной публикации: )

Uploaded By: Myvideo

Published on

30 Sep 2023

8 views

0

0 votes

0

About Share Download Add to

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: Questions? Tweet to us: Jecelyn Yeen → Oliver Dunk → Chrome DevTools → Catch more DevTools Tips → Subscribe to Chrome for Developers → #DevToolsTips

Share with your friends

Link:

Embed:

<iframe width="640" height="360" src="//myvideo.cc/embed/TXlsUUVzM0ViR3Y1RFU2SlQvK0lwQjl1UFBQTktBWVpWMlRXMzJmaE8wdz0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Video Size:

Custom size:

x

Autoplay video

Hide player controls

Hide resume playing

Add to Playlist:

Favorites

My Playlist

Watch Later

Intro to Long Animation Frames (LoAFs) (Дата оригинальной публикации: )

1 month ago

00:00:59

Intro to Long Animation Frames (LoAFs) (Дата оригинальной публикации: )

4 8%

Вадим Макеев Как тестировать на телефонах и эмуляторах, и почему фронтендеру никуда без макбука

1 month ago

00:15:13

Вадим Макеев Как тестировать на телефонах и эмуляторах, и почему фронтендеру никуда без макбука

31 37%

Sonic the Hedgehog 3 - Major/Minor Swap Soundtrack (Visualiser)

2 months ago

00:48:13

Sonic the Hedgehog 3 - Major/Minor Swap Soundtrack (Visualiser)

1 77%

Caching demystified Inspect, clear, and disable caches #DevToolsTips (Дата оригинальной публикации: )

2 months ago

00:07:33

Caching demystified Inspect, clear, and disable caches #DevToolsTips (Дата оригинальной публикации: )

10 9%

Chrome DevTools / Методы объекта console

3 months ago

00:22:47

Chrome DevTools / Методы объекта console

30 66%

21+ Browser Dev Tools & Tips You Need To Know

3 months ago

00:09:25

21+ Browser Dev Tools & Tips You Need To Know

1 28%

Debug speculative navigations (Дата оригинальной публикации: )

6 months ago

00:00:37

Debug speculative navigations (Дата оригинальной публикации: )

7 35%

How to Debug Code Like a Pro

6 months ago

00:11:10

How to Debug Code Like a Pro

4 71%

New field insights for debugging INP (Дата оригинальной публикации: )

6 months ago

00:17:30

New field insights for debugging INP (Дата оригинальной публикации: )

3 90%

Chrome DevTools From friction to flow (Дата оригинальной публикации: )

6 months ago

00:16:27

Chrome DevTools From friction to flow (Дата оригинальной публикации: )

7 64%

Как тестировать на телефонах и эмуляторах, и почему фронтендеру никуда без макбука

6 months ago

00:15:14

Как тестировать на телефонах и эмуляторах, и почему фронтендеру никуда без макбука

8 19%

How I find and debug issues in my CSS

7 months ago

00:23:28

How I find and debug issues in my CSS

46 43%

20 Browser Extensions For Web Design & Development

7 months ago

00:14:26

20 Browser Extensions For Web Design & Development

226 66%

Chrome Ships With This TERRIBLE Code (it took me so long to debug...)

7 months ago

00:11:44

Chrome Ships With This TERRIBLE Code (it took me so long to debug...)

9 59%

Whats new in DevTools Chrome 121-123 (Дата оригинальной публикации: )

8 months ago

00:06:16

Whats new in DevTools Chrome 121-123 (Дата оригинальной публикации: )

25 67%

Whats new in DevTools: Chrome 121-123

8 months ago

00:06:17

Whats new in DevTools: Chrome 121-123

1 29%

379. Бета Chrome 116, linear(), PNG v3, Firefox ESR, перфоманс, альтернатива GitHub, эмоджи в вебе

8 months ago

01:30:49

379. Бета Chrome 116, linear(), PNG v3, Firefox ESR, перфоманс, альтернатива GitHub, эмоджи в вебе

1 60%

Fix the following components are required to run this program microsoft visual c++ runtime | 2022

8 months ago

00:02:54

Fix the following components are required to run this program microsoft visual c++ runtime | 2022

1 47%

Fun & powerful Intro to Chrome DevTools #DevToolsTips (Дата оригинальной публикации: )

9 months ago

00:05:33

Fun & powerful Intro to Chrome DevTools #DevToolsTips (Дата оригинальной публикации: )

37 34%

Fun & powerful: Intro to Chrome DevTools #DevToolsTips

9 months ago

00:05:34

Fun & powerful: Intro to Chrome DevTools #DevToolsTips

1 60%

Debugging speculative navigations for faster page loads #DevToolsTips (Дата оригинальной публикации: )

10 months ago

00:05:21

Debugging speculative navigations for faster page loads #DevToolsTips (Дата оригинальной публикации: )

8 90%

Debugging speculative navigations for faster page loads #DevToolsTips

10 months ago

00:05:22

Debugging speculative navigations for faster page loads #DevToolsTips

1 52%

Debugging Fetch Priority #DevToolsTips (Дата оригинальной публикации: )

11 months ago

00:07:01

Debugging Fetch Priority #DevToolsTips (Дата оригинальной публикации: )

25 26%

Debugging Fetch Priority #DevToolsTips

11 months ago

00:07:02

Debugging Fetch Priority #DevToolsTips

1 50%

0 Comments

Guest