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