Tuỳ chọn

Sofia Emelianova
Sofia Emelianova

Định cấu hình giao diện và hành vi của DevTools cũng như các bảng điều khiển của công cụ này bằng cách sử dụng Cài đặt. Cài đặt > Lựa chọn ưu tiên. Thẻ này liệt kê cả các tuỳ chọn tuỳ chỉnh chung và các tuỳ chọn tuỳ chỉnh dành riêng cho bảng điều khiển.

Để đặt lựa chọn ưu tiên, hãy mở Cài đặt. Cài đặt > Lựa chọn ưu tiên rồi chuyển đến một trong các phần được mô tả tiếp theo.

Mục Giao diện trong thẻ Lựa chọn ưu tiên.

Để tìm hiểu chức năng của từng chế độ cài đặt, hãy tìm tên của chế độ cài đặt trên trang này rồi để mở rộng phần mô tả của chế độ cài đặt đó.

Tài liệu tham khảo này cho biết các chế độ cài đặt khác nhau bằng các biểu tượng sau:

  • Hộp đánh dấu. Hộp đánh dấu
  • Danh sách thả xuống Trình đơn thả xuống.
  • Không dùng nữa. Không dùng nữa

Để khôi phục các lựa chọn ưu tiên mặc định, hãy di chuyển đến cuối thẻ Lựa chọn ưu tiên rồi nhấp vào Khôi phục các lựa chọn ưu tiên mặc định rồi tải lại.

Diện mạo

Phần này liệt kê các tuỳ chọn tuỳ chỉnh giao diện của DevTools.

Ảnh hưởng đến Elements (Thành phần) > Styles (Kiểu) và các thẻ đồng cấp, cũng như ngăn Sources (Nguồn) > Debugger (Trình gỡ lỗi). Tuỳ chọn tự động khiến bố cục phụ thuộc vào chiều rộng của DevTools.

Bố cục bảng điều khiển: Thay đổi bố cục bảng điều khiển của Phần tử từ ngang sang dọc.
  • ngang
  • ngành dọc
  • tự động

Để áp dụng chế độ cài đặt này, hãy tải lại Công cụ cho nhà phát triển.

Ngôn ngữ: Bảng Cài đặt bằng tiếng Trung.
  • Ngôn ngữ trên giao diện người dùng của trình duyệt
  • Một trong các tuỳ chọn ngôn ngữ, trong ví dụ này là tiếng Trung

Video này hướng dẫn cách chuyển đổi giữa các thẻ bằng phím tắt tương ứng.

Nguồn

Phần này liệt kê các tuỳ chọn tuỳ chỉnh bảng điều khiển Nguồn.

Video này cho thấy cách bảng điều khiển Sources (Nguồn) chọn các tệp trong cây điều hướng khi bạn chuyển đổi giữa các thẻ khi bật tuỳ chọn này.

Bảng điều khiển Nguồn hiển thị đường liên kết đến tệp đã rút gọn trong thanh trạng thái.

Yêu cầu tải lại Công cụ cho nhà phát triển.

Trước tiên, video này cho thấy các ký tự Tab được chèn bằng phím Tab. Sau đó, khi bạn bật tuỳ chọn này và tải lại DevTools, phím Tab sẽ di chuyển tiêu điểm.

Yêu cầu tải lại Công cụ cho nhà phát triển.

Trước tiên, video này cho thấy khoảng thụt lề mặc định là 8 dấu cách. Sau đó, khi bạn bật tuỳ chọn này, tuỳ chọn này sẽ ghi đè khoảng thụt lề mặc định thành khoảng thụt lề của tệp nguồn.

Video này không hiển thị đề xuất nào ở lần đầu tiên. Sau đó, khi bạn bật tuỳ chọn này, Trình chỉnh sửa sẽ hiển thị các đề xuất để hoàn tất lệnh.

Video này cho thấy cách nhập dấu ngoặc mở trước và sau khi bật tính năng tự động đóng dấu ngoặc.

Yêu cầu tải lại Công cụ cho nhà phát triển.

Video này hướng dẫn cách gập các khối mã khi bạn bật tuỳ chọn này.

Yêu cầu tải lại Công cụ cho nhà phát triển. Tuỳ chọn thực hiện những việc sau:

  • Tất cả biểu thị tất cả ký tự khoảng trắng dưới dạng dấu chấm (...). Ngoài ra, Trình chỉnh sửa biểu thị ký tự Tab dưới dạng một dòng ().
  • Trailing (Theo sau) làm nổi bật các ký tự khoảng trắng ở cuối dòng bằng màu đỏ nhạt.
