Debug แอพ Angular ด้วย Augury

Logo ของ Augury เป็นรูปพระจันทร์ ดั่งเทพธิดาพยากรณ์

หลายคนคงเคยเจอเหตุการณ์ที่แอพ Angular ของเราเนี่ยมันทำงานไม่เป็นตามที่เราต้องการ แล้วก็ใช้เวลาแก้นานมากกกไม่รู้ว่ามันพังตรงไหน ไล่ไฟล์โน้นไฟล์นี้ แต่เดี๋ยวก่อนครับ!! แค่คุณอ่านบทความนี้ในอีก 10 นาที ปัญหาเหล่านี้ของคุณจะหมดไป เราขอแนะนำให้คุณรู้จักกับ

Augury

Augury เป็น Chrome Developer Tool extension สำหรับ debugging และ profiling แอพ Angular เวอร์ชั่น 2 เป็นต้นไปครับ

ฟีเจอร์เด่นๆเลยคือ
1. ดู property และ dependency ของแต่ละ component ได้ แก้ค่าได้ด้วย
2. ดู router tree ที่แสดงเป็นแบบกราฟให้ดูเลย เทพมาก บอกด้วยว่าตัวไหนเป็น lazy load
3. ดูได้ว่าในแอพเราใช้ Module อะไรบ้าง และข้างในมีอะไรบ้าง

ตัว Auguryใช้ได้กับเฉพาะ Development mode นะครับ

ขั้นตอนการติดตั้ง
ติดตั้งผ่าน Chrome Web Store เลยครับ
1. เปิด Chrome ก่อนนะครับ เข้า Chrome Web Store แล้ว search หา augury หรือกดลิ้งค์นี้เลยครับ https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd

Augury บน Chrome Web Store

2. เสร็จแล้วครับ ง่ายมาก เขียนทำไมนะข้อ 2

วิธีการเข้า Augury

1. เข้าเว็บที่พัฒนาด้วย Angular2 ของเราครับ ย้ำอีกครั้งนะครับว่าต้องเป็น development mode ถ้าใครใช้ angular cli คือต้องไม่ serve ไม่ build ด้วย -prod หรือ -t production ในตัวอย่างนี้ผมใช้เว็บที่ใช้ในงาน Frontend War นะครับ

2. เปิด Developer tools ขึ้นมาครับ แล้วเลือกไปที่ Augury menu ใน developer tools เราก็จะเจอ Augury แล้วครับ ถ้าไม่เจอเมนู Augury ลองปิด browser แล้วเปิดใหม่ดูนะครับ

ใน Augury จะมี 3 เมนูใหญ่ครับ ดังนี้

• Component Tree ไว้ดูโครงสร้างในแอพ Angular ของเราว่าข้างในมี component อะไรบ้าง ยังสามารถดู property และ dependency ของ component นั้นๆได้ด้วย
• Router Tree ไว้ดูโครงสร้าง Router ของเราในรูปแบบ graph ครับ สวยงามมาก
• NgModules ไว้ดูว่าในแอพเรามี module อะไรบ้าง ทั้ง module ที่เราสร้างขึ้นมา และ module ที่เรา import มาใช้งาน

มาดูรายละเอียดของแต่ละส่วนกันครับ

Component Tree

เวลาเลือก component ที่ด้านขวาจะแสดง property ต่างของ component นั้นรวมถึง dependency ด้วย

• ในหน้า Component Tree จะแสดง component เป็นลำดับขั้นครับ เราสามารถดูได้ว่าแต่ละ component มี component อะไรอยู่ข้างในอีกบ้าง
• เวลาเราคลิกที่ component เรายังสามารถดู property ของ component นั้นๆได้ด้วย property ที่ว่านี่รวมไปถึง Input, Output และ Dependency ด้วยครับ
• เราสามารถกดไปดู source code ของ component ได้ด้วยนะครับ แค่กด (View Source) ข้างชื่อ component

Properties Panel

แก้ Property ใน component และแสดงผลลัพธ์ทันที

• เราสามารถแก้ค่า Property ต่างๆ รวมไปถึง Input ของ componet ได้จากในส่วน Properties ได้เลยครับ

Emit event จากใน Augury ได้เลย

• ในส่วนของ Output ก็ไม่น้อยหน้า เราสามารถลองสั่ง emit event ออกไปเพื่อทดสอบการทำงานได้อีกด้วย แค่กดปุ่มสีเขียว emit แค่นั้นเอง ส่งค่าไปได้ด้วยนะ

เข้าถึง component instance ผ่านทาง $a

• อีกฟีเจอร์นึงที่ถูกซ่อนไว้นะครับ คือเราสามารถ access เข้าไปใน component ได้จากทาง console เลย
• เริ่มต้นที่เราต้องเลือก component ที่เราจะ access ในส่วน component tree ก่อน แล้วพิมพ์ $a ใน console เลยครับ
• มีหลายอย่างที่เราสามารถเข้าถึงได้นะครับ แต่ตัวสำคัญและน่าจะได้ใช้กันคือตัว componentInstance ตัวนี้คือ instance ของ component เราครับ ในตัวอย่างเราสามารถเรียกฟังชั่นของ instance ได้จากใน console เลย

