AngularJS เครื่องมือสำหรับ Debug
ชีวิตเดเวลอปเปอร์ที่ไม่มีเครื่องมือสำหรับดีบักนี่เป็นชีวิตที่เหี้ยที่สุดแล้ว มันแย่ยิ่งกว่าพ่อตายเสียอีก
สำหรับ AngularJS นั้นเท่าที่ผมใช้อยู่ตอนนี้คือตัวนี้ ng-inspect for AngularJS
ติดตั้งยังไง
เข้าไปที่ https://chrome.google.com/webstore/detail/ng-inspect-for-angularjs/cidepfmbgngpdapgncfhpecbdhmnnemf
แล้วคลิกปุ่ม ADD TO CHROME
ติดตั้งแล้วจะมีปุ่ม {A} ขึ้นมาที่เมนูบาร์
แล้วใช้ยังไง
ให้คลิกขวาที่หน้าจอ คลิกๆไปตรงไหนก็ได้ แล้วเลือก Inspect
เหลือกๆตาไปทางขวามือ มองหาแท็บ AngularJS สังเกตุสิว่าภายใต้แท็บนี้จะมีตัวแปรชัดๆอยู่ 2 สอง $rootScope, $scope
$rootScope นั่นก็เป็นตัวแปรระดับโกลบอล
$scope นั่นเป็นตัวแปรที่ใช้งานอยู่บนหน้าปัจจุบันที่เราเปิดอยู่
ถ้าคลิกขยายตัวแปร $scope ออกมา ตัวแปรฟอร์มก็อยู่ในนี้ ถ้าของท่านมีการใช้งานฟอร์มนะ
เอาเป็นว่าลองเปิดๆดูตัวแปรดู มันอาจจะดูเยอะหน่อย แต่พอดูเป็นและเข้าใจมันแล้วจะได้ประโยชน์จากมันมากทีเดียว ดีกว่าตาบอดละครับ
ข้อที่ผมยังไม่ชอบของปลักอินตัวนี้คือ ค่าในตัวแปรมันไม่ realtime คือถ้าหากเราเล่นอะไรบางอย่างกับฟอร์ม ค่าบางอย่างที่ปกติมันจะเปลี่ยนไป ใน AngularJS แท็บนี้มันก็ไม่อัปเดตค่า
