ในตอนแรก: ที่จริงฉันคิดว่าจะเขียนสิ่งนี้มาก่อนเพราะมันไม่ยาก แต่ทำไมมีคนจำนวนมากถามพวกเขาไม่ได้ถามวิธีการใช้คอนโซล แต่พวกเขาไม่รู้ว่าคอนโซลสามารถทำอะไรได้บ้าง พวกเขายังรู้ว่ามี console.log และสิ่งอื่น ๆ แต่พวกเขาไม่รู้ว่าทำไมพวกเขาจึงใช้สตริงยาวแทนที่จะแจ้งเตือนถึงข้อมูลผลลัพธ์ ในสายตาของพวกเขาการแจ้งเตือนก็เพียงพอแล้ว ตกลงฉันยอมรับว่าฉันบ่นเล็กน้อย แต่ฉันวางแผนที่จะแนะนำความรู้พื้นฐานของการดีบักในซีรีส์นี้และมันจะไม่เกี่ยวข้องกับลึกเกินไปเพราะสิ่งที่ลึกซึ้งรวมกับความรู้ JS หากคุณยังไม่ถึง JS ในระดับเดียวกันแม้ว่าฉันจะสอนวิธีการดีบักข้อผิดพลาดการถอดรหัสปลั๊กอิน ฯลฯ คุณไม่รู้ว่าฉันกำลังทำอะไรอยู่ จุดประสงค์ของฉันคือแจ้งให้คุณทราบคอนโซลและเริ่มต้นด้วยการดีบัก คุณต้องเดินไปข้างหน้าด้วยตัวเอง
แน่นอนโปรดลอยโดยหรือบ่น -
ไดเรกทอรีดีบัก JS Debug:
ในความเป็นจริงคนพัฒนาเว็บรู้เรื่องนี้ไม่ว่าจะเป็นส่วนหน้าหรือส่วนหลัง แต่หลายคนมุ่งเน้นไปที่การดู HTML และการปรับเปลี่ยน CSS และไม่ได้ใช้คอนโซลเลย
บางทีมือใหม่บางคนไม่ทราบว่ามีสิ่งนี้ -
มีข้อมูลมากมายเกี่ยวกับสิ่งนี้ทางออนไลน์ แต่ไม่ได้พูดถึงการดีบัก แต่เพียงแค่แนะนำวิธีการใช้งาน -
ไม่ว่าจะเป็น Chrome Firefox IE (8 หรือสูงกว่าเวอร์ชัน) หรือเบราว์เซอร์ Sogou 360 ด่วน ฯลฯ เพียงกด F12 เพื่อเปิดคอนโซล
บทความของเราใช้ Chrome เป็นตัวอย่างในการอธิบาย แต่ไม่ใช่เพราะฉันชอบ Chrome - ทุกคนมีความชอบของตัวเอง -
PS: FF ในอดีตมันเป็น Firebug ทั้งหมด แต่ตอนนี้มันเป็นพื้นเมือง
ตอนนี้เราคลิก F12 เพื่อเปิดคอนโซลและคลิกรายการคอนโซล
คุณสามารถเห็นอวตารของฉันและข้อความไม่กี่บรรทัด แต่ยังมีสิ่งต่าง ๆ อยู่ด้านล่าง เราจะเพิกเฉยต่อมันในขณะนี้และจะอธิบายในภายหลัง
ในความเป็นจริงสำหรับ F12 ชื่อที่แม่นยำที่สุดคือเครื่องมือนักพัฒนาและคอนโซลคือคอนโซล
PS: ในฐานะที่เป็นบทช่วยสอนพื้นฐานฉันจะแนะนำการดีบักของคอนโซลและแหล่งที่มาเท่านั้น โปรดเข้าใจฟังก์ชั่นอื่น ๆ ด้วยตัวคุณเอง -
คลิกขวาที่เมนูคอนโซลที่ชัดเจนหรือป้อน Clear () แล้วกด Enter เพื่อล้างเนื้อหาคอนโซล
มาทำตามขั้นตอนแรกในการส่งออกโดยใช้ console.log
ป้อน console.log ("hehe .. ") และ console.log ("ฮิฮิ .. ", "ฮ่าฮ่า .. ") ตามลำดับและกด Enter เพื่อดูผลลัพธ์ผลลัพธ์บนคอนโซล
ในความเป็นจริงมันเป็นเพียงการส่งออกข้อมูลมันง่ายมาก ใช้แทนการแจ้งเตือนและเอกสารเขียนเพื่อแก้ไขข้อบกพร่องและงานของคุณจะง่ายมาก
ตัวอย่างเช่นการดีบักรหัสลูป แต่มีองค์ประกอบหลายสิบหรือหลายร้อยองค์ประกอบในอาร์เรย์ ถ้าคุณตื่นตัวคุณจะบ้า
document.write ไม่เลวเช่นกัน แต่สำหรับเอาต์พุตวัตถุคุณสามารถเห็นสิ่งต่าง ๆ เช่น [วัตถุวัตถุ]
นี่เป็นปัญหาจริงที่เพื่อนใหม่หลายคนพบ
หากคุณใช้ console.log แทนการแจ้งเตือน Document.write ไปยังข้อมูลวัตถุเอาต์พุตคุณสามารถขยายวัตถุนี้ในคอนโซลเพื่อดูข้อมูลเฉพาะ
ตัวอย่างเช่น:
var arr = [{ชื่อ: "nima", อายุ: 22}, {ชื่อ: "nima", อายุ: 20}]; สำหรับ (var i = 0; i <arr.length; i ++) {console.log (arr [i]);};คุณสามารถเห็นข้อมูลวัตถุโดยตรงโดยไม่แสดง [วัตถุวัตถุ] ซึ่งทำให้เราสับสน
ทันใดนั้นคุณรู้สึกว่า console.log ระเบิด?
ในความเป็นจริงนี่เป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็งของเขา ฉันจะพยายามอย่างเต็มที่เพื่อแสดงให้คุณเห็นข้อดีของเขา
ดำเนินการต่อด้วยขั้นตอนตอนนี้ตอนนี้เราป้อน arr โดยตรงจากนั้นกด Enter
มันไม่ได้ จำกัด มากขึ้นหรือไม่? ตอนนี้คุณสามารถคลิกที่วัตถุโดยตรงเพื่อขยายวัตถุในอาร์เรย์นี้เพื่อดูแม้จะบันทึกเอาต์พุตลูป
นี่คือเสน่ห์ของคอนโซลและนี่เป็นเพียงคุณสมบัติพื้นฐานที่สุด
ก่อนอื่นให้เข้าใจว่าวิธีการใดที่อยู่ภายใต้วัตถุคอนโซลเพื่อให้เราใช้
ป้อนคอนโซลและกด Enter เพื่อขยายวัตถุ
คุณสามารถเห็นสีเข้มและแสง สีเข้มเป็นวิธีที่เราสามารถโทรได้โดยตรง สีแสงแสดงถึงแอตทริบิวต์หรือวิธีการเริ่มต้นและไม่จำเป็นต้องกังวลเกี่ยวกับการแสดงผล ฉันจะพูดถึงเรื่องนี้ในภายหลังหากคุณมีโอกาส
ในความเป็นจริงสิ่งเดียวที่พบบ่อยคือ log dir คนอื่น ๆ ไม่ค่อยได้ใช้และพวกเขาจะถูกใช้ในการดีบักขั้นสูงเท่านั้น
คุณสมบัติเสริมเช่นกลุ่มและตารางมีอยู่หรือไม่ขึ้นอยู่กับความชอบของคุณ ฉันไม่ชอบใช้มันมาก
ลองมาดูทีละขั้นตอน อย่างไรก็ตามเริ่มต้นด้วย Log Dir และการดีบักส่วนใหญ่ขึ้นอยู่กับพวกเขา
PS: จริงๆแล้วฉันควรให้เอกสารอย่างเป็นทางการแก่คุณ แต่ Google ไม่สามารถเปิดได้เมื่อเร็ว ๆ นี้ดังนั้นฉันสามารถตรวจสอบฟังก์ชั่นของแต่ละวิธีใน Baidu
ฉันพบเวอร์ชั่นภาษาจีนมันไม่เลวเลย โปรดอ่าน "วัตถุคอนโซล" ก่อน
มาออกกำลังกายหลังคลาสกันสักสองสามครั้ง: (เปิด Baidu ก่อนจากนั้นเปิดคอนโซล)
1 ดูข้อมูลองค์ประกอบด้วย ID KW1 ในคอนโซล
2 จากนั้นใช้เมธอด console.dir เพื่อดูข้อมูลขององค์ประกอบ KW1