<aside> ©️ IT: Từ A tới Á cho người ngoài ngành by @Rose Trinh

</aside>

Zoom the DevTools UI to your liking

Lên công ty bạn có nghe developer nói “mở F12 lên cho anh” khi đang coi một con bug nào không?

Khi developer nói "mở F12 lên", họ đang đề cập đến việc mở cửa sổ Developer Tools trong trình duyệt web. F12 là một phím tắt thường được sử dụng để mở công cụ này trong hầu hết các trình duyệt hiện đại, bao gồm cả Google Chrome, Microsoft Edge, Firefox và Safari.

Developer Tools cung cấp một loạt các tính năng và công cụ hữu ích cho việc phát triển và gỡ lỗi trang web và ứng dụng web. Dưới đây là một số tính năng chính của Chrome Inspect (Developer Tools):

1. Elements (Phần tử): Cho phép bạn xem và chỉnh sửa các thành phần của trang web, bao gồm HTML, CSS và DOM (Document Object Model).

   

2. Console (Bảng điều khiển): Cho phép bạn kiểm tra lỗi JavaScript, ghi log, và thực thi các lệnh JavaScript trực tiếp trên trang web.

3. Sources (Nguồn): Cho phép bạn xem và chỉnh sửa các tệp JavaScript và tài nguyên khác được tải xuống bởi trang web.

   

4. Network (Mạng): Hiển thị thông tin về tất cả các yêu cầu (request) và phản hồi (response) mạng được gửi và nhận bởi trang web, bao gồm thời gian tải và kích thước của từng yêu cầu.

   

   <aside> 💭 Mở tab Network trong Developer Tools là một trong những cách phổ biến để debug các tính năng không hoạt động trên trang web. Ở đây, bạn có thể xem dữ liệu được gửi đi và nhận về, bao gồm các tham số của yêu cầu và dữ liệu phản hồi, xem mã trạng thái HTTP của mỗi yêu cầu để kiểm tra liệu yêu cầu đã thành công hay không.

   </aside>

5. Performance (Hiệu suất): Cung cấp thông tin về thời gian tải và thực hiện của trang web, giúp bạn tối ưu hóa hiệu suất của trang.

   

6. Memory (Bộ nhớ): Hiển thị thông tin về việc sử dụng bộ nhớ của trang web, giúp bạn phát hiện và giải quyết các vấn đề liên quan đến bộ nhớ.

   

7. Application (Ứng dụng): Cung cấp thông tin về các ứng dụng web đang chạy trên trang web, bao gồm lưu trữ cục bộ, phiên và dữ liệu cookie.

   

8. Security (Bảo mật): Hiển thị thông tin về các chứng chỉ SSL và các tùy chọn bảo mật khác của trang web.

   

9. Lighthouse: Lighthouse là một công cụ đánh giá và cung cấp báo cáo về hiệu suất, khả năng tiêu thụ năng lượng và các tiêu chí khác liên quan đến chất lượng của một trang web hoặc ứng dụng web.

   

10. Recorder: Recorder là một công cụ ghi lại các hoạt động trên trang web, giúp bạn ghi lại các bước và tương tác của người dùng để phân tích và tái tạo (reproduce) các vấn đề.