Devtools Pro: The Basics of Chrome Developer Tools

Devtools Pro: Cơ bản về Chrome Developer Tools

Hướng dẫn nhanh để chỉnh sửa trang web trực tiếp

4.4

(8,798 đánh giá)

74,639 học viên

Giảng viên

Rocco Balsamo

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

1.0 giờ video

19 bài giảng

2 bài quiz

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 31/05/2026

#Browser Tools #Chrome #Developer Tools #Web Development

Bạn sẽ học được gì

Làm quen với DevTools và thay đổi trực tiếp HTML / CSS cùng Javascript.

Tận dụng các công cụ tích hợp hữu ích như Colorpicker và trình soạn thảo đổ bóng chữ!

Viết các lệnh Javascript đơn giản và học cách gỡ lỗi mã nguồn cơ bản.

Hiểu cách mô phỏng thiết bị di động.

Nắm thông tin để cải thiện tốc độ tải trang qua tính năng Audits.

Viết các khối mã kiểm thử lớn hơn trong bảng Snippets.

Yêu cầu

Khóa học dành cho người mới bắt đầu!

Bạn sẽ hiệu quả nhất nếu đã biết HTML, CSS và Javascript cơ bản.

Đối tượng phù hợp

Lập trình viên Front End

Lập trình viên Back End muốn thử sức với Front End

Nhà thiết kế UI/UX

Kỹ sư phần mềm

Quản lý dự án / sản phẩm

Bất kỳ ai muốn tìm cách nhanh chóng để hiểu về website và ứng dụng web

Nội dung khóa học

3 phần • 18 bài giảng

1 Những gì chúng ta sẽ đạt được

2 Giới thiệu & Bảng Elements

3 Bài tập với bảng Elements

4 Tham quan nhanh DevTools

5 Dùng Console để chạy Javascript

6 Bài tập: Thay đổi màu sắc bằng Javascript

7 Tab Sources và gỡ lỗi cơ bản

8 Snippets: Console mạnh mẽ hơn bao giờ hết

1 Cookies và Local Storage với tab Application

2 Bài tập về Local Storage

3 Tổng quan về Network Calls

4 Bài tập về Network Calls

5 Tốc độ tải trang với Audits

6 Hiệu suất, Bộ nhớ và Bảo mật

7 Các phím tắt hữu ích nhất

8 Trình soạn thảo giao diện

9 Bài tập về trình soạn thảo giao diện

1 Phần thưởng! Mã giảm giá ở phút 1:15! Các tài nguyên khác và Twitter của tôi

Giới thiệu khóa học

This course is a simple introduction to the Google Chrome Developer Tools. In this course we'll cover the basics of devtools which are absolutely essential to productive web development.

And pssst... The course has a humourous twist--your instructor will teach you about amazing colors like blanchedalmond and cornflowerblue!

When you're finished you'll be able to:

Use the elements panel to modify and update live webpages with tools like the colorpicker and text shadow editor.
Type simple Javascript commands in the console.
Write and test larger blocks of code with the snippets panel.
Understand how to stop and step through code with breakpoints and basic debugging.
Learn how to simulate mobile devices for responsive development.
Use the audits panel to get useful information about improving page load time.

This is a free course meant to cover the absolute basics. After completing this, you'll have to tools and knowhow to become a DevTools wizard with my followup class, DevTools 2017: Beginner to Expert with Google Chrome Developer tools.