Quangkhoi1228 | Knowledge base
  • Về trang chủ
  • Lời nói đầu
  • Nhập môn lập trình web
    • Giáo trình
    • Class 01: Hello HTML!!!
    • Class 02: HTML: Comment, Text formatting, Attribute, Link
    • Class 03: HTML: Style, Inline/Block element, Image
    • Class 04: HTML: List, Table, Responsive
    • Class 05: Hello CSS!!!
    • Class 06: CSS: Flexbox, Layout
    • Class 07: Hello Javascript!!!
    • Class 08: JS: Operator, Expression, For/While Loop, Function
    • Class 09: JS: Search Function
    • Project 1: Layout Structure
    • Project 2: Search Function
    • Project 3: MVP
    • Review "Lập trình Frontend Website"
  • Lập trình Frontend Website
    • Class 01: Ôn tập HTML
    • Class 02: Thảo luận HTML
    • Class 03: Ôn tập CSS
    • Class 04: Chrome dev tools, CSS Box Model
    • Class 05: CSS: Position, Đơn vị đo
    • Class 06: CSS: hiệu ứng, responsive
    • Class 07: Thảo luận CSS
    • Class 08: Ôn tập JS
    • Class 09: JS: Mảng, Đối tượng, Biến tham chiếu và tham trị
    • Class 10: JS: Class, Pair programming
    • Class 11: JS: DOM, UI Rendering
  • Lập trình ReactJS
    • Class 01: Giới thiệu ReactJS
    • Class 01: Tạo dự án ReactJS mới
    • Class 02: ReactJS Component
    • Class 02: Import/Export component
    • Class 03: useState hook
    • Class 04: Project 1: UI cơ bản
    • Class 05: Render có điều kiện và danh sách
    • Class 06: useEffect hook
    • Class 07: Project 2: Xử lý user logic
    • Class 08: Project 3: Hoàn thiện dashboard
    • Class 09: Form và dữ liệu người dùng
    • Class 10: UseRef và thao tác với DOM
    • Class 11: Project 4: Xử lý form data
    • Class 12: Project 5: Hoàn thiện form data
    • Class 13: useMemo và useCallback
    • Class 14: Custom Hook
    • Class 15: Project 6: Hoàn thiện project
    • Class 16: Ôn tập
  • Lập trình NestJS
    • Class 01: Giới thiệu NestJS & Cài đặt dự án
    • Class 02: Routing, Controller và Dependency Injection
    • Class 03: Service và Data Validation
    • Class 04: Kết nối Database với TypeORM
    • Class 05: Quan hệ trong Database (OneToMany, ManyToOne) với TypeORM
    • Class 06: Middleware, Interceptor, Guard
    • Class 07: Authentication – JWT
    • Class 08: Authorization – Phân quyền
    • Class 09: File Upload & Configuration
    • Class 10: Giới thiệu WebSocket
    • Class 11: Project 1
    • Class 12: Project 2
    • Class 13: Project 3
    • Class 14: Project 4
    • Class 15: Project 5
    • Class 16: Project 6
  • Lập trình Java cơ bản
    • Class 01: Khai giảng
    • Class 02: Hello Java
    • Class 03: Biến và kiểu dữ liệu
    • Class 04: Toán tử và biểu thức
    • Class 05: Câu lệnh điều kiện
    • Class 06: Review 1
    • Class 07: Vòng lặp For
    • Class 08: Vòng lặp While / Do-while
    • Class 09: Java Method
    • Class 10: Review 2
    • Class 11: Java User Input
    • Class 12: Java File
    • Class 13: Final Exam 1
    • Class 14: Final Exam 2
    • Review "Lập trình OOP với Java"
  • Lập trình OOP với Java
    • Class 01: Hello OOP
    • Class 02: Class Attribute và Method
    • Class 03: Constructor, Modifier và Package
    • Class 04: Review 1
    • Class 05: Tính kế thừa và đa hình
    • Class 06: Tính trừu tượng và đóng gói
    • Class 07: Review 2
    • Class 08: Final Exam 1
    • Class 09: Final Exam 2
    • Review "CTDL và Giải thuật với Java"
  • CTDL và Giải thuật với Java
    • Class 01: Hello Data Structure
  • HTML
    • Cài đặt công cụ cơ bản
    • HTML là gì?
    • Phần tử HTML
    • Cấu trúc file HTML cơ bản
    • Comment trong HTML
    • Format văn bản trong HTML
    • Thuộc tính HTML
    • Liên kết(link) trong HTML
    • Project: Professional Email
    • HTML Style
    • Phần tử Inline và Block
    • HTML Image
    • HTML List
    • HTML Table
    • Head trong HTML
    • HTML Responsive
    • Project: Online Cover Letter
  • CSS
    • Giới thiệu CSS
    • CSS Selector
    • Thêm CSS vào trang
    • Comment trong CSS
    • Màu sắc trong CSS
    • CSS Background
    • CSS Border
    • CSS Spacing
    • CSS Flexbox
    • HTML Layout
    • Chrome dev tools
    • CSS Box Model
    • CSS Position
    • Đơn vị đo trong CSS
    • CSS Pseudo-classes
    • CSS Responsive
  • JavaScript
    • Giới thiệu Javascript
    • Thêm JS vào trang
    • Các hàm có sẵn
    • Biến và kiểu dữ liệu
    • JS Mảng
    • JS Đối tượng
    • JS Biến Tham Chiếu và Tham Trị
    • Toán tử và biểu thức
    • Câu lệnh điều kiện
    • Vòng lặp For / While
    • Hàm (Function)
    • Chức năng tìm kiếm với JS và DOM
    • JS Class
    • JS DOM
    • JS Dom Rendering
  • Java
    • Giới thiệu Java
    • Chương trình Hello world
    • Phân biệt JVM, JRE, JDK
    • Java Comment
    • Biến trong Java
    • Kiểu dữ liệu trong Java
    • Java Array
    • Toán tử trong Java
    • Biễu thức trong Java
    • Java If-else
    • Java Switch
    • Vòng lặp For trong Java
    • Vòng lặp While trong Java
    • Vòng lặp Do-while trong Java
    • Java Method
    • Java OOP
    • Java Class và Object
    • Java Class attribute
    • Java Class method
    • Java Constructor
    • Java Modifier
    • Java Package
    • Java Tính kế thừa
    • Java Tính đa hình
    • Java Tính trừu tượng
    • Java Tính đóng gói
    • Java User Input
    • Java File
  • Soft skills
    • Pair Programming
  • Web design and wireframe
  • NextJS
    • Tạo dự án NextJS mới
  • NestJS
    • Giới thiệu NestJS
    • NestJS controller
    • NestJS module
  • Git
    • Setup SSH key với GitHub
  • Bash
    • Giới thiệu Bash/Shell Script
  • Wordpress
    • Thêm custom routes
    • Deploy with ubuntu
  • Deployment
    • SSH server, đổi password và add SSH key
    • Tạo user mới và add SSH key
    • Page
  • GitBook
    • Custom domain with CloudFlare
  • Hướng dẫn khác
    • Gitbook custom domain with Cloudflare
    • Cấu hình OpenVPN
    • Cấu hình và lấy SSH key
    • Công cụ lập trình
      • Visual Studio Code
      • Cài đặt IntelliJ IDEA
    • Đường dẫn file trong HTML
    • CI/CD github action
  • Project: CV online
