ในไตรมาสสุดท้ายของปี 2019 ทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้เริ่มปรับปรุงประสบการณ์ของนักพัฒนาแอปในเครื่องมือสำหรับนักพัฒนาเว็บเกี่ยวกับคุกกี้ ซึ่งมีความสำคัญมาก เนื่องจาก Google Chrome และเบราว์เซอร์อื่นๆ ได้เริ่มเปลี่ยนลักษณะการทำงานของคุกกี้เริ่มต้นแล้ว
ขณะที่หาข้อมูลเกี่ยวกับเครื่องมือที่เครื่องมือสำหรับนักพัฒนาเว็บให้บริการอยู่แล้ว เรามักพบสถานการณ์ต่อไปนี้
😰 คอนโซลเต็มไปด้วยคำเตือนและข้อความแสดงข้อผิดพลาดที่มีคำอธิบายทางเทคนิคและบางครั้งมีลิงก์ไปยัง chromestatus.com ข้อความทั้งหมดดูสำคัญพอๆ กัน ทำให้คุณไม่รู้ว่าควรแก้ไขข้อความใดก่อน และที่สำคัญกว่านั้น ข้อความไม่ได้ลิงก์ไปยังข้อมูลเพิ่มเติมในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ทำให้เข้าใจสิ่งที่เกิดขึ้นได้ยาก และสุดท้าย ข้อความเหล่านี้มักปล่อยให้นักพัฒนาเว็บต้องหาวิธีแก้ปัญหาหรือเรียนรู้เกี่ยวกับบริบททางเทคนิคด้วยตนเอง
ถ้าคุณใช้คอนโซลสำหรับข้อความจากแอปพลิเคชันของคุณเองด้วย ในบางครั้งคุณอาจพบปัญหาในการค้นหาระหว่างข้อความทั้งหมดจากเบราว์เซอร์
กระบวนการอัตโนมัติก็โต้ตอบกับข้อความในคอนโซลได้ยากเช่นกัน เช่นเดียวกับมนุษย์ ตัวอย่างเช่น นักพัฒนาซอฟต์แวร์อาจใช้ Chrome Headless และ Puppeteer ในสถานการณ์การผสานรวมอย่างต่อเนื่อง/การติดตั้งใช้งานอย่างต่อเนื่อง เนื่องจากข้อความคอนโซลเป็นเพียงสตริง นักพัฒนาแอปจึงต้องเขียนนิพจน์ทั่วไปหรือโปรแกรมแยกวิเคราะห์อื่นๆ เพื่อดึงข้อมูลที่นําไปใช้ได้
โซลูชัน: การรายงานปัญหาที่มีโครงสร้างและนำไปใช้ได้จริง
ในการค้นหาวิธีแก้ปัญหาที่ดีกว่าสำหรับปัญหาที่เราพบ เราเริ่มจากการคิดถึงข้อกำหนดและรวบรวมไว้ในเอกสารการออกแบบ
เป้าหมายของเราคือการนำเสนอปัญหาในลักษณะที่อธิบายปัญหาและวิธีแก้ไขอย่างชัดเจน จากกระบวนการออกแบบ เราพบว่าปัญหาแต่ละข้อควรประกอบด้วย 4 ส่วนต่อไปนี้
- ชื่อ
- คำอธิบาย
- ลิงก์ไปยังทรัพยากรที่ได้รับผลกระทบภายในเครื่องมือสำหรับนักพัฒนาเว็บ
- และลิงก์ไปยังคำแนะนำเพิ่มเติม
สำหรับชื่อ เราต้องการให้สั้นกระชับและตรงประเด็นเพื่อช่วยนักพัฒนาแอปเข้าใจปัญหาหลัก และมักจะบอกใบ้วิธีแก้ไขอยู่แล้ว ตัวอย่างเช่น ขณะนี้ปัญหาคุกกี้จะระบุว่า:
ทำเครื่องหมายคุกกี้ข้ามเว็บไซต์ว่า "ปลอดภัย" เพื่ออนุญาตให้ตั้งค่าคุกกี้ดังกล่าวในบริบทข้ามเว็บไซต์
ปัญหาแต่ละรายการจะมีรายละเอียดเพิ่มเติมในคำอธิบาย ซึ่งจะอธิบายสิ่งที่เกิดขึ้น ให้คำแนะนำที่นำไปใช้ได้จริงเกี่ยวกับวิธีแก้ไข และลิงก์ไปยังแผงอื่นๆ ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อให้เข้าใจบริบทของปัญหา นอกจากนี้ เรายังมีลิงก์ไปยังบทความเชิงลึกใน web.dev เพื่อให้นักพัฒนาเว็บได้เรียนรู้เกี่ยวกับหัวข้อดังกล่าวอย่างละเอียดยิ่งขึ้น
ส่วนสำคัญของแต่ละปัญหาคือส่วนทรัพยากรที่ได้รับผลกระทบซึ่งจะลิงก์ไปยังส่วนอื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บและทำให้ตรวจสอบเพิ่มเติมได้ง่ายขึ้น สําหรับตัวอย่างปัญหาเกี่ยวกับคุกกี้ ควรมีรายการคําขอเครือข่ายที่ทริกเกอร์ปัญหา และการคลิกคําขอจะนําคุณไปยังแผงเครือข่ายโดยตรง เราหวังว่าการอัปเดตนี้จะไม่เพียงเพิ่มความสะดวกเท่านั้น แต่ยังช่วยเสริมว่าแผงและเครื่องมือใดในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ใช้แก้ไขข้อบกพร่องบางประเภทได้
เมื่อพิจารณาถึงการโต้ตอบของนักพัฒนาแอปกับแท็บปัญหาในระยะยาว เราคาดการณ์ว่าวิวัฒนาการของการโต้ตอบของนักพัฒนาแอปจะมีลักษณะดังนี้
- เมื่อพบปัญหาหนึ่งๆ เป็นครั้งแรก นักพัฒนาเว็บจะอ่านบทความเพื่อทำความเข้าใจปัญหาอย่างละเอียด
- เมื่อพบปัญหาในครั้งที่ 2 เราหวังว่าคำอธิบายของปัญหาจะเพียงพอสำหรับการเตือนให้นักพัฒนาแอปทราบถึงปัญหาที่เกิดขึ้น รวมถึงช่วยให้นักพัฒนาแอปตรวจสอบและดำเนินการแก้ไขปัญหาได้ทันที
- หลังจากพบปัญหา 2-3 ครั้ง เราหวังว่าชื่อปัญหาจะเพียงพอที่นักพัฒนาแอปจะทราบประเภทของปัญหา
อีกแง่มุมที่สําคัญที่เราต้องการปรับปรุงคือการรวม ตัวอย่างเช่น หากคุกกี้เดียวกันทำให้เกิดปัญหาเดียวกันหลายครั้ง เราต้องการรายงานคุกกี้นั้นเพียงครั้งเดียว นอกจากจะช่วยลดความซับซ้อนของข้อความแล้ว วิธีนี้ยังช่วยระบุสาเหตุของปัญหาได้เร็วขึ้นด้วย
การติดตั้งใช้งาน
เมื่อพิจารณาข้อกำหนดดังกล่าวแล้ว ทีมก็เริ่มหาวิธีติดตั้งใช้งานฟีเจอร์ใหม่ โปรเจ็กต์สําหรับเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome มักจะครอบคลุม 3 ด้านต่อไปนี้
- Chromium ซึ่งเป็นโปรเจ็กต์โอเพนซอร์สที่เขียนด้วย C++ ซึ่งอยู่เบื้องหลัง Google Chrome
- ส่วนหน้าของ DevTools ซึ่งเป็นการใช้งาน JavaScript ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) ซึ่งเป็นเลเยอร์ที่เชื่อมต่อทั้ง 2 รายการ
จากนั้น การติดตั้งใช้งานประกอบด้วย 3 งาน ได้แก่
- ใน Chromium เราต้องระบุคอมโพเนนต์ที่มีข้อมูลที่ต้องการให้แสดง และทำให้โปรโตคอล DevTools เข้าถึงข้อมูลนั้นได้โดยไม่กระทบกับความเร็วหรือความปลอดภัย
- จากนั้นเราต้องออกแบบ Chrome DevTools Protocol (CDP) เพื่อกำหนด API ที่แสดงข้อมูลแก่ไคลเอ็นต์ เช่น หน้าเว็บส่วนหน้าของ DevTools
- สุดท้าย เราจำเป็นต้องใช้งานคอมโพเนนต์ในฟรอนท์เอนด์เครื่องมือสำหรับนักพัฒนาเว็บที่ขอข้อมูลจากเบราว์เซอร์ผ่าน CDP และนำไปแสดงใน UI ที่เหมาะสม เพื่อให้นักพัฒนาซอฟต์แวร์ตีความและโต้ตอบกับข้อมูลได้อย่างง่ายดาย
สำหรับฝั่งเบราว์เซอร์ เราได้ตรวจสอบวิธีจัดการข้อความคอนโซลก่อน เนื่องจากลักษณะการทำงานคล้ายกับปัญหาที่เราพบ CodeSearch มักจะเป็นจุดเริ่มต้นที่ดีสำหรับการสำรวจในลักษณะนี้ ซึ่งช่วยให้คุณค้นหาและสำรวจซอร์สโค้ดทั้งหมดของโครงการ Chromium ทางออนไลน์ได้ วิธีนี้ช่วยให้เราทราบเกี่ยวกับการใช้งานข้อความคอนโซลและสร้างวิธีแบบคู่ขนานแต่มีโครงสร้างมากขึ้นเกี่ยวกับข้อกำหนดที่เรารวบรวมสำหรับปัญหา
งานของเรามีความท้าทายเป็นพิเศษเนื่องจากเราต้องคำนึงถึงผลกระทบด้านความปลอดภัยทั้งหมดอยู่เสมอ โครงการ Chromium มีการพัฒนาอย่างมากในการแยกสิ่งต่างๆ ออกเป็นกระบวนการต่างๆ และกำหนดให้สื่อสารผ่านช่องทางการสื่อสารที่มีการควบคุมเท่านั้นเพื่อป้องกันข้อมูลรั่วไหล ปัญหาต่างๆ อาจมีข้อมูลที่ละเอียดอ่อน เราจึงต้องระวังที่จะไม่ส่งข้อมูลนั้นไปยังส่วนของเบราว์เซอร์ที่ไม่ควรรู้
ในหน้าเว็บของเครื่องมือสําหรับนักพัฒนาเว็บ
DevTools เองก็เป็นเว็บแอปพลิเคชันที่เขียนด้วย JavaScript และ CSS ซึ่งคล้ายกับเว็บแอปพลิเคชันอื่นๆ หลายรายการ เพียงแต่มีมานานกว่า 10 ปี และแน่นอนว่าแบ็กเอนด์ของเครื่องมือนี้ก็คือช่องทางการสื่อสารโดยตรงกับเบราว์เซอร์ ซึ่งก็คือโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
สำหรับแท็บปัญหา เราเริ่มด้วยเรื่องราวผู้ใช้และสิ่งที่นักพัฒนาแอปต้องทำเพื่อแก้ไขปัญหา แนวคิดส่วนใหญ่ของเราพัฒนาขึ้นโดยมีแท็บปัญหาเป็นจุดเริ่มต้นกลางสําหรับการตรวจสอบที่ลิงก์ผู้ใช้ไปยังแผงแสดงข้อมูลที่ละเอียดยิ่งขึ้น เราตัดสินใจที่จะวางแท็บ "ปัญหา" ไว้กับแท็บอื่นๆ ที่ด้านล่างของเครื่องมือสำหรับนักพัฒนาเว็บเพื่อให้แท็บนี้เปิดอยู่ขณะที่นักพัฒนาซอฟต์แวร์โต้ตอบกับคอมโพเนนต์อื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บ เช่น แผงเครือข่ายหรือแผงแอปพลิเคชัน
ด้วยเหตุนี้ นักออกแบบ UX ของเราจึงเข้าใจเป้าหมายที่ตั้งไว้ และได้จัดทำต้นแบบของข้อเสนอแรกนี้ขึ้นมา
หลังจากพูดคุยกันหลายครั้งเกี่ยวกับวิธีแก้ปัญหาที่ดีที่สุด เราจึงเริ่มใช้การออกแบบและตัดสินใจซ้ำๆ เพื่อพัฒนาแท็บปัญหาให้ออกมาเป็นอย่างที่เห็นในปัจจุบัน
ปัจจัยสำคัญอีกอย่างหนึ่งคือการค้นพบแท็บปัญหา ที่ผ่านมา ฟีเจอร์ที่ยอดเยี่ยมมากมายของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะค้นพบไม่ได้หากนักพัฒนาซอฟต์แวร์ไม่ทราบสิ่งที่ต้องมองหา สำหรับแท็บปัญหา เราตัดสินใจที่จะไฮไลต์ปัญหาในหลายๆ ด้านเพื่อให้นักพัฒนาแอปไม่พลาดปัญหาสำคัญ
เราตัดสินใจเพิ่มการแจ้งเตือนลงในแผงคอนโซล เนื่องจากตอนนี้เรานำข้อความบางอย่างในคอนโซลออกแล้วเพื่อแสดงปัญหา นอกจากนี้ เรายังเพิ่มไอคอนลงในตัวนับคำเตือนและข้อผิดพลาดที่ด้านขวาบนของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บด้วย
สุดท้าย แท็บปัญหาไม่เพียงลิงก์ไปยังแผงอื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บเท่านั้น แต่ยังลิงก์ทรัพยากรที่เกี่ยวข้องกับปัญหากลับไปยังแท็บปัญหาด้วย
ในโปรโตคอล
การสื่อสารระหว่างส่วนหน้ากับแบ็กเอนด์จะทำงานผ่านโปรโตคอลที่เรียกว่า Chromium DevTools Protocol (CDP) โดย CDP อาจถือเป็นแบ็กเอนด์ของเว็บแอป นั่นคือเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome CDP ถูกแยกย่อยออกเป็นหลายโดเมน และทุกโดเมนจะมีคำสั่งและเหตุการณ์จำนวนหนึ่ง
สำหรับแท็บปัญหา เราตัดสินใจเพิ่มเหตุการณ์ใหม่ลงในโดเมนการตรวจสอบที่จะทริกเกอร์ทุกครั้งที่พบปัญหาใหม่ โดเมนการตรวจสอบจะจัดเก็บปัญหาล่าสุดและส่งทันทีที่มีการเชื่อมต่อเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อให้แน่ใจว่าเราจะรายงานปัญหาที่เกิดขึ้นในขณะที่ยังไม่ได้เปิดเครื่องมือสำหรับนักพัฒนาเว็บได้ด้วย จากนั้น DevTools จะรวบรวมและรวบรวมปัญหาทั้งหมดเหล่านั้น
CDP ยังช่วยให้ไคลเอ็นต์โปรโตคอลอื่นๆ เช่น Puppeteer รับและประมวลผลปัญหาได้ด้วย เราหวังว่าข้อมูลปัญหาที่มีโครงสร้างที่ส่งผ่าน CDP จะช่วยให้การผสานรวมกับโครงสร้างพื้นฐานการผสานรวมอย่างต่อเนื่องที่มีอยู่ง่ายขึ้น วิธีนี้จะช่วยตรวจหาปัญหาและแก้ไขได้แม้กระทั่งก่อนที่หน้าเว็บจะนำมาใช้งาน
อนาคต
ก่อนอื่น เราต้องย้ายข้อความจำนวนมากจากคอนโซลไปยังแท็บปัญหา การดำเนินการนี้จะใช้เวลาสักครู่ เนื่องจากเราต้องการให้เอกสารประกอบที่ชัดเจนและนำไปใช้ได้จริงสำหรับปัญหาใหม่ทุกรายการที่เราเพิ่ม เราหวังว่านักพัฒนาซอฟต์แวร์ในอนาคตจะมองหาปัญหาในแท็บ "ปัญหา" แทนที่จะเป็นคอนโซล
นอกจากนี้ เรากำลังคิดวิธีผสานรวมปัญหาจากแหล่งที่มาอื่นๆ นอกเหนือจากแบ็กเอนด์ของ Chromium ไว้ในแท็บปัญหา
เรากำลังหาวิธีทำให้แท็บปัญหาเป็นระเบียบและปรับปรุงความสามารถในการใช้งาน การค้นหา การกรอง และการรวมข้อมูลที่ดียิ่งขึ้นอยู่ในรายการของเราสำหรับปีนี้ เรากําลังอยู่ในขั้นตอนการเปิดตัวหมวดหมู่ปัญหาเพื่อจัดระเบียบปัญหาที่รายงานเข้ามาจํานวนมากขึ้น เช่น แสดงเฉพาะปัญหาเกี่ยวกับการเลิกใช้งานที่กําลังจะเกิดขึ้น นอกจากนี้ เรายังคิดที่จะเพิ่มฟีเจอร์เลื่อนเวลาแจ้งเตือนเพื่อให้นักพัฒนาแอปซ่อนปัญหาไว้ชั่วคราวได้
เราต้องการให้คุณค้นพบได้ง่ายขึ้นว่าส่วนใดของหน้าเว็บที่ทำให้เกิดปัญหา เพื่อให้แก้ไขปัญหาได้ โดยเฉพาะอย่างยิ่ง เรากำลังพิจารณาวิธีแยกและกรองปัญหาที่มาจากหน้าเว็บของคุณอย่างแท้จริง (เช่น บุคคลที่หนึ่ง) จากปัญหาที่เกิดจากทรัพยากรที่คุณฝัง แต่ไม่ได้อยู่ภายใต้การควบคุมของคุณโดยตรง (เช่น เครือข่ายโฆษณา) ในขั้นแรก คุณจะซ่อนปัญหาเกี่ยวกับคุกกี้ของบุคคลที่สามใน Chrome 86 ได้
หากมีข้อเสนอแนะในการปรับปรุงแท็บปัญหา โปรดแจ้งให้เราทราบโดยการรายงานข้อบกพร่อง
ดาวน์โหลดเวอร์ชันตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การอัปเดต หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งความคิดเห็นและคำขอฟีเจอร์ถึงเราได้ที่ crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตถึง @ChromeDevTools
- แสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับข่าวสารใน DevTools หรือวิดีโอ YouTube เกี่ยวกับเคล็ดลับใน DevTools