Trang này được dịch bởi Cloud Translation API.

Tài liệu tham khảo API Tiện ích bảng điều khiển

Kayce Basques

Sofia Emelianova

API Tiện ích Console chứa một tập hợp các hàm tiện lợi để thực hiện các thao tác thông thường nhiệm vụ: chọn và kiểm tra các phần tử DOM, truy vấn đối tượng, hiển thị dữ liệu ở định dạng có thể đọc được, dừng và khởi động trình phân tích tài nguyên, theo dõi các sự kiện DOM và lệnh gọi hàm, v.v.

Bạn đang tìm console.log(), console.error() và các hàm console.* còn lại? Xem Tài liệu tham khảo API Bảng điều khiển.

$_

$_ trả về giá trị của biểu thức được đánh giá gần đây nhất.

Trong ví dụ sau, một biểu thức đơn giản (2 + 2) sẽ được đánh giá. Sau đó, thuộc tính $_ sẽ là được đánh giá, trong đó có chứa cùng một giá trị:

$_ là biểu thức được đánh giá gần đây nhất.

Trong ví dụ tiếp theo, biểu thức được đánh giá ban đầu chứa một mảng tên. Đang đánh giá $_.length để tìm độ dài của mảng, giá trị được lưu trữ trong $_ sẽ thay đổi thành giá trị mới nhất biểu thức được đánh giá, 4:

$_ thay đổi khi các lệnh mới được đánh giá.

$0 – $4

Các lệnh $0, $1, $2, $3 và $4 hoạt động như một tham chiếu lịch sử tới 5 DOM trước các phần tử được kiểm tra trong bảng điều khiển Elements hoặc năm đối tượng vùng nhớ khối xếp JavaScript gần đây nhất được chọn trong bảng điều khiển Hồ sơ. $0 trả về phần tử hoặc đối tượng JavaScript được chọn gần đây nhất, $1 sẽ trả về kết quả được chọn gần đây thứ hai và cứ tiếp tục như vậy.

Trong ví dụ sau, phần tử img được chọn trong bảng điều khiển Elements. Trong ngăn Bảng điều khiển, $0 đã được đánh giá và cho thấy cùng một phần tử:

Ví dụ về $0.

Hình ảnh dưới đây hiển thị một phần tử khác được chọn trong cùng một trang. $0 hiện đề cập đến đã chọn, trong khi $1 trả về phần tử đã chọn trước đó:

Ví dụ về $1.

$(selector [; startNode])

$(selector) trả về tham chiếu đến phần tử DOM đầu tiên bằng bộ chọn CSS được chỉ định. Thời gian được gọi với một đối số, nên hàm này là lối tắt cho hàm document.querySelector().

Ví dụ sau đây trả về một tệp tham chiếu đến phần tử <img> đầu tiên trong tài liệu:

Ví dụ về $('img').

Nhấp chuột phải vào kết quả được trả về rồi chọn Hiển thị trong bảng điều khiển phần tử để tìm kết quả đó trong DOM hoặc Cuộn vào chế độ xem để hiển thị tiện ích này trên trang.

Ví dụ sau đây trả về một tham chiếu đến phần tử đang được chọn và hiển thị src của phần tử đó thuộc tính:

Ví dụ về $('img').src.

Hàm này cũng hỗ trợ tham số thứ hai là startNode, chỉ định một "phần tử" hoặc Nút từ để tìm kiếm các phần tử. Giá trị mặc định của tham số này là document.

Ví dụ sau đây trả về một tham chiếu đến phần tử img đầu tiên là thành phần con của devsite-header-background và hiển thị thuộc tính src của nó:

Ví dụ về $('img', div).src.

Lưu ý: Nếu bạn đang dùng một thư viện (chẳng hạn như jQuery) có sử dụng $, thì chức năng này sẽ bị ghi đè và $ sẽ tương ứng với việc triển khai thư viện đó.

$$(selector [, startNode])

$$(bộ chọn) trả về một mảng các phần tử khớp với bộ chọn CSS nhất định. Lệnh này là tương đương với việc gọi Array.from(document.querySelectorAll()).



Ví dụ sau đây sử dụng $$() to create an array of all <img> elements in the current document
and displays the value of each element's src property:
let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

&lt;img&gt; phần tử
xuất hiện trong tài liệu hiện tại sau Nút đã chọn:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



Lưu ý: Nhấn tổ hợp phím Shift + Enter trong bảng điều khiển để bắt đầu
một dòng mới mà không thực thi tập lệnh.

$x(đường dẫn [, startNode])

$x(path) trả về một loạt các phần tử DOM khớp với biểu thức NETWORK đã cho.

Ví dụ: lệnh sau đây trả về tất cả phần tử <p> trên trang:
$x("//p")



Ví dụ sau đây trả về tất cả phần tử <p> chứa phần tử <a>:
$x("//p[a]")



