inflearn logo

The More You Know, the More You See in Chrome DevTools

This is a lecture on Chrome Developer Tools for frontend developers. It covers a variety of useful features and tips for development work.

(4.8) 86 reviews

2,702 learners

Level Beginner

Course period Unlimited

Google Chrome
Google Chrome
Chrome DevTools
Chrome DevTools
Google Chrome
Google Chrome
Chrome DevTools
Chrome DevTools

Reviews from Early Learners

4.8

5.0

하람

100% enrolled

I think you did a great job explaining the Chrome developer tools in a video, which is very helpful to know :) It must not have been an easy decision to offer it for free, even if it was a short lecture, so thank you so much!

5.0

ubithus

90% enrolled

This is a great tip!!!

5.0

시스템케이

95% enrolled

It's nice that the voice doesn't get sleepy. The fun feature is awesome.

What you will gain after the course

  • Chrome Developer Tools

  • Basic Web Development Knowledge

Grow into a developer with a deep understanding of the web
while mastering the many features of Chrome DevTools! 🌱

Official Developer Tools documentation

Check out the Q&A! ✍️

Q. Do I need to know a programming language to take this course?

This course is about developer tools used in development, so you can take it even if you don’t know any programming languages.

Q. Do you provide a Windows/MacOS development environment?

The hands-on exercises are conducted in Chrome, so you can take the course regardless of your OS.

What you'll learn 📖

  • It covers the basic features of developer tools that frontend developers should know, along with various tips you can apply in practice!
  • By mastering the many features of DevTools, you can grow into a developer with a deep understanding of web pages.
  • You can learn various functions, including web page debugging, performance analysis, and HTML/CSS editing.
  • Developer Tools official documentation: https://developer.chrome.com/docs/devtools/

Recommended for people like these! 🙆‍♀️

  • Those interested in web development
  • Developers who want to learn features they can use in their development work

Course Features ✨

  • You can learn how to use Chrome Developer Tools.
  • You can learn about various features that can be used in frontend development.

What You'll Learn 📚

Section 0. Developer Tools

  1. Run it
  2. Change Language
  3. Show the ruler
  4. Using the Elements tab
  5. Editing HTML
  6. Editing CSS
  7. Color Picker Tool
  8. Checking pseudo-classes
  9. Checking the Box Model
  10. Disable JavaScript
  11. Take a screenshot
  12. Device mode
  13. Using the Console
  14. Console Precautions (let, const Declarations)
  15. Adjusting Video Speed
  16. Local Storage
  17. Network
  18. Lighthouse
  19. Performance
  20. Debugging

Recommended for
these people

Who is this course right for?

  • Those interested in web development

  • Frontend Developer

Hello
This is jejucoding

108,036

Learners

3,022

Reviews

163

Answers

4.8

Rating

81

Courses

소개 이미지.png.webp

 

🧙‍♂️ Hello. This is Jeju Coding Basecamp.

What is Jeju Coding Basecamp?

 

 

A bootcamp plotted by the hottest developers in Jeju! We provide passionate young people with the opportunity to grow as much as their passion!

Jeju Coding Basecamp is the largest ICT education event in Jeju, held in collaboration with local governments and companies such as Kakao, Goorm, and the Jeju Industry-Academic Convergence Institute.


Success in building a service
—through this experience, cultivate your confidence, self-esteem, sense of accomplishment, and the ability to be self-reliant in this era of job scarcity!, hãy nuôi dưỡng sự tự tin, lòng tự trọng, cảm giác thành tựu và khả năng tự lập trong thời đại khó khăn tìm việc làm này!

Go for it, youth! You can do it! 😀

 


 

▶︎ Jeju Coding Base Camp Roadmap

제코베 로드맵.png.webp

 

▶︎ Jeju Coding Basecamp Certificate System

 

- 1.png.webp

 

More

Co-instructor

Published: 
Last updated: 

Reviews

All

86 reviews

4.8

86 reviews

  • systemk님의 프로필 이미지
    systemk

    Reviews 3

    ∙

    Average Rating 5.0

    5

    95% enrolled

    It's nice that the voice doesn't get sleepy. The fun feature is awesome.

    • ubithus님의 프로필 이미지
      ubithus

      Reviews 6

      ∙

      Average Rating 5.0

      5

      90% enrolled

      This is a great tip!!!

      • 하람님의 프로필 이미지
        하람

        Reviews 5

        ∙

        Average Rating 5.0

        5

        100% enrolled

        I think you did a great job explaining the Chrome developer tools in a video, which is very helpful to know :) It must not have been an easy decision to offer it for free, even if it was a short lecture, so thank you so much!

        • onlystudy390582님의 프로필 이미지
          onlystudy390582

          Reviews 18

          ∙

          Average Rating 4.9

          5

          100% enrolled

          Thank you haha

          • ujdnfjj05010045님의 프로필 이미지
            ujdnfjj05010045

            Reviews 2

            ∙

            Average Rating 5.0

            5

            100% enrolled

            It explains simple things using Chrome developer tools. If you want to learn about specific functions in detail, you need to study individually, but since the lecture does not require a long time, it seems okay to listen to the lecture if you want to know about simple functions.

            jejucoding's other courses

            Check out other courses by the instructor!

            25% off for new members

            $8.80

            25%

            $8.80