แก้ไข JavaScript โดยไม่ต้อง Refresh
เป็นปกติทุกครั้งที่แก้ไขโค้ด JavaScript เราจำเป็นจะต้องรีเฟรชหน้าเว็บใหม่ทุกครั้ง แต่วันนี้ผมจะมาแนะนำวิธีรัน JavaScript ให้พร้อมใช้งานโดยไม่ต้องโหลดหน้าเว็บใหม่มาแนะนำครับ (สำหรับกรณีที่กำลังป้อนข้อมูลแบบฟอร์ม แล้วไม่อยากป้อนใหม่ เวลาที่ JavaScript error)
ปัญหาเริ่มจากกดปุ่มลบ แล้ว Page not found
(หรือกรณี Event ใดๆ ที่กดปุ่มแล้ว JavaScript ไม่ทำงาน)

ลองตรวจสอบ URL ที่ส่งไปเป็น /remove_price ซึ่งเกิดจากการระบุในไฟล์ JavaScript ไม่ตรงกับหน้าเว็บ


เมื่อเปิดไปที่ไฟล์ PHP ในหน้าเว็บสำหรับลบราคา ปรากฏว่า URL ที่ถูกต้องคือต้องลงท้ายด้วย /removePrice

ดังนั้นก็ต้องกลับไปทำการแก้ไขในไฟล์ .js ให้เป็น URL ที่ถูกต้อง
ซึ่งบางทีเราก็แก้ไขแค่จุดเดียว หากไม่อยากเสียเวลาโหลดใหม่ เราก็คัดลอกโค้ดเฉพาะ Function ที่เราแก้ไข เอาไปรันใน Console เท่านั้นเอง
โดยการเปิดส่วนของนักพัฒนาขึ้นมา ซึ่งทำได้ 2 วิธี
1. คลิกขวา แล้วเลือก ตรวจสอบองค์ประกอบ (บน firefox) หรือ ตรวจสอบ (บน Chrome)
2. กดคีย์ลัด F2
จากนั้นก็คลิกเปิดแท็ป คอนโซล (Console) แล้ววางโค้ดลงไป (ตรงส่วนของเครื่องหมาย >>)

จากนั้นก็กด Enter จะเห็นว่ามีเครื่องหมาย >> ปรากฏขึ้นใหม่ เพื่อพร้อมรันโค้ดต่อไป
หากไม่ปรากฏ error สีแดงใดๆ แสดงว่าโค้ด JavaScript ใหม่พร้อมใช้งาน

ให้สลับไปที่แท็ป เครือข่าย (Network) ล้างค่าเดิมออกก่อน
1. คลิกเป็นแท็ป Network
2. ล้างค่าเดิมออกก่อน
3. กดปุ่มเรียกฟังก์ชั่นลบอีกครั้ง

สังเกตว่า URL จะไปไปตามที่เราแก้ไขเรียบร้อย
ทิ้งท้ายไว้อีกนิด
สำหรับกรณีที่แก้ไขโค้ดหลายที่ จะลองคัดลอกทั้งหมดในไฟล์แล้วเอาไปรันใน Console ก็ได้ แต่อาจจะมีข้อผิดพลาดได้ หากต้องการความแน่ใจให้กด Refresh หน้าเว็บใหม่ด้วยการกด Ctrl + F5 จะได้โค้ด JavaScript ที่แก้ไขใหม่อย่างแน่นอน
ความคิดเห็น
แสดงความคิดเห็น