Tài liệu tham khảo về các tính năng của bảng điều khiển

Trang này là tài liệu tham khảo về các tính năng liên quan đến Chrome DevTools Console. Giả sử bạn đã quen với việc sử dụng Bảng điều khiển để xem các thông báo đã ghi nhật ký và chạy JavaScript. Nếu không, hãy xem phần Bắt đầu.

Nếu bạn đang tìm tài liệu tham khảo API về các hàm như console.log(), hãy xem Tài liệu tham khảo về Console API. Để tham khảo các hàm như monitorEvents(), hãy xem Tài liệu tham khảo về API Tiện ích của Console.

Mở bảng điều khiển

Bạn có thể mở Bảng điều khiển dưới dạng bảng hoặc dưới dạng thẻ trong Ngăn.

Mở bảng điều khiển Console

Nhấn tổ hợp phím Control+Shift+J hoặc Command+Option+J (Mac).

Để mở Bảng điều khiển từ Trình đơn lệnh, hãy bắt đầu nhập Console rồi chạy lệnh Show Console (Hiện Bảng điều khiển) có huy hiệu Panel (Bảng điều khiển) bên cạnh.

Mở Bảng điều khiển trong ngăn

Nhấn phím Escape hoặc nhấp vào biểu tượng Tuỳ chỉnh và kiểm soát Công cụ cho nhà phát triển rồi chọn Hiện ngăn điều khiển.

Ngăn kéo sẽ xuất hiện ở cuối cửa sổ Công cụ cho nhà phát triển, với thẻ Bảng điều khiển đang mở.

Để mở thẻ Console (Bảng điều khiển) trong Command Menu (Trình đơn lệnh), hãy bắt đầu nhập Console rồi chạy lệnh Show Console (Hiện bảng điều khiển) có huy hiệu Drawer (Ngăn kéo) bên cạnh.

Mở phần Cài đặt bảng điều khiển

Nhấp vào Console Settings (Cài đặt bảng điều khiển) ở góc trên cùng bên phải của Console (Bảng điều khiển).

Các đường liên kết bên dưới giải thích từng chế độ cài đặt:

• Ẩn mạng
• Lưu giữ nhật ký
• Chỉ ngữ cảnh đã chọn
• Nhóm các thông báo tương tự trong bảng điều khiển
• Hiện lỗi CORS trong bảng điều khiển
• Ghi lại XMLHttpRequests
• Đánh giá nghiêm ngặt
• Tự động hoàn thành nhờ nhật ký

Mở thanh bên Bảng điều khiển

Nhấp vào Hiện thanh bên Bảng điều khiển để hiện thanh bên. Thanh bên này rất hữu ích cho việc lọc.

Xem tin nhắn

Phần này chứa các tính năng thay đổi cách trình bày thông báo trong Bảng điều khiển. Hãy xem phần Xem tin nhắn để biết hướng dẫn thực tế.

Tắt tính năng nhóm tin nhắn

Mở phần Cài đặt bảng điều khiển rồi tắt chế độ Nhóm các thông báo tương tự để tắt hành vi nhóm thông báo mặc định của Bảng điều khiển. Hãy xem phần Ghi nhật ký yêu cầu XHR và yêu cầu tìm nạp để biết ví dụ.

Xem thông báo từ điểm ngắt

Bảng điều khiển đánh dấu các thông báo do điểm ngắt kích hoạt theo cách sau:

• console.* gọi trong điểm ngắt có điều kiện có dấu chấm hỏi màu cam ?
• Thông báo Logpoint có hai dấu chấm màu hồng ..

Để chuyển đến trình chỉnh sửa điểm ngắt nội tuyến trong bảng điều khiển Nguồn, hãy nhấp vào đường dẫn liên kết neo bên cạnh thông báo điểm ngắt.

Xem dấu vết ngăn xếp

Bảng điều khiển tự động ghi lại dấu vết ngăn xếp cho các lỗi và cảnh báo. Dấu vết ngăn xếp là nhật ký các lệnh gọi hàm (khung) dẫn đến lỗi hoặc cảnh báo. Bảng điều khiển cho thấy các khung hình theo thứ tự ngược lại: khung hình mới nhất ở trên cùng.