Hiển thị ký tự khoảng trắng: Các tuỳ chọn đã chọn: Tất cả và Theo sau.
  • Không có
  • Tất cả (...)
  • Theo sau

Trước tiên, video này cho thấy bảng điều khiển Sources (Nguồn) không được lấy nét khi tạm dừng tại một điểm ngắt. Sau đó, khi bạn bật tuỳ chọn này, DevTools sẽ mở Trình chỉnh sửa trong bảng điều khiển Nguồn và hiển thị cho bạn dòng mã có điểm ngắt.

Khi in đẹp, Trình chỉnh sửa có thể hiển thị một dòng mã dài trong nhiều dòng, đứng trước là - để cho biết đó là dòng tiếp tục.

Mã được in đẹp trong bảng điều khiển Nguồn.
Bảng điều khiển Nguồn hiển thị các tệp .scss trong phần Tác giả của cây điều hướng. Ngăn Kiểu trong bảng điều khiển Phần tử hiển thị các đường liên kết đến nguồn .scss bên cạnh các quy tắc CSS.

Video này hướng dẫn bạn cách cuộn qua cuối tệp khi bật tuỳ chọn này.

Nếu bạn không bật, DevTools sẽ ghi nhật ký vào Console các thông báo tương tự như sau:

Một thông báo trong Bảng điều khiển cho biết việc tải từ đường dẫn tệp từ xa bị cấm vì lý do bảo mật.
Mức thụt lề mặc định: Tắt các tuỳ chọn ghi đè và thay đổi khoảng thụt lề mặc định từ 2 dấu cách thành 8, sau đó chuyển sang phím Tab.
  • 2 dấu cách
  • 4 dấu cách
  • 8 dấu cách
  • Ký tự tab

Ví dụ này cho thấy cách đặt thụt lề mặc định thành 8 dấu cách trước, sau đó là ký tự Tab.

Thành phần

Phần này liệt kê các tuỳ chọn tuỳ chỉnh bảng điều khiển Elements (Thành phần).

Trước tiên, video này cho thấy các nút DOM không được chọn trong cây DOM. Sau đó, khi bạn bật tuỳ chọn này, bảng điều khiển Elements (Thành phần) sẽ chọn các nút khi di chuột qua.

Mạng

Phần này liệt kê các tuỳ chọn tuỳ chỉnh bảng điều khiển Mạng. Hầu hết các tuỳ chọn đều giống như trong phần cài đặt của bảng điều khiển.

Lưu giữ nhật ký trong bảng điều khiển Mạng. Lưu các yêu cầu trong các lần tải trang.

Trước tiên, video này cho thấy nhật ký yêu cầu được làm mới khi tải lại trang, sau đó vẫn tồn tại khi bạn bật tuỳ chọn này.

Record network log (Ghi nhật ký mạng) trong bảng điều khiển Network (Mạng). Bắt đầu hoặc dừng ghi lại các yêu cầu trong nhật ký mạng.

Nút Ghi nhật ký mạng trong bảng điều khiển Mạng.

Trước tiên, video này cho thấy các yêu cầu không bị chặn. Sau đó, sau khi bạn bật tuỳ chọn này, một mẫu trong ngăn Chặn yêu cầu kết nối mạng sẽ chặn các yêu cầu đó.

Tắt bộ nhớ đệm trong bảng điều khiển Mạng. Tắt bộ nhớ đệm của trình duyệt.

Hộp đánh dấu Tắt bộ nhớ đệm.

Nhóm theo khung trong bảng điều khiển Mạng. Tuỳ chọn này nhóm các yêu cầu do các khung nội tuyến khởi tạo.

Nhật ký yêu cầu mạng với các yêu cầu được nhóm theo khung nội tuyến.

quảng cáo đã phát hiện trên trang trong khi Công cụ cho nhà phát triển đang mở.

Một yêu cầu mạng liên quan đến quảng cáo xuất hiện trong bảng điều khiển Mạng khi bộ lọc Yêu cầu bị chặn đang bật.

Hiệu suất

Phần này liệt kê các tuỳ chọn tuỳ chỉnh bảng điều khiển Hiệu suất.

Thao tác bằng con lăn chuột trên biểu đồ hình ngọn lửa: Thay đổi thao tác bằng con lăn chuột từ cuộn thành thu phóng cho biểu đồ hình ngọn lửa.
  • Cuộn
  • Zoom (thu phóng)