Tương tự như các hàm bộ chọn khác, $x(path) có tham số thứ hai không bắt buộc là startNode,
chỉ định một phần tử hoặc Nút để tìm kiếm các phần tử.



clear()

clear() xoá nhật ký của bảng điều khiển.
clear();

sao chép(đối tượng)

copy(object) sao chép một chuỗi biểu diễn của đối tượng được chỉ định vào bảng nhớ tạm.
copy($0);

gỡ lỗi(hàm)

Khi hàm được chỉ định được gọi, trình gỡ lỗi được gọi và ngắt bên trong hàm trên
Bảng điều khiển Sources (Nguồn) cho phép duyệt qua và gỡ lỗi mã.
debug(getData);



Dùng undebug(fn) để dừng lỗi trên hàm này hoặc dùng giao diện người dùng để tắt tất cả các điểm ngắt.

Để biết thêm thông tin về điểm ngắt, hãy xem nội dung Tạm dừng mã có điểm ngắt.

dir(object)

dir(object) cho thấy trang thông tin kiểu đối tượng của tất cả thuộc tính của đối tượng đã chỉ định. Phương thức này
là lối tắt cho phương thức console.dir() của API Console.

Ví dụ sau đây cho thấy sự khác biệt giữa việc đánh giá document.body trực tiếp trong
dòng lệnh và sử dụng dir() để hiển thị cùng một phần tử:
document.body;
dir(document.body);



Để biết thêm thông tin, hãy xem mục console.dir() trong API Console.

dirxml(đối tượng)

dirxml(object) in ra bản trình bày XML của đối tượng được chỉ định, như bạn thấy trong bảng điều khiển Elements.
Phương thức này tương đương với phương thức console.dirxml().

inspect(object/function)

inspect(object/function) mở và chọn phần tử hoặc đối tượng được chỉ định theo cách phù hợp
bảng điều khiển: bảng điều khiển Elements cho các phần tử DOM hoặc bảng điều khiển Hồ sơ cho đối tượng vùng nhớ khối xếp JavaScript.

Ví dụ sau đây sẽ mở document.body trong bảng điều khiển Elements:
inspect(document.body);



Khi chuyển một hàm để kiểm tra, hàm này sẽ mở tài liệu trong bảng điều khiển Sources (Nguồn) cho bạn
để kiểm tra.

getEventListeners(object)

getEventListeners(object) trả về trình nghe sự kiện đã đăng ký trên đối tượng được chỉ định. Chiến lược phát hành đĩa đơn
giá trị trả về là một đối tượng chứa một mảng cho từng loại sự kiện đã đăng ký (click hoặc
keydown). Các thành phần của mỗi mảng là các đối tượng mô tả trình nghe đã đăng ký
cho từng loại. Ví dụ: sau đây là danh sách tất cả các trình nghe sự kiện đã đăng ký trên tài liệu
đối tượng:
getEventListeners(document);



Nếu nhiều trình nghe được đăng ký trên đối tượng được chỉ định, thì mảng này sẽ chứa một phần tử
cho mỗi trình nghe. Trong ví dụ sau, có hai trình nghe sự kiện được đăng ký trên
phần tử tài liệu cho sự kiện click:



Bạn có thể mở rộng thêm từng đối tượng này để khám phá các thuộc tính của chúng:



Để biết thêm thông tin, hãy xem phần Kiểm tra thuộc tính của đối tượng.

khoá(đối tượng)

keys(object) trả về một mảng chứa tên của các thuộc tính đã chỉ định
. Để nhận các giá trị được liên kết của cùng một thuộc tính, hãy sử dụng values().

Ví dụ: giả sử ứng dụng của bạn xác định đối tượng sau:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

Giả sử player được xác định trong không gian tên chung (để đơn giản), hãy nhập keys(player) và
values(player) trong Bảng điều khiển dẫn đến:



màn hình(chức năng)

Khi hàm đã chỉ định được gọi, một thông báo sẽ được ghi lại vào bảng điều khiển cho biết
tên hàm cùng với các đối số được truyền đến hàm khi hàm được gọi.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Sử dụng unmonitor(function) để ngừng giám sát.

monitorEvents(object [, events])

Khi một trong các sự kiện được chỉ định xảy ra trên đối tượng được chỉ định, đối tượng Sự kiện sẽ được ghi vào
Google Play. Bạn có thể chỉ định một sự kiện duy nhất cần theo dõi, một mảng sự kiện hoặc một trong các sự kiện chung
"loại" được liên kết với một tập hợp sự kiện được xác định trước. Hãy xem ví dụ dưới đây.

Sau đây là màn hình theo dõi tất cả các sự kiện đổi kích thước trên đối tượng cửa sổ.
monitorEvents(window, "resize");



Sau đây là định nghĩa một mảng để giám sát cả việc "đổi kích thước" và "scroll" các sự kiện trên đối tượng cửa sổ:
monitorEvents(window, ["resize", "scroll"])