Để xem dấu vết ngăn xếp, hãy nhấp vào biểu tượng mở rộng bên cạnh một lỗi hoặc cảnh báo.

Xem nguyên nhân gây ra lỗi trong dấu vết ngăn xếp

Bảng điều khiển có thể cho bạn thấy chuỗi nguyên nhân gây ra lỗi trong dấu vết ngăn xếp (nếu có).

Để gỡ lỗi dễ dàng hơn, bạn có thể chỉ định nguyên nhân gây ra lỗi khi bắt và truyền lại lỗi. Khi Bảng điều khiển đi theo chuỗi nguyên nhân, bảng điều khiển sẽ in từng ngăn xếp lỗi bằng tiền tố Caused by:, nhờ đó bạn có thể tìm thấy lỗi ban đầu.

Xem dấu vết ngăn xếp không đồng bộ

Nếu được khung mà bạn đang dùng hỗ trợ hoặc khi bạn dùng trực tiếp các nguyên tắc lập lịch của trình duyệt (chẳng hạn như setTimeout), DevTools có thể theo dõi các thao tác không đồng bộ bằng cách liên kết cả hai phần của mã không đồng bộ với nhau.

Trong trường hợp này, dấu vết ngăn xếp cho thấy "toàn bộ câu chuyện" về thao tác không đồng bộ.

Hiện các khung đã biết của bên thứ ba trong dấu vết ngăn xếp

Khi bản đồ nguồn có trường ignoreList, theo mặc định, Bảng điều khiển sẽ ẩn các khung hình của bên thứ ba khỏi dấu vết ngăn xếp từ các nguồn do trình đóng gói (ví dụ: webpack) hoặc khung (ví dụ: Angular) tạo.

Để xem toàn bộ dấu vết ngăn xếp, bao gồm cả các khung hình của bên thứ ba, hãy nhấp vào Hiện thêm N khung hình ở cuối dấu vết ngăn xếp.

Để luôn xem toàn bộ dấu vết ngăn xếp, hãy tắt chế độ cài đặt Settings > Ignore List > Automatically add known third-party scripts to ignore list (Cài đặt > Danh sách bỏ qua > Tự động thêm tập lệnh đã biết của bên thứ ba vào danh sách bỏ qua).

Ghi nhật ký các yêu cầu XHR và Fetch

Mở phần Cài đặt bảng điều khiển rồi bật Ghi nhật ký XMLHttpRequests để ghi nhật ký tất cả các yêu cầu XMLHttpRequest và Fetch vào Bảng điều khiển khi chúng xảy ra.

Thông báo trên cùng trong ví dụ trên cho thấy hành vi nhóm mặc định của Bảng điều khiển. Ví dụ bên dưới cho thấy nhật ký tương tự sau khi bạn tắt tính năng nhóm thông báo.

Lưu giữ tin nhắn trong các lần tải trang

Theo mặc định, Console sẽ xoá mọi nội dung mỗi khi bạn tải một trang mới. Để duy trì thông báo trên các lần tải trang, hãy Mở phần Cài đặt bảng điều khiển rồi đánh dấu vào hộp Giữ lại nhật ký.

Ẩn thông báo của mạng

Theo mặc định, trình duyệt sẽ ghi nhật ký các thông báo mạng vào Bảng điều khiển. Ví dụ: thông báo hàng đầu trong ví dụ sau đây biểu thị lỗi 404.

Cách ẩn thông báo của mạng:

1. Mở phần Cài đặt Console.
2. Đánh dấu vào hộp Ẩn mạng.

Hiện hoặc ẩn lỗi CORS

Bảng điều khiển có thể cho thấy lỗi CORS nếu các yêu cầu mạng không thành công do Cơ chế chia sẻ tài nguyên chéo nguồn gốc (CORS).

Cách hiện hoặc ẩn lỗi CORS:

