เรียกใช้ JavaScript ในคอนโซล

Kayce Basques

บทแนะนำแบบอินเทอร์แอกทีฟนี้แสดงวิธีเรียกใช้ JavaScript ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โปรดดูวิธีบันทึกข้อความไปยังคอนโซล เริ่มต้นใช้งานข้อความการบันทึก ดูเริ่มต้นใช้งาน การดีบัก JavaScript เพื่อเรียนรู้วิธีหยุดโค้ด JavaScript ชั่วคราวและดำเนินการทีละบรรทัด

รูปที่ 1 คอนโซล

ภาพรวม

คอนโซลคือ REPL ซึ่งย่อมาจาก Read, Assign, Print และ Loop โดยจะอ่าน JavaScript ที่คุณพิมพ์ลงไป ประเมินโค้ด พิมพ์ผลลัพธ์ของนิพจน์ จากนั้นวนกลับไปที่ขั้นตอนแรก

ตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ

บทแนะนำนี้ออกแบบมาเพื่อให้คุณเปิดการสาธิตและลองเวิร์กโฟลว์ทั้งหมดด้วยตัวเอง เมื่อคุณทำตามไปพร้อมๆ กันจริงๆ ก็มีแนวโน้มมากขึ้นที่คุณจะต้องจำลำดับการทำงานได้ภายหลัง

1. กด Command+Option+J (Mac) หรือ Control+Shift+J (Windows, Linux, ChromeOS) เพื่อเปิดคอนโซลในหน้านี้โดยตรง

   

   รูปที่ 2 บทแนะนำนี้ทางด้านซ้าย และเครื่องมือสำหรับนักพัฒนาเว็บอยู่ทางด้านขวา

ดูและเปลี่ยน JavaScript หรือ DOM ของหน้าเว็บ

เมื่อสร้างหรือแก้ไขข้อบกพร่องของหน้า การเรียกใช้คำสั่งในคอนโซลอาจเปลี่ยนแปลงลักษณะหรือการเรียกใช้หน้าเว็บ

1. สังเกตข้อความบนปุ่มด้านล่าง

   สวัสดีชาวโลก

2. พิมพ์ document.getElementById('hello').textContent = 'Hello, Console!' ในคอนโซล แล้วกด Enter เพื่อประเมินนิพจน์ สังเกตว่าข้อความภายในปุ่มมีการเปลี่ยนแปลง

   

   รูปที่ 3 คอนโซลจะดูแลอย่างไรหลังจากประเมินนิพจน์ข้างต้น

   คุณเห็น "Hello, Console!" ใต้โค้ดที่ประเมิน เรียกคืนการตอบกลับทั้ง 4 ขั้นตอน คือ อ่าน ประเมิน พิมพ์ วนซ้ำ หลังจากประเมินโค้ดแล้ว การตอบกลับจะพิมพ์ผลลัพธ์ของนิพจน์ ดังนั้น "Hello, Console!" จะต้องเป็นผลมาจากการประเมิน document.getElementById('hello').textContent = 'Hello, Console!'

เรียกใช้ JavaScript ที่กําหนดเองซึ่งไม่เกี่ยวข้องกับหน้าเว็บ

บางครั้งคุณแค่ต้องการพื้นที่จำลองโค้ดที่คุณสามารถทดสอบโค้ดได้ หรือลองใช้ฟีเจอร์ JavaScript ใหม่ๆ ที่คุณไม่คุ้นเคย Console เหมาะสำหรับการทดสอบประเภทนี้

1. พิมพ์ 5 + 15 ในคอนโซล ผลลัพธ์ 20 จะปรากฏใต้นิพจน์ของคุณ (เว้นแต่นิพจน์ใช้เวลาประเมินมากเกินไป)
2. กด Enter เพื่อประเมินนิพจน์ คอนโซลจะพิมพ์ผลลัพธ์ของนิพจน์ที่อยู่ใต้โค้ด รูปที่ 4 ด้านล่างแสดงให้เห็นวิธีที่ Console ควรดำเนินการหลังจากประเมินนิพจน์นี้

3. พิมพ์โค้ดต่อไปนี้ลงในคอนโซล ลองพิมพ์ทีละอักขระ แทนการคัดลอกแล้ววาง

   function add(a, b=20) {
     return a + b;
   }
   

   ดูกำหนดค่าเริ่มต้นสำหรับอาร์กิวเมนต์ฟังก์ชันหากไม่คุ้นเคยกับไวยากรณ์ b=20

4. ต่อไปให้เรียกใช้ฟังก์ชันที่คุณเพิ่งกำหนดไว้

   add(25);
   

   

   รูปที่ 4 คอนโซลจะดูแลอย่างไรหลังจากประเมินนิพจน์ข้างต้น

   add(25) ประเมินได้เป็น 45 เนื่องจากเมื่อมีการเรียกฟังก์ชัน add โดยไม่มีอาร์กิวเมนต์ที่ 2 bจะมีค่าเริ่มต้นเป็น 20

คุณจะไม่สามารถเรียกใช้โค้ดในเซสชันคอนโซลนี้จนกว่าฟังก์ชันของคุณจะกลับมา หากใช้เวลานานเกินไป คุณสามารถใช้ตัวจัดการงานเพื่อยกเลิกการคำนวณที่ใช้เวลามากได้ แต่จะทำให้หน้าปัจจุบันล้มเหลวและข้อมูลทั้งหมดที่คุณป้อนจะสูญหายไป

ขั้นตอนถัดไป

ดูหัวข้อเรียกใช้ JavaScript เพื่อสำรวจฟีเจอร์เพิ่มเติมที่เกี่ยวข้องกับการเรียกใช้ JavaScript ในคอนโซล

เครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณหยุดสคริปต์ชั่วคราวได้ในระหว่างการดำเนินการ ขณะที่หยุดชั่วคราว คุณสามารถใช้คอนโซลเพื่อดูและเปลี่ยน window หรือ DOM ของหน้าเว็บได้ในทันที ซึ่งช่วยให้เวิร์กโฟลว์การแก้ไขข้อบกพร่องมีประสิทธิภาพ โปรดดูเริ่มต้นใช้งานการแก้ไขข้อบกพร่อง JavaScript เพื่อดูบทแนะนำแบบอินเทอร์แอกทีฟ

นอกจากนี้ คอนโซลยังรองรับชุดตัวระบุรูปแบบด้วย โปรดดูรูปแบบและจัดรูปแบบข้อความในคอนโซลเพื่อดูวิธีการจัดรูปแบบและจัดรูปแบบข้อความในคอนโซลทั้งหมด

นอกจากนี้ คอนโซลยังมีชุดฟังก์ชันอำนวยความสะดวกที่ช่วยให้โต้ตอบกับหน้าเว็บได้ง่ายขึ้น เช่น

• คุณพิมพ์ $() แทนการพิมพ์ document.querySelector() เพื่อเลือกองค์ประกอบได้ ไวยากรณ์นี้ได้แรงบันดาลใจจาก jQuery แต่ที่จริงแล้วไม่ใช่ jQuery และเป็นชื่อแทนของ document.querySelector()
• debug(function) ตั้งค่าเบรกพอยท์ในบรรทัดแรกของฟังก์ชันนั้นอย่างมีประสิทธิภาพ
• keys(object) จะแสดงผลอาร์เรย์ที่มีคีย์ของออบเจ็กต์ที่ระบุ

โปรดดูหัวข้อข้อมูลอ้างอิงของ Console Utilities API เพื่อสำรวจฟังก์ชันอำนวยความสะดวกทั้งหมด