รหัสมีแนวโน้มที่จะเกิดข้อผิดพลาด คุณค่อนข้างจะทำผิดพลาด… โอ้ ฉันกำลังพูดถึงอะไรอยู่? คุณจะทำผิดพลาด อย่างแน่นอน อย่างน้อยถ้าคุณเป็นมนุษย์ ไม่ใช่หุ่นยนต์
แต่ในเบราว์เซอร์ ผู้ใช้จะไม่เห็นข้อผิดพลาดตามค่าเริ่มต้น ดังนั้นหากมีอะไรผิดพลาดในสคริปต์ เราก็จะไม่เห็นว่ามีสิ่งใดเสียหายและไม่สามารถแก้ไขได้
หากต้องการดูข้อผิดพลาดและรับข้อมูลที่เป็นประโยชน์อื่นๆ เกี่ยวกับสคริปต์ เราได้ฝัง “เครื่องมือสำหรับนักพัฒนา” ไว้ในเบราว์เซอร์
นักพัฒนาส่วนใหญ่พึ่งพา Chrome หรือ Firefox ในการพัฒนาเนื่องจากเบราว์เซอร์เหล่านั้นมีเครื่องมือสำหรับนักพัฒนาที่ดีที่สุด เบราว์เซอร์อื่นๆ ยังมีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งบางครั้งก็มีคุณสมบัติพิเศษ แต่โดยปกติแล้วจะเล่น "ตามทัน" กับ Chrome หรือ Firefox ดังนั้นนักพัฒนาส่วนใหญ่จึงมีเบราว์เซอร์ "รายการโปรด" และเปลี่ยนไปใช้เบราว์เซอร์อื่นหากปัญหาเกิดขึ้นเฉพาะเบราว์เซอร์
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีศักยภาพ พวกเขามีคุณสมบัติมากมาย ในการเริ่มต้น เราจะเรียนรู้วิธีเปิด ดูข้อผิดพลาด และเรียกใช้คำสั่ง JavaScript
เปิดหน้า bug.html
มีข้อผิดพลาดในโค้ด JavaScript อยู่ มันถูกซ่อนไว้จากสายตาของผู้เข้าชมทั่วไป ดังนั้นเรามาเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อดูกันดีกว่า
กด F12 หรือหากคุณใช้ Mac ให้กด Cmd + Opt + J
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะเปิดบนแท็บคอนโซลตามค่าเริ่มต้น
มีลักษณะดังนี้:
รูปลักษณ์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะขึ้นอยู่กับเวอร์ชันของ Chrome มีการเปลี่ยนแปลงเป็นครั้งคราวแต่ควรจะคล้ายกัน
ที่นี่เราจะเห็นข้อความแสดงข้อผิดพลาดสีแดง ในกรณีนี้ สคริปต์มีคำสั่ง “lalala” ที่ไม่รู้จัก
ทางด้านขวาจะมีลิงก์ที่คลิกได้ไปยังแหล่งที่มา bug.html:12 พร้อมหมายเลขบรรทัดที่เกิดข้อผิดพลาด
ใต้ข้อความแสดงข้อผิดพลาดจะมีสัญลักษณ์ > สีน้ำเงิน มันทำเครื่องหมาย “บรรทัดคำสั่ง” ที่เราสามารถพิมพ์คำสั่ง JavaScript กด Enter เพื่อเรียกใช้
ตอนนี้เราเห็นข้อผิดพลาดแล้ว และนั่นก็เพียงพอแล้วสำหรับการเริ่มต้น เราจะกลับมาที่เครื่องมือสำหรับนักพัฒนาในภายหลัง และครอบคลุมการดีบักในเชิงลึกมากขึ้นในบท การดีบักในเบราว์เซอร์
อินพุตหลายบรรทัด
โดยปกติเมื่อเราใส่บรรทัดโค้ดลงในคอนโซลแล้วกด Enter ระบบ จะดำเนินการ
หากต้องการแทรกหลายบรรทัด ให้กด Shift + Enter วิธีนี้ทำให้สามารถป้อนโค้ด JavaScript ขนาดยาวได้
เบราว์เซอร์อื่นๆ ส่วนใหญ่ใช้ F12 เพื่อเปิดเครื่องมือสำหรับนักพัฒนา
รูปลักษณ์และความรู้สึกของพวกเขาค่อนข้างคล้ายกัน เมื่อคุณรู้วิธีใช้เครื่องมือเหล่านี้แล้ว (คุณสามารถเริ่มต้นด้วย Chrome ได้) คุณสามารถเปลี่ยนไปใช้เครื่องมืออื่นได้อย่างง่ายดาย
Safari (เบราว์เซอร์ Mac ไม่รองรับ Windows/Linux) มีความพิเศษเล็กน้อยที่นี่ เราจำเป็นต้องเปิดใช้งาน "เมนูพัฒนา" ก่อน
เปิดการตั้งค่าและไปที่บานหน้าต่าง "ขั้นสูง" มีช่องทำเครื่องหมายที่ด้านล่าง:
ตอนนี้ Cmd + Opt + C สามารถสลับคอนโซลได้ โปรดทราบว่ารายการเมนูด้านบนใหม่ชื่อ "พัฒนา" ได้ปรากฏขึ้นแล้ว มีคำสั่งและตัวเลือกมากมาย
เครื่องมือสำหรับนักพัฒนาช่วยให้เราเห็นข้อผิดพลาด รันคำสั่ง ตรวจสอบตัวแปร และอื่นๆ อีกมากมาย
สามารถเปิดได้ด้วย F12 สำหรับเบราว์เซอร์ส่วนใหญ่บน Windows Chrome สำหรับ Mac ต้องใช้ Cmd + Opt + J , Safari: Cmd + Opt + C (ต้องเปิดใช้งานก่อน)
ตอนนี้เรามีสภาพแวดล้อมพร้อมแล้ว ในส่วนถัดไป เราจะไปที่ JavaScript