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

Kayce Basques

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

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

ภาพรวม

คอนโซลคือ REPL ซึ่งย่อมาจาก Read, Assign, Print และ Loop โดยจะอ่าน JavaScript ที่คุณพิมพ์ลงไป จะประเมินโค้ดของคุณ พิมพ์ผลลัพธ์ของ 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 ขั้นตอนของ REPL: อ่าน ประเมิน พิมพ์ วนซ้ำ หลังจากประเมินโค้ดแล้ว การตอบกลับจะพิมพ์ผลลัพธ์ของนิพจน์ ดังนั้น "Hello, Console!" จะต้องเป็นผลมาจากการประเมิน document.getElementById('hello').textContent = 'Hello, Console!'

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

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

1. พิมพ์ 5 + 15 ในคอนโซล ผลลัพธ์ 20 จะปรากฏใต้นิพจน์ (เว้นแต่นิพจน์จะใช้เวลาในการประเมินมากเกินไป)
2. กด Enter เพื่อประเมินนิพจน์ Console พิมพ์ ผลลัพธ์ของนิพจน์ที่อยู่ด้านล่างโค้ด รูปที่ 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 สำหรับการโต้ตอบ Google Analytics

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

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

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

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