บทแนะนำแบบอินเทอร์แอกทีฟนี้แสดงวิธีเรียกใช้ JavaScript ในคอนโซล Chrome DevTools โปรดดูเริ่มต้นใช้งานการบันทึกข้อความเพื่อดูวิธีบันทึกข้อความไปยังคอนโซล ดูเริ่มต้นใช้งาน JavaScript สำหรับการแก้ไขข้อบกพร่องเพื่อเรียนรู้วิธีหยุดโค้ด JavaScript ชั่วคราวและเรียนรู้ทีละบรรทัด
รูปที่ 1 คอนโซล
ภาพรวม
คอนโซลคือการตอบกลับ ซึ่งย่อมาจาก Read, assess, Print และ Loop โปรแกรมจะอ่าน JavaScript ที่คุณพิมพ์ลงไป ประเมินโค้ด พิมพ์ผลลัพธ์ของนิพจน์ แล้วกลับไปยังขั้นตอนแรก
ตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ
บทแนะนำนี้ออกแบบมาเพื่อให้คุณสามารถเปิดการสาธิตและลองใช้เวิร์กโฟลว์ทั้งหมดด้วยตัวคุณเอง เมื่อคุณทำตามกระบวนการต่างๆ ด้วยตนเอง คุณมักจะจำเวิร์กโฟลว์ได้ในภายหลัง
กด Command+Option+J (Mac) หรือ Control+Shift+J (Windows, Linux, ChromeOS) เพื่อเปิดคอนโซลในหน้านี้
รูปที่ 2 บทแนะนำทางด้านซ้ายและเครื่องมือสำหรับนักพัฒนาเว็บทางด้านขวา
ดูและเปลี่ยนแปลง JavaScript หรือ DOM ของหน้า
เมื่อสร้างหรือแก้ไขข้อบกพร่องของหน้าเว็บ การเรียกใช้คำสั่งในคอนโซลมักจะมีประโยชน์เพื่อเปลี่ยนรูปลักษณ์ของหน้าหรือการทำงานของหน้า
สังเกตข้อความในปุ่มด้านล่าง
พิมพ์
document.getElementById('hello').textContent = 'Hello, Console!'
ในคอนโซล แล้วกด Enter เพื่อประเมินนิพจน์ สังเกตว่าข้อความภายในปุ่มเปลี่ยนแปลงไปอย่างไรรูปที่ 3 หน้าตาของ Console หลังประเมินนิพจน์ข้างต้น
คุณเห็น
"Hello, Console!"
ใต้โค้ดที่คุณประเมิน ทบทวน 4 ขั้นตอนของ "REPL" ได้แก่ อ่าน ประเมิน พิมพ์ และวนซ้ำ หลังจากประเมินโค้ดของคุณแล้ว REPL จะพิมพ์ผลลัพธ์ของนิพจน์ ดังนั้น"Hello, Console!"
ต้องเป็นผลลัพธ์ของการประเมินdocument.getElementById('hello').textContent = 'Hello, Console!'
เรียกใช้ JavaScript ที่กำหนดเองที่ไม่เกี่ยวข้องกับหน้าเว็บ
บางครั้งคุณอาจต้องการแค่พื้นที่สำหรับโค้ดที่คุณสามารถทดสอบโค้ดบางอย่าง หรือลองใช้คุณลักษณะ JavaScript ใหม่ๆ ที่คุณไม่คุ้นเคย ซึ่งเป็นที่ที่เหมาะที่สุดสำหรับการทดสอบประเภทนี้
- พิมพ์
5 + 15
ในคอนโซล ผลลัพธ์20
จะปรากฏใต้นิพจน์ของคุณ (เว้นแต่ว่านิพจน์จะใช้เวลาประเมินมากเกินไป) - กด
Enter
เพื่อประเมินนิพจน์ คอนโซลจะพิมพ์ผลลัพธ์ของนิพจน์ด้านล่างโค้ด รูปที่ 4 ด้านล่างแสดงให้เห็นว่าคอนโซลควรเป็นอย่างไรหลังจากประเมินนิพจน์นี้ พิมพ์รหัสต่อไปนี้ลงในคอนโซล ลองพิมพ์ทีละอักขระ แทนที่จะคัดลอกและวาง
function add(a, b=20) { return a + b; }
ดูกำหนดค่าเริ่มต้นสำหรับอาร์กิวเมนต์ของฟังก์ชันหากคุณไม่คุ้นเคยกับไวยากรณ์
b=20
ต่อไป ให้เรียกใช้ฟังก์ชันที่คุณเพิ่งกำหนด
add(25);
รูปที่ 4 หน้าตาของ Console หลังประเมินนิพจน์ข้างต้น
add(25)
ประเมินเป็น45
เนื่องจากเมื่อมีการเรียกฟังก์ชันadd
โดยไม่มีอาร์กิวเมนต์ที่ 2b
จะมีค่าเริ่มต้นเป็น20
คุณจะเรียกใช้โค้ดใดๆ ในเซสชันคอนโซลนี้ไม่ได้จนกว่าฟังก์ชันจะแสดงผล หากใช้เวลานานเกินไป คุณสามารถใช้ตัวจัดการงานเพื่อยกเลิกการคำนวณที่ใช้เวลานาน แต่จะทำให้หน้าปัจจุบันล้มเหลวและข้อมูลทั้งหมดที่คุณป้อนจะหายไป
ขั้นตอนถัดไป
ดูเรียกใช้ JavaScript เพื่อสำรวจฟีเจอร์เพิ่มเติมที่เกี่ยวข้องกับการเรียกใช้ JavaScript ในคอนโซล
เครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณหยุดสคริปต์ชั่วคราวในระหว่างการเรียกใช้ได้ ขณะที่หยุดชั่วคราว คุณสามารถใช้คอนโซลเพื่อดูและเปลี่ยน window
หรือ DOM
ของหน้าเว็บในเวลาที่เหมาะสม ซึ่งช่วยให้เวิร์กโฟลว์การแก้ไขข้อบกพร่องมีประสิทธิภาพ โปรดดูเริ่มต้นใช้งาน JavaScript การดีบักสำหรับบทแนะนำแบบอินเทอร์แอกทีฟ
คอนโซลยังรองรับชุดตัวระบุรูปแบบด้วย โปรดดูรูปแบบและจัดรูปแบบข้อความในคอนโซลเพื่อดูวิธีการทั้งหมดในการจัดรูปแบบและจัดรูปแบบข้อความในคอนโซล
นอกจากนี้ คอนโซลยังมีชุดฟังก์ชันความสะดวกที่ช่วยให้โต้ตอบกับหน้าเว็บได้ง่ายขึ้น เช่น
- คุณอาจพิมพ์
$()
แทนการพิมพ์document.querySelector()
เพื่อเลือกองค์ประกอบ ไวยากรณ์นี้ได้แรงบันดาลใจมาจาก jQuery แต่จริงๆ แล้วไม่ใช่ jQuery ซึ่งเป็นเพียงชื่อแทนสำหรับdocument.querySelector()
debug(function)
ตั้งค่าเบรกพอยท์ที่บรรทัดแรกของฟังก์ชันนั้นอย่างมีประสิทธิภาพkeys(object)
แสดงผลอาร์เรย์ที่มีคีย์ของออบเจ็กต์ที่ระบุ
โปรดดูข้อมูลอ้างอิงของ Console Utilities API เพื่อสำรวจฟังก์ชันอำนวยความสะดวกทั้งหมด