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

Kayce Basques

Sofia Emelianova

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

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

$_

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

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

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

$0 - $4

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

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

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

$(selector [, startNode])

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

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

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

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

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

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

$$(selector [, startNode])

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

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(path [, startNode])

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

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

$x("//p") 

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

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

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

clear()

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

clear(); 

copy(object)

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

copy($0); 

debug(function)

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

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(object)

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 ที่ลงทะเบียน สำหรับแต่ละประเภท ตัวอย่างเช่น รายการต่อไปนี้จะแสดงเครื่องมือฟังเหตุการณ์ทั้งหมดที่ลงทะเบียนไว้ในออบเจ็กต์เอกสาร

getEventListeners(document); 

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

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

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

keys(object)

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

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

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

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

monitor(ฟังก์ชัน)

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

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

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

monitorEvents(object [, events])

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

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

monitorEvents(window, "resize"); 

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

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

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

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

monitorEvents($0, "key"); 

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

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

profile([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() คือบริบทการดำเนินการที่เลือกอยู่ในปัจจุบันในคอนโซล

table(data [, columns])

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

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

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

undebug(function)

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

undebug(getData); 

unmonitor(function)

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

unmonitor(getData); 

unmonitorEvents(object [, events])

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

unmonitorEvents(window); 

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

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

values(object)

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

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