1. Mở phần Cài đặt Console.
2. Đánh dấu hoặc bỏ đánh dấu hộp Hiện lỗi CORS trong bảng điều khiển.

Nếu bảng điều khiển được thiết lập để hiện lỗi CORS và bạn gặp phải lỗi này, bạn có thể nhấp vào các nút sau đây bên cạnh lỗi:

• để mở yêu cầu có TypeError liên quan đến CORS trong bảng điều khiển Mạng.
• để xem giải pháp tiềm năng trên thẻ Vấn đề.

Lọc thông báo

Có nhiều cách để lọc tin nhắn trong Bảng điều khiển.

Lọc thông báo của trình duyệt

Mở Thanh bên của bảng điều khiển rồi nhấp vào Thông báo của người dùng để chỉ hiện những thông báo đến từ JavaScript của trang.

Lọc theo cấp độ nhật ký

Công cụ cho nhà phát triển chỉ định mức độ nghiêm trọng cho hầu hết các phương thức console.*.

Có 4 cấp độ:

• Verbose
• Info
• Warning
• Error

Ví dụ: console.log() nằm trong nhóm Info, trong khi console.error() nằm trong nhóm Error. Tài liệu tham khảo về Console API mô tả mức độ nghiêm trọng của từng phương thức có thể áp dụng.

Mọi thông báo mà trình duyệt ghi vào Bảng điều khiển cũng có một cấp độ nghiêm trọng. Bạn có thể ẩn mọi cấp độ tin nhắn mà bạn không quan tâm. Ví dụ: nếu chỉ quan tâm đến tin nhắn Error, bạn có thể ẩn 3 nhóm còn lại.

Nhấp vào trình đơn thả xuống Cấp độ nhật ký để bật hoặc tắt thông báo Verbose, Info, Warning hoặc Error.

Bạn cũng có thể lọc theo cấp độ nhật ký bằng cách mở Thanh bên của bảng điều khiển rồi nhấp vào Lỗi, Cảnh báo, Thông tin hoặc Chi tiết.

Lọc thông báo theo URL

Nhập url:, theo sau là một URL để chỉ xem những tin nhắn đến từ URL đó. Sau khi bạn nhập url:, Công cụ cho nhà phát triển sẽ cho thấy tất cả các URL có liên quan.

Các miền cũng hoạt động. Ví dụ: nếu https://example.com/a.js và https://example.com/b.js đang ghi nhật ký thông báo, thì url:https://example.com cho phép bạn tập trung vào thông báo từ 2 tập lệnh này.

Để ẩn tất cả thông báo từ một URL cụ thể, hãy nhập -url:, theo sau là URL đó, ví dụ: https://b.wal.co. Đây là một bộ lọc URL phủ định.

Bạn cũng có thể hiện thông báo từ một URL duy nhất bằng cách mở Thanh bên của bảng điều khiển, mở rộng phần Thông báo cho người dùng, rồi nhấp vào URL của tập lệnh chứa thông báo mà bạn muốn tập trung vào.

Lọc tin nhắn theo các ngữ cảnh khác nhau

Giả sử bạn có một quảng cáo trên trang của mình. Quảng cáo được nhúng trong một <iframe> và đang tạo ra rất nhiều thông báo trong Console. Vì quảng cáo này nằm trong một ngữ cảnh JavaScript khác, nên một cách để ẩn các thông báo của quảng cáo này là mở phần Cài đặt bảng điều khiển rồi bật hộp đánh dấu Chỉ ngữ cảnh đã chọn.

Lọc ra những thông báo không khớp với mẫu biểu thức chính quy

Nhập một biểu thức chính quy như /[foo]\s[bar]/ vào hộp văn bản Bộ lọc để lọc ra mọi thông báo không khớp với mẫu đó. Không được hỗ trợ dấu cách, hãy dùng \s thay thế. Công cụ cho nhà phát triển sẽ kiểm tra xem mẫu có xuất hiện trong văn bản của thông báo hay tập lệnh khiến thông báo được ghi lại hay không.

Ví dụ: bộ lọc sau đây sẽ lọc ra tất cả thông báo không khớp với /[gm][ta][mi]/.

