เปิดเครื่องมือที่ติดตั้งมาในเบราว์เซอร์ของคุณ เพื่อตรวจสอบ ทดสอบ และวินิจฉัยหน้าเว็บ
เปิดบทเรียนนี้ใน Kodokonเบราว์เซอร์ของคุณซ่อนโรงงานเต็มรูปแบบเอาไว้ ติดตั้งมาให้เรียบร้อยแล้ว ใช้ฟรี และคนส่วนใหญ่ก็จะไม่มีวันเปิดมันเลย มันเรียกว่า เครื่องมือนักพัฒนา ซึ่งมักย่อว่า devtools ในการเปิดมัน ให้กด F12 หรือคลิกขวาตรงไหนก็ได้บนหน้าเว็บแล้วเลือก "Inspect" (ตรวจสอบ) บน Mac ทางลัดคือ Cmd + Option + I จากนั้นแผงหนึ่งจะเปิดขึ้นที่ด้านข้างหรือด้านล่างของหน้าต่าง พร้อมแท็บหลายแท็บ
แท็บแรกที่ชื่อ Elements หรือ Inspector แล้วแต่เบราว์เซอร์ของคุณ แสดง HTML ของหน้าเว็บ ตามที่มันเป็นอยู่ในตอนนี้ ในหน่วยความจำของเบราว์เซอร์ ลองเอาเมาส์ไปวางบนบรรทัดหนึ่ง: พื้นที่ที่ตรงกันจะสว่างขึ้นบนหน้าเว็บ ลองดับเบิลคลิกที่ข้อความ: คุณเขียนมันใหม่แล้วเห็นการเปลี่ยนแปลงได้ทันที นี่เป็นวิธีที่ดีที่สุดในการเข้าใจว่าหน้าเว็บถูกสร้างขึ้นมาอย่างไร ด้วยการรื้อหน้าเว็บของคนอื่นดู
แท็บ Console คือแท็บที่คุณจะใช้เวลาอยู่กับมันมากที่สุด มันแสดงข้อความแจ้งข้อผิดพลาดเป็นสีแดงเมื่อมีอะไรพัง และมันยังรับคำสั่งที่คุณพิมพ์เข้าไปตรง ๆ ได้ด้วย โดยจะถูกรันในบริบทของหน้าเว็บที่คุณเปิดอยู่ ลองเลยบนเว็บไซต์ไหนก็ได้: พิมพ์หนึ่งบรรทัด กด Enter แล้วดูว่าเกิดอะไรขึ้น
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"แท็บ Network ทำให้ทุกอย่างที่คุณเรียนมาในบทเรียนก่อนหน้ามองเห็นได้จริง ๆ เปิดมันขึ้นมา แล้วโหลดหน้าเว็บใหม่ด้วย F5: คำขอแต่ละอันจะโผล่ขึ้นมาเป็นบรรทัดของตัวเอง พร้อมที่อยู่ เมธอด รหัสสถานะ ขนาด และเวลาที่ใช้ไป บรรทัดสีแดงบ่งบอกว่าคำขอนั้นล้มเหลว นี่คือที่ที่คุณจะได้ค้นพบ เช่น ว่ารูปภาพไม่แสดงเพราะมันคืน 404 กลับมา