วิธีการ debug Angular application ใน Jetbrains IDE (update ปี 2021)

ปกติผมใช้ Jetbrains IDE สำหรับการเขียน code รวมถึง Angular เพราะผมชอบ UI และชินกับ keymap แล้ว (อีกสาเหตุนึงคือเสียค่า Ultimate edition ไปแล้วต้องใช้ให้คุ้ม ฮา) พอเข้าไปอ่านบทความ Debugging your Angular application in Intellij IDEA แล้วพบว่ามัน outdated เนื่องจาก plugin สำหรับการ debug มันหายไปแล้ว

TLDR;

Jetbrains ได้ทำการ update debugger บน browser มาเป็นแบบ built-in แล้ว ซึ่งมี tutorial ไว้แล้ว จบ

เริ่มจาก configure ให้ใช้ Angular CLI ผ่าน IDE

1. ไปที่ Run > Edit configurations > Templates > npm > Angular CLI Server
2. เลือก package.json และ runtime และ package manager ต่างๆ

จากนั้น configure browser ผ่าน IDE (optional)

1. ไปที่ Run > Edit configurations > Templates > JavaScript Debug > Angular Application
2. Configure web browser ตามต้องการ

เริ่ม Debug

1. เปิด Debug ใน Angular CLI Server มันจะไป run คำสั่งที่ configure ไว้ ตามรูปข้างบนก็คือ yarn start
2. กด Ctrl + Shift ค้าง แล้วค่อย click ไปที่ link http://localhost:port เพื่อเปิด debug mode จะเห็น JavaScript Debug tab ขึ้นมา
3. เพิ่ม breakpoint เป็นอันจบงาน

Debug แบบนี้มันดีกว่ามา log ทีละบรรทัดนะ

แต่ไม่ว่าจะทำท่าไหนถ้าเราต้องมาทำบ่อยๆ แสดงว่ามันผิดปกติแล้วหรือเปล่านะ