คุณดีบั๊กโปรแกรม JavaScript ได้อย่างไร? วิธีดั้งเดิมที่สุดคือการใช้ Alert () เพื่อพิมพ์เนื้อหาบนหน้าและวิธีการที่ได้รับการปรับปรุงเล็กน้อยคือการใช้ console.log () เพื่อส่งออกเนื้อหาบนคอนโซล JavaScript การใช้สองวิธีนี้ได้แก้ไขปัญหาการดีบักจำนวนมากของสคริปต์ JavaScript ขนาดเล็ก อย่างไรก็ตามมันน่าเสียดายที่ไม่ได้ใช้เครื่องมือนักพัฒนาที่มีพลังมากขึ้นเรื่อย ๆ ในโครเมี่ยม บทความนี้ส่วนใหญ่จะแนะนำการตั้งค่าเบรกพอยต์ JavaScript และฟังก์ชั่นการดีบักนั่นคือแผงแหล่งที่มา (เดิมชื่อสคริปต์) หากคุณมีความเชี่ยวชาญในเทคนิคการดีบัก Java ที่หลากหลายใน Eclipse แนวคิดที่นี่มีความคล้ายคลึงกัน รุ่น Chrome ที่ใช้เมื่อเขียนบทความนี้คือ 25.0.1364.172
สภาพแวดล้อมพื้นฐาน
ทางด้านซ้ายของ Sourcespanel เป็นแหล่งเนื้อหารวมถึงแหล่งข้อมูลต่าง ๆ ในหน้า ในหมู่พวกเขามันถูกแบ่งออกเป็นแหล่งข้อมูลและสคริปต์เนื้อหา แหล่งที่มาเป็นทรัพยากรต่าง ๆ ที่มีอยู่ในหน้าเว็บเอง พวกเขาถูกจัดระเบียบตามโดเมนที่ปรากฏบนหน้าซึ่งเป็นสิ่งที่เราต้องใส่ใจ ไฟล์ JS ที่โหลดแบบอะซิงโครนัสจะปรากฏขึ้นที่นี่หลังจากโหลด สคริปต์เนื้อหาเป็นส่วนขยายของโครเมี่ยมที่จัดระเบียบตามรหัสส่วนขยาย ส่วนขยายประเภทนี้เป็นทรัพยากรที่ฝังอยู่ในหน้าและพวกเขายังสามารถอ่านและเขียน DOM ได้ มีเพียงนักพัฒนาที่เขียนและแก้ไขข้อบกพร่องเช่นนี้ควรสนใจพวกเขา หากเบราว์เซอร์ของคุณไม่ได้ติดตั้งส่วนขยายใด ๆ สคริปต์เนื้อหาจะไม่เห็นอะไรเลย
พื้นที่หลักหลักของแผงแหล่งที่มาใช้เพื่อแสดงเนื้อหาของไฟล์ทรัพยากรทางด้านซ้าย
ทางด้านขวาของแผงแหล่งที่มาคือพื้นที่ฟังก์ชันการดีบัก แถวบนสุดของปุ่มคือการหยุดชั่วคราว/ดำเนินการต่อไปทีละขั้นตอนกระโดดทีละขั้นตอนกระโดดทีละขั้นตอนปิดใช้งาน/เปิดใช้งานจุดพักทั้งหมด ด้านล่างนี้เป็นพื้นที่การทำงานเฉพาะที่หลากหลาย จะมีการแนะนำในภายหลัง
โปรดทราบว่าพื้นที่ทั้งสองด้านอาจหดตัวโดยค่าเริ่มต้นและไม่แสดงทั้งสองด้าน คลิกปุ่ม telescopic ทั้งสองด้านเพื่อแสดง เมื่อพื้นที่ด้านซ้ายปรากฏขึ้นค่าเริ่มต้นคือการหดตัวโดยอัตโนมัติ คลิกที่ปุ่ม PIN ถัดไปและจะไม่หดกลับ
นอกจากนี้ยังมีปุ่มคุณสมบัติบางอย่างที่ด้านล่างที่มีประโยชน์มาก
ตั้งค่าเบรกพอยต์บนซอร์สโค้ด
ผ่านแหล่งที่มาของเนื้อหาทางด้านซ้ายเปิดไฟล์ JavaScript ที่เกี่ยวข้องคลิกหมายเลขบรรทัดไฟล์และตั้งค่าและลบจุดพัก แต่ละเบรกพอยต์ที่เพิ่มเข้ามาจะปรากฏในรายการเบรกพอยต์ในพื้นที่ดีบักทางด้านขวา การคลิกที่เบรกพอยต์ของรายการจะค้นหาจุดพักในพื้นที่เนื้อหา หากคุณมีหลายไฟล์และจุดพักหลายจุดนั้นสะดวกมากในการค้นหาจุดพักในรายการเบรกพอยต์อย่างรวดเร็ว
มีสองสถานะสำหรับแต่ละจุดพักที่เพิ่มขึ้น: เปิดใช้งานและปิดการใช้งาน จุดพักที่เพิ่มเข้ามาคือสถานะที่เปิดใช้งานทั้งหมดและสถานะปิดใช้งานคือการรักษาจุดพัก แต่ยกเลิกฟังก์ชันเบรกพอยต์ชั่วคราว มีช่องทำเครื่องหมายก่อนแต่ละจุดพักในรายการเบรกพอยต์และการยกเลิกการตรวจสอบจะปิดการใช้งานเบรกพอยต์ จุดพักยังสามารถปิดใช้งานได้ในเมนูคลิกขวาของตำแหน่งเบรกพอยต์ นอกจากนี้คุณยังสามารถปิดการใช้งานจุดพักที่เพิ่มเข้ามาทั้งหมดบนปุ่มบนริบบิ้นขวาและคลิกเพื่อกู้คืนสถานะเดิม
เบรกพอยต์แบบมีเงื่อนไข : เลือก "แก้ไขเบรกพอยต์ ... " ในเมนูคลิกขวาของตำแหน่งเบรกพอยต์เพื่อตั้งค่าเงื่อนไขเพื่อทริกเกอร์จุดพักนั่นคือเขียนนิพจน์และจุดพักจะถูกเรียกใช้เฉพาะเมื่อนิพจน์เป็นจริง ตรวจสอบการเรียกสภาพแวดล้อมสแต็กของจุดพัก (สแต็คโทร): เมื่อจุดพักหยุดการโทรสแต็กในพื้นที่ดีบักทางด้านขวาจะแสดงสแต็กการโทรวิธีที่จุดพักในปัจจุบันคือ ตัวอย่างเช่นมีฟังก์ชั่น g () ซึ่งเรียกว่าฟังก์ชัน f () และฉันตั้งค่าเบรกพอยต์ใน f () จากนั้นเมื่อฉันเรียกใช้ฟังก์ชัน g () ในคอนโซลจุดพักจะถูกเรียกใช้และสแต็กการโทรจะแสดงดังนี้:
ด้านบนคือ f () และจากนั้น g () แต่ละเลเยอร์ในสแต็กการโทรเรียกว่าเฟรม การคลิกที่แต่ละเฟรมสามารถข้ามไปยังจุดเรียกของเฟรมนั้นได้
นอกจากนี้คุณสามารถรีสตาร์ทการดำเนินการของเฟรมปัจจุบันบนเฟรมโดยใช้เมนูคลิกขวานั่นคือจากจุดเริ่มต้นของเฟรม ตัวอย่างเช่นบนเฟรมของฟังก์ชั่น f () เบรกพอยต์จะข้ามไปที่จุดเริ่มต้นของ f () และ execute อีกครั้งและค่าตัวแปรในบริบทจะได้รับการกู้คืน ด้วยวิธีนี้การรวมฟังก์ชั่นเช่นการดัดแปลงตัวแปรและการแก้ไขรหัสคุณสามารถแก้ไขข้อบกพร่องในเฟรมปัจจุบันได้ซ้ำ ๆ โดยไม่ต้องรีเฟรชหน้าและทริกเกอร์จุดพักอีกครั้ง ดูตัวแปร
ด้านล่างรายการสแต็กการโทรคือรายการตัวแปรขอบเขตซึ่งคุณสามารถดูค่าของตัวแปรท้องถิ่นและตัวแปรทั่วโลกในเวลานี้ เรียกใช้รหัสที่เลือก
ในระหว่างการดีบักเบรกพอยต์คุณสามารถใช้เมาส์เพื่อเลือกตัวแปรหรือนิพจน์ที่คุณต้องการดูจากนั้นคลิกขวาที่เมนูเพื่อดำเนินการ "ประเมินในคอนโซล" เพื่อดูค่าปัจจุบันของนิพจน์ ปุ่ม "ขัดจังหวะ/ดำเนินการต่อ" ที่ด้านบนของพื้นที่ดีบักทางด้านขวาของคำสั่ง JavaScript ที่จะดำเนินการในครั้งต่อไปมีฟังก์ชั่น เมื่อไม่มีการทริกเกอร์เบรกพอยต์คลิกปุ่มนี้จะเข้าสู่สถานะการขัดจังหวะ "การเตรียมการ" ครั้งต่อไปที่หน้าดำเนินการคำสั่ง JavaScript จะขัดจังหวะโดยอัตโนมัติเช่นรหัสที่จะดำเนินการเมื่อมีการดำเนินการคลิก แก้ไขรหัส JavaScript ชั่วคราว เรามักจะคุ้นเคยกับลูปนี้เมื่อรหัสการดีบัก: แก้ไขรหัส→รีเฟรชหน้า→ตรวจสอบอีกครั้ง แต่ในความเป็นจริงเนื้อหาในไฟล์ JS สามารถแก้ไขได้ชั่วคราวใน Chrome บันทึก (Ctrl+s) สามารถมีผลทันทีและทำการลดใหม่ทันทีด้วยคอนโซลและฟังก์ชั่นอื่น ๆ แต่โปรดทราบว่าการดัดแปลงนี้เป็นการชั่วคราวและการปรับเปลี่ยนหน้ารีเฟรชจะหายไป
จุดพักยกเว้น
คุณสามารถดูปุ่มด้านล่างอินเทอร์เฟซ มันเป็นสวิตช์ที่ตั้งค่าว่าโปรแกรมถูกขัดจังหวะเมื่อพบข้อยกเว้นเมื่อทำงานอยู่ การคลิกปุ่มนี้จะสลับระหว่าง 3 สถานะ:
โดยค่าเริ่มต้นจะไม่พบการหยุดชะงัก
ข้อยกเว้นทั้งหมดจะถูกขัดจังหวะรวมถึงสถานการณ์ที่ถูกจับ
ขัดจังหวะเฉพาะในกรณีที่มีข้อยกเว้นที่ไม่ถูกจับเกิดขึ้น
ส่วนใหญ่อธิบายความแตกต่างระหว่างรัฐ 2 และรัฐ 3
พยายาม{
โยน 'ข้อยกเว้น';
} catch (e) {
console.log (e);
-
รหัสในการพยายามด้านบนจะพบข้อยกเว้น แต่รหัสจับที่อยู่เบื้องหลังสามารถจับได้ข้อยกเว้น หากข้อยกเว้นทั้งหมดถูกขัดจังหวะรหัสจะขัดจังหวะโดยอัตโนมัติเมื่อมีการดำเนินการกับคำสั่งการโยนที่จะสร้างข้อยกเว้น และถ้ามันถูกขัดจังหวะก็ต่อเมื่อพบข้อยกเว้นที่ไม่ถูกต้องแล้วมันจะไม่ขัดจังหวะที่นี่ โดยทั่วไปเราจะกังวลมากขึ้นเกี่ยวกับการเผชิญหน้ากับข้อยกเว้นที่ไม่ถูกต้อง
ตั้งค่าเบรกพอยต์บนองค์ประกอบ DOM
บางครั้งเราจำเป็นต้องฟัง DOM บางอย่างที่ถูกแก้ไขโดยไม่ต้องดูแลว่ามีการแก้ไขรหัสบรรทัดใด (หรืออาจมีหลายสถานที่ที่จะแก้ไข) จากนั้นเราสามารถตั้งค่าเบรกพอยต์โดยตรงบน DOM
ดังที่แสดงในรูปในการตรวจสอบองค์ประกอบขององค์ประกอบขององค์ประกอบคุณสามารถตั้งค่าจุดพักสามจุดในเมนูคลิกขวาบนองค์ประกอบ: หลังจากโหนดเด็กปรับเปลี่ยนแอตทริบิวต์ของตัวเองและปรับเปลี่ยนโหนดของตัวเองจะถูกลบจุดพัก DOM จะปรากฏในรายการเบรกพอยต์ DOM เมื่อดำเนินการเพื่อทำการปรับเปลี่ยนที่สอดคล้องกันกับ DOM รหัสจะหยุดอยู่ที่นั่นดังแสดงในรูปด้านล่าง
จุดพัก XHR
มีจุดพัก XHR ในพื้นที่ดีบักทางด้านขวา คลิก + และป้อนสตริงที่มีอยู่ใน URL เพื่อฟังคำขอ AJAX สำหรับ URL เนื้อหาอินพุตเทียบเท่ากับตัวกรองของ URL หากไม่มีการกรอกข้อมูลให้ฟังคำขอ XHR ทั้งหมด เมื่อมีการเรียกการโทร XHR แล้วจะมีการร้องขอในสถานที่ที่ร้องขอ SEND ()
ทริกเกอร์เบรกพอยต์ตามประเภทเหตุการณ์
รายการผู้ฟังเหตุการณ์ในพื้นที่ดีบักทางด้านขวาซึ่งมีการระบุประเภทเหตุการณ์ที่เป็นไปได้ต่างๆ ตรวจสอบประเภทเหตุการณ์ที่เกี่ยวข้องและจะขัดจังหวะโดยอัตโนมัติเมื่อรหัส JavaScript ที่กระตุ้นเหตุการณ์ประเภทนั้น
คีย์ลัดดีบั๊ก
ปุ่มทางลัดในเครื่องมือการพัฒนาทั้งหมดสามารถพบได้ในการตั้งค่าที่มุมล่างขวาของอินเทอร์เฟซ โดยทั่วไปแล้ว F8, F10, F11 หรือ SHITF+F11 นั้นใช้เมื่อทำการดีบักเบรกพอยต์ แต่ปุ่มฟังก์ชั่นเช่น F10 อาจขัดแย้งกับปุ่มลัดเริ่มต้นของระบบ ไม่สำคัญว่าพวกเขาสามารถแทนที่ด้วย cmd+/, cmd+', cmd+; , shift+cmd+; ตามลำดับ //@ SourceUrl ชื่อรหัสที่ผลิตโดย Eval บางครั้งรหัสไดนามิกบางอย่างถูกสร้างขึ้นในบริบท JavaScript ปัจจุบันในรูปแบบของสตริงผ่านฟังก์ชัน eval () แทนที่จะโหลดเป็นไฟล์ JS แยกต่างหาก ด้วยวิธีนี้คุณจะไม่พบไฟล์ในพื้นที่เนื้อหาทางด้านซ้ายดังนั้นจึงเป็นการยากที่จะแก้ไขข้อบกพร่อง ในความเป็นจริงเราเพิ่งเพิ่มบรรทัด "//@ sourceUrl = name" ในตอนท้ายของรหัสที่สร้างขึ้นโดย Eval เพื่อตั้งชื่อรหัสนี้ (เบราว์เซอร์จะปฏิบัติต่อความคิดเห็นรูปแบบพิเศษนี้โดยเฉพาะ) เพื่อให้มันจะปรากฏในพื้นที่เนื้อหาทางด้านซ้ายเหมือนกับที่คุณโหลดไฟล์ JS ด้วยชื่อที่ระบุ ในรูปด้านล่างเราเรียกใช้ส่วนหนึ่งของรหัสผ่านการประเมินและใช้ SourceUrl เพื่อตั้งชื่อมัน Dynamicscript.js หลังจากดำเนินการ "ไฟล์" นี้จะปรากฏในพื้นที่เนื้อหาทางด้านซ้ายและเนื้อหาเป็นเนื้อหาใน Eval นอกจากนี้คุณยังสามารถดูตัวอย่างของการตั้งชื่อรหัสกาแฟที่รวบรวมได้แบบไดนามิก:
var coffee = coffeescript.compile (code.value) + "//@ sourceurl =" + (evalname.value || "Coffeeeeeeee!");
ประเมิน (กาแฟ);
ในความเป็นจริง //@ sourceUrl ไม่เพียง แต่สามารถใช้ในรหัส eval แต่ไฟล์ js ใด ๆ หรือแม้แต่รหัสที่ป้อนโดยคอนโซล JavaScript สามารถใช้งานได้ด้วยเอฟเฟกต์เดียวกัน! ปุ่มรูปแบบรหัส (พิมพ์สวย) ใช้เพื่อฟอร์แมตรหัสยุ่งเหยิงเป็นรหัสที่สวยงามเช่นไฟล์ JS ที่บีบอัดซึ่งไม่สามารถอ่านได้หรือดีบัก คลิกรูปแบบแล้ว unformat ก่อนการตกแต่ง
การอ้างอิงที่สวยงาม: เครื่องมือนักพัฒนา Chrome เอกสารอย่างเป็นทางการ