ดูทรัพยากรของหน้า

คู่มือนี้จะอธิบายวิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูทรัพยากรของหน้าเว็บ ทรัพยากรคือไฟล์ที่หน้าเว็บจําเป็นต้องใช้เพื่อแสดงอย่างถูกต้อง ตัวอย่างทรัพยากร ได้แก่ ไฟล์ CSS, JavaScript และ HTML รวมถึงรูปภาพ

คู่มือนี้ถือว่าคุณคุ้นเคยกับพื้นฐานของการพัฒนาเว็บและ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เปิดแหล่งข้อมูล

เมื่อทราบชื่อทรัพยากรที่ต้องการตรวจสอบ เมนูคำสั่งเป็นวิธีที่รวดเร็วในการเปิดทรัพยากร

  1. กด Control+P หรือ Command+P (Mac) กล่องโต้ตอบเปิดไฟล์จะเปิดขึ้น

    กล่องโต้ตอบเปิดไฟล์

    รูปที่ 1 กล่องโต้ตอบเปิดไฟล์

  2. เลือกไฟล์จากเมนูแบบเลื่อนลง หรือเริ่มพิมพ์ชื่อไฟล์แล้วกด Enter เมื่อระบบไฮไลต์ไฟล์ที่ถูกต้องในช่องป้อนข้อความอัตโนมัติ

    การพิมพ์ชื่อไฟล์ในกล่องโต้ตอบเปิดไฟล์

    รูปที่ 2 การพิมพ์ชื่อไฟล์ในกล่องโต้ตอบเปิดไฟล์

เปิดทรัพยากรในแผงเครือข่าย

ดูตรวจสอบรายละเอียดของทรัพยากร

การตรวจสอบทรัพยากรในแผงเครือข่าย

รูปที่ 3 การตรวจสอบทรัพยากรในแผงเครือข่าย

แสดงทรัพยากรในแผงเครือข่ายจากแผงอื่นๆ

ส่วนเรียกดูแหล่งข้อมูลด้านล่างจะแสดงวิธีดูแหล่งข้อมูลจากส่วนต่างๆ ของ UI ของ DevTools หากต้องการตรวจสอบทรัพยากรในแผงเครือข่าย ให้คลิกขวาที่ทรัพยากรแล้วเลือกแสดงในแผงเครือข่าย

แสดงในแผงเครือข่าย

รูปที่ 4 ตัวเลือกแสดงในแผงเครือข่าย

เรียกดูทรัพยากร

เรียกดูทรัพยากรในแผงเครือข่าย

ดูบันทึกกิจกรรมในเครือข่าย

ทรัพยากรของหน้าในบันทึกเครือข่าย

รูปที่ 5 ทรัพยากรของหน้าในบันทึกเครือข่าย

เรียกดูตามไดเรกทอรี

วิธีดูทรัพยากรของหน้าเว็บที่จัดระเบียบตามไดเรกทอรี

  1. คลิกแท็บแหล่งที่มาเพื่อเปิดแผงแหล่งที่มา
  2. คลิกแท็บหน้าเพื่อแสดงทรัพยากรของหน้า แผงหน้าเว็บจะเปิดขึ้น

    แผงหน้าเว็บ

    รูปที่ 6 แผงหน้าเว็บ

    รายละเอียดของรายการที่ไม่ชัดเจนในรูปที่ 6 มีดังนี้

    • top คือบริบทการท่องเว็บของเอกสารหลัก
    • airhorner.com แสดงถึงโดเมน ทรัพยากรทั้งหมดที่ฝังอยู่ภายใต้โดเมนนั้นมาจากโดเมนนั้น ตัวอย่างเช่น URL แบบเต็มของไฟล์ comlink.global.js อาจเป็น https://airhorner.com/scripts/comlink.global.js
    • scripts เป็นไดเรกทอรี
    • (index) คือเอกสาร HTML หลัก
    • iu3 คือบริบทการท่องเว็บอีกรายการหนึ่ง บริบทนี้อาจสร้างขึ้นโดยองค์ประกอบ <iframe> ที่ฝังอยู่ใน HTML ของเอกสารหลัก
    • sw.js คือบริบทการดําเนินการของ Service Worker
  3. คลิกทรัพยากรเพื่อดูในเครื่องมือแก้ไข

    การดูไฟล์ในเครื่องมือแก้ไข

    รูปที่ 7 การดูไฟล์ในเครื่องมือแก้ไข

เรียกดูตามชื่อไฟล์

โดยค่าเริ่มต้น แผงหน้าเว็บจะจัดกลุ่มทรัพยากรตามไดเรกทอรี วิธีปิดใช้การจัดกลุ่มนี้และดูทรัพยากรของโดเมนแต่ละรายการเป็นรายการแบบแบน

  1. เปิดแผงหน้า ดูเรียกดูตามไดเรกทอรี
  2. คลิกตัวเลือกเพิ่มเติม ตัวเลือกเพิ่มเติม และปิดใช้จัดกลุ่มตามโฟลเดอร์

    จัดกลุ่มตามโฟลเดอร์

    รูปที่ 8 ตัวเลือกจัดกลุ่มตามโฟลเดอร์

    ทรัพยากรจะจัดเรียงตามประเภทไฟล์ ทรัพยากรภายในไฟล์แต่ละประเภทจะจัดเรียงตามลําดับตัวอักษร

    แผงหน้าเว็บหลังจากปิดใช้ &quot;จัดกลุ่มตามโฟลเดอร์&quot;

    รูปที่ 9 แผงหน้าเว็บหลังจากปิดใช้จัดกลุ่มตามโฟลเดอร์

เรียกดูตามประเภทไฟล์

วิธีจัดกลุ่มทรัพยากรไว้ด้วยกันตามประเภทไฟล์

  1. คลิกแท็บแอปพลิเคชัน แผงแอปพลิเคชันจะเปิดขึ้น โดยค่าเริ่มต้น แผงไฟล์ Manifest จะเปิดขึ้นก่อน

    แผงแอปพลิเคชัน

    รูปที่ 10 แผงแอปพลิเคชัน

  2. เลื่อนลงไปที่แผงเฟรม

    แผงเฟรม

    รูปที่ 11 แผงเฟรม

  3. ขยายส่วนที่คุณสนใจ

  4. คลิกทรัพยากรเพื่อดู

    การดูทรัพยากรในแผงแอปพลิเคชัน

    รูปที่ 11 การดูทรัพยากรในแผงแอปพลิเคชัน

เรียกดูไฟล์ตามประเภทในแผงเครือข่าย

ดูกรองตามประเภททรัพยากร

การกรอง CSS ในบันทึกเครือข่าย

รูปที่ 12 การกรอง CSS ในบันทึกเครือข่าย