เผยแพร่เมื่อวันที่ 13 พฤศจิกายน 2024
ลองจินตนาการว่าคุณกำลังดูการติดตามประสิทธิภาพและต้องการไฮไลต์พื้นที่หนึ่งๆ เช่น งานที่มีระยะเวลานานที่สุดหรืองานส่วนที่ไม่จำเป็น ตัวอย่างเช่น คุณอาจต้องการจดบันทึกไว้ใช้อ้างอิงในอนาคตหรือแชร์สิ่งที่ค้นพบกับเพื่อนร่วมงาน วิธีที่ดีที่สุดในการดำเนินการคืออะไร
แน่นอนว่าวิธีนี้คือการพิมพ์ร่องรอยบนกระดาษขนาดใหญ่แล้ววาดและเขียนโน้ตด้วยตนเอง หรือใช้ซอฟต์แวร์ของบุคคลที่สามเพื่อวาดโน้ตบนภาพหน้าจอของร่องรอย (แต่นั่นเป็นวิธีที่ดีที่สุดจนถึงตอนนี้)
ทีมของเรามุ่งมั่นที่จะปรับปรุงเวิร์กโฟลว์ของนักพัฒนาซอฟต์แวร์ เราจึงยินดีที่จะแนะนำทางเลือกสำหรับตัวเลือกเหล่านั้น ซึ่งก็คือความสามารถในการเพิ่มคำอธิบายประกอบลงในการติดตามโดยตรงภายในแผงประสิทธิภาพ
ตอนนี้คุณสามารถกำกับเนื้อหาการติดตามในตำแหน่งที่ต้องการ ไปยังส่วนต่างๆ ของคำอธิบายประกอบเหล่านั้นได้อย่างง่ายดาย และแม้แต่บันทึกคำอธิบายประกอบเหล่านั้นภายในไฟล์การติดตามโดยตรง วิธีนี้ทําให้แชร์ข้อมูลเชิงลึกที่ไฮไลต์ได้ง่ายๆ เหมือนกับการส่งไฟล์ โดยไม่ต้องใช้เครื่องมือภายนอกหรือวิธีแก้ปัญหาชั่วคราว คําอธิบายประกอบไม่เพียงช่วยในการแก้ไขข้อบกพร่องเท่านั้น แต่ยังช่วยให้คุณเข้าใจสิ่งที่เกิดขึ้นได้อย่างรวดเร็วและช่วยให้เพื่อนร่วมงานเข้าใจสิ่งที่เกิดขึ้นได้ดีขึ้นโดยไม่ต้องพูดคุยกันหลายรอบ
คําอธิบายประกอบมี 3 ประเภท ได้แก่
ช่วงเวลาที่ใส่คำอธิบายประกอบ: การติดป้ายกำกับช่วงเวลาในไทม์ไลน์
รายการที่มีคำอธิบายประกอบ: การเพิ่มป้ายกำกับให้กับรายการในไทม์ไลน์
การเชื่อมต่อรายการ: การเชื่อมต่อรายการ 2 รายการด้วยลูกศรเพื่อแสดงความสัมพันธ์
มาดูคำอธิบายประกอบแต่ละประเภทและสถานการณ์ที่คุณอาจพบเมื่อคำอธิบายประกอบมีประโยชน์
ช่วงเวลาที่มีคำอธิบายประกอบ
เวิร์กโฟลว์ทั่วไปในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์คือการบันทึกการติดตามเพื่อแก้ไขข้อบกพร่องของการโต้ตอบที่ช้า มุมมองการติดตามอาจดูสับสนในตอนแรก แต่เมื่อคุณเจาะลึกตัวแฮนเดิลเหตุการณ์และกองคําเรียกที่เฉพาะเจาะจง ทุกอย่างก็จะเริ่มชัดเจนขึ้น วิธีหนึ่งที่ทำให้ใช้งานมุมมองการติดตามได้ง่ายขึ้นคือการสร้างคำอธิบายประกอบเพื่อติดป้ายกำกับว่าช่วงเวลาหนึ่งๆ มักใช้เวลาไปกับอะไร ตัวอย่างเช่น การกำกับเนื้อหาช่วงเวลาอาจมีประโยชน์เพื่อให้ UI อัปเดตอย่างมีความหมายหลังจากการโต้ตอบของผู้ใช้
หากต้องการกำกับเนื้อหาช่วงเวลา ให้กด Shift ค้างไว้แล้วลากจากจุดเริ่มต้นของการโต้ตอบไปจนถึงการอัปเดต UI จากนั้นพิมพ์ป้ายกำกับเพื่อสร้างคำอธิบายประกอบ หากช่วงที่คุณเลือกไม่ถูกต้อง ให้ยกเลิกโดยคลิกที่อื่นก่อนพิมพ์ หรือหากต้องการแก้ไขป้ายกำกับของคำอธิบายประกอบ ให้ดับเบิลคลิกป้ายกำกับ ขณะนี้คุณไม่สามารถปรับช่วงเวลาของคำอธิบายประกอบที่มีอยู่ หากกรอบเวลาไม่ถูกต้อง ให้ลบคำอธิบายประกอบและสร้างคำอธิบายประกอบใหม่
คําอธิบายประกอบนี้จะช่วยให้คุณเห็นภาพงานทั้งหมดที่ต้องทำก่อนการเปลี่ยนแปลงที่ผู้ใช้มองเห็นได้อย่างชัดเจนยิ่งขึ้น เพื่อให้คุณมุ่งเน้นการแก้ไขข้อบกพร่องได้ตามความเหมาะสม
รายการที่มีคำอธิบายประกอบ
นอกจากนี้ คุณยังกำกับเนื้อหาของงานที่รับผิดชอบการเปลี่ยนผ่านด้วยป้ายกำกับรายการเพื่อให้ผู้ใช้เห็นการเปลี่ยนแปลงได้ชัดเจนยิ่งขึ้น
หากต้องการสร้างป้ายกำกับสำหรับรายการ ให้ดับเบิลคลิกรายการที่เลือก แล้วพิมพ์ป้ายกำกับ หรือคลิกขวาที่รายการแล้วเลือก "ติดป้ายกำกับรายการ" จากเมนูบริบท หากต้องการแก้ไขป้ายกำกับของคำอธิบายประกอบ ให้ดับเบิลคลิกที่รายการหรือป้ายกำกับ หรือเลือกตัวเลือก "รายการป้ายกํากับ" จากเมนูตามบริบท
คําอธิบายประกอบรายการเหล่านี้ช่วยให้คุณเห็นงานที่สําคัญ (หรือไม่สําคัญ) ต่ออินเทอร์แอกชันและระยะเวลาที่ใช้ในการดำเนินการได้ง่ายขึ้น
การเชื่อมต่อทางเข้า
วิธีที่สามในการกำกับเนื้อหาการติดตามคือวาดการเชื่อมต่อระหว่างการโต้ตอบกับงานที่ใช้เวลานานซึ่งทำให้เกิดการเปลี่ยน
หากต้องการสร้างการเชื่อมต่อระหว่างรายการ ให้ดับเบิลคลิกรายการที่ต้องการเชื่อมต่อกับรายการอื่น แล้วคลิกลูกศรที่ปรากฏขึ้นทางด้านขวาของรายการนั้น จากนั้นคลิกรายการที่ต้องการเชื่อมต่อ หรือคลิกขวาที่รายการแล้วเลือก "ลิงก์รายการ" จากเมนูตามบริบทของรายการ
ดังนั้น แม้ว่าการโต้ตอบจะสิ้นสุดลงแล้ว คุณก็สามารถใช้คำอธิบายประกอบประเภทนี้เพื่อแสดงให้เห็นได้อย่างชัดเจนยิ่งขึ้นว่ากิจกรรมดังกล่าวเชื่อมโยงกับงานที่ใช้เวลานานซึ่งตามมาและบล็อก UI ในที่สุดอย่างไร
ลบและซ่อนคำอธิบายประกอบ
คุณลบคำอธิบายประกอบทั้งหมดได้อย่างรวดเร็วจากมุมมองรายการคำอธิบายประกอบในแถบด้านข้าง เมื่อวางเมาส์เหนือคำอธิบายประกอบ ไอคอนถังขยะ จะปรากฏขึ้น คลิกไอคอนนี้เพื่อลบคำอธิบายประกอบ
หรือหากต้องการลบป้ายกำกับรายการและคําอธิบายประกอบการเชื่อมต่อรายการที่เชื่อมโยงกับเหตุการณ์หนึ่งๆ ให้คลิกขวาที่เหตุการณ์นั้นแล้วเลือก "ลบคําอธิบายประกอบ" นอกจากนี้ คุณยังลบคำอธิบายประกอบที่มีป้ายกำกับได้โดยนำป้ายกำกับออกและบันทึกคำอธิบายประกอบ
หากต้องการซ่อนคำอธิบายประกอบโดยไม่ลบออกเพื่อไม่ให้รบกวนการสำรวจร่องรอย ให้เลือกช่องทำเครื่องหมาย "ซ่อนคำอธิบายประกอบ" ที่ด้านล่างของแถบด้านข้างของคำอธิบายประกอบ ระบบจะบันทึกค่ากําหนดนี้ เมื่อคุณโหลดการติดตามที่มีคำอธิบายประกอบขณะที่เปิดใช้การตั้งค่านี้ คำอธิบายประกอบจะยังคงซ่อนอยู่จนกว่าคุณจะยกเลิกการเลือกช่องทำเครื่องหมาย
บันทึกหรือโหลดการติดตามที่มีคำอธิบายประกอบ
เยี่ยม คุณเพิ่มคำอธิบายประกอบทั้งหมดเพื่อช่วยตัวเองและผู้อื่นทำความเข้าใจการติดตาม ขั้นตอนถัดไปคือ
คุณไม่จำเป็นต้องถ่ายภาพหน้าจอการติดตามเพื่อส่งให้เพื่อนร่วมงานเหมือนสมัยก่อนที่มีเพียงการกำกับเนื้อหา เพียงบันทึกไฟล์ที่มีคำอธิบายประกอบแล้วส่งไฟล์นั้นให้ เพียงเท่านี้ บุคคลดังกล่าวก็จะอัปโหลดไฟล์ลงในแผงประสิทธิภาพและดูคำอธิบายประกอบทั้งหมดที่คุณทำในบริบทของการติดตาม หรืออาจเพิ่มคำอธิบายประกอบเพิ่มเติมและส่งกลับมาให้คุณก็ได้
นอกจากนี้ DevTools จะบันทึกการปรับแต่งประเภทอื่นๆ ในมุมมองการติดตามด้วย เช่น คุณสามารถแยกพื้นที่ที่น่าสนใจโดยการซูมเข้าและตั้งค่าเบรดครัมบ์ หรือซ่อนรายการในกองซ้อนการเรียกที่ไม่เกี่ยวข้อง และการตั้งค่าทั้งหมดเหล่านั้นจะยังคงอยู่ในไฟล์การติดตาม ซึ่งช่วยให้ทำงานร่วมกันในการแก้ไขข้อบกพร่องด้านประสิทธิภาพได้ง่ายขึ้น การปรับแต่งทั้งหมดนี้ช่วยให้คุณดึงดูดความสนใจไปยังสิ่งสําคัญที่สุดได้ พร้อมกับระบุบริบทของการติดตามแบบอินเทอร์แอกทีฟทั้งหมด ซึ่งแตกต่างจากภาพหน้าจอ
หากต้องการเก็บคําอธิบายประกอบและการปรับแต่งอื่นๆ ไว้ ให้คลิกตัวเลือกบันทึกการติดตามใต้ไอคอนดาวน์โหลด เมื่อโหลดการติดตาม ข้อมูลการติดตามจะมีการปรับแต่งทั้งหมดเหล่านั้น การบันทึกพร้อมคำอธิบายประกอบเป็นตัวเลือกเริ่มต้น แต่หากต้องการบันทึกเฉพาะไฟล์การติดตามดิบ ให้เลือกตัวเลือกบันทึกการติดตามโดยไม่มีคำอธิบายประกอบ
บทสรุป
ข้อมูลนี้อาจดูเยอะไปหน่อย แต่ไม่ต้องกังวล ดูวิธีการสร้างคำอธิบายประกอบได้ในแท็บคำอธิบายประกอบของแถบด้านข้างของแผงประสิทธิภาพ แท็บนี้จะแสดงวิธีการในกรณีที่ไม่มีคำอธิบายประกอบ และแสดงมุมมองรายการของคำอธิบายประกอบเมื่อสร้างแล้ว
เพียงเท่านี้ คําอธิบายประกอบในแผงประสิทธิภาพจะช่วยให้นักพัฒนาแอประบุช่วงเวลาสําคัญภายในการติดตามได้ พร้อมเพิ่มบริบทและข้อมูลเชิงลึกที่ปรับเปลี่ยนในแบบของคุณ ซึ่งจะช่วยปรับปรุงกระบวนการวิเคราะห์ให้มีประสิทธิภาพมากขึ้น ช่วยให้แชร์และทํางานร่วมกันในการเพิ่มประสิทธิภาพได้ง่ายขึ้น ลองใช้คำอธิบายประกอบในแผงประสิทธิภาพและบอกให้เราทราบว่าคุณคิดอย่างไร หากมีความคิดเห็นใดๆ เรายินดีอ่านความคิดเห็นของคุณในปัญหาสาธารณะ
บอกลาความจำเป็นในการใช้เครื่องมือภายนอกและพบกับเวิร์กโฟลว์ที่มีประสิทธิภาพมากขึ้น