Chrome DevTools Tutorials

Course: Learning Chrome Web Developer Tools

In Chrome, DevTools by Afnan ArshadLeave a Comment

In this course, we are going to learn Chrome Developer tools for web developers.

What is chrome developer tools?

The Chrome Developer Tools (aka Dev Tools ), are website debugging tools built into Google Chrome browser.

What you should know before starting this course?

This course is intended for intermediate users.You should have basic knowledge of:

    • HTML structure
    • CSS styles
    • JavaScript (Basic)

Course goals

After completing this course, you’ll have more control over your web development work, either front end, back end or full stack. We’ll achieve our course goals by learning following topics:

  1. Tools for exploring the DOM elements in different states
  2. Examine code, errors, and create our own error messages
  3. Open source files, and set and use breakpoints
  4. HTTP requests
  5. Run Tests
  6. Response Headers
  7. Use dev tools to identify issues with page load

How to open chrome developer tools?

  1. Open Google chrome.
  2. To open developer tools in chrome, press Ctrl+shift+I (Windows) or press Cmd+option+I (Mac).You can also open dev tools using right-click anywhere in the browser window and click inspect on the context menu.
  3. (Optional) To adjust the position of Dev tools,click on three dots on top right, and select the position of dev tool like this:

Whats next?

In next tutorial we are going to customize the Chrome DevTools panels.

In this complete chrome dev tools course, all code files will be available at the end of each tutorial and there will be a quiz to test your knowledge. All available absolutely FREE.

Quiz

Chrome developer tools are:

In developer mode we are able to examine code of:

Keyboard shortcut to open developer tools for windows: