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

Kayce Basques

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

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

ภาพรวม

Console คือ REPL ซึ่งย่อมาจาก Read, Evaluate, 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!' ใน Console แล้ว กด Enter เพื่อประเมินนิพจน์ สังเกตว่าข้อความภายในปุ่มมีการเปลี่ยนแปลง

   

   รูปที่ 3 ลักษณะของ Console หลังจากประเมินนิพจน์ด้านบน

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

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

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

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

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

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

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

   add(25);
   

   

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

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

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

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

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

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

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

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

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

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