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

Kayce Basques

Twitter GitHub กลิทช์

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

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

ภาพรวม

คอนโซลคือการตอบกลับ ซึ่งย่อมาจาก Read, assess, 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 หน้าตาของ Console หลังประเมินนิพจน์ข้างต้น

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

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

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

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

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

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

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

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

   add(25);
   

   

   รูปที่ 4 หน้าตาของ Console หลังประเมินนิพจน์ข้างต้น

   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 เพื่อสำรวจฟังก์ชันอำนวยความสะดวกทั้งหมด