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

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

Cá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);
}





$x(path [, startNode])

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

Ví dụ: đoạn mã sau đây trả về tất cả các phần tử <p> trên trang:
$x("//p")



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



Tương tự như các hàm chọn khác, $x(path) có 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 mà từ đó tìm kiếm các phần tử.



clear()

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

copy(object)

copy(object) sao chép một giá trị biểu thị đối tượng ở dạng chuỗi vào bảng nhớ tạm.
copy($0);

debug(function)

Khi hàm được chỉ định được gọi, trình gỡ lỗi sẽ được gọi và ngắt bên trong hàm trên bảng Sources (Nguồn) cho phép bạn thực hiện từng bước qua mã và gỡ lỗi.
debug(getData);



Sử dụng undebug(fn) để ngừng ngắt trên hàm hoặc sử 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 bài viết Tạm dừng mã bằng điểm ngắt.

dir(object)

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

Ví dụ sau đây cho thấy sự khác biệt giữa việc đánh giá trực tiếp document.body 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 Console API.

dirxml(object)

dirxml(object) in một 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) sẽ 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 các đối tượng heap JavaScript.

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



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

getEventListeners(object)

getEventListeners(object) trả về các 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 mỗi 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ả trình nghe sự kiện đã đăng ký trên đối tượng tài liệu:
getEventListeners(document);



Nếu có nhiều trình nghe được đăng ký trên đối tượng đã chỉ định, thì mảng sẽ chứa một thành phần cho mỗi trình nghe. Trong ví dụ sau, có 2 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 bài viết Kiểm tra các thuộc tính của đối tượng.

keys(object)

keys(object) trả về một mảng chứa tên của các thuộc tính thuộc đối tượng được chỉ định. Để lấy 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 (cho đơn giản), việc nhập keys(player) và values(player) trong Bảng điều khiển sẽ dẫn đến kết quả sau:



monitor(function)

Khi hàm được 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 đượ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 bảng điều khiển. Bạn có thể chỉ định một sự kiện duy nhất để theo dõi, một mảng sự kiện hoặc một trong các "loại" sự kiện chung được liên kết với một tập hợp sự kiện được xác định trước. Xem ví dụ bên dưới.

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



Sau đây xác định 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", &quot;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 với những 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 tương ứng:

Loại sự kiện và Sự kiện được liên kết tương ứng
con chuột
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
phím
"keydown", "keyup", "keypress", "textInput"
chạm
"touchstart", "touchmove", "touchend", "touchcancel"
âm lượng
"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

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

Dưới đây là kết quả đầu ra 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.

profile([name]) và profileEnd([name])

profile() bắt đầu một phiên lập hồ sơ CPU JavaScript bằng một tên không bắt buộc. profileEnd()
hoàn tất hồ sơ và hiển thị kết quả trong đường Hiệu suất > Chính.



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

Cách dừng phân tích tài nguyên và xem kết quả trong Performance (Hiệu suất) > Main (Chính):
profileEnd("Profile 1")

Kết quả trong bản theo dõi Hiệu suất > 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 bất kỳ thứ tự nào:
profile('A');
profile('B');
profileEnd('A&#39;);
profileEnd('B');



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 được chỉ định. Ví dụ:


queryObjects(Promise). Trả về tất cả các thực thể 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ả các đối tượng đã được khởi tạo thông qua new foo().


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

table(data [, columns])

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

Ví dụ: để hiển thị danh sách tên bằng cách sử dụ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);



undebug(function)

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

unmonitor(function)

unmonitor(function) sẽ dừng giám sát hàm đã chỉ định. Bạn nên sử dụng thuộc tính này 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 cho đối tượng và sự kiện được chỉ định. Ví dụ: thao tác sau sẽ dừng tất cả hoạt động giám sát sự kiện trên đối tượng cửa sổ:
unmonitorEvents(window);

Bạn cũng có thể chọn dừng theo dõi các sự kiện cụ thể trên một đối tượng. Ví dụ: đoạn 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 đó dừ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, &quot;mousemove");

values(object)

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

values(player);