คู่มือนี้จะสอนวิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูทรัพยากรของหน้าเว็บ ทรัพยากรคือไฟล์ที่หน้าเว็บต้องใช้เพื่อให้แสดงผลได้อย่างถูกต้อง ตัวอย่างทรัพยากร ได้แก่ ไฟล์ CSS, JavaScript และ HTML รวมถึงรูปภาพ
คู่มือนี้จะสมมติว่าคุณคุ้นเคยกับพื้นฐานของการพัฒนาเว็บและเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เปิดทรัพยากร
เมื่อทราบชื่อของทรัพยากรที่ต้องการตรวจสอบ เมนูคำสั่งช่วยให้คุณเปิดทรัพยากรได้อย่างรวดเร็ว
กด Control+P หรือ Command+P (Mac) กล่องโต้ตอบเปิดไฟล์จะเปิดขึ้น
รูปที่ 1 กล่องโต้ตอบเปิดไฟล์
เลือกไฟล์จากเมนูแบบเลื่อนลง หรือเริ่มพิมพ์ชื่อไฟล์และกด Enter เมื่อไฟล์ที่ถูกต้องถูกไฮไลต์ในช่องเติมข้อความอัตโนมัติ
รูปที่ 2 พิมพ์ชื่อไฟล์ในกล่องโต้ตอบเปิดไฟล์
เปิดทรัพยากรในแผงเครือข่าย
ดูหัวข้อตรวจสอบรายละเอียดของทรัพยากร
รูปที่ 3 ตรวจสอบทรัพยากรในแผงเครือข่าย
แสดงแหล่งข้อมูลในแผงเครือข่ายจากแผงอื่นๆ
ส่วนเรียกดูทรัพยากรด้านล่างจะแสดงวิธีดูทรัพยากรจากส่วนต่างๆ ใน UI ของเครื่องมือสำหรับนักพัฒนาเว็บ หากต้องการตรวจสอบทรัพยากรในแผงเครือข่าย ให้คลิกขวาที่ทรัพยากร แล้วเลือกแสดงในแผงเครือข่าย
รูปที่ 4 ตัวเลือกแสดงในแผงเครือข่าย
เรียกดูทรัพยากร
เลือกดูแหล่งข้อมูลในแผงเครือข่าย
โปรดดูหัวข้อบันทึกกิจกรรมในเครือข่าย
รูปที่ 5 ทรัพยากรของหน้าเว็บในบันทึกเครือข่าย
เรียกดูตามไดเรกทอรี
ในการดูทรัพยากรของหน้าที่จัดระเบียบตามไดเรกทอรี ให้ทำดังนี้
- คลิกแท็บแหล่งที่มาเพื่อเปิดแผงแหล่งที่มา
คลิกแท็บหน้าเพื่อแสดงทรัพยากรของหน้า แผงหน้าจะเปิดขึ้น
รูปที่ 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
คลิกทรัพยากรเพื่อดูในตัวแก้ไข
รูปที่ 7 การดูไฟล์ในตัวแก้ไข
เรียกดูตามชื่อไฟล์
โดยค่าเริ่มต้น แผงหน้าจะจัดกลุ่มทรัพยากรตามไดเรกทอรี หากต้องการปิดการจัดกลุ่มนี้และดูทรัพยากรของแต่ละโดเมนแบบรายการเดี่ยว ให้ทำดังนี้
- เปิดแผงหน้า โปรดดูหัวข้อเรียกดูตามไดเรกทอรี
คลิกตัวเลือกเพิ่มเติม
และปิดใช้จัดกลุ่มตามโฟลเดอร์
รูปที่ 8 ตัวเลือกจัดกลุ่มตามโฟลเดอร์
แหล่งข้อมูลถูกจัดระเบียบตามประเภทไฟล์ ภายในไฟล์แต่ละประเภท แหล่งข้อมูลจะจัดเรียง ตามตัวอักษร
รูปที่ 9 แผงหน้าหลังจากปิดใช้จัดกลุ่มตามโฟลเดอร์
เรียกดูตามประเภทไฟล์
หากต้องการจัดกลุ่มทรัพยากรเข้าด้วยกันตามประเภทไฟล์ ให้ทำดังนี้
คลิกแท็บแอปพลิเคชัน แผงแอปพลิเคชันจะเปิดขึ้น โดยค่าเริ่มต้น แผงไฟล์ Manifest มักจะเปิดขึ้นมาก่อน
รูปที่ 10 แผงแอปพลิเคชัน
เลื่อนลงไปที่แผงเฟรม
รูปที่ 11 แผงเฟรม
ขยายส่วนที่คุณสนใจ
คลิกทรัพยากรเพื่อดู
รูปที่ 11 ดูทรัพยากรในแผงแอปพลิเคชัน
เรียกดูไฟล์ตามประเภทในแผงเครือข่าย
โปรดดูหัวข้อกรองตามประเภททรัพยากร
รูปที่ 12 การกรอง CSS ในบันทึกเครือข่าย