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
อ้างอิงถึง
องค์ประกอบที่เลือกไว้ ขณะที่ $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);
}
<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()
จะล้างประวัติการเข้าชมในคอนโซล
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 ของออบเจ็กต์ที่ระบุ ตามที่เห็นในแผงElements
เมธอดนี้เทียบเท่ากับเมธอด console.dirxml()
inspect(object/function)
inspect(object/function)
จะเปิดและเลือกองค์ประกอบหรือออบเจ็กต์ที่ระบุใน
แผง: แผงElementsสำหรับองค์ประกอบ DOM หรือแผงโปรไฟล์สำหรับออบเจ็กต์ฮีปของ JavaScript
ตัวอย่างต่อไปนี้จะเปิด document.body
ในแผงElements
inspect(document.body);
เมื่อส่งฟังก์ชันเพื่อตรวจสอบ ฟังก์ชันดังกล่าวจะเปิดเอกสารในแผงแหล่งที่มาให้คุณ เพื่อตรวจสอบ
getEventListeners(object)
getEventListeners(object)
จะแสดงผล Listener เหตุการณ์ที่ลงทะเบียนไว้ในออบเจ็กต์ที่ระบุ
ค่าผลลัพธ์คือออบเจ็กต์ที่มีอาร์เรย์สำหรับเหตุการณ์ที่ลงทะเบียนแต่ละประเภท (click
หรือ
keydown
) สมาชิกของแต่ละอาร์เรย์คือออบเจ็กต์ที่อธิบาย Listener ที่ลงทะเบียน
สำหรับแต่ละประเภท ตัวอย่างเช่น รายการ Listener เหตุการณ์ทั้งหมดที่ลงทะเบียนในเอกสาร
ออบเจ็กต์:
getEventListeners(document);
หากมีการลงทะเบียน Listener มากกว่า 1 รายการในออบเจ็กต์ที่ระบุ อาร์เรย์จะมีสมาชิก
สำหรับผู้ฟังแต่ละคน ในตัวอย่างต่อไปนี้ มี Listener เหตุการณ์ 2 รายการที่ลงทะเบียนใน
องค์ประกอบของเอกสารสำหรับเหตุการณ์ click
:
คุณขยายแต่ละออบเจ็กต์เหล่านี้เพิ่มเติมเพื่อสำรวจพร็อพเพอร์ตี้ได้
ดูข้อมูลเพิ่มเติมได้ที่ตรวจสอบคุณสมบัติของออบเจ็กต์
คีย์(ออบเจ็กต์)
keys(object)
จะแสดงผลอาร์เรย์ที่มีชื่อพร็อพเพอร์ตี้ที่เป็นของที่ระบุ
ออบเจ็กต์ หากต้องการรับค่าเชื่อมโยงของพร็อพเพอร์ตี้เดียวกัน ให้ใช้ values()
ตัวอย่างเช่น สมมติว่าแอปพลิเคชันของคุณกำหนดออบเจ็กต์ต่อไปนี้
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
สมมติว่ามีการกำหนด player
ในเนมสเปซส่วนกลาง (เพื่อความง่าย) ให้พิมพ์ keys(player)
และ
values(player)
ในคอนโซลจะได้ผลลัพธ์ต่อไปนี้
หน้าจอ(ฟังก์ชัน)
เมื่อมีการเรียกฟังก์ชันที่ระบุ ข้อความจะถูกบันทึกลงในคอนโซลที่ระบุ ชื่อฟังก์ชันพร้อมด้วยอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันเมื่อมีการเรียกใช้
function sum(x, y) {
return x + y;
}
monitor(sum);
ใช้ 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")
ให้ผลลัพธ์ในประสิทธิภาพ > แทร็กหลัก:
และสามารถซ้อนโปรไฟล์ได้ด้วย ตัวอย่างเช่น สิ่งนี้จะใช้ตามลำดับใดก็ได้:
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);
นอกจากนี้ คุณยังเลือกหยุดตรวจสอบเหตุการณ์ที่เฉพาะเจาะจงในออบเจ็กต์ได้ด้วย ตัวอย่างเช่น URL ต่อไปนี้ โค้ดจะเริ่มตรวจสอบเหตุการณ์เมาส์ทั้งหมดในองค์ประกอบที่เลือกในปัจจุบัน จากนั้นจะหยุดการตรวจสอบ "mousemove" เหตุการณ์ (อาจเพื่อลดเสียงรบกวนในเอาต์พุตของคอนโซล):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
ค่า(ออบเจ็กต์)
values(object)
จะแสดงผลอาร์เรย์ที่มีค่าของพร็อพเพอร์ตี้ทั้งหมดที่เป็นของค่าที่ระบุ
ออบเจ็กต์
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);