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 รายการล่าสุดที่ตรวจสอบภายในแผงองค์ประกอบ หรือออบเจ็กต์ฮีปของ JavaScript 5 รายการสุดท้ายที่เลือกในแผงโปรไฟล์ $0
จะแสดงผลองค์ประกอบหรือออบเจ็กต์ JavaScript ที่เลือกล่าสุด $1
จะแสดงผลรายการที่ 2 ที่เลือกไว้ล่าสุด และต่อไปเรื่อยๆ
ในตัวอย่างต่อไปนี้ มีการเลือกองค์ประกอบ img
ในแผงองค์ประกอบ ในลิ้นชักคอนโซล
จะมีการประเมิน $0
และแสดงองค์ประกอบเดียวกัน ดังนี้
รูปภาพด้านล่างแสดงองค์ประกอบต่างๆ ที่เลือกไว้ในหน้าเดียวกัน ตอนนี้ $0
จะอ้างอิงองค์ประกอบที่เลือกใหม่ ขณะที่ $1
จะแสดงองค์ประกอบที่เลือกไว้ก่อนหน้านี้
$(ตัวเลือก [, 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())
$$()
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);
}
l10n-placeholder3() เพื่อสร้างอาร์เรย์ขององค์ประกอบ <img>
ทั้งหมดที่ปรากฏในเอกสารปัจจุบันหลังจากโหนดที่เลือก
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(เส้นทาง [, startNode])
$x(path)
จะแสดงผลอาร์เรย์ขององค์ประกอบ DOM ที่ตรงกับนิพจน์ XPath ที่กำหนด
ตัวอย่างเช่น โค้ดต่อไปนี้จะแสดงองค์ประกอบ <p>
ทั้งหมดในหน้าเว็บ
$x("//p")
ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <p>
ทั้งหมดที่มีองค์ประกอบ <a>
$x("//p[a]")
$x(path)
มีพารามิเตอร์ที่ 2 ที่ไม่บังคับ ซึ่งก็คือ startNode
ซึ่งระบุองค์ประกอบหรือโหนดที่จะใช้ค้นหาองค์ประกอบ เช่นเดียวกับฟังก์ชันตัวเลือกอื่นๆ
ล้าง()
clear()
จะล้างประวัติการเข้าชมในคอนโซล
clear();
คัดลอก(วัตถุ)
copy(object)
จะคัดลอกการแสดงสตริงของออบเจ็กต์ที่ระบุไปยังคลิปบอร์ด
copy($0);
debug(ฟังก์ชัน)
เมื่อมีการเรียกใช้ฟังก์ชันที่ระบุ ระบบจะเรียกใช้โปรแกรมแก้ไขข้อบกพร่องและหยุดทำงานภายในฟังก์ชันในแผงแหล่งที่มา ซึ่งช่วยให้ผ่านโค้ดและแก้ไขข้อบกพร่องได้
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(วัตถุ)
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 ที่ลงทะเบียนสำหรับแต่ละประเภท ตัวอย่างเช่น รายการต่อไปนี้แสดง Listener เหตุการณ์ทั้งหมดที่ลงทะเบียนในออบเจ็กต์เอกสาร
getEventListeners(document);
หากมีการลงทะเบียน Listener มากกว่า 1 รายการในออบเจ็กต์ที่ระบุ อาร์เรย์จะมีสมาชิกสำหรับ Listener แต่ละราย ในตัวอย่างต่อไปนี้ มี Listener เหตุการณ์ 2 รายการที่ลงทะเบียนในองค์ประกอบเอกสารสำหรับเหตุการณ์ click
คุณขยายแต่ละออบเจ็กต์เหล่านี้เพิ่มเติมเพื่อสำรวจพร็อพเพอร์ตี้ได้
ดูข้อมูลเพิ่มเติมได้ที่ตรวจสอบคุณสมบัติของออบเจ็กต์
คีย์(ออบเจ็กต์)
keys(object)
จะแสดงผลอาร์เรย์ที่มีชื่อของพร็อพเพอร์ตี้ที่เป็นของออบเจ็กต์ที่ระบุ หากต้องการรับค่าเชื่อมโยงของพร็อพเพอร์ตี้เดียวกัน ให้ใช้ values()
ตัวอย่างเช่น สมมติว่าแอปพลิเคชันของคุณกำหนดออบเจ็กต์ต่อไปนี้
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
หากกำหนด player
ในเนมสเปซสากล (เพื่อความง่าย) การพิมพ์ keys(player)
และ values(player)
ในคอนโซลจะทําให้ผลลัพธ์ดังนี้
monitor(function)
เมื่อมีการเรียกฟังก์ชันที่ระบุ ระบบจะบันทึกข้อความไปยังคอนโซลที่ระบุชื่อฟังก์ชันพร้อมกับอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันเมื่อมีการเรียกใช้
function sum(x, y) {
return x + y;
}
monitor(sum);
ใช้ 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" |
การควบคุม | "ปรับขนาด" "เลื่อน" "ซูม" "โฟกัส" "เบลอ" "เลือก" "เปลี่ยน" "ส่ง" "รีเซ็ต" |
ตัวอย่างเช่น เหตุการณ์ต่อไปนี้ใช้ประเภทเหตุการณ์ "คีย์" เหตุการณ์สําคัญทั้งหมดที่เกี่ยวข้องในช่องข้อความอินพุตที่เลือกไว้ในแผงองค์ประกอบ
monitorEvents($0, "key");
ด้านล่างนี้เป็นตัวอย่างเอาต์พุตหลังจากพิมพ์อักขระในช่องข้อความ
ใช้ unmonitorEvents(object[, events])
เพื่อหยุดการตรวจสอบ
โปรไฟล์([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()
คือบริบทการดำเนินการที่เลือกไว้ในคอนโซลในขณะนี้
ตาราง(ข้อมูล [, คอลัมน์])
บันทึกข้อมูลออบเจ็กต์ด้วยการจัดรูปแบบตารางโดยการส่งผ่านในออบเจ็กต์ข้อมูลด้วยส่วนหัวคอลัมน์ที่ไม่บังคับ
นี่คือทางลัดของ console.table()
ตัวอย่างเช่น หากต้องการแสดงรายการชื่อโดยใช้ตารางในคอนโซล คุณจะต้องทำดังนี้
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
ยกเลิกการแก้ไขข้อบกพร่อง(ฟังก์ชัน)
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);