บทความ IT เจ๋งๆ
วิธี Debug Web Apps โดยไม่ใช้ Browser
04-ก.ค.-18
คัมภีร์เทพ IT
หากคุณเป็น Web Developer หรือ Application Developer บทความนี้น่าจะเป็นประโยชน์กับคุณ เพราะบทความนี้จะบอกถึง วิธีการ Debug Web Apps แบบไม่ใช้ Browser จะทำอย่างไร หรือใช้อะไรในการ Debug อ่านได้จากบทความนี้เลย
เมื่อกดปุ่ม F12 ใน web browsers ส่วนใหญ่ คุณจะเห็นชุดของ debugging tools เป็นชุดเครื่องมือที่มีประสิทธิภาพและเป็นหนึ่งใน feature ที่สำคัญสำหรับ Developer ใน Edge browser ของ Microsoft แต่ web มีการเปลี่ยนแปลงรวมทั้งเทคนิคการพัฒนา application ที่ทันสมัยก็กำลังเปลี่ยนแปลงไปด้วย ตอนนี้คุณกำลังสร้าง apps ที่อาศัย web technologies แต่ไม่ได้เป็นส่วนหนึ่งของ web โดย tools อย่าง React Native Windows, Electron, WebView controls ใน Universal Windows Platform (UWP) apps และ progressive web apps (PWA)s ก็เป็นส่วนหนึ่งของการทำงานของคุณอยู่แล้ว ดังนั้น คุณจำเป็นต้องใช้ tools ที่เป็นส่วนผสมระหว่าง F12, debuggers, profilers และ explorers เพื่อทดสอบ code ของคุณ
Debug Web โดยไม่ใช้ Browser
Technologies อย่าง WebDriver protocol ช่วยให้สามารถควบคุม browsers และ web-rendering services อื่นๆ ได้ ในขณะที่ WebSockets ช่วยให้คุณเชื่อมต่อโดยตรงระหว่าง web-based clients และ servers ซึ่งทั้งสองเป็นพื้นฐานของ remote-controlled debugging environment พร้อมด้วย local server ที่ running ใน web browser ที่สามารถ data จาก in-browser และ in-app instrumentation รวมทั้งจากการเข้าถึงโดยตรงไป DOM และไป JavaScript engine
หากคุณสามารถ remote-control ตัว browsers ของคุณสำหรับการทดสอบ แล้วทำไมถึงไม่แยก debugging tools ที่ใกล้เคียงกับ F12 ออกจาก browser และใช้มันจากการพัฒนาบน PCs นั่นคือสิ่งที่ทีม Edge ของ Microsoft ทำขึ้น พร้อมกับ Windows Store release ของ Edge Dev Tools
Edge Dev Tools เป็น standalone UWP app ที่เชื่อมต่อกับ local และ remote browser sessions พร้อมที่จะเริ่ม debug ผ่าน device และ screen ที่หลากหลาย มันพร้อมสำหรับการโต้ตอบกับ user และ device formats ใหม่ๆ ดังนั้นหากคุณใช้ HoloLens กับ augmented-reality portal ใหม่ของ SharePoint คุณสามารถใช้ USB เชื่อมต่อกับ headset เพื่อทดสอบ WebVR หรือ Babylon.js content ใน site ของคุณ
ความสามารถในการ debug external devices ถือเป็น feature ที่สำคัญ เพราะ web-based UIs กำลังเคลื่อนที่ไปยัง devices ที่เชื่อมต่อผ่าน tools อย่าง Windows IoT Core และ Cortana และด้วย Edge Dev Tools คุณสามารถ build, deploy และ test ทุกอย่างใน code จากการพัฒนาบน PC คุณจะต้องเปิดใช้งาน developer features ของ Windows 10 และเมื่อมันถูก install แล้ว คุณสามารถเปิด development portal ของ device
นี่เป็น feature ที่เป็นประโยชน์ แม้ว่าคุณจะไม่ได้วางแผนจะใช้มันสำหรับการ remote debugging เนื่องจากทำให้คุณได้เห็น web portal ว่าเกิดอะไรขึ้นบ้างกับ target device จาก running apps ไปยัง live performance data การเชื่อมต่อกับ remote device ต้องการเฉพาะ IP address และ HTTPS port ของ portal(โดยทั่วไปคือ 50443) Edge Dev Tools ใช้ address และ port เดียวกันในการเชื่อมต่อไปยัง browser ที่กำลัง run อยู่บน target device คุณต้องตรวจสอบให้แน่ใจว่าทั้งสอง engine อยู่ใน Network ที่ Windows รู้จักใน Active Directory domain หรือที่ถูก mark ว่าเป็น private
Debug Web Apps แบบ Remote
ตอนนี้คุณสามารถเข้าสู่ debugger view เพียงเท่านั้น ยังไม่ใช่ทั้งหมดของชุด dev tools ที่มี copy ของ Dev Tools app หรือแบบที่ F12 มี มันยังขาด features บางอย่างที่คุณจำเป็นต้อง debug PWAs แบบ remote อย่างการสำรวจ cache usage ของ service worker หรือเพื่อ debug EdgeHTML ที่ไม่ได้อยู่บน desktop browser แต่อย่างไรก็ตามมันยัง support การทำงานกับ local PWAs ดังนั้น (อย่างน้อยที่สุด)คุณก็ยังสามารถ debug มันได้ขณะใช้งานบน PC
การ Access เข้าสู่ remote browsers จะทำผ่าน Edge Dev Tools Protocol ซึ่งสอดคล้องกับสิ่งที่ Google ทำกับ Chrome DevTools Protocol แม้ Protocol ทั้งสองจะยังไม่สามารถใช้งานร่วมกันได้ แต่ก็พอจะนึกภาพในอนาคตของทั้ง tools ของ Edge tools และ Chrome tools ออก ว่าจะ support ตัว testing pages บน browser ต่างๆ ด้วย debugging app เดียวกันได้ไม่ว่าจะเป็นแบบ standalone หรือบน IDE ถ้าคุณไม่ต้องการใช้ debugging tools อื่นๆ เพิ่มเติม Edge ก็มี debugging server ของตัวเองที่เป็นทางเลือกให้ remote development portal ของ Windows อยู่แล้ว ซึ่งทำงานโดยการเปิด debugging protocol ผ่าน WebSockets
หากคุณกำลังใช้ Windows development portal อยู่แล้วก็ไม่จำเป็นต้องเปิด sever ของ Edge เพราะมันเป็น host ผ่าน portal โดยอัตโนมัติอยู่แล้ว นี่เป็นการช่วยลด resources ที่ browsers ต้องใช้ ซึ่งช่วยให้มี performance และ interactions ที่ดีขึ้นด้วย
Edge Dev Tools และ PWAs
การใช้ tools ที่มีอยู่ในเครื่อง จะทำให้คุณสามารถ debug ไม่เฉพาะ browser applications แต่ยังเรียกใช้ Edge extensions ได้ด้วยเช่นเดียวกันกับ PWAs คุณสามารถ refresh ตัว app selector เพื่อดูว่าคุณสามารถ attach อะไรได้บ้าง จากนั้นก็ double-click ตัว app ที่ต้องการเพื่อเปิด Dev Tools สำหรับ host app ของ Edge Dev Tools ทำหน้าที่เป็นตัว switcher เพื่อให้คุณสามารถเปิด tools ที่ถูกเชื่อมกับ application หรือ web page ได้อย่างรวดเร็ว
เมื่อเชื่อมต่อแล้ว คุณสามารถ access ไปยังทุก features ของ Edge debugging tools คุณสามารถดู elements ที่ใช้ในการdisplay app เพื่อให้แน่ใจว่า HTML, CSS และ JavaScript ของคุณมี interacts กันตามที่คุณต้องการ นอกจากนี้คุณยังสามารถตรวจสอบ console warnings ซึ่งเป็น feature ที่มีประโยชน์อย่างยิ่งเมื่อทำงานกับ PWAs ซึ่งคุณไม่สามารถดู error information ที่มีอยู่ใน browser application อยู่แล้ว
เมื่อ debug ตัว PWAs คุณไม่เพียงสามารถเจาะลึกลงใน code แต่ยังสามารถเข้าใจด้วยว่า code ของคุณกำลังใช้ features ของ PWA อย่าง local storage และ service workers อย่างไร รวมทั้งจัดเก็บ content อย่างไร เนื่องจาก PWA เป็น standalone app และ users จะคาดหวังว่ามันจะคล้าย app คุณจำเป็นต้องใช้เวลาใน network, memory และ performance tabs โดยใช้ profiling tools เพื่อทำความเข้าใจว่า app ของคุณ interact กับ Windows อย่างไร สำหรับการใช้ Edge Dev Tools profiler คุณสามารถติดตามปัญหาคอขวด(bottlenecks) ใน code ของคุณ โดยให้ข้อมูลที่คุณจำเป็นต้องใช้ในการ rearchitect ตัว app ของคุณ
การดึงเอา Edge Dev Tools ออกจาก browser ถือเป็นสิ่งที่สมเหตุสมผล ปัจจุบันคุณสามารถใช้ web technologies ได้ไม่ว่าอยู่ไหนก็ตาม และ browsers ก็ไม่ได้เป็นสิ่งที่เหมาะสมในการใช้ debug และ test อีกต่อไป PWAs, WebViews และ JavaScript environments อย่าง Electron ......... และมันก็ต้องการการ support เหมือนอย่าง .Net หรือ C++
ที่มา: https://www.infoworld.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความที่เกี่ยวข้อง