สำหรับคนอย่างฉันที่ศึกษา JavaScript ด้วยตัวเองและไม่มีประสบการณ์ในการเรียนรู้ภาษาอื่น ๆ ในตอนแรกการดีบัก JavaScript ก็เป็นจุดที่ค่อนข้างยาก สิ่งพื้นฐานหลายอย่างจำเป็นต้องได้รับการสำรวจด้วยตัวเองและกระบวนการนี้น่าหดหู่มาก
ฉันคิดเกี่ยวกับการใช้โอกาสแสดงภาพของโพสต์บล็อกปิดด้านบนโดยใช้ Firebug ซึ่งถือได้ว่าเป็นการแบ่งปันประสบการณ์การดีบัก
รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น fn () {
var max = 10;
แถบฟังก์ชันส่งคืน (x) {
ถ้า (x> สูงสุด) {
console.log (x);
-
-
-
var fl = fn ()
สูงสุด = 100;
FL (15);
เลือก Firebug - สคริปต์
แถบการตรวจสอบทางด้านขวาสามารถเป็นวัตถุหน้าต่างและตัวแปรได้สูงสุด, ฟลอริดาและ FN
ในเวลาเดียวกันคุณสามารถดูคุณสมบัติของหน้าต่างด้านล่าง การใช้ตำแหน่งเป็นตัวอย่างคุณสามารถเรียกใช้หน้าต่างโดยตรงตำแหน่งการวางตำแหน่งใน "คอนโซล" และส่งออกค่าแอตทริบิวต์ HREF เพิ่มเติมของตำแหน่ง แน่นอนเมื่ออ้างถึงคุณสมบัติและวิธีการของวัตถุหน้าต่างคุณไม่จำเป็นต้องใช้แบบฟอร์ม "window.xxx" แต่ใช้ "xxx" โดยตรง
กลับไปที่จุด
กลับไปที่คอลัมน์ "สคริปต์" ดีบั๊ก JavaScript และดูค่าตัวแปรโดยกดปุ่ม "เบรกพอยต์"
มีแนวคิดหลายประการที่คุณสามารถเข้าใจได้ก่อน: จุดพักรายการทีละขั้นตอนข้ามทีละขั้นตอนและทางออกทีละขั้นตอน ฉันจะไม่อธิบายที่นี่
เวลานี้เราใช้วิธีการตั้งค่าเบรกพอยต์และเข้าทีละขั้นตอนเป็นหลัก
คุณสามารถคลิกเพื่อตั้งค่าเบรกพอยต์ที่เครื่องหมายบรรทัดซ้ายและคลิกขวาเพื่อตัดสินเป็นประจำ
สามารถตั้งค่าจุดพักหลายจุดได้และสามารถลบจุดพักชุดได้ในคอลัมน์ "เบรกพอยต์"
ที่นี่คุณทำลายจุดโดยตรงที่จุดเริ่มต้นของแท็กสคริปต์และรีเฟรชหน้า
ในเวลานี้
1. วัตถุหน้าต่างดั้งเดิมในพื้นที่การตรวจสอบทางด้านขวากลายเป็นสิ่งนี้และชี้ไปที่หน้าต่าง เอาท์พุทนี้ตำแหน่งนี้ใน "คอนโซล" จะได้รับผลลัพธ์เช่นเดียวกับตำแหน่ง
2. ตัวแปรทั่วโลกสูงสุดและฟลอริด้าเริ่มต้นเป็น undefined
3. fn () เป็นประกาศฟังก์ชั่นเนื่องจากตัวแยกวิเคราะห์จะอ่านการประกาศฟังก์ชั่นก่อนและทำให้พร้อมใช้งานก่อนที่จะดำเนินการรหัสใด ๆ (เข้าถึงได้)
คลิกปุ่ม "ENTER ขั้นตอนเดียว" ที่มุมขวาบน
ดำเนินการรหัสทีละขั้นตอนและดูสิ่งนี้การเปลี่ยนแปลงของค่าของตัวแปรแต่ละตัวและสแต็กในพื้นที่การตรวจสอบ คุณสามารถอ้างถึงบล็อกที่แนะนำ
จากนั้นมาอีกตัวอย่างหนึ่งของสิ่งนี้
รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
ชื่อ var = 'หน้าต่าง';
var obj = {
ชื่อ: 'The Local',
getNameFunc: function () {
console.log (this.name);
return function () {
console.log (this.name);
-
-
-
var c = obj.getNameFunc ();
C ();
ยังคง "ขั้นตอนใน" คุณจะเห็นว่าเมื่อดำเนินการบรรทัดรหัส C () คุณจะป้อน getNameFunc การเปลี่ยนแปลงนี้จากการชี้ไปที่วัตถุหน้าต่างเป็น OBJ และเอาต์พุตคอนโซล 'ท้องถิ่น'
การดำเนินการทีละขั้นตอนช่วยให้คุณเห็นตรรกะการทำงานของรหัสทั้งหมดอย่างชัดเจน
ข้างต้นเป็นบทสรุปของวิธีการใช้ฟังก์ชั่นการดีบักของ Firebug เพื่อทำความเข้าใจการปิด JavaScript และสิ่งนี้ ฉันหวังว่าคุณจะชอบมัน