Ví dụ này cho thấy cả thao tác cuộn và thu phóng bằng con lăn chuột trên biểu đồ hình ngọn lửa trong bảng điều khiển Hiệu suất.

Giao diện dòng lệnh

Phần này liệt kê các tuỳ chọn tuỳ chỉnh Console. Hầu hết các tuỳ chọn đều giống như trong phần Cài đặt bảng điều khiển.

Các tuỳ chọn tương tự trong Bảng điều khiển và trong phần Cài đặt.

Video này hướng dẫn cách ẩn thông báo mạng bằng tuỳ chọn này trong cả phần Cài đặt. Cài đặt và trong phần Cài đặt máy chơi game.

Video này hướng dẫn cách bật tuỳ chọn này trong cả Cài đặt. Cài đặt và trong Bảng điều khiển > Cài đặt, đồng thời chọn ngữ cảnh trong Bảng điều khiển.

Video này hướng dẫn cách bật tuỳ chọn này trong cả Cài đặt. Cài đặtBảng điều khiển > Cài đặt, đồng thời ghi lại thông báo XHR finished loading vào Bảng điều khiển.

Bạn có thể tìm thấy lựa chọn tương tự trong phần Bảng điều khiển > Cài đặt.

Video này cho thấy nhiều bản xem trước đầu ra.

Nói cách khác, hàm này sẽ đặt navigator.userActivation.isActive thành true khi đánh giá. Bạn có thể tìm thấy lựa chọn tương tự trong phần Bảng điều khiển > Cài đặt.

Video này cho thấy kết quả đánh giá của navigator.userActivation.isActive trước và sau khi bật tuỳ chọn này.

Phần mở rộng

Phần này liệt kê các tuỳ chọn tuỳ chỉnh cách xử lý đường liên kết cho các tiện ích Công cụ của Chrome cho nhà phát triển.

Xử lý đường liên kết: Chọn một ứng dụng để mở đường liên kết.
  • Tự động. Theo mặc định, sẽ mở các tệp trong bảng điều khiển Nguồn.
  • Tuỳ chọn tuỳ ý mà tiện ích DevTools có thể thêm.

Khả năng lưu trữ dài lâu

Phần này liệt kê các tuỳ chọn kiểm soát cách DevTools lưu các thay đổi mà bạn thực hiện.

Trình gỡ lỗi

Phần này liệt kê các tuỳ chọn kiểm soát hành vi của Trình gỡ lỗi.

JavaScript bị tắt.

Tải lại trang để xem trang có phụ thuộc vào JavaScript hay không và phụ thuộc như thế nào trong khi tải.

Khi JavaScript bị tắt, Chrome sẽ hiển thị biểu tượng Tắt JavaScript. tương ứng trong thanh địa chỉ và DevTools sẽ hiển thị biểu tượng cảnh báo Cảnh báo. bên cạnh Nguồn.

Một biểu tượng trong thanh địa chỉ và một biểu tượng cảnh báo bên cạnh Nguồn trong DevTools.

Theo mặc định, Trình gỡ lỗi sẽ cố gắng theo dõi các thao tác không đồng bộ nếu khung bạn đang sử dụng hỗ trợ tính năng theo dõi đó.

Thao tác không đồng bộ trong Ngăn xếp lệnh gọi.

Để biết thêm thông tin, hãy xem phần Xem dấu vết ngăn xếp không đồng bộ.

Toàn cầu

Phần này liệt kê các tuỳ chọn có hiệu lực toàn cục trong DevTools.

Trước tiên, video này cho thấy cách nhấp vào một đường liên kết và mở một thẻ mới *không* có DevTools. Sau đó, khi bạn bật tuỳ chọn này, một thẻ mới sẽ mở ra *cùng* với DevTools.

Tìm kiếm khi bạn nhập giúp DevTools "chuyển đến" kết quả tìm kiếm đầu tiên khi bạn nhập cụm từ tìm kiếm. Nếu bị tắt, DevTools sẽ chỉ đưa bạn đến kết quả khi bạn nhấn phím Enter.

Trước tiên, video này cho thấy cách DevTools "nhảy" khi bạn nhập cụm từ tìm kiếm. Sau đó, khi bạn bật tuỳ chọn này, Công cụ cho nhà phát triển sẽ đưa bạn đến kết quả đầu tiên khi bạn nhấn phím Enter.

Đồng bộ hoá

Phần này cho phép bạn thiết lập tính năng đồng bộ hoá chế độ cài đặt giữa các thiết bị.