คำสั่ง debugger; ใน javascript

เพื่อนๆ คงคุ้นเคยกับหน้าจอนี้ใน Developer Tools ของ Chrome/Firefox/Safari ที่เราสามารถกำหนด breakpoint เพื่อหยุดการทำงานโปรแกรม และไล่ดูสถานะของตัวแปรต่างๆ รวมทั้งรันโปรแกรมต่อไปจนถึง breakpoint ต่อไปได้

สมมติว่าฟังก์ชันนี้ซับซ้อนมาก… เราก็กำหนด breakpoint และรันโปรแกรม บราวเซอร์0tโชว์สถานะของตัวแปรต่างๆ ว่า ตอนนี้ a = 1, b =2 , …

เรารู้ว่าบราวเซอร์มี feature นี้ช่วยให้เราเขียนโปรแกรมง่ายขึ้น… แต่ไม่ค่อยได้ใช้เพราะการไล่เปิด tab source code และกำหนด breakpoint ตำแหน่งที่เราต้องการนั้นยากเหลือเกิน (บางกรณีทำได้ยากเพราะใช้ dependency injection/asynchronous module load) ทำให้ Chrome ไม่แสดง source code โปรแกรมเราให้เลือก

คำสั่ง debugger; ช่วยคุณได้!

เมื่อหาบรรทัดที่จะกำหนด breakpoint ไม่เจอ (หรือหาเจอแต่ขี้เกียจเพราะใช้เวลานาน) ลองทำตามนี้ดีกว่า

1. ใส่คำสั่ง debugger; ไว้ใน source code ตำแหน่งที่ต้องการกำหนด breakpoint เช่น

   function addMe() {
       var a = 1;
       var b = 2;
       debugger;  // ใส่บรรทัดนี้
   
       var c = a + b;
       document.getElementById("result").innerHTML = "a + b = " + c;
   }

2. Reload หน้าเว็บ และเปิด Developer Tool tab Sources (ใช้ได้ใน Chrome, Firefox, Safari)
3. รันโค้ดให้ถึง breakpoint

อ่านเพิ่มเติม:

• debugger – JavaScript | MDN

Web development in 2000 vs. 2012

It’s going to be Barcamp Bangkhen 2012 soon. So I tried to come up with some topics for the camp.

Because I have a chance to try Bootstrap framework while I was working on a website at work. I found it is a lot more convenient than it was in 2000.

Nontri Internet Auto-login: firefox Extension 1.1

หลายคนที่ใช้อินเตอร์เน็ตเกษตร (เช่นผม) อาจจะเจอกับหน้าเว็บ login ทุกครั้งที่ต้องการเข้าอินเตอร์เน็ต เนื่องจากมหาลัยฯต้องจัดเก็บบันทึกการใช้งานอินเตอร์เน็ต ตามพรบ. คอมฯ ถ้าใช้เครื่องส่วนตัวอยู่อาจแก้ปัญหาโดยการให้ browser ช่วยจำ password ได้ (แต่มีเครื่องเซิร์ฟเวอร์ 10 เครื่องสำหรับ login แปลว่าต้อง save password ไว้สำหรับ 10 เซิร์ฟเวอร์ อาจทำได้ง่ายๆ แต่ผมทำไม่เป็น เลยเขียนโปรแกรมดีกว่า)

ก่อนหน้านี้เคยเขียนโปรแกรมช่วย login ด้วย C# (แต่หลายคนเอาไปใช้แล้วก็เจอ bug shutdown ไม่ลง รวมทั้ง password ยังถูกเก็บเป็น plain-text บนเครื่องด้วย) เลยตัดสินใจลองเขียน Firefox Extension (ไม่แก้ bug โปรแกรมเดิม แต่เขียนใหม่เลย – -“)

พอจะเขียน Extension ก็ค้นๆ ไปเจอ Building an Extension สอนเขียนทีละขั้นตอน ช่วยให้หัดเขียนได้เร็วมาก ใช้เวลาประมาณ 3 ชม. (ระหว่างเรียน assembly) รวมเวลาศึกษา doc จาก mozilla <developer center /> ด้วยครับ

Username และ Password จะถูกเก็บ(แบบเข้ารหัส)ด้วย Firefox Password Manager

วิธีติดตั้ง

1. ดาวน์โหลด autologin Extension (9kb) และติดตั้งเหมือน extension อื่นๆ โดย “กดปุ่ม Install”

2. อย่าลืม! ติดตั้ง Certificate ของ KU ก่อน ไม่งั้นโปรแกรมไม่เวิร์ค ที่ http://ca.ku.ac.th/ssl.crt/ROOT-KU-CA.crt

3. คลิกขวา เพื่อกำหนด username/password ก่อนครับ (ตอนนี้ถ้า browser redirect ไปหน้า login เมื่อไหร่โปรแกรมจะ login ให้อัตโนมัติทันทีครับ)

ปล. ตอนนี้โปรแกรมใช้ไม่ได้แล้วครับ มหาลัยเปลี่ยน หน้า login ใหม่อีกนิดหน่อย…. รอใช้โปรแกรมของ jtf ครับ 😀

มาดูวิธีเช็ค ว่า “เขามั่วรหัสประชาชนรึเปล่า?”

ขอเริ่มบทความแบบพิสดารบ้างได้ไหมครับ ก่อนอ่านบทความต่อไป ผมขอนำเสนอ หมอดูที่ชื่อว่า “แม่นมั่กๆ”

หมอดู แม่นมั่กๆ

หมอดู แม่นมั่กๆ สามารถทำนายรหัสประชาชนหลักที่ 13 จาก รหัสประชาชน 12 หลักแรกได้ครับ ไม่เชื่อก็ลอง คลิกที่นี่ แล้วกรอกรหัสประชาชน 12 หลักแรกดูครับ

โอ๊ะ ทำได้ไงเนี่ย อยากรู้หละสิ ถ้าอยากรู้มาลองอ่านบทความต่อสิครับ ^_^