HTTP แบบพื้นฐานสุดๆ

http_basic

เป็นเรื่องที่หลีกเลี่ยงไม่ได้สำหรับ  Developer ที่จะเจอคำว่า HTTP เพราะมันเป็นส่วนหนึ่งของชีวิตประจำวันไปแล้วเพราะแทบทุกอย่างในโทรศัพท์มือถือ รวมถึง Web และเกมออนไลน์ นั้นเชื่อมต่อกันด้วย HTTP ทั้งสิ้น

HTTP คืออะไรล่ะถ้าอยากรู้รายละเอียดก็จริงจังก็ไปอ่านใน Wiki ได้เลย

สิ่งที่ผมอยากจะพูดถึงขอเป็นในมุมของ Developer แบบสั้นๆละกัน

HTTP นั้นเป็น Protocol(ข้อตกลง) ที่ใช้ในการติดต่อกันระหว่างอุปกรณ์ที่รองรับการเชื่อมต่อไม่ว่าจะแบบต่อสายหรือ wireless ซึ่งจะมีส่วนประกอบหลักๆคือ Client(เครื่องต้นทาง) กับ Server(เครื่องปลายทาง) และทำการสื่อสารโดยสิ่งที่เรียกว่า HTTP Request/Response

HTTP Request

คือการส่งคำสั่งเพื่อขอข้อมูลโดย Client ไปยัง Server เพื่อให้ส่งข้อมูลตอบกลับมา

Client === ร้องขอ ==> Server

ส่วนประกอบสำคัญของ HTTP Request

  1. URL ซึ่งเป็นเหมือนที่อยู่ของ Server ที่จะไปขอข้อมูล
    โดยที่ URL นั้นก็มีส่วนประกอบหลักๆประมาณนี้ครับ
    Scheme เป็นตัวที่ระบุ Protocol ซึ่งโดยปกติจะเป็น http หรือ https (มี s คือ secure หรือมีระบบความปลอดภัยกว่า)
    Host Name เป็นชื่อของ Server ที่ทำการลงทะเบียนไว้
    Port เป็นหมายเลขสำหรับระบุช่องการติดต่อ (เหมือนกับเราไปธนาคารแล้วมีหลายช่องที่เคาเตอร์ให้บริการ แต่ละช่องก็ให้บริการแตกต่างกันในกรณีปกติ) ซึ่งปกติไม่ต้องระบุก็ได้เพราะมี Default คือ 80 สำหรับ http และ 443 สำหรับ https
    Path เช่นที่อยู่ของข้อมูล ไฟล์ รูป
    Query String เป็นข้อมูลเพิ่มเติมที่ใช้ระบุว่า Client ต้องการข้อมูลมีรายละเอียดปลีกย่อยยังไง

    ตัวอย่างเช่น
    https://www.youtube.com/watch?v=ZV-6SJmSw7
    Scheme คือ https
    Host Name คือ www. youtube.com
    Port ไม่ได้ระบุ ซึ่งค่าปกติเป็น 443 เพราะเป็น https
    Path ก็คือ watch
    Query String คือ v=ZV-6SJmSw7

  2. HTTP Headers ซึ่งเป็นเหมือนกับข้อมูลเพิ่มเติมที่แนบไปให้ Server รับรู้ว่า เช่น มาจากอุปกรณ์แบบไหน Version อะไร ต้องการข้อมูลแบบไหน
  3. Cookies เป็นข้อมูลไม่ใหญ่มากที่ทาง Server สามารถฝากไว้ที่ Client ได้
  4. Method หรือ Verb เป็นข้อมูลที่บอกว่า Client ต้องการทำอะไรกับข้อมูล เพื่อที่ Server จะได้ทำงานได้ตรงตามที่ต้องการ ปกติที่จะเจอกันก็ GET, POST, PUT ตามแต่ประเภทของการขอข้อมูลครับ ซึ่งตอนออกแบบ Server ต้องออกแบบว่าการเข้าถึงข้อมูลแต่ละแบบจะให้ใช้ Method แบบไหน
  5. Request Body หรือ Payload เป็นข้อมูลที่เอาไว้ระบุว่าคำสั่งขอข้อมูลนั้นๆมีรายละเอียดอะไรบ้าง อ่านดูแล้วเหมือน Query String ซึ่งปกติจะใช้กับแบบ GET
    ดังนั้นตัว Request Body เนี่ยจะได้ใช้ในการ Request แบบ POST/PUT

