Mastering Google Chrome DevTools Course

سرفصل های دوره

Learn how to use the main tools in DevTools, including performance tools, lighthouse, accessibility, among many others.

1. Introducction

1. Introduction to the course

2. Chrome DevTools The big picture

3. Open Chrome DevTools

4. Installing and opening Chrome DevTools.html

5. Commands and shortcuts

6. Playing with the Command Palette.html

2. Simulate devices with Device Mode

1. Simulate mobile devices with Device Mode

2. Simulating mobile devices.html

3. Throttle the network and CPU

4. Throttling the network and CPU.html

3. Elements

1. Viewing elements in the DOM

2. Viewing elements in the DOM.html

3. Editing the DOM

4. Editing the DOM.html

5. Acceding nodes in the Console

6. Acceding nodes in the Console.html

7. View the properties of DOM objects

8. View the properties of DOM objects.html

9. View and change CSS

10. View and change CSS.html

11. Inspect CSS grid

12. Inspect CSS grid.html

13. Inspect and Debug CSS Flexbox Layouts

14. Inspect and Debug CSS Flexbox Layouts.html

4. Console

1. Log messages in Console

2. Log messages in Console.html

3. Run JavaScript in the Console

4. Run JavaScript in the Console.html

5. Watch JavaScript values in real time with live expressions

6. Watch JavaScript values in real time with live expressions.html

7. Format and style messages in the Console

8. Format and style messages in the Console.html

5. Sources

1. Debug JavaScript

2. Debug JavaScript.html

3. Pause your code with breakpoints

4. Pause your code with breakpoints.html

5. Run Snippets of JavaScripts

6. Run Snippets of JavaScripts.html

7. Edit and save files with Workspaces

8. Edit and save files with Workspaces.html

6. Network

1. Inspect network activity

2. Inspect network activity.html

3. Viewing network properties by searching for a file

4. Viewing network properties by searching for a file.html

7. Performance

1. Analyze runtime performance

2. Analyze runtime performance.html

3. Finding bottlenecks

4. Finding bottlenecks.html

8. Memory

1. Using the Chrome Task Manager

2. Using the Chrome Task Manager.html

3. Discover detached DOM tree memory leaks with Heap Snapshots

4. Discover detached DOM tree memory leaks with Heap Snapshots.html

5. Identify JS heap memory leaks with Allocation Timelines

6. Identify JS heap memory leaks with Allocation Timelines.html

7. Investigate memory allocation by function

8. Investigate memory allocation by function.html

9. Application

1. Debug Progressive Web Apps

2. Debug Progressive Web Apps.html

3. View and edit local storage

4. View and edit local storage.html

5. View and edit session storage

6. View and edit session storage.html

7. View and change IndexedDB data

8. View and change IndexedDB data.html

9. View, edit, and delete cookies

10. View, edit, and delete cookies.html

11. View Cache data

12. View Cache data.html

13. Debug background services

14. Debug background services.html

10. Lighthouse and other important topics

1. Lighthouse - Audit a site

2. Lighthouse - Audit a site.html

3. Lighthouse - Improving a site from the audit

4. Lighthouse - Improving a site from the audit.html

5. Inspect and modify CSS animation effects

6. Inspect and modify CSS animation effects.html

7. Track your HTML, CSS, and JavaScript changes

8. Track your HTML, CSS, and JavaScript changes.html

9. Find unused JavaScript and CSS

10. Find unused JavaScript and CSS.html

11. Identify potential CSS improvements

12. Identify potential CSS improvements.html

13. Issues - Find and fix problems

14. Issues - Find and fix problems.html

15. Media - View and debug media players information

16. Media - View and debug media players information.html

17. Memory Inspector - Inspect JavaScript ArrayBuffer

18. Memory Inspector - Inspect JavaScript ArrayBuffer.html

19. Network conditions - Override the user agent string

20. Network conditions - Override the user agent string.html

21. Security - Understand security issues

22. Security - Understand security issues.html

23. Search - Find text across all loaded resources

24. Search - Find text across all loaded resources.html

25. WebAuthn - Emulate authenticators

26. WebAuthn - Emulate authenticators.html

11. Recorder

1. Record, replay, and measure user flows

2. Record, replay, and measure user flows.html

12. Rendering

1. Discover issues with rendering performance

2. Discover issues with rendering performance.html

3. Emulate CSS media features

4. Emulate CSS media features.html

5. Apply other effects - enable automatic dark theme, emulate focus, and more

6. Apply other effects - enable automatic dark theme, emulate focus, and more.html

13. Sensors

1. Override geolocation

2. Override geolocation.html

3. Simulate device orientation

4. Simulate device orientation.html

14. Remote debugging

1. Remote debug Android devices

2. Remote debug Android devices.html

3. Access local servers

4. Access local servers.html

15. Accesbility

1. Audit a pages accessibility

2. Audit a pages accessibility.html

3. Make your website more readable

4. Make your website more readable.html

5. Track element focus

6. Track element focus.html

16. Settings and customization

1. Setting options and customizing DevTools

2. Setting options and customizing DevTools.html

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training