Ext.js - การดีบักโค้ด Ext JS

โค้ด JavaScript ใด ๆ ที่สามารถแก้ไขได้โดยใช้ alert() กล่องหรือ console.log() หรือด้วยตัวชี้การดีบักในดีบักเกอร์

กล่องแจ้งเตือน

วางกล่องแจ้งเตือนในโค้ดที่คุณต้องการตรวจสอบโฟลว์หรือค่าตัวแปรใด ๆ ตัวอย่างเช่น alert ('message to show' + variable);

เครื่องมือพัฒนา / ดีบัก

ดีบักเกอร์เป็นเครื่องมือที่สำคัญที่สุดสำหรับนักพัฒนาในการตรวจสอบปัญหาและข้อผิดพลาดในโค้ดขณะพัฒนา

Ext JS เป็นเฟรมเวิร์ก JavaScript ดังนั้นจึงสามารถดีบักได้อย่างง่ายดายโดยใช้เครื่องมือสำหรับนักพัฒนาที่จัดเตรียมโดยหรือเฉพาะสำหรับเบราว์เซอร์ต่างๆ เบราว์เซอร์หลักทั้งหมดมีเครื่องมือสำหรับนักพัฒนาสำหรับทดสอบและแก้ไขข้อบกพร่องของโค้ด JavaScript

ดีบักเกอร์ที่ได้รับความนิยม ได้แก่ เครื่องมือพัฒนา IE สำหรับ IE, firebug สำหรับ firefox และเครื่องมือพัฒนา Chrome สำหรับเบราว์เซอร์ Chrome

ดีบักเกอร์ Chrome มาพร้อมกับเบราว์เซอร์ Chrome อย่างไรก็ตามต้องติดตั้ง firebug โดยเฉพาะเนื่องจากไม่ได้มาพร้อมกับ firefox

นี่คือลิงค์สำหรับติดตั้ง firebug สำหรับเบราว์เซอร์ firefox http://getfirebug.com

ทางลัดเพื่อเปิดเครื่องมือพัฒนาใน Windows OS คือแป้นคีย์บอร์ด F12

การดีบักรหัส JS ในดีบักเกอร์

มีสองวิธีในการดีบักโค้ด JavaScript

• วิธีแรกคือการวาง console.log() ในรหัสและดูค่าของบันทึกซึ่งจะพิมพ์ในคอนโซลของเครื่องมือการพัฒนา

• วิธีที่สองคือการใช้เบรกพอยต์ในเครื่องมือการพัฒนา ต่อไปนี้เป็นกระบวนการ

  • เปิดไฟล์ในสคริปต์ทั้งหมดที่มีอยู่ภายใต้แท็กสคริปต์

  • ตอนนี้วางเบรกพอยต์ในบรรทัดที่คุณต้องการดีบัก

  • เรียกใช้แอปพลิเคชันในเบราว์เซอร์

  • ตอนนี้เมื่อใดก็ตามที่การไหลของรหัสมาถึงบรรทัดนี้มันจะทำลายรหัสและอยู่ที่นั่นจนกว่าผู้ใช้จะเรียกใช้รหัสด้วยปุ่ม F6 (ไปที่บรรทัดถัดไปของรหัส), F7 (เข้าไปในฟังก์ชัน) หรือ F8 (ไป ไปยังเบรกพอยต์ถัดไปหรือรันโค้ดหากไม่มีเบรกพอยต์เพิ่มเติม) ตามโฟลว์ที่คุณต้องการดีบัก

  • คุณสามารถเลือกตัวแปรหรือฟังก์ชันที่คุณต้องการดูค่า

  • คุณสามารถใช้คอนโซลเพื่อตรวจสอบค่าหรือตรวจสอบการเปลี่ยนแปลงบางอย่างในเบราว์เซอร์เอง