Google สร้าง Dart DevTools ใหม่ตั้งแต่ต้นใน Flutter

กระพือเป็น กรอบการเขียนโปรแกรมข้ามแพลตฟอร์มโดยมีเป้าหมายเพื่อแก้ปัญหาในการพัฒนาแอปข้ามแพลตฟอร์มโดยไม่ต้องวุ่นวายกับโค้ดที่ไม่ใช่เจ้าของภาษา ด้วยความรู้เกี่ยวกับภาษาการเขียนโปรแกรม Dart นักพัฒนาสามารถสร้างแอพสำหรับ Android, iOS, เว็บ และเดสก์ท็อปด้วย UI ที่รวมเป็นหนึ่งเดียวในทุกด้าน กระพือ 1.9 นำการรองรับ macOS และ Catalina ในสถานะอัลฟ่าในขณะที่ รุ่น v1.12 ได้รับการสนับสนุนจนครบกำหนดผ่านสถานะพรีอัลฟาแล้ว และ Flutter เวอร์ชัน 1.17 และ Dart เวอร์ชัน 2.8 ถือเป็นการเปิดตัวเสถียรครั้งแรกในปี 2020 วันนี้ Google กำลังเปิดตัว DevTools เวอร์ชันใหม่สำหรับโค้ด Dart และ Flutter ที่ได้รับการสร้างขึ้นใหม่ตั้งแต่ต้นใน Flutter และมาพร้อมกับการปรับปรุงหลายประการ

ในประกาศก่อนหน้านี้ Google ได้กล่าวถึงความตั้งใจที่จะแลกเปลี่ยน Dart DevTools เวอร์ชันปัจจุบันกับ Flutter เวอร์ชันใหม่ สิ่งนี้เกิดขึ้นเมื่อ DevTools ใหม่ได้รับการสร้างขึ้นใหม่ตั้งแต่ต้นใน Flutter DevTools เวอร์ชันใหม่นี้เพิ่มการปรับปรุง เช่น การเปลี่ยนแปลงหน้าประสิทธิภาพและหน่วยความจำ รวมถึงหน้าเครือข่ายใหม่ทั้งหมด

แต่ทำไมต้องสร้างบางสิ่งขึ้นมาใหม่ทั้งที่มันยังใช้งานได้อยู่? ทีมงานที่อยู่เบื้องหลัง Flutter อ้างว่าประโยชน์ด้านการผลิตมีความสำคัญเมื่อสร้างประสิทธิภาพสูง UI และวิธีที่ดีที่สุดในการแสดงความมั่นใจในการกล่าวอ้างเหล่านี้คือการใช้เครื่องมือเดียวกันนี้ ตัวพวกเขาเอง. การสร้างใหม่ใน Flutter ยังช่วยให้นักพัฒนาสามารถเลือกรูปแบบการแจกจ่ายหลังจากเขียนโค้ดซึ่ง เป็นการออกจากผังงานการตัดสินใจในปัจจุบันโดยที่แบบจำลองการกระจายจะกำหนด รหัส.

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

DevTools รวมคุณสมบัติดังต่อไปนี้:

• สารวัตรกระพือ: เครื่องมือสำหรับแสดงภาพและสำรวจแผนผังวิดเจ็ต คุณสามารถเลือกวิดเจ็ตในแอปที่รันอยู่ ลดภาพเคลื่อนไหวทั้งหมด ดูเส้นฐานข้อความ และอื่นๆ อีกมากมาย
  • หนึ่งในคุณสมบัติใหม่คือ Layout Explorer ซึ่งคุณสามารถพบได้ในแท็บ Flutter Inspector ถัดจากแผนผังรายละเอียด Layout Explorer ให้คุณตรวจสอบโมเดลเลย์เอาต์แบบยืดหยุ่นของ Flutter ทีมงานยกตัวอย่างว่าเครื่องมือนี้สามารถช่วยแก้ไขข้อบกพร่องได้อย่างไร เช่น เหตุใดแถวของวิดเจ็ตจึงไม่เป็นไปตามที่นักพัฒนาคาดหวัง เป็นต้น

