หน้านี้ได้รับการแปลโดย Cloud Translation API

เอกสารอ้างอิง Console Utilities API

Kayce Basques

Sofia Emelianova

Console Utilities API มีคอลเล็กชันฟังก์ชันอำนวยความสะดวกสำหรับการทำงานทั่วไป เช่น การเลือกและตรวจสอบองค์ประกอบ DOM, การค้นหาออบเจ็กต์, การแสดงข้อมูลในรูปแบบที่อ่านได้, การหยุดและเริ่มต้นเครื่องมือสร้างโปรไฟล์ การตรวจสอบเหตุการณ์ DOM และการเรียกใช้ฟังก์ชัน และอื่นๆ

หากกำลังมองหา console.log(), console.error() และฟังก์ชันอื่นๆ ของ console.* อยู่ โปรดดูเอกสารอ้างอิง API ของ Console

$_

$_ แสดงผลค่าของนิพจน์ที่ประเมินล่าสุด

ในตัวอย่างต่อไปนี้ จะมีการประเมินนิพจน์แบบง่าย (2 + 2) จากนั้นระบบจะประเมินพร็อพเพอร์ตี้ $_ ซึ่งมีค่าเดียวกัน

$_ คือนิพจน์ที่ประเมินล่าสุด

ในตัวอย่างถัดไป นิพจน์ที่ประเมินจะมีอาร์เรย์ชื่อในตอนแรก กำลังประเมิน $_.length เพื่อหาความยาวของอาร์เรย์ ค่าที่เก็บไว้ใน $_ จะเปลี่ยนไปเป็นนิพจน์ที่ประเมินล่าสุด 4:

$_ เปลี่ยนแปลงเมื่อมีการประเมินคำสั่งใหม่

0 บาท - 120 บาท

คำสั่ง $0, $1, $2, $3 และ $4 จะทำงานเป็นข้อมูลอ้างอิงในอดีตเกี่ยวกับองค์ประกอบ DOM 5 รายการล่าสุดที่ตรวจสอบภายในแผงองค์ประกอบ หรือออบเจ็กต์ฮีปของ JavaScript 5 รายการสุดท้ายที่เลือกในแผงโปรไฟล์ $0 จะแสดงผลองค์ประกอบหรือออบเจ็กต์ JavaScript ที่เลือกล่าสุด $1 จะแสดงผลรายการที่ 2 ที่เลือกไว้ล่าสุด และต่อไปเรื่อยๆ

ในตัวอย่างต่อไปนี้ มีการเลือกองค์ประกอบ img ในแผงองค์ประกอบ ในลิ้นชักคอนโซล จะมีการประเมิน $0 และแสดงองค์ประกอบเดียวกัน ดังนี้

ตัวอย่าง $0

รูปภาพด้านล่างแสดงองค์ประกอบต่างๆ ที่เลือกไว้ในหน้าเดียวกัน ตอนนี้ $0 จะอ้างอิงองค์ประกอบที่เลือกใหม่ ขณะที่ $1 จะแสดงองค์ประกอบที่เลือกไว้ก่อนหน้านี้

ตัวอย่าง $1

$(ตัวเลือก [, startNode])

$(selector) จะแสดงผลการอ้างอิงไปยังองค์ประกอบ DOM แรกที่มีตัวเลือก CSS ที่ระบุ เมื่อเรียกใช้ด้วยอาร์กิวเมนต์เดียว ฟังก์ชันนี้จะเป็นทางลัดสำหรับฟังก์ชัน document.querySelector()

ตัวอย่างต่อไปนี้จะแสดงการอ้างอิงไปยังองค์ประกอบ <img> แรกในเอกสาร

ตัวอย่างของ $('img')

คลิกขวาที่ผลลัพธ์ที่แสดง แล้วเลือกแสดงในแผงองค์ประกอบเพื่อค้นหาใน DOM หรือเลื่อนเพื่อดูเพื่อแสดงในหน้าเว็บ

ตัวอย่างต่อไปนี้จะแสดงการอ้างอิงไปยังองค์ประกอบที่เลือกในปัจจุบันและแสดงพร็อพเพอร์ตี้ src

ตัวอย่างของ $('img').src

ฟังก์ชันนี้รองรับพารามิเตอร์ที่ 2 startNode ซึ่งระบุ "องค์ประกอบ" หรือโหนดที่จะใช้ค้นหาองค์ประกอบ ค่าเริ่มต้นของพารามิเตอร์นี้คือ document

ตัวอย่างต่อไปนี้จะแสดงการอ้างอิงไปยังองค์ประกอบ img แรกที่เป็นองค์ประกอบสืบทอดของ devsite-header-background และแสดงพร็อพเพอร์ตี้ src ขององค์ประกอบนั้น

ตัวอย่างของ $('img', div).src

