Phím tắt tiết kiệm thời gian bằng cách thực hiện các tác vụ nhất định từ bàn phím mà không cần phải nhấp nhiều lần. Chúng tôi đã tổng hợp 13 phím tắt cho DevTools, bộ công cụ phát triển web được tích hợp ngay trong Google Chrome.
1. Kiểm tra nguyên tố
Để truy cập giao diện cho phép bạn kiểm tra phần tử, bạn chỉ cần sử dụng các phím tắt sau:
Ctrl + Cmd + C trên macOS
F12 hoặc Ctrl + Shift + C trên Windows và Linux
2. Mở bảng điều khiển
Để mở trực tiếp bảng điều khiển, hãy khởi chạy tab Google Chrome và sử dụng các phím tắt sau:
Ctrl + Cmd + J trên macOS
Ctrl + Shift + J trên Windows và Linux
3. Mở menu lệnh
Menu lệnh cung cấp quyền truy cập nhanh vào bất kỳ tính năng DevTools nào. Để mở trực tiếp, các phím tắt là:
Cmd + Shift + P trên macOS
Ctrl + Shift + P trên Windows và Linux
4. Giao diện cài đặt
Khi DevTools đang mở, bạn có thể dễ dàng truy cập cài đặt bằng các phím tắt sau:
Fn + F1 Ở đâu ? trên macOS
F1 Ở đâu ? trên Windows và Linux
5. Thay đổi bảng điều khiển
Để chuyển từ bảng DevTools này sang bảng DevTools khác, có 2 các phím tắt cho phép bạn chuyển sang bảng tiếp theo hoặc quay lại bảng trước đó:
Lệnh / Ctrl +] để đi đến bảng điều khiển tiếp theo
Cmd / Ctrl +[[để quay lại bảng điều khiển trước đó
6. Chuyển sang chế độ di động
Có thể mô phỏng các bản xem trước cho các định dạng màn hình khác nhau, chẳng hạn như điện thoại di động, máy tính để bàn hoặc thậm chí máy tính bảng. Để truy cập chế độ này thông qua phím tắt, hãy sử dụng:
Cmd + Shift + M trên macOS
Ctrl + Shift + M trên Windows và Linux
7. Chuyển sang chế độ HTML
Khi kiểm tra một phần tử, nếu bạn muốn sửa đổi các thuộc tính của nó (chẳng hạn như lớp hoặc trạng thái), bạn có thể chuyển sang chế độ HTML trực tiếp từ bàn phím bằng các phím tắt sau:
Fn + F2 trên macOS
F2 trên Windows và Linux
8. Thay đổi vị trí của DevTools
Theo mặc định được đặt ở bên phải trong cửa sổ Chrome, thường được sử dụng trong cửa sổ chuyên dụng, có thể di chuyển DevTools xuống nửa dưới của màn hình. Để thực hiện động tác này một cách dễ dàng, có một phím tắt chuyên dụng:
Cmd + Shift + D trên macOS
Ctrl + Shift + D trên Windows và Linux
9. Mở và đóng ngăn kéo
Ngăn kéo là cửa sổ nhỏ ở dưới cùng, chứa bảng điều khiển và một tab mới. Nó có thể đóng và mở nhanh chóng bằng cách nhấn Thoát ra trong giao diện DevTools.
10. Tìm kiếm văn bản
Để tìm kiếm một phần cụ thể của văn bản trong bảng (ngoại trừ bảng kiểm tra, ứng dụng và bảo mật), bạn có thể sử dụng:
Cmd + F trên macOS
CTRL + F trên Windows và Linux
Là một phần của tìm kiếm văn bản trong ngăn kéo (để tìm kiếm trong tất cả các tài nguyên đã tải), bạn sẽ cần sử dụng các phím tắt sau:
Cmd + Option + F trên macOS
Ctrl + Shift + F trên Windows và Linux
11. Mở tệp trong bảng Nguồn
Bạn có thể mở tệp từ bảng Nguồn bằng một trong hai phím tắt:
Cmd + O Ở đâu Cmd + P trên macOS
CTRL + O Ở đâu CTRL + P trên Windows và Linux
12. Phóng to và thu nhỏ
Để sử dụng các tính năng phóng to và thu nhỏ, chỉ cần nhấn:
Lệnh + + (thu phóng) hoặc Lệnh + – (thu nhỏ) trên macOS
CTRL + + (thu phóng) hoặc Ctrl + –(thu nhỏ) trên Windows và Linux
Nếu bạn muốn khôi phục mức thu phóng mặc định, hãy sử dụng:
Lệnh + 0 trên macOS
CTRL + 0 trên Windows và Linux
13. Chạy một tập lệnh
Đoạn mã JavaScript có thể được sử dụng để xác định các vấn đề trong mã của bạn. Để chạy chúng, hãy nhấn Cmd / Ctrl + Ođể mở menu lệnh, hãy nhập! theo sau là tên của tập lệnh và cuối cùng nhấn Sảnh.
