Trang này tham khảo 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 thông báo đã ghi 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(), vui lòng xem Tài liệu tham khảo về API tiện ích cho Play Console.
Mở Bảng điều khiển
Bạn có thể mở Bảng điều khiển dưới dạng một bảng điều khiển hoặc dưới dạng một 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 vào 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 chứa bảng điều khiển.
Ngăn bật lên ở cuối cửa sổ Công cụ cho nhà phát triển, trong đó thẻ Bảng điều khiển đang mở.
Để mở thẻ Console qua 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 thị bảng điều khiển) có huy hiệu Drawer (Ngăn) bên cạnh.
Mở phần Cài đặt Console
Nhấp vào 
Cài đặt Bảng điều khiển ở 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 bên dưới 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ự nhau trong bảng điều khiển
- Hiện lỗi CORS trong bảng điều khiển
- Ghi nhật ký XMLHttpRequests
- Đánh giá chi tiết
- 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
để hiển thị Thanh bên (hữu ích cho việc lọc).
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. Hãy xem bài viết 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 Tương tự trong nhóm để vô hiệu hoá hành vi nhóm thông báo mặc định của Bảng điều khiển. Hãy xem ví dụ về Ghi nhật ký XHR và yêu cầu Tìm nạp.
Xem thư từ điểm ngắt
Bảng điều khiển đánh dấu các thông báo do các điểm ngắt kích hoạt theo cách sau:
console.*gọi các điểm ngắt có điều kiện với dấu chấm hỏi màu cam?- Thông báo Logpoint có 2 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 về điểm ngắt.
Xem dấu vết ngăn xếp
Console tự động ghi lại dấu vết ngăn xếp để tìm lỗi và cảnh báo. Dấu vết ngăn xếp là nhật ký về 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ự đảo ngược: khung 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 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 các dữ liệu nguyên gốc lập lịch 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 sẽ cho thấy "câu chuyện đầy đủ" về 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
Theo mặc định, khi bản đồ nguồn có trường ignoreList, 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 từ các nguồn do trình đóng gói tạo ra (ví dụ: webpack) hoặc khung (ví dụ: Angular).
Để 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 N khung khác ở 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 bên thứ ba đã biết vào danh sách bỏ qua.
Ghi nhật ký 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ý mọi 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ụ dưới đây cho thấy giao diện của nhật ký đó sau khi bạn tắt tính năng nhóm thông báo.
Giữ nguyên thông báo qua 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 của Console rồi chọn hộp đánh dấu Pserving 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 hàng đầu trong ví dụ sau đại diện cho mã 404.
Cách ẩn thông báo của mạng:
- Mở phần Cài đặt Console.
- Chọn hộp đánh dấu Ẩn mạng.
Hiện hoặc ẩn lỗi CORS
Bảng điều khiển có thể hiển thị lỗi coroutine 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 TypeErrorliên quan đến CORS trong bảng điều khiển Network (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 ra thông báo trong Console.
Lọc ra thông báo trên trình duyệt
Mở thanh bên trên Console 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 các mức độ nghiêm trọng của phương thức console.*.
Có 4 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 API Console mô tả mức độ nghiêm trọng của từng phương thức áp dụng.
Mọi thông báo mà trình duyệt ghi vào Console cũng đều có mức độ 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 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 Levels (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 
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à URL để chỉ xem các thông báo đến từ URL đó. Sau khi bạn nhập url:
Công cụ cho nhà phát triển 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ông báo, 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ể, nhập -url: theo sau là 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 duy nhất bằng cách mở Thanh bên trên Console, 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ư theo các ngữ cảnh khác nhau
Giả sử rằng 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 Console. Vì quảng cáo này ở trong ngữ cảnh JavaScript khác, nên bạn có thể ẩn thông báo bằng cách mở phần Cài đặt Console và chọn hộp đánh dấu Chỉ ngữ cảnh đã chọn.
Lọc ra các thư không phù hợ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 Filter (Bộ lọc) để lọc ra mọi thông báo không khớp với mẫu đó. Không gian không được hỗ trợ, hãy dùng \s. Công cụ cho nhà phát triển sẽ kiểm tra xem mẫu có được tìm thấy trong văn bản thông báo hoặc tập lệnh đã khiến thông báo được ghi nhật ký hay không.
Ví dụ: sau đây sẽ lọc ra tất cả thư không khớp với /[gm][ta][mi]/.
![Lọc ra mọi thư không khớp /[gm][ta][mi]/.](https://developer.chrome.google.cn/static/docs/devtools/console/reference/image/filtering-any-messages-82d76b2bac549.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).
- Trong thanh, hãy nhập truy vấn của bạn. 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 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, nhấn nút lên hoặc xuống.
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 để xem hướng dẫn từng bước thực tế.
Tuỳ 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 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 cách sao chép:
- Sao chép dưới dạng ký tự JavaScript. Thoát các ký tự đặc biệt thích hợp và gói chuỗi trong dấu nháy đơ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à các 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 để chuyển 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 tính năng Biểu thức trực tiếp
Nếu phải nhập cùng một biểu thức JavaScript nhiều lần trong Console, thì bạn có thể 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, sau đó ghim biểu thức đó lên đầu Console. 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 bằng biểu thức trực tiếp.
Tắt tính năng Đánh giá mức độ nghiêm ngặt
Khi bạn nhập biểu thức JavaScript trong Console, công cụ Đánh giá mức độ nghiêm trọng sẽ hiển thị 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 tắt hộp đánh dấu Eager Đánh giá (Đánh giá độ trễ) để tắt chế độ xem trước giá trị trả về.
Kích hoạt hoạt động của người dùng bằng quy trình đá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 kích hoạt của người dùng bằng quy trình đánh giá bất kỳ, hãy mở phần Cài đặt trên Console rồi đánh dấu chọn 
Đánh giá việc kích hoạt hoạt động 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 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 Console 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 từ 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ủa mình được nhúng trong <iframe>. Bạn muốn chạy JavaScript để điều chỉnh 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 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 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.
Khám phá các cơ sở lưu trú riêng và được 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 tiên 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 sẽ có phông chữ thông thường. Bảng điều khiển hiển thị các trình truy cập này trên chính đối tượng bằng cách đánh giá 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.
Để đánh giá trình 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ể đếm được đều có màu sáng. Các thuộc tính không thể liệt kê sẽ bị tắt tiếng.
Bạn có thể lặp lại các thuộc tính có thể lặp lại bằng vòng lặp for … in hoặc phương thức Object.keys().
Xác định các thuộc tính riêng tư của các 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 đó 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 sẽ đặt 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:
- Mọi đối tượng đều 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 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 xong hoặc bị từ chối[[PromiseResult]]:undefinednếu đang chờ xử lý,<value>nếu được thực hiện,<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 không).
Kiểm tra các 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 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ộ cho JavaScript, hãy dùng lệnh console.dir().
Hàm có các thuộc tính sau:
[[FunctionLocation]]. Một đường liên kết đến dòng có định nghĩa hàm trong 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ộ, thuộc tính đóng và thuộc tính 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 các đố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 lặp và chúng 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 làm việc nào sau đây để xoá Play 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 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 đang lấy tiêu điểm Bảng điều khiển.