What you'll learn:
- Access the chrome devtools
- Use the Element Panel
- Manipulate DOM elements on the fly
- Use the Sources Panel
- Setup Persistence
- Setup basic debugging workflow
- Explore HTTP request headers
- Check resource load times
- Simulate mobile devices
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.
All major browsers include developer tools, which enable developers to examine the code of a webpage or app, as well as run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard.
Setting up your testing and debugging environment
How to access the chrome devtools
Installing Live local server
Working with the Elements Panel
Working with the Console
Using and exploring the Network Panel
Emulating mobile devices
Live editing of the DOM elements
Setting up Persistence Workspace
Opening source files in the Sources panel
Editing the BOX-Model
After completing this course you will have the basic skills to explore and use the chrome devtools.