Debug – 3 Steps(Into, Over, Out) วิถีแห่งนักไล่ Code

steps_title

ในการ Debug โปรแกรมนั้น การที่เราจะไล่ Workflow ว่ามันทำงานถูกต้องหรือไม่นั้น มีเครื่องมือที่ช่วยเหลือเราให้เราไล่ Code ได้ง่ายขึ้น สิ่งนี้คือ 3 Steps มหัศจรรย์

  • Step Over – จะสั่งให้ Code ทำงานในบรรทัดที่หยุดอยู่ และจะไปหยุดที่บรรทัดถัดไป
  • Step Into – จะเป็นการเข้าไปดูข้างใน Function/Method ของบรรทัดนั้นๆ ถ้า Code ของบรรทัดนั้นไม่ใช่ Function/Method ก็จะทำงานเหมือน Step Over
  • Step Out – เป็นการสั่งให้ Code ทำงานให้จบใน Function/Method นั้นๆ แล้วจะไปหยุดที่ Code ที่เรียก Function/Method นี้

ซึ่งเมนูหรือ Hot Key ก็ตามนี้เลยครับ

step_menu.png

มาดูตัวอย่างกันครับ

ผมมี Code ประมาณนี้ และผมทำการตั้ง Break Point ไว้ที่บรรทัดที่ 9

steps1.png

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

steps2.png

ถ้าเราอยากให้ Code มันทำงานบรรทัดที่ 9 ให้จบก็ลองกด Step Over ดูครับ ก็จะเห็นว่า ลูกศรสีเหลืองนั้นขยับมาที่บรรทัดที่ 10

steps3.png

ที่นี้ถ้าเราอยากรู้ว่าใน Method ที่ชื่อว่า StartLog() มันจะทำงานแบบไหนเราก็สามารถ Step Into เข้าไปได้เลยครับ จะเห็นว่า ลูกศรสีเหลืองขยับมาอยู่ใน Method นี้แล้วในบรรทัดที่ 17

steps4.png

ถ้าเราดูที่หน้าต่าง Call Stack จะเห็นว่าตอนนี้ Code นั้นกำลังทำงานอยู่บน Stack นี้แล้ว

steps5.png

ลอง Step Into อีกครั้งก็จะเข้าไปใน Method doLog() อีกหนึ่งชั้นในบรรทัดที่ 22
steps6

ที่นี้ลอง Step Out ออกมาเพื่อออกจาก Method doLog() ครับ จะเห็นว่า ลูกศรสีเหลืองกลับมาที่บรรทัดที่ 18 ซึ่งเป็น Code ที่เรียก doLog() และถ้าดูใน Console จะพอว่ามันมีการเขียน “hey log…” ไปแล้ว ซึ่งแสดงว่าโปรแกรมได้ทำงานในส่วนของบรรทัดที่ 23 ซึ่งเป็น Console.Write() ไปแล้ว

steps7.png

เพียงเท่านี้เราก็สามารถนั่งไล่ Code แบบลงรายละเอียดได้ทุกบรรทัดและทุก Function/Method แล้วครับ 🙂

และสุดท้ายมี Quote ดีๆอยากจะบอกทุกคนว่า

“Code never lies, comments sometimes do.”~R.Jeffries

Code ไม่เคยโกหก, แต่ Comments บางทีอาจจะ….

เราต้องเชื่อในสิ่งที่ Code เขียนไว้…

 

Debugging Series:

Advertisements

3 thoughts on “Debug – 3 Steps(Into, Over, Out) วิถีแห่งนักไล่ Code”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s