Console Utilities API มีคอลเล็กชันฟังก์ชันอำนวยความสะดวกสำหรับการทำงานทั่วไป เช่น การเลือกและตรวจสอบเอลิเมนต์ DOM การค้นหาออบเจ็กต์ การแสดงข้อมูลในรูปแบบที่อ่านได้ การหยุดและการเริ่มเครื่องมือสร้างโปรไฟล์ การตรวจสอบเหตุการณ์ DOM และการเรียกใช้ฟังก์ชัน และอื่นๆ
หากกำลังมองหา console.log()
, console.error()
และฟังก์ชัน console.*
อื่นๆ อยู่ ดูข้อมูลอ้างอิง API ของคอนโซล
$_
$_
จะแสดงผลค่าของนิพจน์ที่ได้รับการประเมินล่าสุด
ในตัวอย่างต่อไปนี้จะประเมินนิพจน์อย่างง่าย (2 + 2
) จากนั้นระบบจะประเมินพร็อพเพอร์ตี้ $_
ซึ่งมีค่าเหมือนกันดังนี้
ในตัวอย่างถัดไป นิพจน์ที่ประเมินจะประกอบด้วยอาร์เรย์ของชื่อในขั้นต้น กำลังประเมิน $_.length
เพื่อหาความยาวของอาร์เรย์ ค่าที่เก็บไว้ใน $_
จะเปลี่ยนไปเป็นนิพจน์ที่ประเมินล่าสุด 4:
0 - 120 บาท
คำสั่ง $0
, $1
, $2
, $3
และ $4
ทำงานเป็นข้อมูลอ้างอิงในอดีตสำหรับองค์ประกอบ DOM 5 รายการล่าสุดที่ตรวจสอบภายในแผงองค์ประกอบ หรือออบเจ็กต์ฮีป JavaScript 5 รายการสุดท้ายที่เลือกไว้ในแผงโปรไฟล์ $0
จะแสดงผลองค์ประกอบหรือออบเจ็กต์ JavaScript ที่เลือกล่าสุด $1
จะแสดงผลองค์ประกอบหรือออบเจ็กต์ JavaScript ที่เลือกล่าสุดเป็นลำดับที่ 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())
$$()
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)
ในผลลัพธ์ Console จะมีผลดังนี้
monitor(function)
เมื่อมีการเรียกฟังก์ชันที่ระบุ ระบบจะบันทึกข้อความไปยังคอนโซลซึ่งระบุชื่อฟังก์ชันพร้อมกับอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันเมื่อมีการเรียกใช้ฟังก์ชัน
function sum(x, y) {
return x + y;
}
monitor(sum);
ใช้ unmonitor(function)
เพื่อหยุดการตรวจสอบ
monitorEvents(object [, events])
เมื่อเหตุการณ์ใดเหตุการณ์หนึ่งเกิดขึ้นในออบเจ็กต์ที่ระบุ ระบบจะบันทึกออบเจ็กต์เหตุการณ์ไปยังคอนโซล คุณระบุเหตุการณ์เดียวที่จะตรวจสอบ อาร์เรย์ของเหตุการณ์ หรือ "ประเภท" เหตุการณ์ทั่วไป 1 เหตุการณ์ที่แมปกับคอลเล็กชันเหตุการณ์ที่กําหนดไว้ล่วงหน้าได้ ดูตัวอย่างด้านล่าง
การตั้งค่าต่อไปนี้จะตรวจสอบเหตุการณ์การปรับขนาดทั้งหมดในออบเจ็กต์หน้าต่าง
monitorEvents(window, "resize");
ตัวอย่างต่อไปนี้กำหนดอาร์เรย์เพื่อตรวจสอบทั้งเหตุการณ์ "resize" และ "scroll" ในออบเจ็กต์หน้าต่าง
monitorEvents(window, ["resize", "scroll"])
นอกจากนี้ คุณยังระบุ "ประเภท" เหตุการณ์ที่มีอยู่ได้ ซึ่งเป็นสตริงที่แมปกับชุดเหตุการณ์ที่กำหนดไว้ล่วงหน้า ตารางด้านล่างแสดงประเภทเหตุการณ์ที่ใช้ได้และการแมปเหตุการณ์ที่เกี่ยวข้อง
ประเภทเหตุการณ์และเหตุการณ์ที่แมปที่เกี่ยวข้อง | |
---|---|
หนู | "เมาส์โอเวอร์", "เมาส์โอเวอร์", "คลิก", "dblclick", "mousemove", "เมาส์โอเวอร์", "เมาส์เอาต์", "เมาส์วีล" |
แป้น | "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")
ผลลัพธ์ในแทร็กประสิทธิภาพ > หลัก ให้ทำดังนี้
แทร็กหลัก" width="800" height="606">
นอกจากนี้ โปรไฟล์ยังฝังซ้อนกันได้ ตัวอย่างเช่น การเลือกระบบจะทำงานตามลำดับต่อไปนี้
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(ข้อมูล [, คอลัมน์])
บันทึกข้อมูลออบเจ็กต์ด้วยการจัดรูปแบบตารางโดยส่งผ่านออบเจ็กต์ข้อมูลด้วยส่วนหัวคอลัมน์ที่ไม่บังคับ
นี่คือทางลัดสำหรับ console.table()
ตัวอย่างเช่น หากต้องการแสดงรายการชื่อโดยใช้ตารางในคอนโซล คุณจะต้องทำดังนี้
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(ฟังก์ชัน)
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);