Đị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 > 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 > 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.
Để 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
- Danh sách thả xuống
- Không dùng 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.
Themes (Giao diện) đặt một giao diện màu cho giao diện người dùng của Công cụ cho nhà phát triển.
Bố cục bảng điều khiển sắp xếp các ngăn trong bảng điều khiển.
Ả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.
Language (Ngôn ngữ) đặt ngôn ngữ cho giao diện người dùng của Công cụ cho nhà phát triển.
Để áp dụng chế độ cài đặt này, hãy tải lại Công cụ cho nhà phát triển.
Bật phím tắt Ctrl/Cmd + 0-9 để chuyển đổi bảng điều khiển cho phép bạn mở bảng điều khiển bằng bàn phím.
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.
Tắt lớp phủ trạng thái bị tạm dừng sẽ ẩn lớp phủ Đã tạm dừng trong trình gỡ lỗi trong khung nhìn khi quá trình thực thi mã bị tạm dừng.
Tuỳ chọn Hiển thị tính năng mới sau mỗi lần cập nhật sẽ tự động mở thẻ ngăn Tính năng mới sau mỗi lần cập nhật Chrome.
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).
Tìm kiếm trong tập lệnh nội dung và tập lệnh ẩn danh cho phép bạn tìm kiếm tất cả tệp JavaScript đã tải, bao gồm cả các tệp trong tiện ích Chrome, bằng cách sử dụng thẻ Tìm kiếm.
Video này hướng dẫn cách tìm kiếm văn bản trong tệp nguồn của tiện ích.
Tự động hiển thị các tệp trong thanh bên chọn các tệp trong ngăn Sources > Page (Trang) khi bạn chuyển đổi giữa các thẻ trong Trình chỉnh sửa.
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.
Tính năng Bật bản đồ nguồn JavaScript cho phép Công cụ cho nhà phát triển tìm nguồn của các tệp JavaScript đã tạo hoặc giảm thiểu.
Bật chế độ di chuyển tiêu điểm bằng phím Tab khiến phím Tab di chuyển tiêu điểm bên trong DevTools thay vì chèn ký tự Tab trong Trình chỉnh sửa.
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.
Detect indentation (Phát hiện thụt lề) đặt thụt lề thành thụt lề trong tệp nguồn được mở trong Trình chỉnh sửa.
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.
Tính năng Tự động hoàn thành bật các đề xuất hữu ích trong Trình chỉnh sửa.
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.
Tự động đóng ngoặc tự động thêm dấu ngoặc đóng hoặc thẻ khi bạn nhập dấu ngoặc mở.
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.
So khớp dấu ngoặc sẽ gạch chân và đánh dấu bằng màu đỏ nhạt trong Trình chỉnh sửa trong dấu ngoặc vuông, dấu ngoặc nhọn hoặc dấu ngoặc đơn mà không có cặp dấu ngoặc vuông.
Tính năng thu gọn mã cho phép bạn gập và mở các khối mã trong dấu ngoặc nhọn trong Editor (Trình chỉnh sửa).
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.
Biểu tượng Hiện ký tự khoảng trắng cho thấy các ký tự khoảng trắng trong Trình chỉnh sửa.
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ị các giá trị biến cùng dòng trong khi gỡ lỗi hiển thị cho bạn các giá trị biến bên cạnh câu lệnh gán khi quá trình thực thi bị tạm dừng.
Tập trung vào bảng điều khiển của Nguồn khi kích hoạt một điểm ngắt sẽ mở Sources (Nguồn) > Editor (Trình chỉnh sửa) tại dòng có điểm ngắt đã tạm dừng quá trình thực thi.
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.
Tự động tạo bản in đẹp cho các nguồn rút gọn giúp các nguồn đó dễ đọc.
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.
Bật bản đồ nguồn CSS cho phép Công cụ cho nhà phát triển tìm nguồn của các tệp CSS đã tạo, chẳng hạn như .scss
và hiển thị chúng cho bạn.
Tính năng Cho phép cuộn quá cuối tệp cho phép bạn cuộn xa hơn dòng cuối cùng trong Trình chỉnh sửa.
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.
Cho phép Công cụ cho nhà phát triển tải tài nguyên (chẳng hạn như bản đồ nguồn) từ đường dẫn tệp từ xa. Bị tắt theo mặc định vì lý do bảo mật.
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ức thụt lề mặc định cho phép bạn chọn số lượng dấu cách mà phím Tab sẽ chèn trong Trình chỉnh sửa.
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ử.
Hiển thị DOM bóng của tác nhân người dùng hiển thị các nút DOM bóng trong cây DOM.
Tự động xuống dòng ngắt dòng dài trong cây DOM và gói chúng vào dòng tiếp theo.
Hiển thị chú thích HTML hiển thị chú thích HTML trong cây DOM.
Hiển thị nút DOM khi di chuột chọn nút tương ứng trong cây DOM khi bạn di chuột qua một phần tử trong khung nhìn ở chế độ kiểm tra .
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.
Hiển thị chú giải công cụ kiểm tra chi tiết hiển thị chú giải công cụ trong khung nhìn ở chế độ kiểm tra khi bạn di chuột qua một phần tử.
Hiện thước kẻ khi di chuột hiển thị thước kẻ trong khung nhìn khi bạn di chuột qua các phần tử trong cây DOM.
Hiện chú giải công cụ tài liệu CSS hiển thị chú giải công cụ có nội dung mô tả ngắn khi bạn di chuột qua một thuộc tính trong ngăn Kiểu.
Đường liên kết Tìm hiểu thêm sẽ cung cấp cho bạn Tài liệu tham khảo về CSS MDN về tài sản.
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ý giống với 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) giống với 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.
Bật tính năng chặn yêu cầu kết nối mạng sẽ chặn các yêu cầu khớp với mẫu trong ngăn Chặn yêu cầu kết nối 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 khi Công cụ cho nhà phát triển đang mở) giống với 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.
Cho phép tạo HAR có dữ liệu nhạy cảm thêm các tùy chọn vào nút
Xuất HAR cho phép bạn xuất có hoặc không có dữ liệu nhạy cảm (đã được dọn dẹp).Dữ liệu nhạy cảm là dữ liệu trong tiêu đề Cookie
, Set-Cookie
và Authorization
.
Loại tài nguyên mã màu làm nổi bật các yêu cầu bằng nhiều màu tuỳ thuộc vào loại yêu cầu trong cột Waterfall (Dòng thác) của nhật ký mạng.
Nhóm nhật ký mạng theo khung giống với 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.
Buộc chặn quảng cáo trên trang web này sẽ chặn các quảng cáo đã phát hiện trên trang khi Công cụ cho nhà phát triển đang mở.
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 gán thao tác cuộn hoặc thu phóng cho con lăn chuột khi bạn di chuyển đến biểu đồ hình ngọn lửa.
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.
Ẩn thông báo mạng sẽ ẩn thông báo của mạng trong Bảng điều khiển.
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 và trong phần Cài đặt máy chơi trò chơi.
Chỉ ngữ cảnh đã chọn khiến Console chỉ hiển thị thông báo cho ngữ cảnh đã chọn: trên cùng, iframe, worker hoặc tiện ích.
Video này hướng dẫn cách bật tuỳ chọn này trong cả 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.
Log XMLHttpRequests sẽ tạo XHR trong nhật ký của Bảng điều khiển và các yêu cầu tìm nạp.
Video này hướng dẫn cách bật tuỳ chọn này trong cả Cài đặt và Bả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.
Hiện dấu thời gian giúp Console hiển thị dấu thời gian bên cạnh thông báo.
Tính năng Tự động hoàn thành từ nhật ký giúp Bảng điều khiển đề xuất các lệnh mà bạn đã chạy trước đó khi nhập.
Bạn có thể tìm thấy tuỳ chọn tương tự trong Bảng điều khiển > Cài đặt.
Chấp nhận đề xuất tự động hoàn thành trên Enter sẽ khiến Bảng điều khiển chấp nhận đề xuất đã chọn từ trình đơn thả xuống của tính năng tự động hoàn thành khi bạn nhấn Enter.
Video này cho thấy những gì sẽ xảy ra khi bạn nhấn phím Enter trước và sau khi bật tuỳ chọn này.
Nhóm các thông báo tương tự trong bảng điều khiển giúp Bảng điều khiển nhóm các thông báo tương tự với nhau.
Bạn có thể tìm thấy tuỳ chọn tương tự trong Bảng điều khiển > Cài đặt.
Hiện lỗi CORS trong bảng điều khiển sẽ khiến Bảng điều khiển hiển thị 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.
Đánh giá sớm giúp Console hiển thị bản xem trước kết quả khi bạn nhập một lệnh.
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.
Coi việc đánh giá mã là hành động của người dùng sẽ biến mọi lệnh bạn chạy trong Console thành lượt tương tác của người dùng.
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.
Tự động mở rộng thông báo console.trace() giúp Console hiển thị thông báo console.trace()
mở rộng khi ghi lại các thông báo đó.
Preserve log upon navigation (Duy trì nhật ký khi điều hướng) giúp Console ghi nhật ký thông báo Navigated to
sau mỗi lần điều hướng và lưu nhật ký trên tất cả các trang.
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.
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 đặt một tuỳ chọn để mở tệp khi bạn nhấp vào đường liên kết đến tệp nguồn, ví dụ: trong ngăn Elements (Thành phần) > Styles (Kiểu).
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.
Bật cơ chế ghi đè cục bộ giúp Công cụ cho nhà phát triển duy trì các thay đổi bạn thực hiện đối với các nguồn trong các lần tải trang.
Để biết thêm thông tin, hãy xem phần Ghi đè cục bộ.
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).
Tắt JavaScript cho phép bạn xem giao diện và hoạt động của trang web khi 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ươ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 bên cạnh Nguồn.
Tắt dấu vết ngăn xếp không đồng bộ sẽ ẩn "toàn bộ câu chuyện" về thao tác không đồng bộ trong Ngăn xếp lệnh gọi.
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 đó.
Để 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.
Tự động mở Công cụ cho nhà phát triển đối với cửa sổ bật lên sẽ mở Công cụ cho nhà phát triển khi bạn nhấp vào các đường liên kết mở thẻ mới. Tức là tất cả đường liên kết có target=_blank
.
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ị.
Bật tính năng đồng bộ hoá chế độ cài đặt cho phép bạn đồng bộ hoá chế độ cài đặt DevTools trên nhiều thiết bị.
Để sử dụng chế độ cài đặt này, trước tiên, hãy bật tính năng Chrome Sync. Để biết thêm thông tin, hãy xem phần Cài đặt đồng bộ hóa.