ครั้งแรกที่เปิด Baidu จากนั้นกด F12 เพื่อเปิด หากไม่ใช่รายการคอนโซลให้คลิกรายการคอนโซลเพราะเราต้องการใช้งานในคอนโซล -
ดูเนื้อหาต่อไปนี้:
โอเคให้ล้างเนื้อหาก่อนคุณสามารถคลิกขวาและเลือกเมนูคอนโซลที่ชัดเจนหรือป้อน Clear ()
ต่อไปเราป้อน document.getElementById ('KW1'); จากนั้นกด Enter เพื่อดูข้อมูลองค์ประกอบด้วย ID KW1
มันไม่ง่ายมากเหรอ? ขั้นตอนต่อไปคือการใช้ console.dir เพื่อดูข้อมูลองค์ประกอบ
ป้อน console.dir (document.getElementById ('kw1')); จากนั้นกด Enter และมีบางอย่างแปลก ๆ ออกมา
คุณสามารถคลิกสิ่งนี้และมันจะขยายและแสดงรายการวิธีการทั้งหมด พูดง่ายๆคือวิธีการใช้งาน DOM ขององค์ประกอบนี้
ตกลงฉันจะไม่ลงรายละเอียดเกี่ยวกับเรื่องนี้ อย่างไรก็ตามวิธี DIR ก็เป็นหนึ่งในเครื่องมือการดีบัก
คำถามเหล่านี้เป็นสิ่งที่คาดเดาล่วงหน้าเกี่ยวกับเนื้อหาของวันนี้ เราเพิ่งเห็นวิธีการดูองค์ประกอบและวิธีการใช้งานของมันบนคอนโซล
ในความเป็นจริงคอนโซลให้ API บรรทัดคำสั่งมากมายแก่เรา เพื่อให้ง่ายมันเป็นฟังก์ชั่นที่มีเพียงคอนโซลเท่านั้นที่สามารถใช้งานได้
ปัจจุบันวิธีการและคุณสมบัติของคอนโซลคือ: (Chrome 34)
การคัดลอกรหัสมีดังนี้:
["$$", "$ x", "dir", "dirxml", "keys", "value", "profile", "profileend", "MonitorEvents", "Unmonitorevents", "ตรวจสอบ", "Clear", "$", "$", " "$ 4", "$ _"]
PS: สำหรับวิธีการดูสิ่งเหล่านี้ฉันจะพูดถึงพวกเขาในภายหลัง ฉันกลัวว่าคุณจะไม่เข้าใจพวกเขาในขณะนี้
นอกจากนี้คุณยังสามารถอ้างถึง "คอนโซลอ็อบเจ็กต์ #3. บรรทัดคำสั่ง API" เพื่อดูการใช้งานบางอย่าง
สิ่งที่เรามักใช้คือ $, $ _, $ 0- $ 4, Dir, คีย์, ค่า หากคุณสนใจหรือต้องการเรียนรู้ในเชิงลึกโปรดอ่านวัสดุด้วยตัวเอง
การคัดลอกรหัสมีดังนี้:
$ // เพียงแค่เข้าใจว่ามันเป็น document.querySelector
$$ // เพียงแค่เข้าใจว่าเป็น document.querySelectorall
$ _ // เป็นค่าของนิพจน์ก่อนหน้าและวัตถุคอนโซล #3 คำสั่ง API ถูกอธิบาย
$ 0- $ 4 // เป็นองค์ประกอบ DOM ที่เลือกในแผงองค์ประกอบ 5 รายการล่าสุดและจะมีการหารือในภายหลัง
dir // มันคือ console.dir จริงๆ
คีย์ // ใช้ชื่อคีย์ของวัตถุส่งคืนอาร์เรย์ที่ประกอบด้วยชื่อคีย์
ค่า // ลบค่าของวัตถุและส่งคืนอาร์เรย์ของค่า
ตกลงมันไม่ยากที่จะเข้าใจจากคำอธิบาย แต่ไม่เคยทำมาก่อนและไม่มีใครรู้ว่าจะเกิดอะไรขึ้น
Damn Baidu จริง ๆ แล้วมันโหลด jQuery 1.10.2 ในขั้นต้นสภาพแวดล้อมของ Baidu นั้นสะอาดและเหมาะสมกว่าที่จะพูดคุยเกี่ยวกับเรื่องนี้ แต่มันก็กลายเป็นคนโง่ -
มาเปลี่ยนเป็นโซโซเพื่ออธิบาย - เปิด http://www.soso.com/ จากนั้นเปิดคอนโซล
ตอนนี้เราใช้ $ เพื่อดูองค์ประกอบด้วยการสืบค้น ID (เช่นองค์ประกอบ KW1 ใน Baidu) จากนั้นตรวจสอบวิธีการใช้งานขององค์ประกอบ
ฟังก์ชั่นเดียวกับก่อนหน้านี้ แต่ตอนนี้รหัสนั้นง่ายมาก การใช้คุณสมบัติและวิธีการของคอนโซลสามรายการของ $, dir, $ _ ทำให้การดีบักง่ายขึ้นทันทีหรือไม่?
บางคนอาจบอกว่าทุกวันนี้มักใช้ jQuery ฉันควรทำอย่างไรถ้าฉันต้องการตรวจสอบสิ่งนี้?
กลับไปที่ Baidu มาดำเนินการกันเลย
มันแตกต่างจากขั้นตอนนี้เล็กน้อยเพราะขั้นตอน $ ('#kw1') ได้รับวัตถุ jQuery ดังนั้นวิธีแอตทริบิวต์ jQuery ที่เรามาด้วย
หากคุณต้องการดูวิธีแอตทริบิวต์ขององค์ประกอบจริงให้เพิ่ม [0]
แน่นอนถ้าคุณแค่ต้องการเห็นวัตถุ jQuery ก็ไม่มีปัญหา - สำหรับการดีบักแน่นอนคุณต้องลองขณะปรับ -
ในความเป็นจริงมีอีกวิธีที่ง่ายมากซึ่งก็คือคลิกไอคอนแว่นขยายที่มุมซ้ายบนและเลือกกล่องอินพุต
ด้วยวิธีนี้เราสามารถใช้ $ 0 เพื่อดูได้โดยตรง เราได้แนะนำ $ 0- $ 4 ตอนนี้ นี่คือฟังก์ชั่นมันง่าย
พูดคุยสั้น ๆ เกี่ยวกับคีย์และค่านิยมซึ่งจะใช้ในภายหลัง - แต่บางคนยังคงชอบดูโดยตรง
การคัดลอกรหัสมีดังนี้:
var obj = {name: 'nima', อายุ: 22, desc: 'Silk One'};
ฉันเชื่อว่าคุณสามารถเข้าใจได้อย่างรวดเร็วและเข้าใจได้อย่างรวดเร็ว
โอเคเนื้อหาของวันนี้เกือบทั้งหมด แน่นอนฉันต้องลองด้วยตัวเองมิฉะนั้นฉันจะไม่สามารถเรียนรู้จุดความรู้เหล่านี้ได้ -
ถ้าเราสามารถอ่านได้เราทุกคนจะเป็นผู้ทำคะแนนสูงสุดในการสอบเข้าวิทยาลัยใช่ไหม?
ในที่สุดขอให้ฉันบอกเคล็ดลับเล็กน้อยซึ่งก็คือการใช้คำสั่งที่ฉันป้อนมาก่อนคุณไม่จำเป็นต้องกลับเข้ามาอีกครั้ง คุณสามารถค้นหาและลงผ่านปุ่มลูกศร↑และ↓ ฟังก์ชั่นนี้คล้ายกับ CMD และสะดวกมาก -
การออกกำลังกายหลังคลาส: (ตอนนี้กด F12 โดยตรงเพื่อเปิดคอนโซล)
1. ตรวจสอบซอร์สโค้ดฟังก์ชั่นที่แนะนำโดยฟังก์ชั่นนี้ด้านล่างบทความ (แน่นอนคุณสามารถคลิกคำแนะนำฉันไม่ได้หยุดคุณ o (∩_∩) o)
2. ตำแหน่งไปยังตำแหน่งไฟล์ที่ฟังก์ชั่นอยู่ (จุดสุดยอดกำลังจะมา)
3. ปรับเปลี่ยนฟังก์ชั่นเพื่อทำให้เป็นโมฆะ (อันที่จริงมันเป็นเพียงการปรับเปลี่ยนและการดีบักทั่วโลกอย่างง่าย ๆ )
สุดท้ายหากสิ่งที่พูดผิดหรือไม่เข้าใจหรือความคืบหน้าไม่สามารถติดตามได้ ฯลฯ โปรดโพสต์และบ่น
นอกจากนี้หากคุณต้องการให้ฉันเพิ่มบางสิ่งบางอย่างหรือดีบักโครงการจริงหรือปลั๊กอินใด ๆ คุณสามารถโพสต์ได้ แน่นอนถ้ามันเป็นโครงการที่ลำบากมากฉันไม่สามารถเขียนบทความเพื่อแนะนำได้ ฉันไม่ใช่บทความ - -