Tìm văn bản trong nhật ký

Cách tìm kiếm văn bản trong thông điệp nhật ký:

1. Để mở thanh tìm kiếm tích hợp, hãy nhấn tổ hợp phím Command+F (Mac) hoặc Ctrl+F (Windows, Linux).
2. Nhập câu hỏi của bạn vào thanh này. Trong ví dụ này, truy vấn là legacy. Bạn có thể chọn:
   • Nhấp vào Khớp chữ hoa chữ thường để truy vấn của bạn phân biệt chữ hoa chữ thường.
   • Nhấp vào Sử dụng biểu thức chính quy để tìm kiếm bằng biểu thức RegEx.
3. Nhấn Enter. Để chuyển đến kết quả tìm kiếm trước đó hoặc tiếp theo, hãy nhấn nút lên hoặc xuống.

Chạy JavaScript

Phần này chứa các tính năng liên quan đến việc chạy JavaScript trong Console. Hãy xem phần Chạy JavaScript để biết hướng dẫn thực tế.

Các lựa chọn sao chép chuỗi

Theo mặc định, bảng điều khiển sẽ xuất ra các chuỗi dưới dạng ký hiệu JavaScript hợp lệ. Nhấp chuột phải vào một đầu ra rồi chọn một trong 3 lựa chọn sao chép:

• Sao chép dưới dạng chữ JavaScript. Thoát các ký tự đặc biệt thích hợp và bao bọc chuỗi trong dấu ngoặc đơn, dấu ngoặc kép hoặc dấu nháy ngược, tuỳ thuộc vào nội dung.
• Sao chép nội dung chuỗi. Sao chép chính xác chuỗi thô vào bảng nhớ tạm, bao gồm cả dòng mới và các ký tự đặc biệt khác.
• Sao chép dưới dạng chuỗi JSON. Định dạng chuỗi thành JSON hợp lệ.

Chạy lại các biểu thức trước đó và xoá nhật ký

Nhấn phím Mũi tên lên để chuyển đổi qua nhật ký các biểu thức JavaScript mà bạn đã chạy trước đó trong Bảng điều khiển. Nhấn phím Enter để chạy lại biểu thức đó.

Để xoá nhật ký bảng điều khiển, hãy nhấp chuột phải vào một khoảng trống trong Bảng điều khiển rồi chọn Xoá nhật ký bảng điều khiển trong trình đơn theo bối cảnh.

Xoá, sao chép, mở rộng, thu gọn và lưu tin nhắn

Để xoá cửa sổ Console (Bảng điều khiển), hãy làm theo một trong những cách sau:

• Nhấp vào block Clear console (Xoá bảng điều khiển) trong thanh thao tác ở trên cùng.
• Nhấn tổ hợp phím Ctrl+L hoặc Cmd+K.
• Nhấp chuột phải vào một khoảng trống trong Bảng điều khiển rồi chọn Xoá bảng điều khiển trên trình đơn theo bối cảnh.

Để mở rộng hoặc thu gọn tất cả thư, hãy nhấp vào biểu tượng mở rộng Mở rộng tất cả hoặc thu gọn Thu gọn tất cả trong thanh thao tác ở trên cùng.

Trong trình đơn theo bối cảnh, bạn cũng có thể:

• Sao chép bảng điều khiển: Sao chép tất cả thông báo hiện tại vào bảng nhớ tạm, nhưng không sao chép nhật ký của các lệnh trước đó.
• Lưu dưới dạng...: Lưu tất cả thư hiện tại vào một tệp .log văn bản thuần tuý.

Xem giá trị của một biểu thức theo thời gian thực bằng Live Expressions

Nếu thấy mình liên tục nhập cùng một biểu thức JavaScript trong Bảng điều khiển, bạn có thể thấy việc tạo một Biểu thức trực tiếp sẽ dễ dàng hơn. Với tính năng Biểu thức trực tiếp, bạn chỉ cần nhập một biểu thức một lần rồi ghim biểu thức đó lên đầu Console. Giá trị của biểu thức sẽ cập nhật gần như theo thời gian thực. Xem Watch JavaScript Expression Values In Real-Time With Live Expressions (Theo dõi các giá trị biểu thức JavaScript theo thời gian thực bằng biểu thức trực tiếp).

