คู่มือนี้จะสอนวิธีใช้ Chrome DevTools เพื่อดูทรัพยากรของหน้าเว็บ ทรัพยากรคือไฟล์ที่หน้าเว็บต้องใช้เพื่อให้แสดงได้อย่างถูกต้อง ตัวอย่างของทรัพยากรได้แก่ ไฟล์ CSS, JavaScript และ HTML ตลอดจนรูปภาพ
คู่มือนี้มีสมมติฐานว่าคุณทราบข้อมูลเบื้องต้นเกี่ยวกับการพัฒนาเว็บและ Chrome DevTools
เปิดทรัพยากร
เมื่อทราบชื่อของทรัพยากรที่ต้องการตรวจสอบ เมนูคำสั่งจะช่วยให้คุณเปิดทรัพยากรได้อย่างรวดเร็ว
กด 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 การดูไฟล์ในเครื่องมือแก้ไข
เรียกดูตามชื่อไฟล์
โดยค่าเริ่มต้น แผงหน้าจะจัดกลุ่มทรัพยากรตามไดเรกทอรี หากต้องการปิดใช้การจัดกลุ่มนี้และดูทรัพยากรของแต่ละโดเมนแบบรายการรวม ให้ทำดังนี้
- เปิดแผงหน้า โปรดดูหัวข้อเรียกดูตามไดเรกทอรี
คลิกตัวเลือกเพิ่มเติม
และ
ปิดใช้ Group By โฟลเดอร์
รูปที่ 8 ตัวเลือกจัดกลุ่มตามโฟลเดอร์
ทรัพยากรจะจัดเรียงตามประเภทไฟล์ ภายในไฟล์แต่ละประเภท ระบบจะจัดระเบียบทรัพยากร ตามลำดับตัวอักษร
รูปที่ 9 แผงหน้าหลังจากปิดใช้จัดกลุ่มตามโฟลเดอร์
เรียกดูตามประเภทไฟล์
หากต้องการจัดกลุ่มทรัพยากรเข้าด้วยกันตามประเภทไฟล์ ให้ทำดังนี้
คลิกแท็บแอปพลิเคชัน แผงแอปพลิเคชันจะเปิดขึ้น โดยค่าเริ่มต้น แผงไฟล์ Manifest จะเปิดขึ้นก่อน
รูปที่ 10 แผงแอปพลิเคชัน
เลื่อนลงไปที่แผงเฟรม
รูปที่ 11 แผงเฟรม
ขยายส่วนที่คุณสนใจ
คลิกแหล่งข้อมูลเพื่อดู
รูปที่ 11 การดูทรัพยากรในแผงแอปพลิเคชัน
เรียกดูไฟล์ตามประเภทในแผงเครือข่าย
โปรดดูหัวข้อกรองตามประเภททรัพยากร
รูปที่ 12 การกรอง CSS ในบันทึกเครือข่าย