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

โซเฟีย เอมิเลียโนวา
Sofia Emelianova

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

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

$_

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

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

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

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

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

0 - 120 บาท

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

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

ตัวอย่าง $0

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

ตัวอย่าง $1

$(selector [, startNode])

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

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

ตัวอย่างของ $(&#39;img&#39;)

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

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

ตัวอย่าง $(&#39;img&#39;).src

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

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

ตัวอย่างของ $(&#39;img&#39;, div).src

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

ตัวอย่างการใช้<span class=l10n-placeholder3() เพื่อสร้างอาร์เรย์ขององค์ประกอบ <img> ทั้งหมด ที่ปรากฏในเอกสารปัจจุบันหลังจากโหนดที่เลือก

let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}

ตัวอย่างการใช้ $() เพื่อเลือกรูปภาพทั้งหมดที่ปรากฏหลังจากส่วน div ที่เลือกในเอกสารและแสดงแหล่งที่มาของรูปภาพ

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

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

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

$x("//p")

ตัวอย่างการใช้ตัวเลือก XPath

ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <p> ทั้งหมดที่มีองค์ประกอบ <a>

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

ตัวอย่างการใช้ตัวเลือก XPath ที่ซับซ้อนขึ้น

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

ตัวอย่างการใช้ตัวเลือก XPath กับ startNode

ล้าง()

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

clear();

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

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

copy($0);

debug(ฟังก์ชัน)

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

debug(getData);

การแบ่งภายในฟังก์ชันด้วย debug()

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

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

dir(object)

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

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

document.body;
dir(document.body);

Logging document.body โดยมีและไม่มีฟังก์ชัน dir()

สำหรับข้อมูลเพิ่มเติม โปรดดูรายการ console.dir() ใน Console API

dirxml(ออบเจ็กต์)

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

inspect(object/function)

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

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

inspect(document.body);

การตรวจสอบองค์ประกอบด้วย check()

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

getEventListeners(object)

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

getEventListeners(document);

ผลลัพธ์ของการใช้ getEventListeners()

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

ผู้ฟังหลายราย

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

มุมมองแบบขยายของออบเจ็กต์ Listener

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

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

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

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

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

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

ตัวอย่างเมธอด key() และค่า()

monitor(function)

เมื่อมีการเรียกฟังก์ชันที่ระบุ ระบบจะบันทึกข้อความไปยังคอนโซลซึ่งระบุชื่อฟังก์ชันพร้อมกับอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันเมื่อมีการเรียกใช้ฟังก์ชัน

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

ตัวอย่างเมธอด display()

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

monitorEvents(object [, events])

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

การตั้งค่าต่อไปนี้จะตรวจสอบเหตุการณ์การปรับขนาดทั้งหมดในออบเจ็กต์หน้าต่าง

monitorEvents(window, "resize");

เหตุการณ์การปรับขนาดหน้าต่างการตรวจสอบ

ตัวอย่างต่อไปนี้กำหนดอาร์เรย์เพื่อตรวจสอบทั้งเหตุการณ์ "resize" และ "scroll" ในออบเจ็กต์หน้าต่าง

monitorEvents(window, ["resize", "scroll"])

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

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

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

monitorEvents($0, "key");

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

การตรวจสอบเหตุการณ์สำคัญ

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

profile([name]) และ profileEnd([name]) อยู่

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

วิธีเริ่มทำโปรไฟล์

profile("Profile 1")

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

profileEnd("Profile 1")

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

แทร็กหลัก" width="800" height="606">

นอกจากนี้ โปรไฟล์ยังฝังซ้อนกันได้ ตัวอย่างเช่น การเลือกระบบจะทำงานตามลำดับต่อไปนี้

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

queryObjects(Constructor)

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

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

ขอบเขตของ queryObjects() คือบริบทการดำเนินการที่เลือกอยู่ในปัจจุบันในคอนโซล

Table(ข้อมูล [, คอลัมน์])

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

ตัวอย่างเช่น หากต้องการแสดงรายการชื่อโดยใช้ตารางในคอนโซล คุณจะต้องทำดังนี้

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

ตัวอย่างเมธอด &quot;table()&quot;

undebug(ฟังก์ชัน)

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

ผลลัพธ์ของค่า(โปรแกรมเล่น)