Angular JS

วิธี Debug แอพ Angular ด้วย Visual Studio Code (รองรับ Angular 2 – 4 )

เรื่องที่เกี่ยวข้อง - Angular, Angular 4, Debugging, Visual Studio Code

อย่างที่บอกว่าช่วงนี้อัพเดตเนื้อหาคอร์ส MEAN Stack เป็น Angular 4 ถ้ามีแนวคิด หรือเทคนิคอะไรดีๆ พลจะมาคุยกันเรื่อยๆ

มารอบนี้คือการทำให้ Debug เว็บแอพพลิเคชั่นที่สร้างจาก Angular 2 และ Angular 4 ในปัจจุบัน แต่เวอร์ชั่นใหม่ๆ ถ้าไม่เกิดการ Major change ก็น่าจะใช้ได้เรื่อยๆ

จริงอยู่ที่ตอนนี้พลก็ปรับมาเขียน Test แทนการนั่ง Debug ปกติแล้ว แต่อันนี้เพื่อนพี่น้องที่เข้าเรียนขอมา เลยทำไว้เผื่อเป็นประโยชน์สำหรับคนอื่นๆ เนอะ

1. ติดตั้ง Visual Studio Code Extension

สำหรับงานนี้เราจะใช้ Extension ที่ชื่อว่า Debugger for Chrome ของ Microsoft ให้ค้นหาและติดตั้งจากส่วนของ Extension ได้เลย

2. สร้าง Launch Configuration

  1. เปิดไปส่วน Debug
  2. เลือกสร้าง Launch Configuration
  3. เลือกแบบ Chrome

เสร็จแล้วให้กำหนดค่าใน launch.json ตามตัวอย่างด้านล่าง แล้วบันทึกไฟล์ให้เรียบร้อย

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

โดยในที่นี้ ไฟล์ tsconfig.json ในโปรเจคต้องกำหนดค่า sourceMap เป็น true ด้วยนะ (ปกติค่าควรจะเป็นแบบนั้นอยู่แล้ว ตอนที่อยู่ในช่วงพัฒนา ไม่ใช่ production)

{
   ...
   "sourceMap": true,
   ...
}

3. รัน Angular Server

เราสามารถสั่ง npm start หรือ ng serve ในกรณีที่เราใช้ Angular CLI ซึ่งจะทำให้เราได้ Web server ที่รันบนพอร์ท 4200 มา

จากนั้นเราสามารถใช้ Launch Configuration ของเรารัน Web Browser ขึ้นมาทดสอบได้

  1. เลือกเป็น Launch Chrome against local server จะเป็นการรัน Chrome ขึ้นมาเชื่อมกับ Node server
  2. อาจต้องมีการ restart
  3. อย่าลืมวาง breakpoint ไว้ในจุดที่ต้องการนะครับ

อ้างอิง – Debugger for Chrome ExtensionGithub

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save