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 tác vụ phổ biến: 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? Hãy 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ẽ được đánh giá và 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 biểu thức được đánh giá mới nhất, 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 tệp tham chiếu trước đây đến 5 phần tử DOM gần đây nhất được kiểm tra trong bảng điều khiển Phần tử hoặc 5 đố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 Cấu hình. $0 trả về phần tử hoặc đối tượng JavaScript được chọn gần đây nhất, $1 trả về phần tử hoặc đối tượng được chọn gần đây thứ hai, v.v.

Trong ví dụ sau, phần tử img được chọn trong bảng điều khiển Phần tử. Trong ngăn Console (Bảng điều khiển), $0 đã được đánh giá và hiển thị 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 phần tử mới được 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. Khi được gọi bằng một đối số, hàm này sẽ 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ị kết quả trên trang.

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

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

Hàm này cũng hỗ trợ tham số thứ hai là startNode. Tham số này chỉ định một "phần tử" hoặc Nú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 phần tử đó:

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

Lưu ý: Nếu bạn đang dùng một thư viện như jQuery mà sử dụng $, thì chức năng này sẽ bị ghi đè và $ sẽ tương ứng với cách triển khai của 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 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);
}

l10n-placeholder3() để tạo một mảng gồm tất cả phần tử <img>
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 cần 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ó một tham số thứ hai không bắt buộc là startNode. Tham số này chỉ định một phần tử hoặc Nút cần tìm các phần tử.



xoá()

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 đã 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 thực hiện các thao tác đối với mã và gỡ lỗi.
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à việc 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 Phần tử.
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 trong bảng điều khiển
thích hợp: bảng điều khiển Phần tử 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 Phần tử:
inspect(document.body);



Khi truyề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) để 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. 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ý (ví dụ: 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 đối tượng tài liệu:
getEventListeners(document);



Nếu nhiều trình nghe được đăng ký trên đối tượng được chỉ định, thì mảng sẽ chứa một thành phần cho từng 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 thuộc về đối tượng đã 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), việc nhập keys(player) và values(player) vào Bảng điều khiển sẽ dẫn đến kết quả như sau:



monitor(function)

Khi hàm đã chỉ định được gọi, một thông báo sẽ được ghi 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 vào 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 đã chỉ định xảy ra trên đối tượng được chỉ định, đối tượng Sự kiện sẽ được ghi vào bảng điều khiển. 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 "loại" sự kiện chung được ánh xạ đến 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 để theo dõi cả sự kiện "resize" và "scroll" 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ó, các chuỗi liên kết đến các nhóm sự kiện được xác định trước. 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 và Sự kiện được ánh xạ 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ụ: trường hợp sau đây sử dụng loại sự kiện "khoá" cho tất cả các sự kiện chính tương ứng trên một trường văn bản nhập hiện được chọn trong bảng điều khiển Phần tử.
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() sẽ hoàn tất hồ sơ và hiển thị kết quả trong kênh Hiệu suất > 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")

Cách dừng lập hồ sơ và xem kết quả trong phần Performance (Hiệu suất) > Main (Chính):
profileEnd("Profile 1")

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

 Đường dẫn chính." width="800" height="606">

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ơ đó theo thứ tự tạo.

queryObjects(Constructor)

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


queryObjects(Promise). Trả về tất cả các bản sao của Promise.
queryObjects(HTMLElement). Trả về tất cả phần tử HTML.
queryObjects(foo), trong đó foo là tên lớp. Trả về tất cả cá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 hàm đã chỉ định để khi hàm được gọi, trình gỡ lỗi không còn đượ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. Tham số 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. Ví dụ: các thao tác sau đây 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ụ: Mã sau đây bắt đầu theo dõi tất cả các sự kiện chuột trên phần tử hiện được chọn, sau đó ngừng theo dõi các sự kiện "Mousemove" (có thể để giảm độ nhiễu trong đầ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 mọi thuộc tính thuộc về đối tượng đã chỉ định.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

Loại sự kiện và Sự kiện được ánh xạ 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"