หมายเหตุ: หากคุณใช้ไลบรารี เช่น jQuery ที่ใช้ $ ฟังก์ชันนี้จะถูกเขียนทับและ $ จะสอดคล้องกับการใช้งานไลบรารีดังกล่าว

$$(selector [, startNode])

$$(selector) แสดงผลอาร์เรย์ขององค์ประกอบที่ตรงกับตัวเลือก CSS ที่ระบุ คำสั่งนี้เทียบเท่ากับการเรียกใช้ Array.from(document.querySelectorAll())



ตัวอย่างต่อไปนี้ใช้ $$() 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() เพื่อสร้างอาร์เรย์ขององค์ประกอบ <img> ทั้งหมดที่ปรากฏในเอกสารปัจจุบันหลังจากโหนดที่เลือก
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



หมายเหตุ: กด Shift + Enter ในคอนโซลเพื่อเริ่มบรรทัดใหม่โดยไม่ต้องเรียกใช้สคริปต์

$x(เส้นทาง [, startNode])

$x(path) จะแสดงผลอาร์เรย์ขององค์ประกอบ DOM ที่ตรงกับนิพจน์ XPath ที่กำหนด

ตัวอย่างเช่น โค้ดต่อไปนี้จะแสดงองค์ประกอบ <p> ทั้งหมดในหน้าเว็บ
$x("//p")



ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <p> ทั้งหมดที่มีองค์ประกอบ <a>
$x("//p[a]")



$x(path) มีพารามิเตอร์ที่ 2 ที่ไม่บังคับ ซึ่งก็คือ startNode ซึ่งระบุองค์ประกอบหรือโหนดที่จะใช้ค้นหาองค์ประกอบ เช่นเดียวกับฟังก์ชันตัวเลือกอื่นๆ



ล้าง()

clear() จะล้างประวัติการเข้าชมในคอนโซล
clear();

คัดลอก(วัตถุ)

copy(object) จะคัดลอกการแสดงสตริงของออบเจ็กต์ที่ระบุไปยังคลิปบอร์ด
copy($0);

debug(ฟังก์ชัน)

เมื่อมีการเรียกใช้ฟังก์ชันที่ระบุ ระบบจะเรียกใช้โปรแกรมแก้ไขข้อบกพร่องและหยุดทำงานภายในฟังก์ชันในแผงแหล่งที่มา ซึ่งช่วยให้ผ่านโค้ดและแก้ไขข้อบกพร่องได้
debug(getData);



ใช้ undebug(fn) เพื่อหยุดเบรกพอยท์ในฟังก์ชัน หรือใช้ UI เพื่อปิดเบรกพอยท์ทั้งหมด

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเบรกพอยท์ โปรดดูที่หยุดโค้ดชั่วคราวด้วยเบรกพอยท์

dir(object)

dir(object) แสดงรายการรูปแบบออบเจ็กต์ของพร็อพเพอร์ตี้ที่ระบุทั้งหมด วิธีนี้เป็นทางลัดสำหรับเมธอด console.dir() ของ Console API

ตัวอย่างต่อไปนี้แสดงความแตกต่างระหว่างการประเมิน document.body โดยตรงในบรรทัดคำสั่งกับการใช้ dir() เพื่อแสดงองค์ประกอบเดียวกัน
document.body;
dir(document.body);



ดูข้อมูลเพิ่มเติมได้ที่รายการ console.dir() ใน Console API

dirxml(วัตถุ)

dirxml(object) จะพิมพ์การแสดง XML ของออบเจ็กต์ที่ระบุ ตามที่เห็นในแผงองค์ประกอบ
เมธอดนี้เทียบเท่ากับเมธอด console.dirxml()

inspect(object/function)

inspect(object/function) จะเปิดขึ้นและเลือกองค์ประกอบหรือออบเจ็กต์ที่ระบุในแผงที่เหมาะสม ซึ่งได้แก่ แผงองค์ประกอบสำหรับองค์ประกอบ DOM หรือแผงโปรไฟล์สำหรับออบเจ็กต์ฮีปของ JavaScript

ตัวอย่างต่อไปนี้จะเปิด document.body ในแผงองค์ประกอบ
inspect(document.body);



เมื่อส่งฟังก์ชันเพื่อตรวจสอบ ฟังก์ชันดังกล่าวจะเปิดเอกสารในแผงแหล่งที่มาเพื่อให้คุณตรวจสอบ

getEventListeners(object)

getEventListeners(object) จะแสดงผล Listener เหตุการณ์ที่ลงทะเบียนไว้ในออบเจ็กต์ที่ระบุ ค่าผลลัพธ์คือออบเจ็กต์ที่มีอาร์เรย์สำหรับเหตุการณ์แต่ละประเภทที่ลงทะเบียน (เช่น click หรือ keydown) สมาชิกของแต่ละอาร์เรย์คือออบเจ็กต์ที่อธิบาย Listener ที่ลงทะเบียนสำหรับแต่ละประเภท ตัวอย่างเช่น รายการต่อไปนี้แสดง Listener เหตุการณ์ทั้งหมดที่ลงทะเบียนในออบเจ็กต์เอกสาร
getEventListeners(document);



