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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

รูปภาพด้านล่างแสดงองค์ประกอบอื่นที่เลือกในหน้าเดียวกัน ตอนนี้ $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);
}


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


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



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





$x(path [, 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(object) คัดลอกการแสดงสตริงของออบเจ็กต์ที่ระบุไปยังคลิปบอร์ด


copy($0);



debug(function)



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


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



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



inspect(object/function)



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



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


inspect(document.body);



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



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




getEventListeners(object)



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



getEventListeners(document);



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



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



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



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



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



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



keys(object)



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



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


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



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



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



monitor(ฟังก์ชัน)



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


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



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



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



monitorEvents(object [, events])



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



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


monitorEvents(window, "resize");



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



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


monitorEvents(window, ["resize", &quot;scroll"])



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



ประเภทเหตุการณ์และเหตุการณ์ที่แมปที่เกี่ยวข้อง
หนู"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
แป้น"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")



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



โปรไฟล์ 1 ในแทร็กหลักของประสิทธิภาพ



นอกจากนี้ยังซ้อนโปรไฟล์ได้ด้วย ตัวอย่างเช่น การดำเนินการต่อไปนี้จะใช้ได้ในทุกคำสั่ง


profile('A');
profile('B');
profileEnd('A&#39;);
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);



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



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, &quot;mousemove");



values(object)



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



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

values(player);



ผลลัพธ์ของค่า(ผู้เล่น)