Tutorialspoint

Chrome DevTools Introduction Web Developers Guide

Learn how use Chrome DevTools improve on Debugging, Customize look and feel and learn some shortcuts for Web development

  Laurence Svekis

   Development, Development Tools, Development Tools Other

  Language - English

   Published on 06/2020

0
  • DevTools Introduction
    04:07
    Preview
  • PDF Resource and Lesson Guide
  • DevTools Open Options
    09:03
    Preview
  • Elements Panel.
    10:51
  • CSS Box Model
    05:34
  • Web Scavenger Hunt 1
    05:47
  • Console JavaScript
    09:07
  • Code Snippets
    05:42
  • Sources FileSystem
    04:23
  • Web Scavenger Hunt 2
    07:12
  • Network Panel
    05:26
  • Application Tab
    06:43
  • Audit Tab
    03:28
  • Short Cuts Conclusion
    03:01

Description

Learn how use Chrome DevTools improve on Debugging, Customize look and feel and learn some shortcuts for Web development.

Perfect course to explore more about what Chrome DevTools has to offer and how you can use devTools for development.

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

DevTools

  • Help you edit pages on-the-fly

  • Diagnose problems quickly

  • Test and try code

  • Write code snippets

  • Inspect Code

  • Check responsiveness

DevTools ultimately helps you build better websites, faster.  Most browsers have their own version of devtools.

Course covers

  • Open DevTools

  • Element Panel

  • Where to compute and get box model details

  • using the Console and JavaScript coding

  • Snippets of code running and saved in the console

  • Access local filesystem with DevTOols

  • Network for file load times and debugging

  • Application tab for session and local storage values

  • Audit Panel and how to get website improvement report

  • Shortcuts and getting more help with DevTools

Taught by an instructor with over 20 years of web development experience ready to help you learn about DevTools

Chrome DevTools
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

Open DevTools
There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.

When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to jump straight into the Console panel.

Who this course is for:

  • Web Developers
  • Web Designers
  • Coders
  • Anyone developing websites or web applications

What Will I Get ?

  • Web Developers tools that can be used to speed up web development process
  • Tools with how they can be used
  • Get details about web pages and HTML CSS and JavaScript
  • Chrome browser users get more out of the browser
  • Using and debugging of Code

Requirements

  • Internet access
  • Basic Code HTML JavaScript
0
Course Rating
0%
0%
0%
0%
0%

    Feedbacks (0)

  • No Feedbacks Yet..!
Chrome DevTools Introduction Web Developers Guide
This Course Includes :

1 hours

14 Lectures

Lifetime Access

30-Days Money Back Guarantee

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy.