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ả tuỳ chọn tuỳ chỉnh chung và tuỳ chọn 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 cài đặt, hãy tìm kiếm tên của cài đặt trên trang này và mở rộng mô tả tương ứng.

Tài liệu tham khảo này cho biết các chế độ cài đặt khác nhau với 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 Không dùng nữa. nữa

Để khôi phục các lựa chọn ưu tiên mặc định, hãy cuộn đến cuối thẻ Lựa chọn ưu tiên rồi nhấp vào Khôi phục về chế độ 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 Phần tử > Kiểu và các thẻ tương ứng cũng như ngăn Nguồn > 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 thành 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 điều khiển 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 giúp tuỳ chỉnh bảng điều khiển Sources (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ị liên kết đến tệp được giảm kích thước trên thanh trạng thái.

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

Video này đầu tiên hiển thị 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 Công cụ cho nhà phát triển, phím Tab sẽ di chuyển tiêu điểm.

Cần phải 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 việc nhập dấu ngoặc vuông trước và sau khi bật tính năng tự động đóng dấu ngoặc.

Cần phải 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.

Cần phải 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 dõi

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, Công cụ cho nhà phát triển sẽ mở Trình chỉnh sửa trong bảng điều khiển Sources (Nguồn) và cho bạn thấy dòng mã có điểm ngắt.

Khi được in đẹp, Trình chỉnh sửa có thể hiện một dòng mã dài trong nhiều dòng, đứng trước - để cho biết đó là một 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ạo (Authored) của cây điều hướng. Ngăn Kiểu trong bảng 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ạn 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 thụt lề mặc định từ 2 dấu cách thành 8 rồi thành 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 biết cách đặt thụt lề mặc định thành 8 dấu cách trước rồi đến ký tự Tab.

Thành phần

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

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 Phần tử sẽ chọn các nút khi di chuột.

Mạng

Phần này liệt kê các tuỳ chọn tuỳ chỉnh bảng điều khiển Network (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 hiển thị nhật ký yêu cầu được làm mới khi tải lại trang, sau đó được duy trì 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 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 khi bạn bật tuỳ chọn này, một mẫu trong ngăn Chặn yêu cầu mạng sẽ chặn các mẫu này.

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.

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 của 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 Play Console.

Các tuỳ chọn tương tự trong Console 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 trò chơi.

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 nhật ký thông báo XHR finished loading vào Bảng điều khiển.

lỗi CORS mà bảng điều khiển đã ghi lại.

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

Bảng điều khiển hiển thị lỗi CORS.

Bạn có thể tìm thấy tuỳ chọn tương tự trong 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 tuỳ chọn tương tự trong 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ủa Chrome Công cụ cho nhà phát triển.

Xử lý đường liên kết: Chọn một tuỳ chọn để mở đường liên kết.
  • Tự động. Mở các tệp trong bảng điều khiển Nguồn theo mặc định.
  • 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 Debugger (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à Công cụ cho nhà phát triển sẽ hiển thị biểu tượng cảnh báo Cảnh báo. bên cạnh Nguồn.

Biểu tượng trên thanh địa chỉ và biểu tượng cảnh báo bên cạnh Nguồn trong Công cụ cho nhà phát triển.

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 ứng chung trong Công cụ cho nhà phát triển.

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 khiến Công cụ cho nhà phát triển "chuyển" đến kết quả tìm kiếm đầu tiên khi bạn nhập truy vấn tìm kiếm. Nếu tắt, Công cụ cho nhà phát triển 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 đồng bộ hóa cài đặt giữa các thiết bị.