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

Tiếng Kayce Basques
Tiếng Basques Kayce
Twitter GitHub Lỗi
Sofia Emelianova
Sofia Emelianova
GitHub

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 sự kiện DOM và lệnh gọi hàm, v.v.

Bạn đang tìm các hà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 về API của Play Console.

$_

$_ 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) được đánh giá. Sau đó, thuộc tính $_ sẽ được đánh giá, trong đó có chứa cùng 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 đánh giá ban đầu chứa một mảng tên. Khi đánh giá $_.length để tìm độ dài của mảng, giá trị được lưu trữ trong $_ sẽ thay đổi để trở 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 dưới dạng 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 đã 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 trả về phần tử hoặc phần tử được chọn gần đây nhất, v.v.

Trong ví dụ sau, phần tử img được chọn trong bảng điều khiển Elements (Phần tử). Trong ngăn 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 cho thấy 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ề tệp tham chiếu đến phần tử DOM đầu tiên bằng bộ chọn CSS được chỉ định. Khi được gọi với một đối số, hàm này là lối tắt cho hàm document.querySelector().

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

Ví dụ về $(&#39;img&#39;).

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 Scroll in to View (Di chuyển vào chế độ xem) để hiển thị kết quả 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ị thuộc tính src của phần tử đó:

Ví dụ về $(&#39;img&#39;).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 phần tử. Giá trị mặc định của tham số này là document.

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

Ví dụ về $(&#39;img&#39;, div).src.

$$(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);
}


Ví dụ về cách sử dụng<span class=l10n-placeholder3() để tạo một mảng gồm tất cả 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);
}



Ví dụ về cách sử dụng $() để chọn tất cả hình ảnh xuất hiện sau phần tử div đã chọn trong tài liệu và hiển thị nguồn của chúng.





$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ụ: nội dung sau đây trả về tất cả phần tử <p> trên trang:


$x("//p")



Ví dụ về cách sử dụng bộ chọn XPath.



Ví dụ sau đây trả về tất cả phần tử <p> có chứa phần tử <a>:


$x("//p[a]")



Ví dụ về cách sử dụng bộ chọn XPath phức tạp hơn.



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 để tìm kiếm phần tử.



Ví dụ về cách sử dụng bộ chọn XPath với startNode.



xoá()



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


clear();



copy(đối tượng)



copy(object) sao chép một chuỗi đại 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 sẽ được gọi và ngắt bên trong hàm trên bảng điều khiển Source (Nguồn), cho phép duyệt xem và gỡ lỗi mã đó.


debug(getData);



Phá vỡ bên trong một hàm bằng debug().



Hãy sử dụng undebug(fn) để ngừng phá vỡ 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 phần Tạm dừng mã của bạn với điểm ngắt.



dir(object)



dir(object) cho thấy một danh sách kiểu đối tượng gồm 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 API Bảng điều khiển.



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);



Ghi nhật ký document.body có và không có hàm dir().



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



dirxml(đối tượng)



dirxml(object) in bản trình bày XML của đối tượng được chỉ định, như minh hoạ trong bảng điều khiển Elements (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 Elements (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 vùng nhớ khối xếp JavaScript.



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


inspect(document.body);



Kiểm tra một phần tử bằng Inspection().



Khi chuyển một hàm để kiểm tra, hàm đó 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 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). 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 kiểu. 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);



Đầu ra của việc sử dụng getEventListeners().



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 viê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:



Nhiều trình nghe.



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



Chế độ xem mở rộng của đối tượng trình nghe.



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



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



Ví dụ về phương thức keys() và values().



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 chuyển vào hàm đó khi hàm được gọi.


function sum(x, y) {
  return x + y;
}
monitor(sum);



Ví dụ về phương thức Monitor().



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 lại vào
bảng điều khiển. Bạn có thể chỉ định một sự kiện 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 liên kết với một tập hợp sự kiện được xác định trước. Xem ví dụ dưới đây.



Thao tác sau đây 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");



Giám sát các sự kiện đổi kích thước cửa sổ.



Phần sau đây xác định một mảng để theo dõi cả sự kiện "đổi kích thước" và "cuộ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 có sẵn, chuỗi liên kết với 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 có liên quan:



Loại sự kiện và sự kiện được liên kết tương ứng
con chuột"chuột xuống", "chuột lên", "nhấp", "dblclick", "chuột di chuyển", "chuột chuột", "chuột chuột"
phím"keydown", "keyup", "keypress", "textInput"
chạm"Touchstart", "Touchmove", "Touchend", "Touchcancel"
kiểm soát"đổ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ụ: nội dung sau đây sử dụng loại sự kiện "key" cho tất cả các sự kiện chính tương ứng trên trường văn bản nhập hiện được chọn trong bảng điều khiển Elements (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:



Theo dõi các sự kiện chính.



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



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



profile() bắt đầu phiên phân tích 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ả trên kênh Hiệu suất > Chính.





Để bắt đầu lập hồ sơ:


profile("Profile 1")



Để dừng lập hồ sơ và xem kết quả trong kênh Hiệu suất > Chính, hãy làm như sau:


profileEnd("Profile 1")



Kết quả trong kênh Performance > Main (Hiệu suất > Chính):



 Tuyến đường chính."width="800" height="606">



Các hồ sơ cũng có thể được lồng. Ví dụ: mã này sẽ hoạt động theo thứ tự bất kỳ:


profile('A');
profile('B');
profileEnd('A');
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 đã chỉ định. Ví dụ:



    

  • queryObjects(Promise). Trả về tất 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ả đối tượng đã được tạo 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 với đị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à lối tắt cho console.table().



Ví dụ: để hiển thị danh sách tên bằng bảng trong bảng điều khiển, bạn sẽ làm như sau:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Ví dụ về phương thức table().



gỡ lỗi(hàm)



undebug(function) dừng quá trình 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. Thuộc tính này được sử dụng cùng với debug(fn).


undebug(getData);



không giám sát(hàm)



unmonitor(function) dừng việc giám sát hàm được chỉ định. Phương thức này được sử dụng cùng với monitor(fn).


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) ngừng theo dõi các sự kiện cho đố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 một cách có chọn lọc các sự kiện cụ thể trên một đối tượng. 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 " nhanhmove" (có thể để giảm nhiễu trong đầu ra của bảng điều khiển):


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



values(đố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 đối tượng được chỉ định.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



Kết quả của các giá trị(trình phát).