Mở Công cụ của Chrome cho nhà phát triển

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Có nhiều cách để mở Công cụ của Chrome cho nhà phát triển. Hãy chọn cách bạn thích trong tài liệu tham khảo toàn diện này.

Bạn có thể truy cập 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.
• Bằng các lối tắt chuyên dụng mở Phần tử, Bảng điều khiển hoặc bảng điều khiển mà bạn sử dụng gần đây nhất.

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 thích giao diện người dùng hơn, bạn có thể truy cập Công cụ cho nhà phát triển từ 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 mở bảng điều khiển Phần tử rồi chọn phần tử trong cây DOM. Trong ngăn 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 gần đây nhất mà bạn đã sử dụng trong trình đơn chính của Chrome

Để mở bảng điều khiển Công cụ cho nhà phát triển gần đây nhất, hãy nhấp vào nút ở bên phải thanh địa chỉ và chọn Công cụ khác > Công cụ cho nhà phát triển.

Ngoài ra, bạn có thể mở bảng điều khiển cuối cùng bằng một phím tắt. Xem phần tiếp theo để tìm hiểu thêm.

Mở các bảng điều khiển có lối tắt: Phần tử, Bảng điều khiển hoặc bảng điều khiển gần đây nhất của bạn

Nếu bạn muốn dùng bàn phím, hãy nhấn một phím tắt trong Chrome tùy thuộc vào hệ điều hành của bạn:

Dưới đây là một cách dễ dàng để ghi nhớ các phím tắt:

• C là viết tắt của CSS.
• J đối với JavaScript.
• Tôi chỉ định lựa chọn của bạn.

Phím tắt C sẽ mở bảng điều khiển Phần tử ở chế độ trình kiểm tra . Chế độ này hiển thị các chú giải công cụ hữu ích khi bạn di chuột qua các thành phần 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 ngăn Phần tử > Kiểu.

Để biết danh sách đầy đủ các phím tắt trong Công cụ cho nhà phát triển, hãy xem bài viết Phím tắt.

Tự động mở Công cụ cho nhà phát triển trên mọi thẻ mới

Chạy Chrome qua dòng lệnh và truyền cờ --auto-open-devtools-for-tabs:

1. Thoát mọi phiên bản Chrome đang chạy.

2. Chạy ứng dụng dòng lệnh hoặc cửa sổ dòng lệnh yêu thích của bạn.

3. Tuỳ thuộc vào hệ điều hành, hãy chạy lệnh sau:

• MacOS:

  open -a "Google Chrome" --args --auto-open-devtools-for-tabs
  

• Windows:

  start chrome --auto-open-devtools-for-tabs
  

• Linux:

  google-chrome --auto-open-devtools-for-tabs
  

Công cụ cho nhà phát triển sẽ tự động mở đối với 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 để tìm hiểu một số phím tắt và chế độ cài đặt hữu ích giúp điều hướng 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.