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

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

<img> องค์ประกอบ
ที่ปรากฏในเอกสารปัจจุบันหลังจากโหนดที่เลือก:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





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

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

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



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



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



clear()

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 ของออบเจ็กต์ที่ระบุ ตามที่เห็นในแผงElements
เมธอดนี้เทียบเท่ากับเมธอด console.dirxml()

inspect(object/function)

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

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



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

getEventListeners(object)

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



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



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



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

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

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

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

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



หน้าจอ(ฟังก์ชัน)

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



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

monitorEvents(object [, events])

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

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



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

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

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

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

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



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

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

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



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

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

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



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



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

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

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

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

values(player);