Powered by GitBook
On this page
  • Giới thiệu về Chrome DevTools
  • Các Chức Năng Cơ Bản
  • Elements Panel:
  • Console Panel:
  • Gỡ Lỗi và Tối Ưu Hóa
  • Sources Panel:
  • Performance Panel:
  • Công cụ Nâng Cao
  • Application Panel:
  • Security Panel:
  • Thủ Thuật và Mẹo
  1. CSS

Chrome dev tools

Chào mừng các bạn đến với buổi hướng dẫn về Chrome DevTools - một công cụ mạnh mẽ dành cho nhà phát triển web. Trong buổi hướng dẫn này, chúng ta sẽ tìm hiểu về các tính năng và công cụ của Chrome Dev

Giới thiệu về Chrome DevTools

  • Ý nghĩa và tầm quan trọng của Chrome DevTools trong quá trình phát triển web.

  • Cách mở Chrome DevTools và cách chuyển đổi giữa các tab chức năng.

Các Chức Năng Cơ Bản

Elements Panel:

  • Phân tích và chỉnh sửa HTML và CSS.

  • Sử dụng công cụ lấy phần tử, thay đổi thuộc tính và xem trực tiếp kết quả.

Console Panel:

  • Thực thi mã JavaScript và ghi log.

  • Gỡ lỗi và xử lý các lỗi JavaScript.

Gỡ Lỗi và Tối Ưu Hóa

Sources Panel:

  • Sử dụng breakpoints để gỡ lỗi JavaScript.

  • Xem và chỉnh sửa các tệp nguồn.

Performance Panel:

  • Phân tích hiệu suất của trang web.

  • Xác định và khắc phục các vấn đề về hiệu suất.

Công cụ Nâng Cao

Application Panel:

  • Quản lý các dữ liệu ứng dụng như Cookies, Local Storage, và IndexedDB.

  • Kiểm tra và gỡ lỗi Service Workers.

Security Panel:

  • Kiểm tra và cải thiện bảo mật của trang web.

Thủ Thuật và Mẹo

  • Sử dụng Keyboard Shortcuts để tăng tốc độ làm việc.

  • Sử dụng Device Mode để kiểm tra phản ứng của trang web trên các thiết bị khác nhau.

Chrome DevTools là một công cụ quan trọng giúp nhà phát triển web tạo ra các ứng dụng web tốt hơn. Bằng cách sử dụng các tính năng và công cụ của nó một cách hiệu quả, bạn có thể tối ưu hóa và phát triển dự án của mình một cách dễ dàng và nhanh chóng.

PreviousHTML LayoutNextCSS Box Model

Last updated 1 year ago