ตัวอย่าง…HTTP Request แบบดิบๆ

POST h ttps://play.google.com/log?format=json HTTP/1.1
Host: play.google.com
Connection: keep-alive
Content-Length: 417
accept: */*
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
content-type: application/x-www-form-urlencoded;charset=UTF-8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Cookie: HSID=AiNeRb8SXTipvwqNT; SSID=AUnId0mBjkh8FuXrP;

[[1,null,null,null,null,null,null,null,[“en-US”,”chrome”,”51.0.2704.103″,”22.0.0″],null,[null,”10.0″,3,null,”en-TH”,2]],78,[[“1469717946642″,null,[],null,null,null,null,”[null,null,null,null,null,null,null,null,null,null,null,[[null,1,null,null,null,null,243,2051499711]],null,null,[1600,900],null,null,null,null,null,null,null,null,[]]”,null,null,null,null,null,null,null,null,null,null,null,[]]],”1469717946643″,[]]

สีแดง คือ Method/Verb
สีส้ม คือ URL
สีเขียว คือ Version ของ HTTP ที่ใช้ในการ request
สีม่วง คือ Headers
สีน้ำเงิน คือ Cookie
สีชมพู คือ Request Body

HTTP Response

คือการส่งข้อมูลที่ทาง Server นั้นตอบรับกลับไปยัง Client ตามที่ได้ขอมา

Client <== ตอบรับ === Server

ส่วนประกอบสำคัญของ HTTP Response

  1. HTTP Status Code ซึ่งเป็นรหัสบอกสถานะว่า การ Request ครั้งนั้นได้รับการตอบรับเป็นอย่างไร
  2. HTTP Response Headers เป็นข้อมูลเพิ่มเติมที่แนบมาโดย Server เช่น ข้อมูลมีขนาดเท่าไหร่ เป็นข้อมูลประเภทไหน
  3. Response Body เป็นตัวเนื้อความของข้อมูลจริงๆที่ Server นั้นตอบกลับมาที่ Client

ตัวอย่าง… HTTP Response แบบดิบๆ

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.google.co.th
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-Playlog-Web
Content-Type: text/plain; charset=UTF-8
Date: Thu, 28 Jul 2016 14:59:04 GMT
Server: Playlog
Cache-Control: private
Expires: Thu, 28 Jul 2016 14:59:04 GMT
Content-Length: 47

[“900000″,null,[null,”2570847921467975139”],[]]

สีเขียว คือ Version ของ HTTP ที่ใช้ในการ request
สีส้ม คือ Status Code ซึ่ง 200 คือสำเร็จ (OK)

สีม่วง คือ Response Headers
สีชมพู คือ Response Body

มาถึงตรงนี้แล้วทุกคนก็คงเข้าใจพื้นฐานหลักๆของ HTTP แล้วนะครับ (y)
แล้วพอทราบมั้ยครับว่าการกด Link บนเวปหรือการพิมพ์ URL เป็นการ Request แบบไหน 🙂

 

Debug – รู้ว่า code เรามาถึงจุดนี้ได้ยังไงกับ Call Stack

สำหรับ Computer Science แล้วคำว่า Stack นั้นหมายถึงโครงสร้างของข้อมูลชนิดหนึ่งที่มีลักษณะคือ

  • เก็บข้อมูลได้เป็นชั้นๆ (เหมือนกับการวางมันฝรั่งแผ่นซ้อนๆกันไปเรื่อยๆ)
  • การที่ข้อมูลเข้า Stack เรียกว่า Push และการเอาข้อมูลออกเรีนกว่า Pop
  • ข้อมูลที่เก็บไว้นั้นเป็นแบบที่หลังได้ออกก่อน (เช่น เวลาเราจะต่อชั้นของมันฝรั่งเราจะทับแผ่นบนสุดของก่อนหน้านั้น จากนั้นมันฝรั่งแผ่นบนสุดจะถูกเอาไปกินก่อนเสมอ)

ส่วน Call Stack นั้นคือ ลำดับการเรียกของ Function/Method ของ Code โดยที่เก็บข้อมูลในแบบ Stack

Call Stack นี้สำคัญมากในการวิเคราะห์หรือการไล่ workflow เพื่อทางการแก้ไขข้อผิดพลาดของโปรแกรม เพราะจะช่วยให้เราเห็นว่า Function หรือว่า Code จุดที่เราสนใจนั้นมีลำดับการเรียกมาได้ยังไงกัน

มาดูกันเลยดีกว่า

ผมมี Code ตัวอย่างหน้าตาแบบนี้ครับ

debug_callstack1.png

Code นี้ไม่มีอะไรมาก คือมี Class Logger เพื่อทำหน้าที่เขียนข้อความลงบน Console

คำถามคือเวลาโปรแกรมนี้ทำงานมีนั้น มันมีลำดับการทำงานยังไงบ้างจนกระทั่งมาถึงการเขียนหน้าจอลง Console ในบรรทัดที่ 24

ซึ่งนี่แหละครับ Call Stack จะช่วยเราได้
1. ผมทำการตั้ง Break Point ไว้หลังจากที่มันเขียนข้อความเสร็จนะครับ
2. ลอง Debug กันเลยครับ F5 จัดไป

จะทำให้ Code เราหยุดที่บรรทัดที่ 24 ตามที่คิดไว้ แต่ตอนนี้เราจะไม่รู้เลยว่า Code มาถึงจุดนี้ได้ยังไง

debug_callstack2.png

ไปที่ Debug เมนูข้างบน Windows > Call Stack

debug_callstack3.png

เราก็จะเป็นหน้าต่าง Call Stack พร้อมกับลำดับชื่อ Functions ที่มีการเรียกจากล่างขึ้นบน

debug_callstack4.png

จากตัวอย่างนี้ตำแหน่งปัจจุบันคือสีเหลืองซึ่งก็คือ Logger.doLog()
และเราจะรู้ลำดับการเรียกของ Code จาก Call Stack (ดูจากล่างขึ้นบน) คือ Program.Main() ซึ่งเป็น Entry Point หลัก -> Logger.StartLog() -> Logger.doLog()

นี่แหละครับขุมพลังของ Call Stack

แต่ช้าก่อนเรายังสามารถเลือกดู Code ใน function ต่างๆใน Stack ได้จากการ Double Click นะครับ
ซึ่งจะทำให้มีลูกศรเขียวๆขึ้นมา

debug_callstack5

และทำให้เราเห็น Code ของ จุดที่เรียก Function นั้นๆ ด้วยครับ

debug_callstack6

สุดท้ายเราก็รู้ว่า Code เรามาถึงจุด Break Point นี้ได้ยังไง กันแล้วนะครับ 🙂

Debugging Series:

Debug – สกัดจุดหยุด Code ด้วย Break Point

ถ้าถามว่าจะเริ่ม Debug โปรแกรมต้องทำอะไรบ้าง ทุกๆคนจะตอบเป็นเสียงเดียวกันว่าไปใส่ Break Point ไว้ใน Code ตรงบรรทัดที่เราต้องการให้ Code หยุดการทำงาน

การใส่ Break Point ก็ทำได้ตามนี้ครับ คือ

  1. คลิ๊กที่พื้นที่หน้า Code บริเวณที่ล้อมกรอบสีแดง ถ้าสำเร็จแล้วจะมี จุดสีแดงขึ้น (คลิ๊กอีกทีเพื่อเอา Break Point ออก)

breakpoint1.png

2. หรือจะใช้ Hot Key ก็ได้ (ปกติของ Visual Studio คือ F9)

breakpoint2.png

เริ่มได้
จากนั้นลอง Run โปรแกรมแบบ Debug เช่นกด F5 ครับ เราจะเห็นว่าเมื่อ Code ทำงานมาถึงบรรดัดที่เราตั้ง Break Point ไว้มันก็จะหยุดเป็นลูกศรสีเหลืองๆ ซึ่งหมายถึงตอนนี้ Code กำลังทำงานอยู่ที่บรรทัดที่ 9

breakpoint3

ถ้าเรามีหลาย Break Point ทำการกด F5 นั้นจะเป็นการสั่งให้ Code ทำงานต่อจนไปถึง Break Point จุดถัดไปนะครับ

แล้วจะ Break ไปทำไมกัน มันมีประโยชน์แน่นอนครับ ถ้า Code ของเรามีตัวแปรเราสามารถเอา Mouse ไปจิ้มดูได้ครับแล้ว Debugger ก็จะโชว์ค่าของตัวแปร

ตัวอย่างเช่น

breakpoint4

Console.ReadLine() ทำการรับข้อมูลจาก User ซึ่งผมพิมพ์ “hey anurocha” ไป แล้วเก็บค่าใส่ตัวแปรชื่อ input ผมสามารถเอา Mouse ไปจิ้มตรง input แล้วจะเห็นว่าตัวแปรนี้เป็นค่า “hey anurocha” อยู่

ที่นี้ถ้าโปรเจคเราใหญ่มากแล้วเราทำการตั้ง Break Point ไว้หลายที่ หลายไฟล์เราจะจำได้มั้ย ซึ่งก็จะมี Break Point Window อยู่ครับ

breakpoint5.png

ซึ่งจะเห็นหน้าต่างสำหรับจัดการ Break Point ทั้งหมดของโปรเจคนี้ครับ เช่น
– เปิด/ปิด
– เซฟ หรือ Export/Import

breakpoint6.png

ซึ่งเราสามารถที่จะปิด Break Point ได้โดยที่เรายัง Mark ตำแหน่งไว้จาก Check Box ทำให้เวลา Code ที่ทำงานจะไม่หยุดตรงจุดนั้นๆ

breakpoint7.png

จบ…(เรื่องพื้นฐาน)

มาต่อกันที่ระดับ Advanced ขึ้นนิดนึงครับ 
ปกติแล้ว Break Point ที่เราตั้งเนี่ยจะทำให้ Code หยุดทุกครั้งที่บรรทัดนั้นเรียก แล้วถ้าเราอยากให้มันหยุดเฉพาะบางกรณีล่ะ

ทำได้ครับ มีทางเลือกง่ายๆ คือทำการ Right Click ที่ Break Point นั้นๆ จะมี Conditions..เมนูให้เลือก

breakpoint8.png

ปกติผมใช้ Condition Expression กับ Hit Count ครับ

breakpoint9.png

  1. Condition Expression – เราสามารถกำหนดได้ว่าจะให้ Code มันหยุดตอนไหนบ้างโดนใส่ expression เหมือนใน if() เช่น ถ้าเรามี loop ที่ทำงาน 100 รอบ แล้วเราต้องการให้หยุดตอน i==10 ก็ใส่ไปแบบนี้
    breakpoint10.png
  2. Hit Count – กรณีเช่นเรามีปัญหาว่า Code จุดนี้รัน 30 ครั้งแล้วมันถึงมีปัญหา ถ้าเรา Break แบบปกติมันจะหยุดทุกครั้งซึ่งจะทำให้เราทำงานช้า เราก็สามารถกำหนดไปเลยว่า ขอหยุดเมื่อมันมารันครั้งที่ 30breakpoint11.png

เมื่อ Break Point มีการตั้งเงื่อนไขขึ้นสัญลักษณ์ก็จะเปลี่ยนไปเป็น

breakpoint12.png

ใช้กับ Google Chrome ก็ได้นะ

breakpointchrome.png

แล้ว Break Point เก็บไว้ที่ไหน????
หลายๆท่านอาจจะงงว่า เราตั้ง Break Point ไว้แล้วปิด Visual Studio ไปแล้วพอเปิดใหม่ Break Point ที่เคยตั้งไว้ก็กลับมาด้วย แต่พอไปเปิดเครื่องอื่นกลับไม่มา

สำหรับ Visual Studio นั้น โดยทั่วไป Break Point นั้นไม่ได้เป็นส่วนหนึ่งของไฟล์ในโปรเจค ทำให้เวลาที่เราแก้ไขมันแล้วเราเอาไฟล์ขึ้น Repository ต่างๆเช่น Git/SVN) คนอื่นจะไม่เห็น

ซึ่งไฟล์ของมันเก็บไว้ที่นี่ “.vs”
breakpoint13.png

ลองเข้าไปดู เจอไฟล์ .suo แต่เปิดไม่ได้…

breakpoint14.png

ลองใช้ 7z เปิดดูก็พอเดาได้ว่าข้อมูลการตั้ง Break Point อยู่ในนี้แหละครับ

breakpoint15.png

เป็นอันจบหลักสูตรพื้นฐานวิชาสกัดจุดครับ HAPPY DEBUGGING

Debugging Series:

Debug – การ Run กับ Debug สิ่งนี้คืออะไร

โดยปกติแล้วพวกเราเหล่า Developer ที่ใช้  Visual Studio หลังจากเขียน Code เสร็จแล้วอยากจะดูผลของการทำงาน เราก็จะใช้ปุ่มสุดฮิต นั่นก็คือ กด F5…สิ่งนี้แหละคือการ Debug!..จบ

อ้าวยังครับ! มาดูกันต่อ
ตัวอย่างเช่นการเลือกเมนูข้างล่างหรือ F5 เนี่ยคือการ Start การ Debug แล้วจริงๆ

2016-07-21 00_28_01-ConsoleApplication1 - Microsoft Visual Studio

หรือแม้กระทั่งการปกปุ่มเขียวๆตรงนี้ก็คืการเริ่มต้นการ Debug

2016-07-21 00_28_01-debug-button

อ้าวแล้วการ Run ล่ะคืออะไร
คำตอบง่ายๆก็คือการ double click ไฟล์ Executable (หรือไฟล์ .exe) ตรงๆไงล่ะครับ
หรือถ้าจาก Visual Studio ก็ใช้ เมนู Start Without Debugging ซึ่งก็คือ Ctrl+F5

2016-07-21 00_28_01-debug-run_btn.png

แล้ว 2 อย่างนี้มันต่างกันยังไง????

(Run with) Debug – จะเป็นการ Run โปรแกรมโดยที่ทาง Debugger จะโหลดไฟล์หรือโมดูลเพื่อเตรียมพร้อมให้เราใช้สำหรับการ Debug โปรแกรมของเราได้ ซึ่งบางครั้งอาจจะทำให้รู้สึกว่าโปรแกรมมันทำงานช้าลงไปบ้าง..
แต่สิ่งที่เราจะได้มาคือ
– หยุดการทำงานของโปรแกรมตาม Code ในบรรทัดที่เราต้องการ
– ดูค่าตัวแปรต่างๆเวลาที่โปรแกรมทำงาน
– แก้ไขค่าได้แม้กระทั่งโปรแกรมทำงานอยู่
– และอีกมากมาย

ถ้าเราใช้ Process Explorer ดูจะเห็นว่าโปรแกรมที่เราทำการ Debug อยู่เนี่ยมันเป็น Process ลูกของ devenv.exe(ชื่อ Process ของ Visual Studio) ตรงๆเลยครับ (สำหรับ .NET ตัว Process จะมีเป็นชื่อ .vshost.exe แทน)

2016-07-21 00_28_01-debug-debug_tree

Run – จะเหมือนกับการใช้งานทั่วไปของ Users ซึ่งจะมี Performance ของโปรแกรมเราตามปกติ
ซึ่งจะเห็นได้ว่า deven.exe นั้นจะสร้าง cmd.exe( Commandline Application ) แล้วจึงทำการรัน ConsoleApplication1.exe ซึ่งเป็นโปรแกรมของเราอีกหนึ่งต่อ

2016-07-21 00_28_01-debug-run_tree

และตามปกตินั้นเวลาที่เรา Debug นั้นหน้าตาของ IDE จะเปลี่ยนไป เช่น

2016-07-21 00_28_01-debug-codeview.png
หน้าจอเขียน Code

ไปเป็น

2016-07-21 00_28_01-debug-debugview.png
หน้าจอตอน Run โปรแกรมแบบ Debug

ซึ่งไม่ต้องตกใจนะครับว่าอุตส่าห์จัดหน้าจอสวยๆแล้ว เพราะหน้าจอแบบนี้แหละจะช่วยให้เราทำการ Debug ได้ง่ายขึ้นแล้วมันก็จะเปลี่ยนกลับถ้าออกจากโหมด Debug ไปเป็นโหมด Editor 🙂

จบตรงนี้หวังว่าทุกท่านจะเข้าใจการรันโปรแกรมแบบ Debug ได้ดีขึ้นนะครับ…

Debugging Series:
Debug – Debugger สิ่งนี้คืออะไร

Debug – Debugger สิ่งนี้คืออะไร

จากที่ผมเขียนเกี่ยวกับ IDE (Integrated Development Enviroment) ไปแล้วนั้น ผมได้เน้นว่าอยากให้ศึกษาเรื่อง  Debugger เพิ่มขึ้น มาคราวนี้เลยขอลงรายละเอียดเลยนะครับ

debug.png

เคยมีโค๊ชที่ผมรู้จักท่านนึงกล่าวไว้ว่าการ Debug นั้นคือศาสตร์มืด เพราะมันเป็นการโกงและไม่ทำให้ Code มีการพัฒนาไปในทางที่เหมาะสม เพราะพอโกงชนะก็มักจะขี้เกียจแก้ Code ให้มันเขียน Unit Test ดีๆได้

แต่ผมคิดว่ามันคือเครื่องมือที่ช่วยเรามากกว่าครับ 🙂

การ Debug ก็คือการวิเคราะห์หาข้อผิดพลาดของ Code ของเราที่มันทำงานไม่ถูกต้องอย่างที่เราคิด ยกตัวอย่างเช่น เราคาดหวังว่า Function จะคำนวณผลมาแบบนึง แต่เราได้ค่าที่ไม่ตรง..หรือว่าเรากดปุ่มนึง แต่ข้อมูลดันออกอีกแบบนึง รวมถึงเวลาต้องการทำความเข้าใจ Workflow ของ Code ที่เราไม่คุ้นเคย ซึ่งปัญหาเหล่านี้ถ้ารู้จักวิธีการ Debug ก็จะทำให้ชีวิตเราง่ายขึ้น

แล้ว Debug กันยังไง? วิธีการ Debug นั้นมีหลายวิธีครับ ขอพูดถึงเฉพาะวิธีที่น่าจะใช้กันบ่อยๆกัน

  1. ไล่ Code ดิบๆ – วีธีสุด Classic คือนั่งเปิด Code ดูแล้วก็รีวิวแบบคิดทุกอย่างในหัว ถ้า Code จุดนั้นไม่ซับซ้อนก็ใช้ได้เหมือนกันครับ
  2. Log – อีกหนึ่งวิธีสุด Classic ที่ใช้การเขียนตัวแปรลงไฟล์ หรือ Console ใช้ได้ดีมากครับ โดยเฉพาะถ้าเราต้องทำที่ระบบปิด เช่น เครื่องของ users หรือบน Production
  3. เช็ค Unit Test – วิธีที่ดีที่สุดและท้าทายที่สุด ซึ่งก็คือถ้าเจอ Bug ก็เพิ่ม Test Case ให้สามารถฟ้องว่าเจอ Bug ได้แล้วก็ทำการแก้ Code ให้ Test ผ่าน จากนั้นเราก็จะได้ Test ที่มันครอบคลุมมากขึ้น
  4. ใช้ Debugger – ซึ่งเป็นสิ่งที่จะพูดถึงต่อไปครับ

Debugger คืออะไร? มันก็คือเครื่องมือช่วยเหลือในการแก้ Bug หรือไล่ Workflow ต่างๆ ซึ่งโดยปกติแล้ว IDE นั้นจะมี Debugger ติดมาให้ด้วยอยู่แล้วสังเกตดูจากเมนูของ IDE ต่างๆครับ จะมีเมนูชื่อ Debug อยู่

เช่น…

Screen Shot 2559-07-19 at 11.58.29 AM.png
Debug ใน XCode
vsdebug
Debug ใน Visual Studio
chromedebug.png
Debug ใน Google Chrome (Developer Tools)

แต่สำหรับ Windows ถ้าไม่อยากลงโปรแกรมแบบหนักๆแบบ Visual Studio เช่นต้องไป Debug  ที่เครื่องของ User ก็มี WinDbg ที่เป็น Debugger แบบ Stand Alone แต่มันค่อนข้าง Advanced มากและเป็น Command Line ผมขอยังไม่พูดถึงนะครับ

ขอทิ้งท้ายไว้กับสิ่งที่ต้องรู้สำหรับการเป็นนัก Debug ละกัน ใครยังไม่รู้จักตัวไหนเจอกันครั้งหน้าครับ

  1. Debug กับ Run
  2. Break Point สกัดจุดหยุดทุกสิ่ง
  3. Call Stack
  4. 3 Steps – Step Over, Step Into, Step Out
  5. หน้าต่าง Watch, Autos, Locals

“If debugging is the process of removing bugs, then programming must be the process of putting them in.” – Edsger W. Dijkstra

ถ้าการ Debug เป็นการจัดการ Bug ให้หมดไป ถ้างั้นการเขียนโปรแกรมก็เป็นการเพิ่ม Bug เข้าไป!

IDE หนึ่งในสิ่งพื้นฐานควรรู้ของ Developer

Developer คนไหนไม่รู้จัก IDE บ้าง? ถ้าคนๆนั้นเป็นคุณก็…..อ่านต่อเถอะครับ 🙂
ส่วนถ้ารู้แล้วก็ลองอ่านเล่นๆดูได้ครับ

IDE ย่อมากจาก Integrated Development Enviroment ซึ่งก็คือเครื่องมือที่ Developer ใช้ในการพัฒนา Software แบบครบวงจร เช่น Visual Studio, XCode, Netbean, Eclips, Xamarin และอื่นๆ

โดยความสามารถหลักๆ ของ IDE ผมขอแบ่งเป็น 4 อย่างใหญ่ๆละกัน

  1. Editor – เอาไว้เขียน Source Code รวมถึงพวก Syntax Hilight, Auto-Complete
  2. Compiler – เอาไว้ Build โปรแกรมจาก Code ไปเป็น Binary
  3. Debugger – เอาไว้ใช้ในการแก้หาวิธีในการแก้ Bug
  4. Tools – เครื่องมือช่วยต่างๆ เช่น Refactoring, จัดหน้าจอหรือ Visual Design, การทำ UML, ดู Database รวมถึงพวกทำ Static Code Analysis และการสร้าง Document จาก Code

มาถึงตรงนี้แล้วมีใครใช้ IDE ครบ 4 อย่างมั้ยครับ….จากประสบการณ์ของผมแล้วน้องๆ Developer  ส่วนใหญ่จะรู้จักมันในฐานะข้อ 1 และ 2 เท่านั้น

ซึ่งผมอยากแนะนำสำหรับคนที่ยังไม่ได้ลองใช้ความสามารถของ IDE ในการเป็น Debugger ควรจะหาเวลาไปเรียนรู้ไว้ครับ เพราะมันจะช่วยทำให้คุณแก้ Bug รวมถึงพัฒนา Feature ที่ซับซ้อนได้เร็วขึ้นจริงๆ

แต่ช้าก่อน…..ถ้าท่านที่สามารถทำงานกับโปรเจคขนาดใหญ่โดยไม่ต้องใช้ Debugger ได้ผมนับถือมากครับ แสดงว่า  Source Code น่าจะมี Unit Test ครบ 100% ซึ่งทำให้เจอBug ได้จาก Unit Test และไม่ต้องพึ่งการ Debug

นี่คือ Utopia of Software – Software ในอุดมคติเลย!