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

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

ตัวอย่างของ $0

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

ตัวอย่างของ $1

$(selector [, startNode])

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

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

ตัวอย่างของ $('img')

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

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

ตัวอย่างของ $('img').src

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

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

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


getEventListeners(document);



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



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



Listener หลายรายการ



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



มุมมองแบบขยายของออบเจ็กต์ 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)



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


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



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



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



monitorEvents(object [, events])



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



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


monitorEvents(window, "resize");



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



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


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



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



ประเภทเหตุการณ์และเหตุการณ์ที่แมปที่เกี่ยวข้อง
เมาส์"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
แป้น"keydown", "keyup", "keypress", "textInput"
การสัมผัส"touchstart", "touchmove", "touchend", "touchcancel"
การควบคุม"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"



ตัวอย่างเช่น คำสั่งต่อไปนี้ใช้ประเภทเหตุการณ์ "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');
profileEnd('B');





queryObjects(Constructor)



เรียกใช้ queryObjects(Constructor) จากคอนโซลเพื่อแสดงผลอาร์เรย์ของออบเจ็กต์ที่สร้างขึ้นด้วย 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()



หากต้องการคัดลอกตารางที่บันทึกลงในคลิปบอร์ดเป็นตารางมาร์กดาวน์ที่จัดรูปแบบหรือข้อมูล CSV ให้คลิกขวาที่ตารางในคอนโซล แล้วเลือกตัวเลือกการคัดลอกที่เกี่ยวข้องจากเมนูตามบริบท



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



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