Tắt tính năng Đánh giá nghiêm ngặt

Khi bạn nhập các biểu thức JavaScript trong Bảng điều khiển, Tính năng đánh giá tức thì sẽ cho thấy bản xem trước giá trị trả về của biểu thức đó. Mở phần Cài đặt bảng điều khiển rồi bỏ chọn hộp Đánh giá tức thì để tắt tính năng xem trước giá trị trả về.

Kích hoạt hoạt động của người dùng bằng chế độ đánh giá

Kích hoạt người dùng là trạng thái của một phiên duyệt web, phụ thuộc vào hành động của người dùng. Trạng thái "đang hoạt động" có nghĩa là người dùng hiện đang tương tác với trang hoặc đã tương tác kể từ khi tải trang.

Để kích hoạt người dùng bằng bất kỳ hoạt động đánh giá nào, hãy mở phần Cài đặt Console rồi đánh dấu vào Coi việc đánh giá mã là hành động của người dùng.

Tắt tính năng tự động hoàn thành dựa trên nhật ký

Khi bạn nhập một biểu thức, cửa sổ bật lên của tính năng tự động hoàn thành trên Bảng điều khiển sẽ cho thấy những biểu thức mà bạn đã chạy trước đó. Các biểu thức này được thêm tiền tố bằng ký tự >. Trong ví dụ sau, trước đó DevTools đã đánh giá document.querySelector('a') và document.querySelector('img').

Mở phần Cài đặt bảng điều khiển và bỏ đánh dấu hộp Tự động hoàn thành nhờ nhật ký để ngừng hiển thị các cụm từ trong nhật ký của bạn.

Chọn ngữ cảnh JavaScript

Theo mặc định, trình đơn thả xuống JavaScript Context (Ngữ cảnh JavaScript) được đặt thành top (đầu trang), đại diện cho bối cảnh duyệt web của tài liệu chính.

Giả sử bạn có một quảng cáo trên trang được nhúng trong một <iframe>. Bạn muốn chạy JavaScript để điều chỉnh DOM của quảng cáo. Để làm việc này, trước tiên, bạn cần chọn ngữ cảnh duyệt web của quảng cáo trong trình đơn thả xuống Ngữ cảnh JavaScript.

Kiểm tra các thuộc tính của đối tượng

Bảng điều khiển có thể hiển thị danh sách tương tác gồm các thuộc tính của một đối tượng JavaScript mà bạn chỉ định.

Để duyệt xem danh sách, hãy nhập tên đối tượng vào Bảng điều khiển rồi nhấn Enter.

Để kiểm tra các thuộc tính của đối tượng DOM, hãy làm theo các bước trong phần Xem các thuộc tính của đối tượng DOM.

Xác định các thuộc tính riêng và thuộc tính được kế thừa

Bảng điều khiển sắp xếp các thuộc tính đối tượng riêng trước và làm nổi bật chúng bằng phông chữ đậm.

Các thuộc tính được kế thừa từ chuỗi nguyên mẫu có phông chữ thông thường. Bảng điều khiển hiển thị các đối tượng này trên chính đối tượng bằng cách đánh giá các phương thức truy cập gốc tương ứng của các đối tượng tích hợp.

Đánh giá các đối tượng truy cập tuỳ chỉnh

Theo mặc định, Công cụ cho nhà phát triển không đánh giá các phương thức truy cập mà bạn tạo. Để đánh giá một phương thức truy cập tuỳ chỉnh trên một đối tượng, hãy nhấp vào (...).

Xác định các thuộc tính có thể liệt kê và không thể liệt kê

Các thuộc tính có thể liệt kê có màu sáng. Các thuộc tính không thể liệt kê sẽ bị tắt. Bạn có thể lặp lại các thuộc tính có thể liệt kê bằng vòng lặp for … in hoặc phương thức Object.keys().

