ไม่มีใครเขียนโค้ดถูกทุกครั้งหรอก ถ้าเราเป็นมนุษย์ ไม่ช้าก็เร็วต้องพลาดบ้างแน่นอน เว้นเสียแต่ว่าเราเป็นหุ่นยนต์
ปัญหาคือ เวลา JavaScript เกิด error เบราว์เซอร์จะไม่แสดงข้อความบนหน้าเว็บให้ผู้ใช้เห็น เราจึงอาจรู้แค่ว่าหน้าเว็บไม่ทำงาน แต่ยังไม่รู้ว่าพังตรงไหน และจะแก้อย่างไร
เบราว์เซอร์จึงมีเครื่องมือนักพัฒนา (developer tools) ติดมาให้ เครื่องมือนี้ช่วยดู error ตรวจสอบการทำงานของสคริปต์ และหาข้อมูลที่จำเป็นตอนดีบัก
นักพัฒนาส่วนใหญ่นิยมใช้ Chrome หรือ Firefox เพราะเครื่องมือนักพัฒนาของสองเบราว์เซอร์นี้มีความสามารถค่อนข้างครบ เบราว์เซอร์อื่นก็มีเครื่องมือแบบเดียวกัน และบางตัวมีความสามารถเฉพาะที่น่าสนใจ แต่โดยมากจะตาม Chrome กับ Firefox อยู่เล็กน้อย หลายคนจึงมีเบราว์เซอร์หลักไว้ใช้ตอนพัฒนา แล้วค่อยเปิดเบราว์เซอร์อื่นเมื่อต้องตรวจปัญหาที่เกิดเฉพาะกับเบราว์เซอร์นั้น
เครื่องมือนักพัฒนาทำอะไรได้เยอะมาก แต่ตอนนี้เราจะเริ่มจากเรื่องที่จำเป็นก่อน ได้แก่ เปิดเครื่องมือ ดู error และลองรันคำสั่ง JavaScript
ลองเปิดหน้า bug.html
หน้านี้มี error ซ่อนอยู่ในโค้ด JavaScript ผู้ใช้ทั่วไปจะมองไม่เห็นว่าเกิดอะไรขึ้น เราลองเปิดเครื่องมือนักพัฒนาเพื่อหาต้นตอกัน
กด key:F12 หรือถ้าใช้ Mac ให้กด key:Cmd+Opt+J
เครื่องมือนักพัฒนาจะเปิดขึ้นมาที่แผง Console หน้าตาประมาณนี้:
หน้าตาอาจต่างจากภาพเล็กน้อยตามเวอร์ชันของ Chrome แต่ส่วนสำคัญยังคล้ายเดิม
- ข้อความสีแดงคือ error ในตัวอย่างนี้ สคริปต์พยายามรันคำสั่งชื่อ
lalalaซึ่งไม่มีอยู่จริง - ทางขวามีลิงก์
bug.html:12บอกชื่อไฟล์และบรรทัดที่เกิด error คลิกลิงก์นี้เพื่อเปิดดูโค้ดตรงจุดนั้นได้
ใต้ข้อความ error จะเห็นเครื่องหมาย > สีฟ้า ตรงนี้คือบรรทัดคำสั่ง เราสามารถพิมพ์ JavaScript ลงไป แล้วกด key:Enter เพื่อรันได้ทันที
ตอนนี้เราดู error เป็นแล้ว แค่นี้ก็เพียงพอสำหรับเริ่มเขียน JavaScript ส่วนวิธีดีบักแบบละเอียด เราจะกลับมาเรียนกันในบท info:debugging-chrome
ตามปกติ เมื่อพิมพ์โค้ดหนึ่งบรรทัดในคอนโซลแล้วกด `key:Enter` เบราว์เซอร์จะรันโค้ดทันที
ถ้าต้องการขึ้นบรรทัดใหม่โดยยังไม่รัน ให้กด `key:Shift+Enter` แบบนี้เราก็พิมพ์โค้ดยาวหลายบรรทัดในคอนโซลได้
เบราว์เซอร์ส่วนใหญ่เปิดเครื่องมือนักพัฒนาได้ด้วย key:F12
หน้าตาและวิธีใช้คล้ายกัน เมื่อใช้ของเบราว์เซอร์หนึ่งเป็นแล้ว เช่น เริ่มฝึกจาก Chrome การสลับไปใช้ของเบราว์เซอร์อื่นก็ไม่ยาก
Safari เป็นเบราว์เซอร์สำหรับ Mac และไม่มีใน Windows หรือ Linux วิธีเปิดคอนโซลจะต่างจากเบราว์เซอร์อื่นเล็กน้อย เพราะต้องเปิดเมนู Develop ก่อน
เปิด Settings แล้วไปที่ Advanced จากนั้นทำเครื่องหมายในช่องด้านล่าง:
ทีนี้ใช้ key:Cmd+Opt+C เพื่อเปิดหรือปิดคอนโซลได้แล้ว ที่แถบเมนูด้านบนจะมีเมนู Develop เพิ่มขึ้นมาด้วย ภายในมีคำสั่งและตัวเลือกสำหรับนักพัฒนาอีกหลายอย่าง
- เครื่องมือนักพัฒนาช่วยให้เราดู error รันคำสั่ง ตรวจค่าตัวแปร และสำรวจการทำงานของหน้าเว็บได้อีกหลายอย่าง
- เบราว์เซอร์ส่วนใหญ่บน Windows เปิดเครื่องมือนักพัฒนาได้ด้วย
key:F12ส่วน Chrome บน Mac ใช้key:Cmd+Opt+Jและ Safari ใช้key:Cmd+Opt+Cหลังจากเปิดเมนู Develop แล้ว
เครื่องมือพร้อมแล้ว บทถัดไปเราจะเริ่มเขียน JavaScript กัน