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