English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 22m | 467 MB
All major browsers offer tools to examine the code of a webpage or app and evaluate its performance. Chrome Developer Tools (DevTools) is the industry standard. In this course, you can explore how Chrome DevTools work in actual testing and debugging scenarios and how you can add this useful collection of utilities to your development workflow. Each chapter digs into a different tool, including the Console, Elements, Network, and Application panels. Instructor Sasha Vodnik helps you test webpages and apps in different device modes and emulators, explore the DOM, inspect and modify HTML and CSS, edit source files, identify bottlenecks in page loads, access and manipulate cookies, and more. Plus, learn useful tricks and shortcuts for speeding up common debugging tasks.
Topics include:
- Setting up your testing and debugging environment
- Customizing the display of Chrome Developer Tools
- Simulating webpages and apps in different devices
- Emulating rendering
- Inspecting elements and styles
- Reading and writing in the Console
- Opening and editing files in the Sources panel
- Using the Network panel
- Identifying code that slows page loading
- Examining storage and data with the Application panel
Table of Contents
1 Streamlining development with Chrome DevTools
2 What you should know
3 Setting up your environment
4 Accessing and using the developer tools
5 Customizing the display of the developer tools
6 View a page in Device Mode
7 Test a responsive design
8 Emulate rendering on other devices
9 Model connection speeds
10 Challenge Critique a responsive design
11 Solution Critique a responsive design
12 Inspect elements
13 Modify the DOM
14 Inspect styles
15 Modify styles
16 Capture a screenshot
17 Challenge Inspect and modify elements and styles
18 Solution Inspect and modify elements and styles
19 View messages in the Console
20 Write information to the Console
21 Use the Console command line
22 Examine elements in the Console
23 Challenge Work with the Console
24 Solution Work with the Console
25 Open files in DevTools
26 Work with breakpoints
27 Edit files and save changes
28 Challenge Edit source files
29 Solution Edit source files
30 View HTTP request and response headers
31 Identify items that slow page loading
32 Emulate mobile connections
33 Challenge Examine network performance
34 Solution Examine network performance
35 Examine storage
36 Work with cookies
37 Challenge Examine local storage and cookies
38 Solution Examine local storage and cookies
39 Next steps
Resolve the captcha to access the links!