• มุมมองไทม์ไลน์: แสดงเวลาในการสร้างสำหรับแต่ละเฟรมและแผนภูมิเปลวไฟ ทำให้ง่ายต่อการระบุเฟรมที่มีปัญหาในบริบท
  • ขณะนี้บานหน้าต่างนี้ได้รวมปุ่ม Track Widget Builds ใหม่ ซึ่งจะเพิ่มเวลาในการสร้างวิดเจ็ตทั้งหมดเข้าไป แอปของคุณเป็นไปตามไทม์ไลน์ (โดยเสียประสิทธิภาพในการสร้างโปรไฟล์ของคุณ ดังนั้นแอปจึงไม่เปิดใช้งานภายในเวลานั้น) ค่าเริ่มต้น). สิ่งนี้มีประโยชน์เมื่อคุณพยายามค้นหาว่าวิดเจ็ตตัวไหนอยู่หลังเฟรมที่ช้า

• มุมมองหน่วยความจำ: แสดงให้คุณเห็นว่าแอปของคุณใช้หน่วยความจำอย่างไรในช่วงเวลาที่กำหนด
  • มุมมองนี้จะแสดงแผนที่ความร้อนของหน่วยความจำที่จัดสรร และช่วยให้สามารถติดตามหน่วยความจำแพลตฟอร์มได้เช่นกัน

• มุมมองประสิทธิภาพ: นี่คือตัวสร้างโปรไฟล์ CPU แบบดั้งเดิม ช่วยให้คุณบันทึกเซสชันของแอปและดูว่าฟังก์ชันใดที่ CPU ใช้เวลาส่วนใหญ่ คุณสามารถใช้สิ่งนี้เพื่อตัดสินใจว่าจะใช้เวลาในการเพิ่มประสิทธิภาพที่ไหน
• DevTools มีตัวมันเองด้วย ดีบักเกอร์. สิ่งนี้มีประโยชน์หากคุณไม่ได้ใช้ IDE แต่ยังต้องการตัวเลือกในการเพิ่มเบรกพอยต์ ก้าวผ่านโค้ด ดูค่าตัวแปร และอื่นๆ

• มุมมองเครือข่าย: นี่เป็นสิ่งใหม่ทั้งหมด
  • ดังที่ชื่อของมันบอกเป็นนัย มันช่วยให้คุณตรวจสอบการรับส่งข้อมูลเครือข่ายได้ คุณสามารถดูประวัติคำขอทั้งหมดที่แอปของคุณสร้างขึ้นตั้งแต่เริ่มต้น และรับข้อมูลโดยละเอียดเกี่ยวกับคำขอแต่ละรายการ ซึ่งจะช่วยให้คุณไม่ต้องบันทึกเหตุการณ์เหล่านี้ด้วยตนเองเมื่อพยายามแก้ไขปัญหาเครือข่าย
  • แท็บเครือข่ายปัจจุบันแสดงการรับส่งข้อมูล HTTP การปรับปรุงในอนาคตรวมถึงการแสดง ทราฟฟิกซ็อกเก็ต I/O ทั่วไป.
  • คำขอเครือข่ายจะแสดงในมุมมองไทม์ไลน์ด้วย ดังนั้นคุณจึงสามารถดูได้ในบริบท
• มุมมองการบันทึก: แสดงกิจกรรมจากแอปและเฟรมเวิร์กของคุณ ด้วยเครื่องมือนี้ คุณสามารถกรองข้อความได้อย่างง่ายดาย (เช่น คุณสามารถระบุ "-gc" เพื่อกรองเหตุการณ์ Garbage Collector หรือ "flutter.frame" เพื่อแสดงเฉพาะเหตุการณ์เฟรม) ใน Dart บันทึกข้อความ สามารถจัดโครงสร้างได้และมุมมองการบันทึกก็ใช้ประโยชน์จากสิ่งนั้น

หากต้องการใช้งาน DevTools อย่างสมบูรณ์ คุณสามารถอ่าน เอกสารประกอบ. หากคุณพบข้อบกพร่องใดๆ หรือหากคุณต้องการโหวตคุณสมบัติใหม่ คุณก็สามารถทำได้ต่อไป GitHub.