หากมีการลงทะเบียน Listener มากกว่า 1 รายการในออบเจ็กต์ที่ระบุ อาร์เรย์จะมีสมาชิกสำหรับ Listener แต่ละราย ในตัวอย่างต่อไปนี้ มี Listener เหตุการณ์ 2 รายการที่ลงทะเบียนในองค์ประกอบเอกสารสำหรับเหตุการณ์ click



คุณขยายแต่ละออบเจ็กต์เหล่านี้เพิ่มเติมเพื่อสำรวจพร็อพเพอร์ตี้ได้



ดูข้อมูลเพิ่มเติมได้ที่ตรวจสอบคุณสมบัติของออบเจ็กต์

คีย์(ออบเจ็กต์)

keys(object) จะแสดงผลอาร์เรย์ที่มีชื่อของพร็อพเพอร์ตี้ที่เป็นของออบเจ็กต์ที่ระบุ หากต้องการรับค่าเชื่อมโยงของพร็อพเพอร์ตี้เดียวกัน ให้ใช้ values()

ตัวอย่างเช่น สมมติว่าแอปพลิเคชันของคุณกำหนดออบเจ็กต์ต่อไปนี้
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

หากกำหนด player ในเนมสเปซสากล (เพื่อความง่าย) การพิมพ์ keys(player) และ values(player) ในคอนโซลจะทําให้ผลลัพธ์ดังนี้



monitor(function)

เมื่อมีการเรียกฟังก์ชันที่ระบุ ระบบจะบันทึกข้อความไปยังคอนโซลที่ระบุชื่อฟังก์ชันพร้อมกับอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันเมื่อมีการเรียกใช้
function sum(x, y) {
  return x + y;
}
monitor(sum);



ใช้ unmonitor(function) เพื่อหยุดการตรวจสอบ

monitorEvents(object [, events])

เมื่อเกิดเหตุการณ์ที่ระบุขึ้นในออบเจ็กต์ที่ระบุ ระบบจะบันทึกออบเจ็กต์เหตุการณ์ลงในคอนโซล คุณระบุเหตุการณ์เดียวที่จะตรวจสอบ อาร์เรย์เหตุการณ์ หรือ "ประเภท" เหตุการณ์ทั่วไปแบบใดแบบหนึ่งซึ่งแมปกับคอลเล็กชันเหตุการณ์ที่กำหนดไว้ล่วงหน้า โปรดดูตัวอย่างด้านล่าง

รายการต่อไปนี้จะตรวจสอบเหตุการณ์การปรับขนาดทั้งหมดในออบเจ็กต์หน้าต่าง
monitorEvents(window, "resize");



ข้อมูลต่อไปนี้จะกำหนดอาร์เรย์เพื่อตรวจสอบทั้งเหตุการณ์ "resize" และ "scroll" บนออบเจ็กต์หน้าต่าง
monitorEvents(window, ["resize", "scroll"])

คุณยังระบุ "ประเภท" เหตุการณ์อย่างใดอย่างหนึ่งที่มีอยู่ได้ ซึ่งเป็นสตริงที่แมปกับชุดเหตุการณ์ที่กำหนดไว้ล่วงหน้า ตารางด้านล่างแสดงประเภทเหตุการณ์ที่ใช้ได้และการแมปเหตุการณ์ที่เกี่ยวข้อง

ประเภทกิจกรรมและกิจกรรมที่แมปที่เกี่ยวข้อง
หนู "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mouseWheel"
แป้น "keydown", "keyup", "keypress", "textInput"
การสัมผัส "touchstart", "touchmove", "touchend", "touchcancel"
การควบคุม "ปรับขนาด" "เลื่อน" "ซูม" "โฟกัส" "เบลอ" "เลือก" "เปลี่ยน" "ส่ง" "รีเซ็ต"

ตัวอย่างเช่น เหตุการณ์ต่อไปนี้ใช้ประเภทเหตุการณ์ "คีย์" เหตุการณ์สําคัญทั้งหมดที่เกี่ยวข้องในช่องข้อความอินพุตที่เลือกไว้ในแผงองค์ประกอบ
monitorEvents($0, "key");

ด้านล่างนี้เป็นตัวอย่างเอาต์พุตหลังจากพิมพ์อักขระในช่องข้อความ



ใช้ unmonitorEvents(object[, events]) เพื่อหยุดการตรวจสอบ

โปรไฟล์([name]) และ profileEnd([name])

