Trang này là tài liệu tham khảo về các tính năng liên quan đến Bảng điều khiển công cụ của Chrome cho nhà phát triển. Hướng dẫn này giả định rằng bạn đã quen thuộc với việc sử dụng Console để xem các thông báo được ghi nhật ký và chạy JavaScript. Nếu chưa, hãy xem phần Bắt đầu.
Nếu bạn đang tìm tài liệu tham khảo API cho các hàm như console.log(), hãy xem Tài liệu tham khảo về API của Console. Để tham khảo thông tin về các hàm như monitorEvents(), hãy xem Tài liệu tham khảo về API Tiện ích Console.
Mở Console
Bạn có thể mở Play Console dưới dạng một bảng điều khiển hoặc dưới dạng thẻ trong Ngăn.
Mở bảng điều khiển
Nhấn tổ hợp phím Control+Shift+J hoặc Command+Option+J (máy 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 Hiển thị Bảng điều khiển có huy hiệu Bảng điều khiển bên cạnh.
Mở Bảng điều khiển trong Ngăn
Nhấn Escape hoặc nhấp vào Tuỳ chỉnh và điều khiển công cụ cho nhà phát triển
rồi chọn Hiển thị ngăn điều khiển.
Ngăn bật lê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 qua Trình đơn lệnh, hãy bắt đầu nhập Console rồi chạy lệnh Hiển thị bảng điều khiển có huy hiệu Ngăn kéo bên cạnh.
Mở phần Cài đặt Console
Nhấp vào Cài đặt Play Console ở góc trên cùng bên phải của Bảng điều khiển.
Các đường liên kết dưới đây giải thích từng chế độ cài đặt:
- Ẩn mạng
- Lưu giữ nhật ký
- Chỉ bối cảnh đã chọn
- Nhóm các thông báo tương tự trong bảng điều khiển
- Hiện các lỗi CORS trong bảng điều khiển
- Log XMLHttpRequests
- Đánh giá Eager
- Tự động hoàn thành dựa trên nhật ký
Mở thanh bên của Bảng điều khiển
Hãy nhấp vào biểu tượng Hiển thị thanh bên của bảng điều khiển
Xem tin nhắn
Phần này chứa các tính năng làm thay đổi cách trình bày thông báo trong Bảng điều khiển. Xem phần Xem thông báo để biết hướng dẫn từng bước thực tế.
Tắt tính năng nhóm tin nhắn
Mở phần Cài đặt Console rồi tắt tuỳ chọn Nhóm tương tự để vô hiệu hoá hành vi tạo nhóm thông báo mặc định của Bảng điều khiển. Hãy xem bài viết Ghi nhật ký các yêu cầu XHR và 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 được kích hoạt bởi các điểm ngắt theo cách sau:
- Lệnh gọi
console.*trong các đ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 liên kết neo bên cạnh thông báo có đ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ủa 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 hiển thị các kết quả đó theo thứ tự ngược lại: khung hình mới nhất nằm ở 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 lỗi hoặc cảnh báo.
Xem nguyên nhân lỗi trong dấu vết ngăn xếp
Bảng điều khiển có thể cho bạn thấy các chuỗi nguyên nhân 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 lỗi khi phát hiện và gửi lại lỗi. Khi Bảng điều khiển đi theo chuỗi nguyên nhân, công cụ này sẽ in từng ngăn xếp lỗi bằng tiền tố Caused by: để 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 bạn đang sử dụng hỗ trợ hoặc khi trực tiếp sử dụng dữ liệu gốc để lập lịch biểu của trình duyệt (chẳng hạn như setTimeout), Công cụ cho nhà phát triển có thể theo dõi hoạt động 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ộ thông tin" của hoạt động không đồng bộ.
Hiển thị 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 chứa trường ignoreList, theo mặc định, Bảng điều khiển sẽ ẩn khỏi dấu vết ngăn xếp các khung của bên thứ ba khỏi các nguồn do trình đóng gói (ví dụ: gói web) hoặc khung (ví dụ: Angular) tạo ra.
Để xem toàn bộ dấu vết ngăn xếp, bao gồm cả các khung 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 Cài đặt > Danh sách bỏ qua > Tự động thêm các tập lệnh đã biết của bên thứ ba vào danh sách bỏ qua.
Ghi lại các yêu cầu XHR và Tìm nạp
Mở phần Cài đặt Console rồi bật tính năng Ghi nhật ký XMLHttpRequests để ghi nhật ký tất cả các yêu cầu XMLHttpRequest và Fetch vào Console khi chúng xảy ra.
Thông báo hàng đầu trong ví dụ trên cho thấy hành vi nhóm mặc định của Console. Ví dụ bên dưới cho thấy giao diện của cùng một nhật ký sau khi tắt tính năng nhóm thông báo.
Duy trì thông báo trong các lần tải trang
Theo mặc định, Bảng điều khiển sẽ xoá bất cứ khi nào bạn tải một trang mới. Để lưu giữ thông báo trong các lần tải trang, hãy mở phần Cài đặt bảng điều khiển rồi chọn hộp đánh dấu Preserve log (Lưu giữ nhật ký).
Ẩn thông báo của mạng
Theo mặc định, trình duyệt sẽ ghi lại thông báo mạng vào Bảng điều khiển. Ví dụ: thông báo trên cùng trong ví dụ sau biểu thị mã 404.
Cách ẩn thông báo của mạng:
- Mở phần Cài đặt Console.
- Chọn hộp kiểm Ẩn mạng.
Hiện hoặc ẩn lỗi CORS
Bảng điều khiển có thể hiển thị lỗi CORS nếu yêu cầu mạng không thành công do tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS).
Cách hiện hoặc ẩn lỗi CORS:
- Mở phần Cài đặt Console.
- Đánh dấu hoặc bỏ đánh dấu hộp Hiển thị lỗi CORS trong bảng điều khiển.
Nếu bảng điều khiển được đặt để hiển thị lỗi CORS và bạn gặp phải các lỗi đó, bạn có thể nhấp vào các nút sau bên cạnh lỗi:
để mở yêu cầu bằng một
TypeErrorliên quan đến CORS trong bảng điều khiển Network (Mạng).để nhận được giải pháp tiềm năng trên thẻ Vấn đề.
để mở yêu cầu bằng một 
để nhận được Lọc thông báo
Có nhiều cách để lọc ra thông báo trong Bảng điều khiển.
Lọc ra thông báo trên 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 cho người dùng để chỉ hiện 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 hầu hết mức độ nghiêm trọng của phương thức console.*.
Có bốn cấp độ:
VerboseInfoWarningError
Ví dụ: console.log() nằm trong nhóm Info, còn console.error() nằm trong nhóm Error. Tài liệu tham khảo về API của Bảng điều khiển mô tả mức độ nghiêm trọng của từng phương thức hiện có.
Mọi thông báo mà trình duyệt ghi vào Console cũng có mức độ nghiêm trọng. Bạn có thể ẩn mọi cấp độ thông báo mà bạn không quan tâm. Ví dụ: nếu chỉ quan tâm đến thông báo Error, bạn có thể ẩn 3 nhóm còn lại.
Nhấp vào trình đơn thả xuống Log Monthly (Cấp độ nhật ký) để bật hoặc tắt các 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 
Lọc thông báo theo URL
Nhập url: theo sau là URL để chỉ xem thư đến từ URL đó. Sau khi bạn nhập url:
DevTools sẽ hiển thị tất cả các URL có liên quan.
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ì url:https://example.com sẽ cho phép bạn tập trung vào các 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: rồi nhập URL đó, ví dụ: https://b.wal.co. Đây là bộ lọc URL phủ định.
Bạn cũng có thể hiển thị thông báo từ một URL 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 ra thông báo theo các ngữ cảnh khác nhau
Giả sử bạn đã có quảng cáo trên trang của mình. Quảng cáo này được nhúng trong <iframe> và đang tạo nhiều thông báo trong Bảng điều khiển của bạn. Vì quảng cáo này đang ở trong ngữ cảnh JavaScript khác, nên một cách
để ẩn thông báo của quảng cáo là mở phần Cài đặt bảng điều khiển và bật hộp đánh dấu Chỉ ngữ cảnh được chọn.
Lọc ra các thư không khớp với một 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 hỗ trợ dấu cách, hãy dùng \s. Công cụ cho nhà phát triển sẽ kiểm tra xem liệu có tìm thấy mẫu trong văn bản thông báo hoặc tập lệnh khiến thông báo được ghi lại hay không.
Ví dụ: sau đây là bộ lọc tất cả thư không khớp với /[gm][ta][mi]/.
![Lọc ra mọi thông báo không khớp /[gm][ta][mi]/.](https://developer.chrome.com/static/docs/devtools/console/reference/image/filtering-any-messages-82d76b2bac549_2880.png?hl=vi)
Tìm kiế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ý:
- Để mở thanh tìm kiếm tích hợp sẵn, hãy nhấn tổ hợp phím Command+F (máy Mac) hoặc Ctrl+F (Windows, Linux).
- Nhập truy vấn của bạn vào thanh. Trong ví dụ này, truy vấn là
legacy.Bạn có thể:
- 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 biểu thức chính quy.
- Nhấp vào
- 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 mũi tên lên hoặc xuống.
Bạn có thể:
Khớp chữ hoa chữ thường để truy vấn của bạn phân biệt chữ hoa chữ thường.
Sử dụng biểu thức chính quy để tìm kiếm bằng biểu thức biểu thức chính quy.Chạy JavaScript
Phần này trình bày các tính năng liên quan đến việc chạy JavaScript trong Console. Hãy xem bài viết Chạy JavaScript để nắm được hướng dẫn từng bước.
Tuỳ chọn sao chép chuỗi
Theo mặc định, bảng điều khiển sẽ xuất các chuỗi dưới dạng giá trị cố định JavaScript hợp lệ. Nhấp chuột phải vào một kết quả rồi chọn một trong ba tuỳ chọn sao chép:
- Sao chép dưới dạng giá trị cố định JavaScript. Thoát các ký tự đặc biệt thích hợp và gói chuỗi trong dấu ngoặc đơn, dấu ngoặc kép hoặc dấu phẩ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ả các dòng mới và ký tự đặc biệt khác.
- Sao chép dưới dạng giá trị cố định JSON. Định dạng chuỗi thành JSON hợp lệ.
Chạy lại biểu thức từ lịch sử
Nhấn phím Mũi tên lên để duyệt qua nhật ký biểu thức JavaScript mà bạn đã chạy trước đó trong Console. Nhấn Enter để chạy lại biểu thức đó.
Xem giá trị của biểu thức theo thời gian thực bằng Biểu thức trực tiếp
Nếu phải nhập nhiều lần cùng một biểu thức JavaScript trong Console, thì có thể bạn sẽ thấy việc tạo Biểu thức trực tiếp dễ dàng hơn. Với Biểu thức trực tiếp, bạn nhập một biểu thức một lần rồi ghim biểu thức đó lên đầu Bảng điều khiển. Giá trị của biểu thức cập nhật gần như theo thời gian thực. Xem Xem giá trị biểu thức JavaScript trong thời gian thực với biểu thức trực tiếp.
Tắt chế độ Đánh giá mức độ uy tín
Khi bạn nhập biểu thức JavaScript trong Console, Eager Recommendation (Đánh giá ước tính) sẽ hiển thị bản xem trước giá trị trả về của biểu thức đó. Open Console Settings (Mở phần Cài đặt Console) rồi tắt hộp đánh dấu Eager Recommendation (Đánh giá Eager) để tắt bản xem trước giá trị trả về.
Kích hoạt hoạt động của người dùng bằng cách đánh giá
Kích hoạt của người dùng là trạng thái của một phiên duyệt web phụ thuộc vào thao tác 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 hoạt động của người dùng sau bất kỳ quy trình đánh giá nào, hãy mở phần Cài đặt bảng điều khiển rồi chọn Đánh giá sẽ kích hoạt hoạt động kích hoạt của người dùng.
Tắt tính năng tự động hoàn thành khỏi nhật ký
Khi bạn nhập một biểu thức, cửa sổ bật lên tự động hoàn thành của Bảng điều khiển sẽ hiển thị các biểu thức mà bạn đã chạy trước đó. Những biểu thức này được thêm vào trước ký tự >. Trong ví dụ sau, Công cụ cho nhà phát triển trước đó đã đánh giá document.querySelector('a') và document.querySelector('img').
Mở phần Cài đặt bảng điều khiển và tắt hộp đánh dấu Tự động hoàn thành từ nhật ký để ngừng hiển thị các biểu thức trong nhật ký của bạn.
Chọn ngữ cảnh JavaScript
Theo mặc định, trình đơn thả xuống Ngữ cảnh JavaScript được đặt thành trên cùng, thể hiện ngữ 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 <iframe>. Bạn muốn chạy JavaScript để chỉnh sửa DOM của quảng cáo. Để thực hiện việc này, trước tiên, bạn cần chọn ngữ cảnh duyệt của quảng cáo từ 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 đối tượng JavaScript mà bạn chỉ định.
Để duyệt qua 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 thuộc tính của đối tượng DOM, hãy làm theo các bước trong bài viết Xem thuộc tính của đối tượng DOM.
Xác định các tài sản riêng và tài sản kế thừa
Bảng điều khiển sắp xếp các thuộc tính riêng của đối tượng trước và làm nổi bật các thuộc tính đó bằng phông chữ đậm.
Các thuộc tính 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ị chúng trên chính đối tượng bằng cách đánh giá các trình truy cập gốc tương ứng của các đối tượng tích hợp.
Đánh giá trình 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 trình truy cập mà bạn tạo.
(...).
Xác định các thuộc tính có thể liệt kê và không thể liệt kê
Thuộc tính enum có màu tươi sáng. Các thuộc tính không thể liệt kê sẽ bị tắt tiếng.
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 có 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á các thuộc tính này ngoài phạm vi lớp.
Kiểm tra các thuộc tính JavaScript nội bộ
Bằng cách dùng ký hiệu ECMAScript, Bảng điều khiển sẽ chứa một số thuộc tính nội bộ cho JavaScript trong dấu ngoặc vuông kép. Bạn không thể tương tác với các thuộc tính như vậy trong mã của mình. Tuy nhiên, bạn nên kiểm tra chúng.
Bạn có thể thấy các thuộc tính nội bộ sau đây trên các đối tượng khác nhau:
- Bất kỳ đối tượng nào cũng có
[[Prototype]]. - Trình bao bọc gốc có thuộc tính
[[PrimitiveValue]]. - Đối tượng
ArrayBuffercó các thuộc tính sau: - Ngoài các thuộc tính cụ thể của
ArrayBuffer, các đối tượngWebAssembly.Memorycò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 nhập có khoá. - Đối tượng
Promisecó các thuộc tính sau:[[PromiseState]]: đang chờ xử lý, đã thực hiện hoặc bị từ chối[[PromiseResult]]:undefinednếu đang chờ xử lý,<value>nếu đã hoàn tất,<reason>nếu bị từ chối
- Đối tượng
Proxycó các thuộc tính sau: đối tượng[[Handler]], đối tượng[[Target]]và[[isRevoked]](tắt hoặc tắt).
Kiểm tra hàm
Trong JavaScript, 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 tên hàm đó thay vì hiển thị các thuộc tính.
Để xem các thuộc tính hàm nội bộ trong JavaScript, hãy dùng lệnh console.dir().
Hàm có các 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 vào. Để 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à chung.- Hàm ràng buộc có các thuộc tính sau:
[[TargetFunction]]. Mục tiêu củabind().[[BoundThis]]. Giá trị củathis.[[BoundArgs]]. Một mảng gồm các đối số 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 biến 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,closedhoặcrunning.[[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 công việc nào sau đây để xoá Console:
- Nhấp vào biểu tượng 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 Console rồi nhấn phím Enter. - Gọi
console.clear()từ JavaScript của trang web. - Nhấn tổ hợp phím Control+L khi Console đang lấy tiêu điểm.