การดีบักเป็นวิธีการลบข้อบกพร่องอย่างเป็นระบบ ทุกอย่างเริ่มต้นด้วยการดำเนินการกรณีทดสอบ เมื่อใดก็ตามที่มีการดำเนินการกรณีทดสอบ ผลลัพธ์จริงจะถูกเปรียบเทียบกับผลลัพธ์ที่คาดหวัง หากไม่มีความสอดคล้องกันระหว่างผลลัพธ์จริงและผลลัพธ์ที่คาดหวัง การวิเคราะห์สาเหตุหลักจะเสร็จสิ้นและทำการทดสอบเพิ่มเติม เช่น การทดสอบการถดถอย เพื่อให้แน่ใจว่าผลลัพธ์เป็นไปตามเส้นที่คาดไว้
ในการออกแบบเว็บเพจแบบสแตติก HTML ถูกใช้อย่างกว้างขวาง ในการพัฒนาแอปพลิเคชันบนเว็บแบบไดนามิก ควรใช้ JavaScript ภาษาสคริปต์ของเว็บ ในการทำให้โค้ดไม่มีข้อบกพร่อง โปรแกรมเมอร์ต้องอาศัยเทคนิคการดีบักมากมาย เป็นวิธีที่ยอดเยี่ยมในการป้องกันข้อผิดพลาดและข้อยกเว้น อย่างไรก็ตาม JavaScript ไม่ได้มีฟังก์ชันการดีบักที่ยอดเยี่ยม โชคดีที่การดีบักบรรทัดของโค้ดที่เขียนด้วย JavaScript โดยใช้ Firebug ซึ่งเป็นโปรแกรมดีบั๊กบนเว็บเบราว์เซอร์นั้นทำได้ง่าย
ให้ฉันแนะนำคุณเกี่ยวกับศัพท์แสงทางเทคนิค ต่อไปนี้เป็นประโยคที่ชาญฉลาดบางส่วนเกี่ยวกับองค์ประกอบของโปรแกรมแก้ไขจุดบกพร่อง Firebug:
- JSEditor − JSEditor เป็นเพียงตัวแก้ไข JavaScript สำหรับเจตนาและวัตถุประสงค์ทั้งหมด JSEditor อนุญาตให้คุณดีบักโค้ด JavaScript โดยใช้ "Break on All Errors" สิ่งที่ผู้ใช้ต้องทำคือเลือกตัวเลือกนี้เพื่อหยุดการทำงานของสคริปต์ชั่วคราว
- แท็บสคริปต์ − คอนโซลเป็นแท็บแรกที่แสดงบนบานหน้าต่างของดีบักเกอร์ Firebug HTML และ CSS เป็นแท็บที่สองและสามที่มีอยู่ในบานหน้าต่าง แท็บสคริปต์เป็นที่สี่ แผงสคริปต์แบ่งออกเป็นสองแผงย่อย - แผงด้านซ้ายเป็นตัวแก้ไข JavaScript แผงทางด้านขวาประกอบด้วยแผงย่อย 2 แผง ได้แก่ Watch และ Breakpoint
- JSFileSelector − JSFileSelector แสดงรายการไฟล์ JavaScript ทั้งหมดที่อยู่ภายใต้ขอบเขตของหน้าของคุณ
- เบรกพอยต์ − การดำเนินการ JavaScript จะหยุดที่จุดพัก สามารถพูดได้อย่างยุติธรรมว่ามีจุดพักสามประเภทใน Firebug - Static, Conditional และ Dynamic ในการตั้งค่าจุดพักแบบคงที่ ให้คลิกบรรทัดโค้ดที่ต้องการในแผงสคริปต์ ตามชื่อที่แนะนำ ควรตั้งค่าเบรกพอยต์แบบมีเงื่อนไขตามเงื่อนไข ในการตั้งค่าเบรกพอยต์ตามชื่อฟังก์ชัน คุณสามารถฝากเงินบนเบรกพอยต์แบบไดนามิกได้ มีบางอย่างที่น่าสนใจสำหรับเบรกพอยต์แบบไดนามิก- สามารถตั้งค่าได้จากบรรทัดคำสั่ง นอกจากนี้ ยังสามารถตั้งค่าได้โดยใช้สองฟังก์ชันที่นิยมใช้ ได้แก่ ดีบักและแก้จุดบกพร่อง
- รายการเบรกพอยต์ − เบรกพอยต์ทั้งหมดจะแสดงในแผงควบคุม คุณสามารถลบเบรกพอยต์ที่ไม่จำเป็นออกได้
- หน้าต่างเฝ้าดู − 'Watch Window' เป็นคำที่คุ้นเคยสำหรับผู้ที่คุ้นเคยกับ Microsoft Visual Studio เป็นอย่างดี อย่างไรก็ตาม การทำความเข้าใจความแตกต่างที่ละเอียดกว่าระหว่าง Watch Window of Firebug และ Microsoft Visual Studio จะสร้างโลกแห่งความดี Watch Window of Firebug จะแสดงค่าทั้งหมดของตัวแปรที่มีอยู่เป็นรายการ วิบัติ! ค่าของตัวแปรที่อยู่ในขอบเขตจะแสดงเท่านั้น ในทางกลับกัน Watch Window ของ Microsoft Visual Studio จะแสดงค่าของตัวแปรที่เลือก
วิธีการติดตั้งโปรแกรมเสริม Firebug
- เปิดเบราว์เซอร์ Mozilla Firefox ที่มุมขวาบนของหน้าต่าง คุณจะพบ เปิดเมนู
- คลิก เปิดเมนู และคลิก ส่วนเสริม หน้าต่างใหม่จะปรากฏขึ้น
- ในช่องค้นหา ให้พิมพ์ Firebug แล้วกดปุ่ม Enter แป้นของแป้นพิมพ์
- Firebug ส่วนเสริมปรากฏขึ้น คลิก ติดตั้ง .
Firebug ถูกเพิ่มในเบราว์เซอร์ Firefox แล้ว
วิธีการดีบักโค้ด Javascript โดยใช้ FireBug
ต่อไปนี้เป็นขั้นตอนง่าย ๆ 8 ขั้นตอนที่ให้คุณดีบักโค้ด JavaScript ใน Firefox โดยใช้ FireBug:
- เขียนโค้ด JavaScript ของคุณในไฟล์แผ่นจดบันทึก บันทึกด้วยนามสกุล .htm เปิดไฟล์ .htm นี้ในเบราว์เซอร์ Firefox เปิดคอนโซลของดีบักเกอร์ Firebug โดยไม่ต้องคิดอะไรมาก
- ตั้งค่าจุดพักแบบคงที่บนบรรทัดโค้ดที่ต้องการ บนแผงด้านขวาของแท็บสคริปต์ คุณสามารถดูบรรทัดของโค้ดที่ได้รับมอบหมายเบรกพอยต์แบบคงที่ได้
- รันโค้ดทีละบรรทัดโดยใช้ปุ่ม "ก้าวข้าม" ปุ่มนี้มีอยู่ในแถบเครื่องมือ Firebug นอกจากปุ่ม "ก้าวข้าม" แล้ว คุณยังเห็นปุ่มอื่นๆ อีกสามปุ่ม ได้แก่ ดำเนินการต่อ ก้าวเข้าและก้าวออก เมื่อต้องการเรียกใช้สคริปต์ต่อเมื่อพบเบรกพอยต์ ให้คลิก ดำเนินการต่อ อีกวิธีหนึ่งคือ คุณสามารถกดปุ่ม F8 เมื่อต้องการข้ามการเรียกใช้ฟังก์ชันเฉพาะ ให้คลิก ก้าวข้าม คุณสามารถกดปุ่ม F10 แทนการดำเนินการอื่นได้ ในการก้าวเข้าสู่เนื้อหาของฟังก์ชันเฉพาะ ให้คลิก ก้าวเข้าสู่ คุณสามารถกดปุ่ม F11 แทนการดำเนินการอื่นได้ หากต้องการให้สคริปต์ทำงานต่อและหยุดที่เบรกพอยต์ถัดไป ให้คลิกออกจากตำแหน่ง
- ดูค่าที่แสดงบนหน้าต่างดูอย่างระมัดระวัง
- ทำสิ่งที่จำเป็น ระบุจุดบกพร่องและแก้ไขจุดบกพร่อง
- โหลดหน้านี้ซ้ำ โดยคลิกปุ่มโหลดซ้ำของ Firefox อีกวิธีหนึ่งคือกดคีย์ผสม - Ctrl+R
- ค่าของตัวแปรส่วนใหญ่จะแสดงบนหน้าต่างดู อย่างไรก็ตาม ค่าของตัวแปรหนึ่งหรือสองตัวแปรอาจหายไป ในกรณีดังกล่าว โปรแกรมแก้ไขข้อบกพร่องที่ชาญฉลาดรับรองประสิทธิภาพของ CommandLine API หากต้องการเพิ่มเบรกพอยต์ในบรรทัดแรกของฟังก์ชันเฉพาะ ให้ใช้ debug (fn) หากต้องการลบเบรกพอยต์ที่มีอยู่ในบรรทัดแรกของฟังก์ชันเฉพาะ ให้ใช้ undebug(fu)
- หลังจากแก้ไขข้อผิดพลาดแล้ว ให้รันโค้ดอีกครั้ง หากมีข้อบกพร่อง ให้ดีบักโค้ดโดยทำตาม 7 ขั้นตอนข้างต้น บันทึกไฟล์และดูตัวอย่างไฟล์ใน Firefox
โปรแกรมเมอร์สามารถแก้ไขข้อบกพร่องฝันร้ายที่เลวร้ายที่สุดได้ด้วยการใช้ประโยชน์จากประสิทธิภาพของ Firebug ด้วย Firebug การดีบักกลายเป็นเรื่องง่าย
