Có nhiều cách để mở Chrome DevTools. Chọn cách bạn yêu thích trong tài liệu tham khảo toàn diện này.
Bạn có thể truy cập vào Công cụ cho nhà phát triển bằng giao diện người dùng Chrome hoặc bàn phím:
- Từ trình đơn thả xuống trong Chrome.
- Với các phím tắt chuyên biệt để mở Elements (Phần tử), Console (Bảng điều khiển) hoặc bảng điều khiển gần đây nhất mà bạn đã dùng.
Ngoài ra, hãy tìm hiểu cách tự động mở Công cụ cho nhà phát triển cho mọi thẻ mới.
Mở Công cụ cho nhà phát triển từ trình đơn Chrome
Nếu muốn dùng giao diện người dùng, bạn có thể truy cập vào Công cụ cho nhà phát triển thông qua trình đơn thả xuống trong Chrome.
Mở bảng điều khiển Phần tử để kiểm tra DOM hoặc CSS
Để kiểm tra, hãy nhấp chuột phải vào một phần tử trên trang rồi chọn Kiểm tra.
Công cụ cho nhà phát triển sẽ mở bảng điều khiển Phần tử và chọn phần tử trong cây DOM. Trong thẻ Kiểu, bạn có thể thấy các quy tắc CSS được áp dụng cho phần tử đã chọn.
Mở bảng điều khiển bạn dùng gần đây nhất trong trình đơn chính của Chrome
Để mở bảng điều khiển DevTools gần đây nhất, hãy nhấp vào nút ở bên phải thanh địa chỉ rồi chọn Công cụ khác > Công cụ dành cho nhà phát triển.
Ngoài ra, bạn có thể mở bảng điều khiển gần đây nhất bằng một phím tắt. Hãy xem phần tiếp theo để tìm hiểu thêm.
Mở các bảng điều khiển bằng phím tắt: Phần tử, Bảng điều khiển hoặc bảng điều khiển gần đây nhất
Nếu bạn muốn dùng bàn phím, hãy nhấn một phím tắt trong Chrome tuỳ thuộc vào hệ điều hành của bạn:
| Hệ điều hành | Thành phần | Giao diện dòng lệnh | Bảng điều khiển gần đây nhất |
|---|---|---|---|
| Windows hoặc Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
Sau đây là một cách dễ dàng để ghi nhớ các lối tắt:
- C là viết tắt của CSS.
- J cho JavaScript.
- Tôi biểu thị lựa chọn của bạn.
Phím tắt C sẽ mở bảng điều khiển Elements (Phần tử) ở chế độ trình kiểm tra (lựa chọn bằng bút). Chế độ này cho bạn thấy các chú giải công cụ hữu ích khi bạn di chuột qua các phần tử trên một trang. Bạn cũng có thể nhấp vào bất kỳ phần tử nào để xem CSS của phần tử đó trong thẻ Elements (Phần tử) > Styles (Kiểu).
Để xem danh sách đầy đủ các phím tắt của Công cụ cho nhà phát triển, hãy xem bài viết Phím tắt.
Khi Công cụ cho nhà phát triển đang mở, hãy tải lại trang có hoặc không có bộ nhớ đệm
Khi Công cụ cho nhà phát triển đang mở, bạn có thể tải lại trang theo 3 cách. Trong thanh thao tác chính của cửa sổ Chrome, hãy nhấn và giữ nút Tải lại rồi chọn một trong các lựa chọn sau:
Tải lại bình thường. Sử dụng bộ nhớ đệm để tăng tốc độ tải lại.
Phím tắt: Cmd+R (macOS) hoặc Ctrl+R (Windows/Linux).
Tải lại hoàn toàn. Bỏ qua bộ nhớ đệm nhưng không xoá bộ nhớ đệm.
Phím tắt: Cmd+Shift+R (macOS) hoặc Ctrl+Shift+R (Windows/Linux).
Xoá bộ nhớ đệm và tải lại hoàn toàn. Xoá bộ nhớ đệm cho tất cả các trang web trước khi tải lại.
Tự động mở Công cụ cho nhà phát triển trên mọi thẻ mới
Chạy Chrome từ dòng lệnh và truyền cờ --auto-open-devtools-for-tabs:
Thoát mọi phiên bản Chrome đang chạy.
Chạy ứng dụng dòng lệnh hoặc thiết bị đầu cuối mà bạn yêu thích.
Tuỳ thuộc vào hệ điều hành của bạn, hãy chạy lệnh sau:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
Công cụ cho nhà phát triển sẽ tự động mở cho mọi thẻ mới cho đến khi bạn đóng Chrome.
Tiếp theo là gì?
Tiếp theo, hãy xem video sau đây để tìm hiểu một số phím tắt và chế độ cài đặt hữu ích giúp bạn điều hướng trong Công cụ cho nhà phát triển nhanh hơn.
Để có trải nghiệm học tập thực tế hơn, hãy xem cách tuỳ chỉnh Công cụ cho nhà phát triển.