1. การดีบักเบรกพอยต์คืออะไร? เป็นเรื่องยากหรือไม่?
การดีบักเบรกพอยต์ไม่ใช่สิ่งที่ซับซ้อน ความเข้าใจง่ายๆว่าไม่มีการโทรออกคือการเปิดเบราว์เซอร์แหล่งเปิดค้นหาไฟล์ JS และคลิกที่หมายเลขบรรทัด ดูเหมือนง่ายมากที่จะใช้งาน แต่มีคนมากมายที่สับสนจริง ๆ เกี่ยวกับจุดที่จะทำลายจุด? (ก่อนอื่นให้ดูที่สกรีนช็อตเบรกพอยต์โดยใช้จุดพักของเบราว์เซอร์โครเมี่ยมเป็นตัวอย่าง)
จำขั้นตอนได้ไหม
เปิดหน้าด้วยเบราว์เซอร์ Chrome →กด F12 เพื่อเปิดเครื่องมือนักพัฒนา→ Open Sources →เปิดไฟล์รหัส JS ที่คุณต้องการแก้ไขข้อบกพร่อง→คลิกที่หมายเลขบรรทัดตกลง! ขอแสดงความยินดีกับจุดพักเวอร์จินของคุณสำหรับการกดปุ่มฮ่าฮ่า ~~
2. จะตีจุดพักได้อย่างไร?
การทำงานของจุดพักนั้นง่ายมาก ปัญหาหลักคือวิธีการกดจุดเบรกเพื่อแก้ไขปัญหาด้วยรหัส ให้ฉันยกตัวอย่างให้คุณเข้าใจ โดยไม่ต้องกังวลใจเพิ่มเติมรูปภาพด้านบน:
สมมติว่าตอนนี้เรากำลังใช้ฟังก์ชั่นที่โหลดมากขึ้นดังที่แสดงในรูปด้านบน แต่มีปัญหาในการโหลดฟังก์ชั่นมากขึ้น หลังจากคลิกข้อมูลจะไม่ถูกโหลด เราควรคิดอย่างไรในเวลานี้? (เขียนคำตอบในอีกบรรทัดหนึ่งและคุณจะเห็นว่าปฏิกิริยาแรกของคุณคืออะไร)
สิ่งแรกที่อยู่ในใจของฉันคือการคลิกของฉันประสบความสำเร็จหรือไม่? วิธีการในเหตุการณ์การคลิกกำลังทำงานอยู่หรือไม่? ตกลงถ้าคุณต้องการทราบคำตอบสำหรับคำถามนี้ลองไปที่จุดพักทันที เบรกพอยต์อยู่ที่ไหน ลองคิดดูก่อน
ภาพถัดไป:
คุณคิดหรือไม่? ถูกต้องเนื่องจากเราต้องการทราบว่าการคลิกนั้นประสบความสำเร็จแน่นอนว่าเรากำลังเพิ่มจุดพักในเหตุการณ์คลิกในรหัส จำไว้ว่าอย่าเพิ่มในบรรทัด 226 เนื่องจากฟังก์ชั่นในวิธีการคลิกถูกดำเนินการไม่ใช่ตัวเลือกของบรรทัด 226 เบรกพอยต์ได้รับผลกระทบตอนนี้ดังนั้นจะทำอย่างไร? ลองคิดดูด้วยตัวเอง ~
ดำเนินการต่อไปที่ภาพด้านบน:
แน่นอนว่าเรากลับไปและคลิกที่ปุ่มโหลดเพิ่มเติมทำไม? หน้าผาก. - - หากคุณถามสิ่งนี้โปรดอนุญาตให้ฉันใช้อิโมติคอนนี้โดยไม่คลิกที่ปุ่มโหลดเพิ่มเติมวิธีทริกเกอร์เหตุการณ์คลิก วิธีดำเนินการฟังก์ชั่นในเหตุการณ์คลิกโดยไม่ต้องเรียกเหตุการณ์คลิก? คำราม. - แต่ฉันเชื่อว่าทุกคนจะไม่ถามคำถามที่ต่ำเช่นนี้ ~ ฉันจะไม่พูดเรื่องไร้สาระ ~
ดำเนินการต่อไปในหัวข้อภาพด้านบนคือสถานการณ์หลังจากคลิกที่ปุ่มโหลดเพิ่มเติม เราจะเห็นได้ว่าหน้าทางด้านซ้ายนั้นถูกปกคลุมด้วยเลเยอร์โปร่งแสง นอกจากนี้ยังมีสตริงภาษาอังกฤษและสองปุ่มเหนือหน้า มีการเพิ่มรหัส 227 บรรทัดทางด้านขวาด้วยสีพื้นหลัง สถานการณ์นี้เกิดขึ้นไม่ว่าปุ่มจะหมายถึงอะไรและฟังก์ชั่นของพวกเขาทำอะไร คุณได้รับข้อมูลอะไรจากภาพนี้? คิดต่อไป ~
หากสถานการณ์ข้างต้นเกิดขึ้นหมายความว่ามีการเรียกฟังก์ชั่นในเหตุการณ์การคลิกซึ่งอธิบายเพิ่มเติมว่าเหตุการณ์การคลิกมีผล จากนั้น "ผู้ต้องสงสัยทางอาญา" คนแรกที่เราเกิดขึ้นกับปัญหานี้จะถูกตัดออก
เพื่อเพิ่ม:
เกิดอะไรขึ้นถ้าสถานการณ์ข้างต้นไม่เกิดขึ้น? นั่นหมายความว่าเหตุการณ์การคลิกไม่ได้มีผลหรือไม่? อะไรทำให้เกิดเหตุการณ์คลิกที่จะไม่มีผล? ทุกคนคิดเกี่ยวกับตัวเอง ~
มีสาเหตุหลายประการที่ทำให้เหตุการณ์การคลิกไม่มีผลเช่นข้อผิดพลาดหลายตัวเลือกข้อผิดพลาดทางไวยากรณ์องค์ประกอบที่เลือกจะถูกสร้างขึ้นในภายหลัง ฯลฯ จะแก้ปัญหาได้อย่างไร?
ตัวเลือกนั้นผิดคุณสามารถดูเนื้อหาของส่วนคอนโซลต่อไปได้ในภายหลังฉันคิดว่าทุกคนรู้วิธีจัดการกับมัน
ข้อผิดพลาดทางไวยากรณ์ตรวจสอบอย่างระมัดระวัง คุณสามารถเปรียบเทียบไวยากรณ์ที่ไม่คุ้นเคยบน Baidu
องค์ประกอบที่เลือกจะถูกสร้างขึ้นในภายหลัง วิธีที่ง่ายที่สุดในการจัดการคือการใช้วิธี. on () สิ่งนี้ถูกประมวลผลด้วยการมอบหมายงาน คุณสามารถใช้ Baidu สำหรับรายละเอียด
ดังนั้นตัวตนของ "ผู้ต้องสงสัยทางอาญา" จะถูกล็อคต่อไปที่ไหน?
เราหันมาให้ความสนใจกับเหตุการณ์ภายในและเหตุการณ์การคลิกจะถูกเรียกใช้ดังนั้นปัญหาต่อไปคือปัญหาของฟังก์ชั่นภายใน ถ้าคุณต้องการถามว่าทำไม? โปรดให้เต้าหู้ชิ้นหนึ่ง - -
ตัวอย่างเช่นฉันจะให้ปากกาแก่คุณและขอให้คุณเขียน จากนั้นคุณเขียนคำบนกระดาษและพบว่าคำนั้นไม่ได้ออกมา ทำไม คุณบอกว่าฉันเขียนมันและยังมีรอยขีดข่วนบนกระดาษ เป็นไปได้ไหมที่ปากกาไม่มีหมึกหรือปลายแตก? ตัวอย่างนี้เป็นหลักการของการโหลดคลิกมากกว่า การดำเนินการเขียนคือการดำเนินการคลิกและฟังก์ชั่นภายในคือหมึกหรือเคล็ดลับปากกา คุณเข้าใจ ~
ต่อไปเราวิเคราะห์เนื้อหาของเหตุการณ์คลิกซึ่งมีสามประโยค ประโยคแรกคือตัวแปรที่ฉันเติบโตด้วยตัวเองประโยคที่สองคือการเพิ่มแท็ก I ลงในปุ่มและประโยคที่สามคือการเรียกวิธีการขอข้อมูล
ผ่านบทบาทของประโยคทั้งสามนี้เราสามารถวางส่วนใหญ่ของความสงสัยในประโยคที่สามและส่วนเล็ก ๆ ในประโยคแรกและที่สอง บางคนอาจสงสัยว่าประโยคที่สองจะสงสัยได้อย่างไร? ฟังก์ชั่นของเขาคือการเพิ่มฉลากซึ่งไม่มีผลต่อข้อมูลเลย จริง ๆ แล้วประโยคนี้ไม่มีผลต่อข้อมูล แต่สำหรับการพิจารณาอย่างเข้มงวดมันอาจยังคงทำผิดพลาดเช่นถ้ามันขาดเครื่องหมายอัฒภาค? หรือมีสัญลักษณ์อยู่ในประโยคผิด? บ่อยครั้งที่มันเป็นปัญหาเล็ก ๆ น้อย ๆ ที่ทำให้เราเสียเวลามาก
ตกลงเพื่อล็อคเพิ่มเติมใน "ผู้ต้องสงสัยทางอาญา" ฉันจะแนะนำคุณให้รู้จักกับเครื่องมือซึ่งเป็นหนึ่งในสองไอคอนที่ปรากฏในภาพด้านบนดูภาพด้านล่าง:
ฟังก์ชั่นของไอคอนขนาดเล็กนี้เรียกว่า "การดำเนินการตามประโยค" หรือ "การดำเนินการทีละขั้นตอน" นี่คือชื่อที่ฉันเข้าใจเป็นการส่วนตัวซึ่งหมายความว่าทุกครั้งที่ฉันคลิกคำสั่ง JS จะเรียกใช้ประโยคในภายหลังและมันก็มีคีย์ทางลัด F10 รูปต่อไปนี้แสดงเอฟเฟกต์หลังจากคลิก:
ฉันคลิกปุ่มนี้สองครั้ง (หรือใช้คีย์ทางลัด F10) และรหัส JS ถูกดำเนินการจากบรรทัด 227 ถึงบรรทัด 229 ดังนั้นฉันจึงเรียกมันว่า "คำสั่งโดยขั้นตอน" หรือ "ขั้นตอนทีละขั้นตอน" ฟังก์ชั่นนี้ใช้งานได้จริงและจะใช้สำหรับการดีบักส่วนใหญ่
มันสายเกินไปฉันจะเขียนต่อไปในวันพรุ่งนี้การแสดงที่ดียังคงมา ~
-
โอเคเขียนต่อไป!
บทนำข้างต้นแสดงให้เห็นว่าฉันคลิกปุ่ม "การดำเนินการตามประโยค" สองครั้งและรหัสวิ่งจากบรรทัด 227 ถึงบรรทัด 229 คุณคิดว่านี่หมายความว่าอย่างไร? หมายความว่าจากมุมมองทางไวยากรณ์สองประโยคแรกไม่เป็นปัญหาดังนั้นมันหมายความว่าสองประโยคแรกกำจัดความสงสัยหรือไม่? ฉันไม่เห็นมัน
อย่างที่เราทราบกันดีว่าการโหลดมากขึ้นเป็นฟังก์ชั่นของหน้าถัดไปและค่าหลักที่สุดคือค่าหมายเลขหน้าผ่านไปยังพื้นหลัง เมื่อใดก็ตามที่ฉันคลิกปุ่มโหลดเพิ่มเติมหนึ่งครั้งค่าหมายเลขหน้าจะต้องเพิ่มขึ้น 1 ดังนั้นหากข้อมูลในหน้าถัดไปไม่ได้ออกมาเป็นไปได้หรือไม่ที่มีปัญหากับค่าหมายเลขหน้านั่นคือ [ฉันตัวแปร] (ต่อไปนี้เป็นชื่อ Unified I)? ดังนั้นจะแก้ไขปัญหาได้อย่างไรว่ามีปัญหาเกี่ยวกับหมายเลขหน้าหรือไม่? ทุกคนคิดก่อน
นี่คือสองวิธีในการดูค่าเอาต์พุตจริงของหมายเลขหน้า i] รูปด้านบน:
ประเภทแรก:
ขั้นตอนการดำเนินการมีดังนี้:
1. ยังคงกดจุดเบรกพอยต์บนบรรทัด 227 → 2 คลิกปุ่มโหลดเพิ่มเติม→ 3 คลิกปุ่ม "ดำเนินการตามประโยค" หนึ่งครั้งและรหัส JS จะถูกดำเนินการกับบรรทัด 228 → 4 ใช้เมาส์เพื่อเลือก i ++ ผลลัพธ์ในภาพด้านบน
ประเภทที่สอง:
วิธีนี้คล้ายกับวิธีแรกยกเว้นว่าค่าของฉันคือเอาต์พุตบนคอนโซล คุณจะต้องทำตามวิธีแรกเพื่อดำเนินการไปยังขั้นตอนที่ 3 → 4 เปิดคอนโซลในระดับเดียวกับแหล่งที่มา→ 5 ป้อน I → 6 กด Enter Enter
ในวิธีที่สองด้านบนคอนโซลถูกกล่าวถึง เราสามารถเรียกมันว่าคอนโซลหรืออะไรก็ได้ สิ่งนี้ไม่สำคัญ คอนโซลมีฟังก์ชั่นที่ทรงพลังมาก ในระหว่างกระบวนการดีบักเรามักจะต้องรู้ว่าค่าของตัวแปรบางตัวเป็นเอาท์พุทหรือไม่ว่าเราจะใช้ตัวเลือก [$ ". div") เพื่อเลือกองค์ประกอบที่เราต้องการ ฯลฯ สามารถพิมพ์บนคอนโซลได้ แน่นอนว่ามันเป็นไปได้ที่จะใช้วิธีแรกโดยตรง
ให้ฉันแสดงให้คุณเห็นองค์ประกอบที่เราต้องการเลือกในคอนโซล ภาพด้านบน ~
ป้อน $ (นี้) ในคอนโซลเพื่อรับองค์ประกอบที่เลือก ใช่มันเป็นวัตถุที่เราคลิก - โหลดองค์ประกอบปุ่มเพิ่มเติม
ที่นี่ฉันจะบอกคุณถึงความเข้าใจของฉันเกี่ยวกับคอนโซลคอนโซล: สิ่งนี้เป็นตัวแยกวิเคราะห์ JS ซึ่งเบราว์เซอร์ใช้ตัวเองเพื่อแยกวิเคราะห์คนที่ใช้ JS อย่างไรก็ตามเบราว์เซอร์ช่วยให้นักพัฒนาของเราสามารถควบคุมการทำงานและเอาต์พุตของ JS ในระหว่างกระบวนการดีบักผ่านคอนโซล ด้วยวิธีการสองวิธีข้างต้นคุณอาจคิดว่ามันใช้งานง่ายมาก แต่ฉันอยากจะเตือนคุณหรือเป็นความสับสนที่ผู้เริ่มต้นบางคนมีแนวโน้มที่จะพบ
สับสน 1: เมื่อไม่มีจุดพักให้ป้อน I ในคอนโซลและคอนโซลรายงานข้อผิดพลาด
นี่ควรเป็นปัญหาที่พบบ่อยสำหรับผู้เริ่มต้น ทำไมฉันไม่สามารถส่งออกค่าตัวแปรโดยตรงในคอนโซลโดยไม่ทำลายจุด? โดยส่วนตัวแล้วฉันเข้าใจว่าฉันเป็นเพียงตัวแปรท้องถิ่นในเวลานี้ หากไม่มีการตั้งค่าเบรกพอยต์เบราว์เซอร์จะแยกวิเคราะห์ JS ทั้งหมด คอนโซลไม่สามารถเข้าถึงตัวแปรท้องถิ่น แต่สามารถเข้าถึงตัวแปรส่วนกลางเท่านั้น ดังนั้นคอนโซลจะรายงานข้อผิดพลาดที่ฉันไม่ได้กำหนด แต่เมื่อ JS กระทบจุดพักคอนโซลจะวิเคราะห์มันลงในฟังก์ชั่นที่ตัวแปรท้องถิ่นที่ฉันอยู่และฉันสามารถเข้าถึงได้ในเวลานี้
ความสับสน 2: ทำไมฉันถึงพิมพ์บางอย่างลงใน $ (". xxx") ในคอนโซลได้โดยตรง?
มันง่ายมาก คอนโซลเองคือตัวแยกวิเคราะห์ JS และ $ (". xxx") เป็นคำสั่ง JS ดังนั้นคอนโซลตามธรรมชาติสามารถแยกวิเคราะห์คำสั่งนี้และส่งออกผลลัพธ์
หลังจากแนะนำการใช้ปุ่ม "การดำเนินการตามประโยค" และคอนโซลในที่สุดเราก็จะแนะนำปุ่มภาพด้านบน:
ฉันเรียกปุ่มปุ่ม "กระบวนการดำเนินการ" ซึ่งแตกต่างจากปุ่ม "คำสั่งดำเนินการ" ปุ่ม "กระบวนการดำเนินการ" มักจะใช้เมื่อวิธีการเรียกไฟล์ JS หลายไฟล์ รหัส JS ที่เกี่ยวข้องค่อนข้างยาวดังนั้นปุ่มนี้จะถูกใช้
ข้างบน:
สมมติว่าในภาพด้านบนฉันสร้างจุดเบรกพอยต์บนบรรทัด 227 จากนั้นคลิกปุ่ม "ดำเนินการตามประโยค" เพื่อให้บรรทัด 229 จะเกิดอะไรขึ้นถ้าฉันคลิกปุ่ม "ดำเนินการตามประโยค" อีกครั้ง มันจะเข้าสู่ JS ในภาพต่อไปนี้:
นี่คือเนื้อหาของไฟล์ไลบรารี Zepto ไม่มีอะไรดีที่จะดู มันซับซ้อนมากในการทำงาน เราไม่สามารถใช้ปุ่ม "การดำเนินการตามประโยค" ได้เสมอดังนั้นคุณจะพบว่าคุณได้รับการกดตลอดทั้งวันและยังคงวนเวียนอยู่ในไฟล์ไลบรารี - - จะทำอย่างไรในเวลานี้? จากนั้นก็ถึงเวลาแล้วที่ปุ่ม "ดำเนินการตามกระบวนการ" เพื่อขึ้นเวที
ข้างบน:
นอกเหนือจากการตั้งค่าเบรกพอยต์บนบรรทัด 227 ฉันยังกดจุดเบรกพอยต์บนบรรทัด 237 เมื่อเราวิ่งไปที่บรรทัด 229 คลิกปุ่ม "ดำเนินการตามกระบวนการ" โดยตรง คุณจะพบว่า JS ข้ามไฟล์ไลบรารีโดยตรงและวิ่งไปที่บรรทัดที่ 237 คุณสามารถใช้มันเพื่อตัวคุณเองเพื่อสัมผัสมัน
สรุปสุดท้าย:
บทความนี้ส่วนใหญ่แนะนำเครื่องมือสามเครื่องมือของปุ่ม "การดำเนินการตามประโยคต่อเนื่อง" ปุ่ม "การดำเนินการตามขั้นตอนการดำเนินการ" คอนโซลคอนโซลและแนวคิดบางอย่างเมื่อทำการดีบักบั๊ก ฉันจะไม่ใช้เครื่องมือซ้ำ เพิ่งรู้การใช้งาน วิธีการใช้มันจะต้องสรุปและปรับปรุงผ่านการฝึกฝนมากมาย ~
ที่จริงแล้วสิ่งที่ฉันต้องการพูดคุยเกี่ยวกับบทความนี้เป็นวิธีการแก้ไขข้อบกพร่อง แต่เป็นเพราะตัวอย่างที่ฉันเลือกเกี่ยวข้องกับสิ่งต่าง ๆ มากเกินไป - - ฉันกลัวว่าเนื้อหาทั้งหมดนั้นยาวเกินไปและทุกคนไม่สนใจที่จะอ่านมันดังนั้นฉันจึงเลือกส่วนหนึ่งที่จะอธิบายให้คุณฟัง ฉันสงสัยว่าคุณได้รับอะไรหรือเปล่า อย่าดูสามประโยคที่ฉันเขียนหลายสิ่งหลายอย่างในการดีบัก ถ้าคุณทำอย่างฉันในโครงการจริงคุณอาจใช้เวลานานกว่าจะดีบั๊กมากกว่าเขียนสคริปต์ - - ในสถานการณ์จริงเราควรพัฒนาครั้งแรกที่เราได้รับปัญหาตรวจสอบปัญหาในใจของเราและค้นหาจุดที่เป็นไปได้มากที่สุด หากเราไม่สามารถหาจุดที่สำคัญที่สุดได้อย่างรวดเร็วคุณสามารถใช้วิธีการที่ลำบาก แต่เชื่อถือได้มากที่สุดในการใช้ปุ่ม "การดำเนินการตามประโยคโดยประโยค" เพื่อดำเนินการ JS ทั้งหมดที่เกี่ยวข้องกับปัญหาทีละคน ในระหว่างกระบวนการดำเนินการเราควรชี้แจงความคิดของเราและให้ความสนใจกับค่าที่ถูกต้องของแต่ละตัวแปรและองค์ประกอบที่เลือกโดยตัวเลือก โดยทั่วไปถ้าคุณทำสิ่งนี้ครั้งเดียวข้อบกพร่องจะได้รับการแก้ไข
ดังนั้นโดยส่วนตัวแล้วฉันคิดว่าความคิดของเราเกี่ยวกับข้อบกพร่องของการดีบักควรมีดังนี้: อันดับแรกไม่ว่าจะดำเนินการ JS สำเร็จหรือไม่ ประการที่สองไม่ว่าจะเป็นปัญหาตรรกะปัญหาตัวแปรปัญหาพารามิเตอร์ ฯลฯ ; ในที่สุดหากไม่มีปัญหาเกี่ยวกับข้างต้นโปรดตรวจสอบสัญลักษณ์ต่าง ๆ อย่างระมัดระวัง - -
ตกลง ~ นั่นคือทั้งหมดที่เกี่ยวกับจุดพัก ~ หากคุณไม่เข้าใจคุณสามารถฝากข้อความไว้ด้านล่าง ~ หากคุณมีคะแนนความรู้ใด ๆ ที่คุณไม่เข้าใจหรือสับสนเกี่ยวกับส่วนหน้าคุณสามารถฝากข้อความไว้ด้านล่างได้ เมื่อคุณมีเวลาฉันจะเขียนเอกสารบางอย่างในข้อความของคุณต่อไป ~