profile() เริ่มเซสชันการทำโปรไฟล์ CPU ของ JavaScript ด้วยชื่อที่ไม่บังคับ profileEnd()
กรอกข้อมูลโปรไฟล์ให้สมบูรณ์และแสดงผลลัพธ์ในแทร็กประสิทธิภาพ > หลัก

หมายเหตุ: profile() และ profileEnd() เป็นชื่อย่อของ console.profile() และ console.profileEnd()

วิธีเริ่มทำโปรไฟล์
profile("Profile 1")

หากต้องการหยุดทำโปรไฟล์และดูผลลัพธ์ในแทร็กประสิทธิภาพ > หลัก ให้ทำดังนี้
profileEnd("Profile 1")

ได้ผลลัพธ์ในแทร็กประสิทธิภาพ > หลัก



และสามารถซ้อนโปรไฟล์ได้ด้วย ตัวอย่างเช่น สิ่งนี้จะใช้ตามลำดับใดก็ได้:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

หมายเหตุ: โปรไฟล์ CPU หลายโปรไฟล์ทำงานพร้อมกันได้และคุณไม่จำเป็นต้องปิดตามลำดับการสร้าง

queryObjects(Constructor)

เรียกใช้ queryObjects(Constructor) จากคอนโซลเพื่อแสดงผลอาร์เรย์ของออบเจ็กต์ที่สร้างด้วยตัวสร้างที่ระบุ เช่น


queryObjects(Promise) แสดงผลอินสแตนซ์ทั้งหมดของ Promise
queryObjects(HTMLElement) แสดงผลองค์ประกอบ HTML ทั้งหมด
queryObjects(foo) โดยที่ foo เป็นชื่อชั้นเรียน แสดงผลออบเจ็กต์ทั้งหมดที่สร้างอินสแตนซ์ผ่าน new foo()


ขอบเขตของ queryObjects() คือบริบทการดำเนินการที่เลือกไว้ในคอนโซลในขณะนี้

ตาราง(ข้อมูล [, คอลัมน์])

บันทึกข้อมูลออบเจ็กต์ด้วยการจัดรูปแบบตารางโดยการส่งผ่านในออบเจ็กต์ข้อมูลด้วยส่วนหัวคอลัมน์ที่ไม่บังคับ
นี่คือทางลัดของ console.table()

ตัวอย่างเช่น หากต้องการแสดงรายการชื่อโดยใช้ตารางในคอนโซล คุณจะต้องทำดังนี้
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



ยกเลิกการแก้ไขข้อบกพร่อง(ฟังก์ชัน)

undebug(function) จะหยุดการแก้ไขข้อบกพร่องของฟังก์ชันที่ระบุ เพื่อไม่ให้เรียกใช้โปรแกรมแก้ไขข้อบกพร่องเมื่อมีการเรียกใช้ฟังก์ชันนั้น ใช้ร่วมกับ debug(fn) ด้วย
undebug(getData);

ไม่ตรวจสอบ(ฟังก์ชัน)

unmonitor(function) หยุดการตรวจสอบฟังก์ชันที่ระบุ ซึ่งใช้ร่วมกับ monitor(fn)
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) จะหยุดการตรวจสอบเหตุการณ์สำหรับออบเจ็กต์และเหตุการณ์ที่ระบุ ตัวอย่างเช่น ตัวอย่างต่อไปนี้จะหยุดการตรวจสอบเหตุการณ์ทั้งหมดในออบเจ็กต์หน้าต่าง
unmonitorEvents(window);

นอกจากนี้ คุณยังเลือกหยุดตรวจสอบเหตุการณ์ที่เฉพาะเจาะจงในออบเจ็กต์ได้ด้วย ตัวอย่างเช่น โค้ดต่อไปนี้จะเริ่มตรวจสอบเหตุการณ์เมาส์ทั้งหมดในองค์ประกอบที่เลือกในปัจจุบัน จากนั้นจะหยุดตรวจสอบเหตุการณ์ "mousemove" (อาจเพื่อลดเสียงรบกวนในเอาต์พุตของคอนโซล)
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

ค่า(ออบเจ็กต์)

values(object) จะแสดงผลอาร์เรย์ที่มีค่าของพร็อพเพอร์ตี้ทั้งหมดที่เป็นของออบเจ็กต์ที่ระบุ
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

ประเภทกิจกรรมและกิจกรรมที่แมปที่เกี่ยวข้อง
หนู	"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mouseWheel"
แป้น	"keydown", "keyup", "keypress", "textInput"
การสัมผัส	"touchstart", "touchmove", "touchend", "touchcancel"
การควบคุม	"ปรับขนาด" "เลื่อน" "ซูม" "โฟกัส" "เบลอ" "เลือก" "เปลี่ยน" "ส่ง" "รีเซ็ต"