ต้องเปิด Augury ไว้นะครับถึงจะสามารถเรียก $a ได้

Injector Graph Panel

เส้นประแสดงให้เราเห็นว่า Dependency ถูกสร้างและฉีดมาจากที่ไหนครับ

ในส่วนของ Injector Graph นี่หลายคนอาจจะคิดว่าไม่ได้ใช้หรอก แต่จริงๆมันมีประโยชน์มากนะครับ เราสามารถดูได้ว่า dependency ที่แต่ละ component ใช้นี่ใครเป็นคนฉีดเข้ามาให้ บางครั้งการทำงานแปลกๆของแอพก็มาจากการที่เราไม่ได้ dependency ตัวที่เราต้องการครับ เช่นเราหวังว่าจะได้ Service ตัวนึงที่แชร์ข้อมูลกันกับ component อื่น แต่เราดันไปประกาศ providers ใหม่ใน component ของเราเองทำให้ component เราฉีด dependency ตัวใหม่ที่ไม่ใช่ตัวที่ใช้กับ component ตัวอื่นมาให้

รายละเอียดเพิ่มเติมของ Dependency Injection ผมจะเขียนในบทความต่อๆไปนะครับ หากตอนนี้ใครต้องการศึกษาเรื่องนี้เพิ่มเติมสามารถอ่านได้ที่นี่ครับ
https://angular.io/docs/ts/latest/guide/dependency-injection.html
https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

เกล็ดเล็กเกล็ดน้อย

เราสามารถเลือก component บนหน้าเว็บเราผ่านทางเจ้าตัวนี้ได้นะครับ (ไม่รู้ว่าเรียกว่าอะไรผมเรียกว่า inspector tool) คลิกเลือกแล้วไปจิ้มบนเว็บเราตรง component ที่เราจะเลือก

Router Tree

ตามชื่อเลยครับอันนี้ คือแสดง route ให้เราเห็นในรูปแบบ tree ซึ่งเราจะเห็น route ที่อยู่ในแอพเราทั้งหมด

รูปแสดง route ที่ถูกโหลดแบบ Lazy Load

ตัวที่น่าสนใจในส่วนนี้คือถ้า route ไหนที่เป็น Lazy Load จะมี [Lazy] เขียนไว้ครับ ถ้า module ของ Lazy Load นั้นยังไม่ถูกโหลดขึ้นมาเราก็จะไม่เห็น route ข้างใน แต่ถ้าถูกโหลดขึ้นมาแล้วก็จะเห็น route ข้างในครับ

NgModules

ในเมนูนี้จะแสดง module ในแอพเราครับ ทั้ง Root Module, Import Module และ Feature Module จะถูกแสดงในหน้านี้หมดเลย ซึ่งการแสดงผลจะถูกแบ่งออกเป็นแต่ละ module ทำให้เราเห็นว่า module แต่ละอัน import module อะไรเข้ามาใช้บ้าง มี export, provider, declaration อะไรบ้าง เอาไว้เช็คได้นะครับเวลาเราสร้าง module มาให้คนอื่นใช้ว่าเรา export ของครบไหม มี provider หรือ import ตัวไหนที่ไม่ใช้แล้วรึเปล่า

สรุป

Augury เป็นเครื่องมือที่นักพัฒนา Angular ควรมีติดเครื่องไว้ครับ จะสรุปทำไมนะแบบนี้ โหลดเลยครับ
ใครที่อยากศึกษารายละเอียดของ Augury ลึกกว่านี้สามารถไปอ่านเพิ่มเติมได้ที่เว็บนี้เลยนะครับ https://augury.angular.io/pages/guides/

สามารถเสนอแนะติชมมาได้นะครับ ใครที่ลองใช้แล้วมีอะไรอยากจะแชร์มาแชร์กันได้เลย ไม่ว่าจะเขียนเป็นบทความ หรือคอมเม้น หรือถ่ายวิดีโอวิธีการใช้ แล้วเอามาแชร์กัน ในกรุ๊ป AngularJS Developer Thailand เลยครับ ผมสิงอยู่ที่นั้น

ช่วงโฆษณาครับ

Polymer Logo

ใครสนใจ Web Component สามารถ Join Facebook group Polymer Developer Thailand ใน Facebook เพื่อมาคุยกันได้นะครับพึ่งเปิดเลย
ในกรุ๊ปเราไม่ได้คุยแต่เรื่อง Polymer อย่างเดียว แต่เราคุยถึงเรื่อง Web Technology ทั้งหมด เพราะตัว Polymer เองเป็นแค่ Library ในการช่วยสร้าง Web Component ดังนั้นทุกอย่างที่เป็น Standard Web Technology เกี่ยวข้องหมดครับ

ปล. Web Component สามารถเอาไปใช้กับทุกเฟรมเวิคได้หมดนะ Angular, React, Vue ฯลฯ ใช้ร่วมกันได้หมดเลย