ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แผงเครือข่ายที่แสดงข้อมูลเชิงลึกที่เป็นประโยชน์เกี่ยวกับกิจกรรมเครือข่ายของหน้าเว็บเป็นหนึ่งในเครื่องมือที่ใช้บ่อยที่สุด
บทความนี้จะแชร์ชุดการปรับปรุงที่ผู้ใช้ต้องการอย่างมากสำหรับแผงเครือข่ายที่ Ioana Forfota และ Silvia Eremia จัดทำขึ้นในระหว่างการฝึกงาน STEP การปรับปรุงเหล่านี้เป็นสิ่งที่ผู้ใช้รอคอยมาอย่างยาวนานและได้รับการคัดเลือกอย่างละเอียดจากงานที่รอดำเนินการจำนวนมากในเครื่องมือติดตามปัญหาของ Chromium เพื่อทำให้แผงเข้าถึงได้ง่ายขึ้น ใช้งานง่ายขึ้น และมีข้อมูลมากขึ้น
แผงเครือข่ายจะช่วยให้นักพัฒนาเว็บทำสิ่งต่อไปนี้ได้
- มุ่งเน้นที่คำขอเครือข่ายที่เกี่ยวข้องเท่านั้น
- ทําความเข้าใจรหัสสถานะ HTTP โดยไม่ต้องใช้ข้อมูลอ้างอิงภายนอก
- ระบุและแก้ไขข้อผิดพลาดของคําขอได้อย่างรวดเร็ว
- ทําความเข้าใจการตอบกลับของ JSON ประเภทย่อย
อ่านรายละเอียดทั้งหมดต่อได้เลย
กรองคำขอส่วนขยาย Chrome
ส่วนขยายของ Chrome สามารถสร้างคำขอเครือข่ายของตนเอง ซึ่งจะปรากฏพร้อมกับคำขอของหน้าเว็บในแผงเครือข่าย หากคุณไม่ได้พัฒนาส่วนขยายอยู่ คำขอเหล่านี้อาจไม่เกี่ยวข้องกับคุณ ก่อนหน้านี้ วิธีเดียวในการซ่อนคือใช้ตัวกรอง -scheme:chrome-extension หรือแก้ไขข้อบกพร่องในโหมดไม่ระบุตัวตน
ตั้งแต่ Chrome 117 เป็นต้นไป การดำเนินการนี้ทำได้ง่ายขึ้น ตอนนี้ DevTools มีช่องทําเครื่องหมายเพื่อยกเว้นคําขอส่วนขยาย Chrome แล้ว เพื่อลดความกระจัดกระจายของแผงเครือข่าย
เราได้พูดคุยกันอย่างต่อเนื่องเกี่ยวกับสถานะเริ่มต้นของฟีเจอร์นี้ ตอนแรกเราพิจารณาที่จะเปิดใช้ฟีเจอร์นี้โดยค่าเริ่มต้น โดยคิดว่าอาจช่วยปรับปรุงประสบการณ์ของผู้ใช้ส่วนใหญ่ได้ อย่างไรก็ตาม แนวทางนี้อาจทำให้ผู้ใช้บางรายไม่ทราบว่ามีการใช้ URL ของส่วนขยาย Chrome เพื่อเรียกให้แสดงคำขอ ซึ่งอาจสร้างปัญหาให้กับนักพัฒนาส่วนขยายด้วย ระบบจึงตั้งค่าสถานะเริ่มต้นเป็น "ปิดใช้"
เมื่อเปิดช่องทําเครื่องหมายนี้ รายการคําขอจะดูสะอาดตาขึ้น ลดความน่ารำคาญ และมุ่งเน้นที่คำขอที่สําคัญที่สุดมากขึ้น เพื่อให้คุณแก้ไขข้อบกพร่องได้อย่างราบรื่นยิ่งขึ้น
ข้อความสถานะการตอบกลับ HTTP
การทำความเข้าใจรหัสสถานะ HTTP เป็นสิ่งจําเป็นสำหรับการแก้ไขข้อบกพร่องอย่างมีประสิทธิภาพ แต่การค้นหาความหมายของคำเหล่านี้อยู่ตลอดเวลาอาจไม่สะดวก DevTools ได้เปิดตัวการปรับปรุงที่มีประโยชน์ เมื่อคุณวางเคอร์เซอร์เหนือรหัสสถานะในรายการคำขอ เคล็ดลับเครื่องมือจะแสดงข้อความสถานะทันที ซึ่งเป็นชื่อที่สื่อความหมายซึ่งอธิบายความหมายของรหัสสถานะ
ข้อความสถานะจะปรากฏในมุมมองส่วนหัวข้างโค้ดด้วย ก่อนหน้านี้ฟีเจอร์เหล่านี้ใช้ได้กับ HTTP/1.1 เท่านั้น แต่ตอนนี้ใช้ได้กับ HTTP/2 และ HTTP/3 แล้ว การปรับแต่งเล็กๆ น้อยๆ เหล่านี้ส่งผลอย่างมาก ช่วยประหยัดเวลาและให้คุณมุ่งเน้นที่การแก้ไขข้อบกพร่องแทนการค้นหาความหมายของโค้ด
ระดับการเข้าถึงข้อผิดพลาดที่ปรับปรุงแล้ว
เราได้ปรับปรุงให้ตรวจหาข้อผิดพลาดและแก้ไขได้อย่างรวดเร็วโดยไม่ต้องเจาะลึกแผงควบคุม ด้วยเหตุนี้ เราจึงเพิ่มไอคอนที่บ่งบอกเพื่อดึงดูดความสนใจไปที่ข้อผิดพลาดของคำขอ เช่น ข้อผิดพลาดที่มีรหัสสถานะ 404 แทนที่จะไฮไลต์ข้อความแสดงข้อผิดพลาดด้วยการเปลี่ยนสีข้อความ ตัวบ่งชี้ที่มองไม่เห็นแต่มีประโยชน์เหล่านี้จะทำให้ข้อผิดพลาดสังเกตได้ง่ายขึ้น คุณจึงไม่ต้องพลาดปัญหาสำคัญ
การแสดงผล JSON ย่อยอย่างเป็นระเบียบ
การพัฒนาเว็บมักเกี่ยวข้องกับการตรวจสอบการตอบกลับ JSON แต่การอ่าน JSON ดิบที่ไม่มีการจัดรูปแบบนั้นไม่สะดวกอย่างยิ่ง การจัดการกับคำตอบดังกล่าว โดยเฉพาะประเภทย่อย เช่น ld+json, hal+json หรือ sparql-results+json อาจทำให้คุณหงุดหงิดได้ เช่น เมื่อคำตอบเหล่านี้ปรากฏในบรรทัดเดียว เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้เปิดตัวการแสดงผลแบบยุบได้ซึ่งใช้งานง่ายยิ่งขึ้นสำหรับ JSON ประเภทย่อยต่างๆ เพื่อให้คุณทำงานได้ง่ายขึ้น ตอนนี้คำตอบเหล่านี้ได้รับการจัดรูปแบบแล้ว นักพัฒนาแอปจึงไม่จำเป็นต้องใช้เครื่องมือภายนอก การออกแบบใหม่นี้แสดงข้อมูลอย่างง่ายและอ่านได้ง่าย
ความคิดเห็นเชิงบวกจากชุมชน
แม้ว่าฟีเจอร์เหล่านี้จะเพิ่งเริ่มใช้งาน แต่ชุมชนก็ให้การตอบรับเชิงบวกอย่างล้นหลาม การใช้งานที่ประสบความสำเร็จทำให้ผู้ใช้จำนวนมากพึงพอใจกับการเปลี่ยนแปลงนี้ ซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก คุณอ่านคำตอบบางส่วนได้ใน X
"ว้าว เจ๋งจัง ChromeDevTools เพิ่งยกระดับการแสดงผลโดยแสดงรหัสสถานะ HTTP ที่มนุษย์อ่านได้ ซึ่งทำให้เห็นข้อผิดพลาดเกี่ยวกับคำขอเครือข่ายได้ง่ายขึ้นมาก" - TribalIdeas on X
"ช่วงนี้มีประโยชน์มาก โดยเฉพาะอย่างยิ่งการจัดการกับแบบฟอร์มที่มีตัวบล็อกโฆษณาและส่วนขยายไวยากรณ์" - MrAhmadAwais ใน X
หากพร้อมที่จะสำรวจฟีเจอร์ใหม่เหล่านี้แล้ว ไปที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้วลองใช้แผงเครือข่ายที่ปรับปรุงใหม่ด้วยตัวคุณเอง ขอให้สนุกกับการแก้ไขข้อบกพร่อง
ดาวน์โหลดแชแนลตัวอย่าง
ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ
ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ การอัปเดต หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งความคิดเห็นและคำขอฟีเจอร์ถึงเราได้ที่ crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตถึง @ChromeDevTools
- แสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับข่าวสารใน DevTools หรือวิดีโอ YouTube เกี่ยวกับเคล็ดลับใน DevTools