Phát hiện các thuộc tính riêng tư của thực thể lớp

Bảng điều khiển chỉ định các thuộc tính riêng tư của các thực thể lớp bằng tiền tố #.

Bảng điều khiển cũng có thể tự động hoàn thành các thuộc tính riêng tư ngay cả khi bạn đánh giá chúng bên ngoài phạm vi lớp.

Kiểm tra các thuộc tính JavaScript nội bộ

Mượn ký hiệu ECMAScript, Bảng điều khiển bao gồm một số thuộc tính nội bộ của JavaScript trong dấu ngoặc vuông kép. Bạn không thể tương tác với những thuộc tính như vậy trong mã của mình. Tuy nhiên, bạn nên kiểm tra các phần tử này.

Bạn có thể thấy các thuộc tính nội bộ sau đây trên nhiều đối tượng:

• Mọi đối tượng đều có [[Prototype]].
• Trình bao bọc nguyên thuỷ có một thuộc tính [[PrimitiveValue]].
• Các đối tượng ArrayBuffer có các thuộc tính sau:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Ngoài các thuộc tính dành riêng cho ArrayBuffer, các đối tượng WebAssembly.Memory còn có một thuộc tính [[WebAssemblyMemory]].
• Tập hợp có khoá (bản đồ và tập hợp) có thuộc tính [[Entries]] chứa các mục có khoá của chúng.
• Các đối tượng Promise có các thuộc tính sau:
  • [[PromiseState]]: đang chờ xử lý, đã thực hiện hoặc bị từ chối
  • [[PromiseResult]]: undefined nếu đang chờ xử lý, <value> nếu đã hoàn tất, <reason> nếu bị từ chối
• Các đối tượng Proxy có các thuộc tính sau: đối tượng [[Handler]], đối tượng [[Target]] và [[isRevoked]] (đã tắt hay chưa).

Kiểm tra các hàm

Trong JavaScript, các hàm cũng là đối tượng có thuộc tính. Tuy nhiên, nếu bạn nhập tên hàm vào Bảng điều khiển, Công cụ cho nhà phát triển sẽ gọi hàm đó thay vì hiển thị các thuộc tính của hàm.

Để xem các thuộc tính hàm bên trong JavaScript, hãy dùng lệnh console.dir().

Các hàm có những thuộc tính sau:

• [[FunctionLocation]]. Đường liên kết đến dòng có định nghĩa hàm trong một tệp nguồn.
• [[Scopes]]. Liệt kê các giá trị và biểu thức mà hàm có quyền truy cập. Để kiểm tra phạm vi hàm trong quá trình gỡ lỗi, hãy xem phần Xem và chỉnh sửa các thuộc tính cục bộ, đóng và toàn cục.
• Hàm liên kết có các thuộc tính sau:
  • [[TargetFunction]]. Mục tiêu của bind().
  • [[BoundThis]]. Giá trị của this.
  • [[BoundArgs]]. Một mảng đối số của hàm.
• Hàm tạo được đánh dấu bằng thuộc tính [[IsGenerator]]: true.
• Trình tạo trả về các đối tượng trình lặp và có các thuộc tính sau:
  • [[GeneratorLocation]]. Đường liên kết đến một dòng có định nghĩa trình tạo trong tệp nguồn.
  • [[GeneratorState]]: suspended, closed hoặc running.
  • [[GeneratorFunction]]. Trình tạo đã trả về đối tượng.
  • [[GeneratorReceiver]]. Một đối tượng nhận giá trị.

Xoá bảng điều khiển

Bạn có thể sử dụng bất kỳ quy trình nào sau đây để xoá Console:

• Nhấp vào Xoá bảng điều khiển .
• Nhấp chuột phải vào một thông báo rồi chọn Xoá bảng điều khiển.
• Nhập clear() vào Bảng điều khiển rồi nhấn Enter.
• Gọi console.clear() từ JavaScript của trang web.
• Nhấn tổ hợp phím Control+L khi Console đang ở trọng tâm.