คำนำ: รหัสการดีบักเป็นสิ่งที่ขาดไม่ได้สำหรับโปรแกรมเมอร์ใด ๆ ไม่ว่าคุณจะเป็นอาจารย์หรือสามเณรโปรแกรมการดีบักเป็นงานที่ขาดไม่ได้ โดยทั่วไปแล้วโปรแกรมการดีบักจะดำเนินการหลังจากเขียนโค้ดหรือเมื่อแก้ไขข้อบกพร่องในระหว่างการทดสอบ มันมักจะดีกว่าที่จะสะท้อนระดับของโปรแกรมเมอร์และความถูกต้องของการวิเคราะห์ปัญหาในระหว่างการดีบักรหัส ผู้เริ่มต้นหลายคนมักจะไม่ทราบถึงปัญหาเมื่อมองหาสาเหตุของข้อผิดพลาดใช้เวลามาก แต่ไม่สามารถแก้ไขข้อบกพร่องบางอย่างที่พิสูจน์ได้ในที่สุดก็ค่อนข้างง่าย การเรียนรู้ทักษะการดีบักที่หลากหลายจะได้ผลลัพธ์สองครั้งด้วยความพยายามครึ่งหนึ่งในการทำงาน ตัวอย่างเช่นการค้นหาปัญหาอย่างรวดเร็วลดความน่าจะเป็นของความล้มเหลวช่วยวิเคราะห์ข้อผิดพลาดเชิงตรรกะ ฯลฯ ในปัจจุบันวันนี้เมื่อการพัฒนาส่วนหน้าของอินเทอร์เน็ตมีความสำคัญมากขึ้นเรื่อย ๆ เป็นสิ่งสำคัญอย่างยิ่งในการลดต้นทุนการพัฒนาปรับปรุงประสิทธิภาพการทำงาน
บทความนี้จะอธิบายเทคนิคการดีบัก JS Front-end ต่างๆทีละคน บางทีคุณอาจจะเชี่ยวชาญพวกเขาดังนั้นเรามาตรวจสอบพวกเขาด้วยกัน อาจมีวิธีการที่คุณไม่เคยเห็นมาก่อน คุณอาจเรียนรู้ด้วยกัน บางทีคุณอาจไม่รู้วิธีการดีบัก ใช้โอกาสนี้เพื่อเติมเต็มช่องว่าง
1. Alert, arout debugging master
นั่นคือตอนที่อินเทอร์เน็ตเพิ่งเริ่มต้นและส่วนหน้าของหน้าเว็บส่วนใหญ่เกี่ยวกับการแสดงเนื้อหาและสคริปต์เบราว์เซอร์สามารถให้ฟังก์ชั่นเสริมที่ง่ายมากสำหรับหน้าเท่านั้น ในเวลานั้นเว็บเพจส่วนใหญ่ทำงานในเบราว์เซอร์ที่ถูกครอบงำโดย IE6 และฟังก์ชั่นการดีบักของ JS ยังคงอ่อนแอมากดังนั้นพวกเขาจึงสามารถดีบั๊กผ่านวิธีการแจ้งเตือนที่สร้างขึ้นในวัตถุหน้าต่าง ในเวลานั้นมันควรจะมีลักษณะเช่นนี้:
ควรสังเกตว่าเอฟเฟกต์ที่เห็นที่นี่ไม่ใช่เอฟเฟกต์ที่เห็นในเบราว์เซอร์ IE ในตอนนั้น แต่เอฟเฟกต์ในรุ่นที่สูงกว่าของ IE นอกจากนี้ดูเหมือนว่าจะไม่มีคอนโซลขั้นสูงดังกล่าวและการใช้การแจ้งเตือนก็อยู่ในรหัสหน้าจริง JS แม้ว่าวิธีการดีบักของการแจ้งเตือนนั้นเป็นแบบดั้งเดิม แต่ก็มีคุณค่าที่ลบไม่ออกในเวลานั้นและแม้กระทั่งทุกวันนี้ก็มีสถานที่ที่จะใช้
2. คอนโซล King Debugging รุ่นใหม่
เนื่องจาก JS สามารถทำสิ่งต่าง ๆ ได้มากขึ้นเรื่อย ๆ ในส่วนหน้าเว็บความรับผิดชอบก็ยิ่งใหญ่ขึ้นเรื่อย ๆ และสถานะก็มีความสำคัญมากขึ้นเรื่อย ๆ วิธีการดีบักการแจ้งเตือนแบบดั้งเดิมค่อยๆล้มเหลวในการตอบสนองสถานการณ์ต่าง ๆ ของการพัฒนาส่วนหน้า ยิ่งไปกว่านั้นข้อมูลการดีบักที่เกิดขึ้นโดยวิธีการดีบักการแจ้งเตือนนั้นไม่ได้สวยงามจริงๆและจะบล็อกเนื้อหาหน้าเว็บบางส่วนซึ่งไม่เป็นมิตร
ในทางกลับกันข้อมูลการดีบักของการแจ้งเตือนจะต้องเพิ่มลงในตรรกะของโปรแกรมเช่น "Alert (xxxxx)" เพื่อทำงานตามปกติและการแจ้งเตือนจะขัดขวางการแสดงผลอย่างต่อเนื่องของหน้า ซึ่งหมายความว่าหลังจากการดีบักของนักพัฒนาเสร็จสมบูรณ์เขาต้องล้างรหัสการดีบักเหล่านี้ด้วยตนเองซึ่งเป็นปัญหาจริง ๆ
ดังนั้นเบราว์เซอร์รุ่นใหม่ Firefox, Chrome และ IE ได้เปิดตัวคอนโซลการดีบัก JS อย่างต่อเนื่องสนับสนุนการใช้แบบฟอร์มคล้ายกับ "console.log (xxxx)" เพื่อพิมพ์ข้อมูลการดีบักบนคอนโซลโดยไม่ส่งผลโดยตรงต่อการแสดงหน้า ยกตัวอย่างเป็นตัวอย่างดูเหมือนว่า:
ตกลงลาก่อนที่จะได้รับการแจ้งเตือนอย่างน่าเกลียดกล่องป๊อปอัพ Rising Star นำโดย Chrome ได้ขยายคุณสมบัติที่หลากหลายไปสู่คอนโซลมากขึ้น:
คุณคิดว่ามันน่าพอใจหรือไม่? จินตนาการของทีมพัฒนา Chrome นั้นน่าชื่นชมจริงๆ:
โอเคฉันได้พูดออกไปอีกเล็กน้อย ในระยะสั้นการเกิดขึ้นของวัตถุคอนโซลในตัวบนคอนโซลและเบราว์เซอร์ได้นำความสะดวกสบายที่ยอดเยี่ยมมาสู่การพัฒนาและดีบัก
บางคนอาจถามว่ารหัสการดีบักนี้จำเป็นต้องได้รับการทำความสะอาดหลังจากการดีบักเสร็จสมบูรณ์หรือไม่?
เกี่ยวกับปัญหานี้หากคุณมีการตรวจสอบการดำรงอยู่ขั้นสูงก่อนที่จะใช้วัตถุคอนโซลมันจะไม่ทำให้เกิดความเสียหายต่อตรรกะทางธุรกิจโดยไม่ต้องลบ แน่นอนเพื่อให้แน่ใจว่ารหัสเรียบร้อยหลังจากการดีบักเสร็จสิ้นรหัสการดีบักเหล่านี้ที่ไม่เกี่ยวข้องกับตรรกะทางธุรกิจควรถูกลบให้มากที่สุด
3. JS Breakpoint Debugging
เบรกพอยต์ซึ่งเป็นหนึ่งในฟังก์ชั่นของดีบักเกอร์ช่วยให้การขัดจังหวะโปรแกรมถูกขัดจังหวะเมื่อจำเป็นซึ่งจะช่วยให้การวิเคราะห์ นอกจากนี้คุณยังสามารถตั้งค่าเบรกพอยต์ในการดีบักเดียว ครั้งต่อไปคุณจะต้องปล่อยให้โปรแกรมทำงานโดยอัตโนมัติไปยังตำแหน่งเบรกพอยต์ที่ตั้งไว้โดยอัตโนมัติและคุณสามารถขัดจังหวะได้ที่ตำแหน่งเบรกพอยต์ชุดสุดท้ายซึ่งช่วยอำนวยความสะดวกในการทำงานและประหยัดเวลาอย่างมาก -สารานุกรม Baidu
JS Breakpoint Debugging หมายถึงการเพิ่มจุดพักลงในรหัส JS ในเครื่องมือนักพัฒนาเบราว์เซอร์ทำให้การดำเนินการ JS หยุดในสถานที่เฉพาะซึ่งอำนวยความสะดวกให้กับนักพัฒนาในการวิเคราะห์และการประมวลผลเชิงตรรกะของกลุ่มรหัสที่นั่น เพื่อสังเกตผลของการดีบักเบรกพอยต์เราได้เตรียมรหัส JS ล่วงหน้า:
รหัสนั้นง่ายมากมันคือการกำหนดฟังก์ชันส่งผ่านในสองตัวเลขเพิ่มจำนวนเต็มแบบสุ่มที่ยุ่งเหยิงจากนั้นส่งคืนผลรวมของตัวเลขทั้งสอง นำเครื่องมือนักพัฒนาโครเมี่ยมมาเป็นตัวอย่างลองมาดูวิธีการพื้นฐานของการดีบัก Breakpoint JS
3.1. แหล่งที่มาเบรกพอยต์
ก่อนอื่นในรหัสทดสอบเราจะเห็นว่ารหัสควรทำงานตามปกติผ่านผลลัพธ์ผลลัพธ์ของคอนโซลในรูปด้านบน แต่ทำไมมันควรจะเป็น? เนื่องจากหมายเลขสุ่มถูกเพิ่มลงในฟังก์ชั่นผลลัพธ์สุดท้ายถูกต้องจริงหรือไม่? นี่คือการคาดเดาที่ไม่มีความหมาย แต่สมมติว่าฉันจะตรวจสอบตอนนี้: ตัวเลขสองตัวที่ผ่านในฟังก์ชั่นหมายเลขสุ่มเพิ่มและผลรวมสุดท้าย แล้วจะใช้งานได้อย่างไร?
วิธีที่ 1 วิธีที่พบมากที่สุดที่กล่าวถึงข้างต้นไม่ว่าจะใช้การแจ้งเตือนหรือคอนโซลเราสามารถตรวจสอบได้ด้วยวิธีนี้:
จากรูปด้านบนเราได้เพิ่มรหัสคอนโซลสามบรรทัดลงในรหัสเพื่อพิมพ์ตัวแปรข้อมูลที่เราใส่ใจ ในท้ายที่สุดเราสามารถตรวจสอบได้อย่างชัดเจนว่ากระบวนการคำนวณทั้งหมดเป็นเรื่องปกติหรือไม่จากนั้นเป็นไปตามข้อกำหนดการตรวจสอบที่กำหนดโดยคำถามของเราหรือไม่
วิธีที่ 2 และวิธีการที่ 1 มีข้อเสียที่ชัดเจนในกระบวนการตรวจสอบซึ่งเป็นรหัสซ้ำซ้อนจำนวนมาก จากนั้นมาดูกันว่าการใช้จุดพักสำหรับการตรวจสอบนั้นสะดวกกว่าหรือไม่ ก่อนอื่นดูวิธีเพิ่มจุดพักและเอฟเฟกต์อะไรหลังจากจุดพัก:
ดังที่แสดงในรูปกระบวนการของการเพิ่มจุดพักลงในรหัสชิ้นส่วนคือ "F12 (Ctrl + Shift + I) เปิดเครื่องมือการพัฒนา" - "เมนูคลิกแหล่งที่มา" - "ค้นหาไฟล์ที่เกี่ยวข้องในต้นไม้ซ้าย" - "คลิกคอลัมน์หมายเลขแถว" เมื่อมีการเพิ่มเบรกพอยต์ให้รีเฟรชหน้า JS จะหยุดที่ตำแหน่งเบรกพอยต์ ในส่วนต่อประสานแหล่งที่มาคุณจะเห็นตัวแปรและค่าทั้งหมดในขอบเขตปัจจุบัน เพียงตรวจสอบแต่ละค่าเพื่อให้ข้อกำหนดการตรวจสอบของเราเสร็จสมบูรณ์
ปัญหาอยู่ที่นี่ หากคุณระมัดระวังคุณจะพบว่าเมื่อรหัสของฉันมาถึงจุดพักค่าตัวแปร A และ B ที่แสดงได้รับการเพิ่ม เราไม่เห็น 10 และ 20 เริ่มต้นผ่านเมื่อเรียกฟังก์ชันผลรวม แล้วฉันควรทำอย่างไร? สิ่งนี้ต้องการให้คุณย้อนกลับไปและเรียนรู้ความรู้พื้นฐานเกี่ยวกับการดีบักเบรกพอยต์ หลังจากเปิดแผงแหล่งที่มาเราจะเห็นเนื้อหาต่อไปนี้ในอินเทอร์เฟซ เราติดตามแทร็กเมาส์เพื่อดูว่ามันหมายถึงอะไร:
จากซ้ายไปขวาฟังก์ชั่นที่แสดงโดยแต่ละไอคอนคือ:
PAUSE/RESUME SCRIPT EXECUTION: PAUSE/RESUME SCRIPT EXECUTION (การดำเนินการโปรแกรมหยุดที่จุดพักถัดไป)
ขั้นตอนการเรียกใช้ฟังก์ชันถัดไป: เรียกใช้การเรียกใช้ฟังก์ชันไปยังขั้นตอนถัดไป (ข้ามไปยังบรรทัดถัดไป)
ก้าวเข้าสู่การเรียกใช้ฟังก์ชันถัดไป: ป้อนฟังก์ชั่นปัจจุบัน
ก้าวออกจากฟังก์ชั่นปัจจุบัน: แยกฟังก์ชั่นการดำเนินการในปัจจุบัน
deactive/active breakpoints ทั้งหมด: ปิด/บนจุดพักทั้งหมด (ไม่ยกเลิก)
หยุดชั่วคราวในข้อยกเว้น: การตั้งค่าเบรกพอยต์อัตโนมัติสำหรับข้อยกเว้น
ณ จุดนี้คีย์ฟังก์ชั่นสำหรับการดีบักเบรกพอยต์ได้รับการแนะนำเกือบ ต่อไปเราสามารถดูที่รหัสโปรแกรมของเราทีละบรรทัดเพื่อดูการเปลี่ยนแปลงในแต่ละตัวแปรหลังจากแต่ละบรรทัดจะถูกดำเนินการดังที่แสดงในรูปด้านล่าง:
ดังที่ได้กล่าวไว้ข้างต้นเราสามารถเห็นกระบวนการทั้งหมดของตัวแปร A และ B จากค่าเริ่มต้นเพื่อเพิ่มค่าสุ่มตรงกลางจากนั้นในที่สุดก็คำนวณผลรวมและส่งออกผลลัพธ์สุดท้าย ไม่มีปัญหาในการทำข้อกำหนดการตรวจสอบของการตั้งค่าคำถามให้เสร็จสมบูรณ์
สำหรับปุ่มฟังก์ชั่นที่เหลือเราเปลี่ยนรหัสทดสอบของเราเล็กน้อยและใช้ไดอะแกรม GIF เพื่อแสดงให้เห็นถึงการใช้งานของพวกเขา:
สิ่งหนึ่งที่ควรทราบที่นี่คือฟังก์ชั่นของค่าตัวแปรการพิมพ์โดยตรงในพื้นที่รหัสเป็นคุณสมบัติใหม่ที่เพิ่มเข้ามาใน Chrome เวอร์ชันใหม่กว่า หากคุณยังคงใช้โครเมี่ยมรุ่นเก่าคุณอาจไม่สามารถดูข้อมูลตัวแปรได้โดยตรงภายใต้จุดพัก ในเวลานี้คุณสามารถย้ายเมาส์ไปยังชื่อตัวแปรและหยุดชั่วคราวในช่วงเวลาสั้น ๆ และค่าตัวแปรจะปรากฏขึ้น นอกจากนี้คุณยังสามารถเลือกชื่อตัวแปรด้วยเมาส์และคลิกขวาที่ "เพิ่มเพื่อดู" เพื่อดูในแผงนาฬิกา วิธีนี้ยังใช้กับนิพจน์ นอกจากนี้คุณยังสามารถเปลี่ยนไปใช้แผงคอนโซลที่จุดพักป้อนชื่อตัวแปรโดยตรงในคอนโซลและป้อนข้อมูลตัวแปร ส่วนนี้ค่อนข้างง่ายเมื่อพิจารณาความยาวของบทความและไม่ได้ทำรูปภาพและการสาธิต
3.2. เบรกพอยต์ดีบักเกอร์
จุดเบรกเกอร์ดีบักเกอร์ที่เรียกว่าฉันตั้งชื่อจริงและฉันไม่รู้วิธีพูดคำศัพท์มืออาชีพ โดยเฉพาะโดยการเพิ่ม "ดีบักเกอร์;" คำสั่งไปยังรหัสมันจะทำลายคะแนนโดยอัตโนมัติเมื่อรหัสดำเนินการคำสั่ง การดำเนินการถัดไปเกือบจะเหมือนกับการเพิ่มการดีบักเบรกพอยต์ในแผงแหล่งที่มา ความแตกต่างเพียงอย่างเดียวคือคำสั่งจะต้องถูกลบหลังจากการดีบัก
เนื่องจากวิธีเดียวกันของการตั้งค่าเบรกพอยต์นั้นแตกต่างกันฟังก์ชั่นจึงเหมือนกับการเพิ่มจุดพักลงในแผงแหล่งแหล่งที่มาทำไมวิธีนี้จึงยังมีอยู่? ฉันคิดว่าเหตุผลควรเป็นเช่นนี้: บางครั้งเราพบการโหลดแบบอะซิงโครนัสของชิ้นส่วน HTML (รวมถึงรหัส JS แบบฝัง) ในการพัฒนาและส่วนหนึ่งของรหัส JS นี้ไม่สามารถพบได้ในสายพันธุ์ต้นไม้แหล่งที่มาดังนั้นเราจึงไม่สามารถเพิ่มจุดพักในเครื่องมือพัฒนาได้โดยตรง ถ้าเราต้องการเพิ่มจุดพักลงในสคริปต์ที่โหลดแบบอะซิงโครนัส "ดีบักเกอร์;" จะทำงานในเวลานี้ มาดูเอฟเฟกต์โดยตรงผ่านแผนภาพ GIF:
4. การดีบัก Dom Breakpoint
Dom Breakpoint ตามชื่อแนะนำคือการเพิ่มจุดพักลงในองค์ประกอบ DOM เพื่อให้ได้จุดประสงค์ของการดีบัก ผลของการใช้จุดพักในการใช้งานจริงจะถูกนำไปใช้ใน JS Logic ในที่สุด ลองมาดูเอฟเฟกต์เฉพาะของแต่ละจุดพัก DOM
4.1. ทำลายการปรับเปลี่ยนทรีย่อยเมื่อโหนดลูกภายในเปลี่ยนโหนด (แบ่งการดัดแปลงทรีย่อย)
วันนี้เมื่อการพัฒนาส่วนหน้ามีความซับซ้อนมากขึ้นเรื่อย ๆ รหัส JS ส่วนหน้ากำลังซับซ้อนมากขึ้นเรื่อย ๆ และหน้าเว็บที่ดูเหมือนง่ายมักจะมาพร้อมกับรหัสขนาดใหญ่ของรหัส JS ซึ่งเกี่ยวข้องกับการดำเนินการหลายอย่างของการเพิ่มการลบและการปรับเปลี่ยนโหนด DOM เป็นเรื่องหลีกเลี่ยงไม่ได้ที่จะค้นหากลุ่มรหัสโดยตรงผ่านรหัส JS แต่เราสามารถค้นหาโหนด DOM ที่เกี่ยวข้องได้อย่างรวดเร็วผ่านแผงองค์ประกอบของเครื่องมือนักพัฒนา ในเวลานี้มันเป็นสิ่งสำคัญอย่างยิ่งในการค้นหาสคริปต์ผ่านจุดพัก DOM ลองมาดูการสาธิต GIF:
ตัวเลขด้านบนแสดงให้เห็นถึงผลกระทบของการเพิ่มการลบและการแลกเปลี่ยนการดำเนินการตามคำสั่งที่ก่อให้เกิดจุดพักสำหรับโหนดเด็ก UL (LI) แต่ควรสังเกตว่าการปรับเปลี่ยนแอตทริบิวต์และเนื้อหาของโหนดลูกจะไม่ทำให้เกิดการหยุดพัก
4.2. ทำลายการดัดแปลงแอตทริบิวต์
ในทางกลับกันเนื่องจากตรรกะทางธุรกิจของการประมวลผลส่วนหน้ามีความซับซ้อนมากขึ้นเรื่อย ๆ การพึ่งพาการจัดเก็บข้อมูลบางอย่างจะแข็งแกร่งขึ้นและแข็งแกร่งขึ้น การจัดเก็บข้อมูลชั่วคราวในคุณสมบัติ (กำหนดเอง) ของโหนด DOM เป็นวิธีที่ต้องการสำหรับนักพัฒนาในหลายกรณี โดยเฉพาะอย่างยิ่งหลังจากมาตรฐาน HTML5 ช่วยเพิ่มการสนับสนุนแอตทริบิวต์ที่กำหนดเอง (ตัวอย่างเช่น: ชุดข้อมูล, data-*ฯลฯ ) การตั้งค่าแอตทริบิวต์มากขึ้นเรื่อย ๆ ดังนั้นเครื่องมือนักพัฒนา Chrome ก็ให้การสนับสนุนการเปลี่ยนแปลงแอตทริบิวต์และเอฟเฟกต์ดังต่อไปนี้:
วิธีนี้ยังต้องสังเกตว่าการดำเนินการใด ๆ ในคุณสมบัติของโหนดเด็กจะไม่กระตุ้นจุดพักของโหนดเอง
4.3. ทำลายการถอดโหนด
การตั้งค่าเบรกพอยต์ DOM นี้ง่ายมากและวิธีการทริกเกอร์นั้นชัดเจนมาก - เมื่อลบโหนด ดังนั้นโดยปกติแล้วกรณีควรเป็นเมื่อดำเนินการคำสั่ง "parentNode.removeChild (ChildNode)" วิธีนี้ไม่ได้ใช้มากนัก
สิ่งที่เราแนะนำก่อนหน้านี้คือวิธีการดีบักที่เรามักใช้ในการพัฒนาทุกวัน พวกเขาสามารถจัดการกับปัญหาเกือบทั้งหมดในการพัฒนาประจำวันของเราเมื่อใช้อย่างถูกต้อง อย่างไรก็ตามเครื่องมือนักพัฒนายังคำนึงถึงสถานการณ์ที่มากขึ้นและให้วิธีการเบี่ยงเบนมากขึ้นดังแสดงในรูป:
5. เบรกพอยต์ XHR
การพัฒนาส่วนหน้าได้รับการเปลี่ยนแปลงจากการสั่นสะเทือนของโลกในช่วงไม่กี่ปีที่ผ่านมาตั้งแต่ชื่อเสียงที่ไม่รู้จักไปจนถึงความเจริญรุ่งเรืองในปัจจุบัน Ajax ขับเคลื่อนแอปพลิเคชันเว็บที่หลากหลาย ทั้งหมดนี้แยกออกไม่ได้จากวัตถุ XMLHTTPRequest และ "XHR Breakpoints" เป็นคุณสมบัติการดีบักการดีบักที่ออกแบบมาเพื่อจุดประสงค์แบบอะซิงโครนัส
เราสามารถเพิ่มเงื่อนไขเบรกพอยต์ลงในจุดพักแบบอะซิงโครนัสผ่านเครื่องหมาย "+" ทางด้านขวาของ "เบรกพอยต์ XHR" เมื่อ URL เมื่อมีการเรียกร้องให้มีการร้องขอแบบอะซิงโครนัสตรรกะ JS จะสร้างจุดพักโดยอัตโนมัติ ตำแหน่งเบรกพอยต์ไม่ได้แสดงให้เห็นในภาพเคลื่อนไหวสาธิตเนื่องจากการสาธิตใช้วิธี AJAX ที่ห่อหุ้มด้วย jQuery รหัสได้รับการบีบอัดและไม่มีผล ในความเป็นจริงเบรกพอยต์ XHR ถูกสร้างขึ้นโดยคำสั่ง "XHR.Send ()"
พลังของเบรกพอยต์ XHR คือเราสามารถปรับแต่งกฎเบรกพอยต์ซึ่งหมายความว่าเราสามารถตั้งค่าเบรกพอยต์สำหรับชุดหนึ่งชุดหนึ่งและแม้แต่คำขอแบบอะซิงโครนัสทั้งหมดซึ่งมีประสิทธิภาพมาก อย่างไรก็ตามดูเหมือนว่าฟังก์ชั่นนี้ไม่ได้ใช้มากในการพัฒนาทุกวันอย่างน้อยฉันก็ไม่ได้ใช้มันมากนัก คิดเกี่ยวกับมันมีเหตุผลประมาณสองประการ: ประการแรกข้อกำหนดการดีบักเบรกพอยต์ประเภทนี้ไม่ได้เกี่ยวข้องกับธุรกิจประจำวันมากนัก ประการที่สองการพัฒนาส่วนหน้าส่วนใหญ่ในขั้นตอนนี้ขึ้นอยู่กับเฟรมเวิร์ก JS และ jQuery พื้นฐานที่สุดก็มีการห่อหุ้ม Ajax อย่างดี มีเพียงไม่กี่คนที่ห่อหุ้มวิธี Ajax ด้วยตนเอง เพื่อลดขนาดรหัสโครงการมักจะเลือกฐานรหัสที่บีบอัดทำให้การติดตามเบรกพอยต์ XHR ค่อนข้างง่ายน้อยกว่า
6. จุดเบรกพอยต์ของผู้ฟัง
เบรกพอยต์ฟังเหตุการณ์นั่นคือการตั้งค่าเบรกพอยต์จะดำเนินการตามชื่อเหตุการณ์ เมื่อเหตุการณ์ถูกทริกเกอร์จุดพักอยู่ในตำแหน่งที่เหตุการณ์ถูกผูกไว้ เหตุการณ์เบรกพอยต์ของผู้ฟังเหตุการณ์ทั้งหมดและสคริปต์รวมถึง: เมาส์, แป้นพิมพ์, แอนิเมชั่น, ตัวจับเวลา, XHR ฯลฯ มันช่วยลดความยากลำบากในการดีบักตรรกะทางธุรกิจในกิจกรรม
ตัวอย่างการสาธิตแสดงให้เห็นถึงเอฟเฟกต์เบรกพอยต์เมื่อเหตุการณ์การคลิกถูกยิงและเมื่อตั้งค่าการตั้งค่า ตัวอย่างแสดงให้เห็นว่าหลังจากเลือกจุดเบรกพอยต์ของการคลิกเหตุการณ์เบรกพอยต์จะถูกทริกเกอร์เมื่อมีการคลิกปุ่มทั้งสองและเมื่อตั้งค่า SettimeOut จะมีการตั้งค่า "Set Timer" Breakpoint
การดีบักเป็นส่วนสำคัญของการพัฒนาโครงการ ไม่เพียง แต่ช่วยให้เราค้นหาปัญหาได้อย่างรวดเร็ว แต่ยังช่วยเราประหยัดเวลาในการพัฒนา ความเชี่ยวชาญในวิธีการดีบักที่หลากหลายจะนำประโยชน์มากมายมาสู่การพัฒนาอาชีพของคุณ อย่างไรก็ตามด้วยวิธีการดีบักจำนวนมากวิธีการเลือกวิธีที่เหมาะสมสำหรับสถานการณ์แอปพลิเคชันปัจจุบันของคุณต้องใช้ประสบการณ์และความพยายามอย่างต่อเนื่องในการสะสม
เมื่อเขียนสิ่งนี้มันอาจกล่าวได้โดยทั่วไปว่ามันออกมาอย่างเต็มที่ ฉันหวังว่ามันจะดึงดูดความสนใจของคุณและฉันหวังว่ามันจะทำให้คุณรู้สึกประทับใจเล็กน้อยและรู้สึกคุ้นเคยเล็กน้อย สิ่งที่สำคัญที่สุดคือฉันหวังว่าคุณจะสามารถพัฒนาทักษะของคุณได้อย่างรวดเร็วและกลายเป็นคนที่มีทักษะ!