Bạn cũng có thể chỉ định một trong các "loại" sự kiện hiện có, chuỗi này ánh xạ đến các tập hợp
các sự kiện. Bảng dưới đây liệt kê các loại sự kiện có sẵn và mối liên kết sự kiện liên quan:

Loại sự kiện & Các sự kiện được liên kết tương ứng
con chuột "nhấp chuột", "chup", "nhấp chuột", "dblclick", "Mousemove", "di chuột", "Mouseout", "nhấp chuột"
phím "keydown", "keyup", "keypress", "textInput"
chạm "Touchstart", "Touchmove", "Touchend", "Touchcancel"
âm lượng "đổi kích thước", "scroll", "thu phóng", "lấy nét", "làm mờ", "chọn", "thay đổi", "gửi", "đặt lại"

Ví dụ: sau đây sử dụng "khoá" loại sự kiện tất cả các sự kiện chính tương ứng trên văn bản đầu vào
trường hiện được chọn trong bảng điều khiển Elements.
monitorEvents($0, "key");

Dưới đây là kết quả mẫu sau khi nhập một ký tự vào trường văn bản:



Sử dụng unmonitorEvents(object[, events]) để ngừng giám sát.

hồ sơ([name]) và hồ sơEnd([name])

profile() bắt đầu phiên phân tích CPU JavaScript bằng tên không bắt buộc. profileEnd()
hoàn tất hồ sơ và hiển thị kết quả trong trang Hiệu suất > Kênh chính.

Lưu ý: profile() và profileEnd() là cách viết tắt của console.profile() và console.profileEnd().

Cách bắt đầu lập hồ sơ:
profile("Profile 1")

Để dừng lập hồ sơ và xem kết quả trong mục Performance (Hiệu suất) > Kênh chính:
profileEnd("Profile 1")

Dẫn đến Hiệu suất > Kênh chính:



Bạn cũng có thể lồng các hồ sơ. Ví dụ: lệnh này sẽ hoạt động theo thứ tự bất kỳ:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

Lưu ý: Nhiều hồ sơ CPU có thể hoạt động cùng lúc và bạn không cần phải đóng các hồ sơ đó trong
đơn đặt hàng sáng tạo.

queryObjects(Constructor)

Gọi queryObjects(Constructor) từ bảng điều khiển để trả về một mảng đối tượng đã được tạo
với hàm khởi tạo được chỉ định. Ví dụ:


queryObjects(Promise). Trả về tất cả bản sao của Promise.
queryObjects(HTMLElement). Trả về tất cả các phần tử HTML.
queryObjects(foo), trong đó foo là tên lớp. Trả về tất cả đối tượng đã được tạo thực thể
thông qua new foo().


Phạm vi của queryObjects() là ngữ cảnh thực thi đang được chọn trong bảng điều khiển.

bảng(dữ liệu [, cột])

Ghi nhật ký dữ liệu đối tượng ở định dạng bảng bằng cách truyền một đối tượng dữ liệu vào với tiêu đề cột không bắt buộc.
Đây là phím tắt cho console.table().

Ví dụ: để hiện danh sách tên bằng một bảng trong bảng điều khiển, bạn có thể làm như sau:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



huỷ gỡ lỗi(hàm)

undebug(function) sẽ dừng gỡ lỗi của hàm được chỉ định để khi hàm đó
thì trình gỡ lỗi sẽ không được gọi nữa. Tham số này được sử dụng cùng với debug(fn).
undebug(getData);

huỷ giám sát(hàm)

unmonitor(function) sẽ ngừng giám sát hàm đã chỉ định. Tính năng này được sử dụng cùng với
monitor(fn).
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) ngừng giám sát các sự kiện đối với đối tượng và sự kiện đã chỉ định. Cho
ví dụ: các thao tác sau sẽ dừng tất cả hoạt động theo dõi sự kiện trên đối tượng cửa sổ:
unmonitorEvents(window);

Bạn cũng có thể ngừng theo dõi các sự kiện cụ thể trên một đối tượng một cách có chọn lọc. Ví dụ: như sau
mã bắt đầu theo dõi tất cả các sự kiện liên quan đến chuột trên phần tử hiện được chọn, sau đó ngừng giám sát
"nhấp chuột" các sự kiện (có thể để giảm nhiễu trong dữ liệu đầu ra của bảng điều khiển):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

giá trị(đối tượng)

values(object) trả về một mảng chứa giá trị của tất cả thuộc tính thuộc về một mảng đã chỉ định
.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

Loại sự kiện & Các sự kiện được liên kết tương ứng
con chuột	"nhấp chuột", "chup", "nhấp chuột", "dblclick", "Mousemove", "di chuột", "Mouseout", "nhấp chuột"
phím	"keydown", "keyup", "keypress", "textInput"
chạm	"Touchstart", "Touchmove", "Touchend", "Touchcancel"
âm lượng	"đổi kích thước", "scroll", "thu phóng", "lấy nét", "làm mờ", "chọn", "thay đổi", "gửi", "đặt lại"