Introduction
Streamlining development with Chrome DevTools
()
What you should know
()
Setting up your environment
()
1. Developer Tools Introduction
Accessing and using the developer tools
()
Customizing the display of the developer tools
()
2. Using Layout Tools
View a page in Device Mode
()
Test a responsive design
()
Emulate rendering on other devices
()
Model connection speeds
()
Challenge: Critique a responsive design
()
Solution: Critique a responsive design
()
3. Using the Elements Panel
Inspect elements
()
Modify the DOM
()
Inspect styles
()
Modify styles
()
Capture a screenshot
()
Challenge: Inspect and modify elements and styles
()
Solution: Inspect and modify elements and styles
()
4. Using the Console Panel
View messages in the Console
()
Write information to the Console
()
Use the Console command line
()
Examine elements in the Console
()
Challenge: Work with the Console
()
Solution: Work with the Console
()
5. Using the Sources Panel
Open files in DevTools
()
Work with breakpoints
()
Edit files and save changes
()
Challenge: Edit source files
()
Solution: Edit source files
()
6. Using the Network Panel
View HTTP request and response headers
()
Identify items that slow page loading
()
Emulate mobile connections
()
Challenge: Examine network performance
()
Solution: Examine network performance
()
7. Using the Application Panel
Examine storage
()
Work with cookies
()
Challenge: Examine local storage and cookies
()
Solution: Examine local storage and cookies
()
Ex_Files_Chrome_Web_Dev_Tools.zip
(80.0 MB)