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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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 รายการล่าสุด องค์ประกอบที่ตรวจสอบภายในแผงElementsหรือออบเจ็กต์ฮีป JavaScript 5 รายการสุดท้ายที่เลือกใน แผงโปรไฟล์ $0 แสดงผลองค์ประกอบหรือออบเจ็กต์ JavaScript ที่เลือกล่าสุด $1 จะแสดงผลรายการที่เลือกไว้ล่าสุดเป็นอันดับที่ 2 เป็นต้น

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

ตัวอย่าง $0

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

ตัวอย่าง $1

$(ตัวเลือก [, 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);
}


ตัวอย่างการใช้<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> เพื่อสร้างอาร์เรย์ของ <code translate=&lt;img&gt; องค์ประกอบ
ที่ปรากฏในเอกสารปัจจุบันหลังจากโหนดที่เลือก:


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() จะล้างประวัติการเข้าชมในคอนโซล


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



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



ดูข้อมูลเพิ่มเติมได้ที่รายการ 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);



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



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



getEventListeners(object)



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


getEventListeners(document);



เอาต์พุตของการใช้ getEventListeners()



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



ผู้ฟังหลายคน



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



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



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



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



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



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


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



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



ตัวอย่าง key() และ values()



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



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


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



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



ใช้ 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")



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



โปรไฟล์ 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);



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



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



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



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