บทความก่อนหน้านี้ได้แนะนำความรู้พื้นฐานบางอย่างเกี่ยวกับซีรี่ส์การดีบัก JS คราวนี้พี่น้องรหัสที่อ่านไม่ออกได้นำจุดพัก JS และวิธีการดีบักแบบไดนามิกมาให้คุณ เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
แบบฝึกหัดหลังคลาสฉันออกไปเมื่อวานนี้ 1. วิเคราะห์วิธีการใช้ฟังก์ชันการลงคะแนนตามที่แนะนำ
ในความเป็นจริงเราได้เห็นซอร์สโค้ดแล้ว เพียงอ่านซอร์สโค้ดและคุณสามารถรู้ได้ว่ามันถูกนำไปใช้อย่างไร
ฟังก์ชั่น votepost (n, t, i) {i || (i =! 1); var r = {blogapp: currentblogapp, postid: n, votetype: t, isabandoned: i}; $ ("#digg_tips"). css ("color", "red"). html ("commit ... "); $ .ajax ({url: "/mvc/vote/voteblogpost.aspx", type: "post", ประเภทข้อมูล: "json", contentType: "application/json; charset = utf-8", data: json.stringify (r), ความสำเร็จ: ฟังก์ชัน (n) "_count"); (n.status == 500? $ ("#digg_tips"). html ("ขออภัยเกิดข้อผิดพลาด! โปรดตอบกลับไปที่ [email protected]"): $ ("#digg_tips"). html (n.responsetext))}}); -มันเกือบจะเป็นเช่นนี้
PS: ฉันใช้รหัสที่จัดรูปแบบข้อความประเสริฐซึ่งแตกต่างจากผลลัพธ์เล็กน้อยหลังจากการจัดรูปแบบบนคอนโซล Chrome
นอกจากนี้คุณยังสามารถลองใช้เครื่องมือการจัดรูปแบบออนไลน์นี้เอฟเฟกต์นั้นคล้ายกัน: JavaScript ออนไลน์สวยงาม
หลังจากอ่านรหัสง่าย ๆ คุณสามารถรู้ได้ว่าฟังก์ชั่นนี้มีพารามิเตอร์ 3 ตัว สิ่งแรกคือ PostID ซึ่งเป็น ID บทความและข้อที่สองคือคำแนะนำ (DIGG) หรือฝ่ายค้าน (ฝัง)
แต่อันที่สามยังไม่ได้ใช้และค่าเริ่มต้นเป็นเท็จ
เมื่อมองลงไปเขาแสดงสตริง "ส่ง ... " ที่ #DIGG_TIPS จากนั้นส่งข้อมูลไปยังพื้นหลังผ่าน AJAX
หลังจากส่งคืนข้อมูลถ้า N.Issuccess เป็นจริงมันจะ +1 ในการนับ ID ที่สอดคล้องกันของ Like (#DIGG_COUNT) หรือการคัดค้าน (#Bury_Count)
อย่างไรก็ตามหากมูลค่าของ isabandoned เป็นจริงนับ -1
จากนั้นเราสามารถเดาได้ว่าพารามิเตอร์ที่สามใช้ในการเพิกถอนคำแนะนำหรือคัดค้าน พูดง่ายๆคือฉันคลิกคำแนะนำ แต่ฉันไม่ต้องการแนะนำตอนนี้ ฉันสามารถผ่านพารามิเตอร์ที่สามที่แท้จริงเพื่อให้ได้ผลของการยกเลิกคำแนะนำ
มาทดสอบในภายหลัง
ถัดไปข้อมูล N.Message ที่ส่งคืนโดยเซิร์ฟเวอร์จะแสดงที่ #DIGG_TIPS
หากเกิดข้อผิดพลาดใน AJAX มันคือ 500 มันจะแจ้งให้ "ขออภัย! ข้อผิดพลาดเกิดขึ้น! โปรดตอบรับที่ [email protected]" สถานะอื่น ๆ โดยตรงแจ้งเซิร์ฟเวอร์สำหรับข้อความแสดงข้อผิดพลาดที่ส่งคืน
นี่คือกระบวนการทั่วไปเนื่องจากฟังก์ชั่นนี้ง่ายมากจึงสามารถมองเห็นได้อย่างรวดเร็ว
เพื่อนใหม่บางคนอาจถามว่าคุณรู้ได้อย่างไรว่า Currentblogapp, n, t, ฉันมีค่าอย่างไร?
จากนั้นไปที่ขั้นตอนต่อไปและการดีบักแบบไดนามิก การดีบักแบบไดนามิกเป็นวิธีที่มีประโยชน์มากสำหรับโครงการที่รวบรวม
ก่อนอื่นค้นหาซอร์สโค้ด VotePost (ฉันพูดเมื่อวานนี้และไม่เข้าใจมากนักจากนั้นกลับไปดูก่อน)
ง่ายมากเราได้พบซอร์สโค้ด
ต่อไปเราคลิกที่หมายเลข 92 และดำเนินการเบรกพอยต์
ทำไมไม่เบรกพอยต์ที่บรรทัด 91?
เนื่องจากบรรทัด 91 เป็นส่วนการประกาศฟังก์ชันเราไม่สามารถตั้งค่าเบรกพอยต์ได้เราจึงสามารถตั้งค่าเบรกพอยต์ที่รหัสที่จะดำเนินการโดยฟังก์ชั่น
เมื่อเห็นว่าจำนวนบรรทัดของบรรทัด 91 ได้เปลี่ยนเป็นสีน้ำเงินแสดงให้เห็นว่ามีจุดพักในสถานที่นี้ ในเวลาเดียวกันเราสามารถเห็นจุดพักที่ลดลงในคอลัมน์เบรกพอยต์ทางด้านขวา
คอลัมน์เบรกพอยต์จัดการจุดพักทั้งหมดซึ่งสามารถเปลี่ยนเส้นทางไปยังตำแหน่งเบรกพอยต์ที่สอดคล้องกันได้อย่างง่ายดายและจะใช้ในอนาคต
ตอนนี้เราได้ตั้งค่าเบรกพอยต์เสร็จแล้วเราจะคลิกที่คำแนะนำ - (แม้ว่าฉันจะรู้สึกว่าฉันกำลังโกงคำแนะนำ แต่ฉันก็ไม่คิดอย่างนั้นจริงๆฉันเพิ่งพบปุ่มเพื่อฝึกฝน)
เมื่อคุณคลิกปุ่มคำแนะนำสิ่งมหัศจรรย์เกิดขึ้น แทนที่จะเรียกใช้ฟังก์ชั่นการแนะนำคุณกระโดดไปที่จุดพักที่เราเพิ่งลดลงในแผงแหล่งที่มาของคอนโซล
ตอนนี้คุณไม่เพียง แต่เห็นตัวแปรปัจจุบันในคอลัมน์ตัวแปรขอบเขตทางด้านขวา แต่ยังย้ายเมาส์ไปยังตัวแปรใด ๆ โดยตรงเพื่อดูค่าของตัวแปร
คอลัมน์ตัวแปรขอบเขตแสดงขอบเขตปัจจุบันและขอบเขตหลักรวมถึงการปิด
ไม่สะดวกมากเหรอ? - (ตัวแปรขอบเขตช่วยฉันได้มากเมื่อฉันเรียนรู้ครั้งแรก)
ไปที่ขั้นตอนต่อไปแล้วกด F10 3 ครั้งเพื่อดูสิ่งนี้
ทุกครั้งที่เรากด F10 เราจะเรียกใช้คำสั่ง หลังจากกด 3 ครั้งตอนนี้เราจะดำเนินการ $ ("#digg_tips"). css ("สี", "สีแดง"). html ("ส่ง ... ");
ดังนั้นเราสามารถดู #DIGG_TIPS ที่แสดงคำในการส่งบนหน้า
แต่เมื่อเรากด F10 อีกครั้งเราพบว่ามันยังคงดำเนินการตลอดทางโดยไม่ต้องป้อนฟังก์ชั่นการโทรกลับภายในอาแจ็กซ์
นี่เป็นคำถามที่สับสนและฉันต้องการมุ่งเน้นไปที่มัน
สำหรับฟังก์ชั่นการโทรกลับเช่นนี้โดยเฉพาะอย่างยิ่งแบบอะซิงโครนัสเราจำเป็นต้องเบรกพอยต์ต่อไปภายในฟังก์ชั่นการโทรกลับ
ดังนั้นเราจึงสามารถตั้งค่าเบรกพอยต์บนบรรทัด 96 ตอนนี้เราคลิกที่คำแนะนำและยังคงหยุดที่บรรทัด 92 เราสามารถกด F8 และทำลายมันได้ที่ฟังก์ชันการโทรกลับ AJAX
ตอนนี้เราสามารถดีบักข้อมูลการโทรกลับและเรายังสามารถพบว่ามีการปิดเพิ่มเติมในตัวแปรขอบเขตทางด้านขวาซึ่งเป็นการปิด
หากคุณไม่เข้าใจตอนนี้เพียงแค่ผ่านมันไป สิ่งนี้จะต้องได้รับการแนะนำในเวลาจำนวนมากและไม่สามารถอธิบายได้ในเพียงไม่กี่คำ อย่างไรก็ตามคอนโซลนั้นทรงพลังมาก
ในขณะที่เห็นการปิดเรายังเห็นข้อมูลการส่งคืน n ของ Ajax เห็นได้ชัดว่าคุณสมบัติ ISSuccess ของฉันเป็นเท็จและไม่ประสบความสำเร็จเพราะมันส่งคืนข้อความ "ไม่สามารถแนะนำเนื้อหาของคุณเอง"
มันไม่น่าสนใจมากเหรอ? การดีบักแบบไดนามิกทำให้หาข้อบกพร่องได้ง่าย?
จากนั้นมาทดลองกับพารามิเตอร์ที่สาม
เราป้อน VotePost (CB_ENTRYID, 'DIGG', จริง); และกด Enter
นอกจากนี้ยังหยุดที่จุดพักของ Line 92 ดังนั้นมันจะไม่ดีบั๊กในเรื่องนี้และป้อนฟังก์ชั่นการโทรกลับ AJAX โดยตรงของ F8
ที่นี่เราเห็นได้ชัดว่าเมื่อพารามิเตอร์ที่สามเป็นจริงคำแนะนำจะถูกยกเลิกอย่างแน่นอน ในเวลาเดียวกันคุณจะเห็นว่าหมายเลขคำแนะนำนั้นเป็น -1 แน่นอนแม้ว่าจะได้รับการรีเฟรช
ครั้งนี้เราใช้ปุ่มลัดสองปุ่ม F10 และ F8 เราจะแนะนำพวกเขาในรายละเอียดในวันพรุ่งนี้ วันนี้เราจะเรียนรู้การดีบักขั้นพื้นฐานก่อน
การออกกำลังกายหลังคลาส: (ปรับปรุงความยากลำบาก)
1. ตรวจสอบปุ่มส่งความคิดเห็นสำหรับความคิดเห็นด้านล่างและค้นหากิจกรรมของเขา (jQuery ผูกพัน)
2. ดีบักกระบวนการดำเนินการของเหตุการณ์ความคิดเห็นการส่งนี้แบบไดนามิก
หากคุณไม่ทราบแบบฝึกหัดนี้ขอแนะนำให้อ่าน "การพูดคุยสั้น ๆ เกี่ยวกับปัญหาของการวางตำแหน่งซอร์สโค้ดเหตุการณ์ jQuery" เพื่อการวิเคราะห์โดยละเอียด
บทความนี้มาจาก: บทความที่อ่านไม่ออกของ Blog Garden Blogger http://www.cnblogs.com/52cik/