ไม่ว่าคุณจะเป็นนักออกแบบเว็บไซต์ที่แก้ไขข้อบกพร่องซอร์สโค้ดของไซต์ของคุณหรือเพียงแค่อยากรู้ว่าโค้ดของไซต์มีลักษณะอย่างไรคุณสามารถดูซอร์ส HTML ได้ใน Google Chrome มีสองวิธีในการดูซอร์ส HTML: ดูซอร์สและตรวจสอบโดยใช้เครื่องมือสำหรับนักพัฒนา
ดูซอร์สโดยใช้ View Page Source
เปิด Chrome แล้วข้ามไปยังหน้าเว็บที่คุณต้องการดูซอร์สโค้ด HTML คลิกขวาที่หน้าแล้วคลิก“ ดูแหล่งที่มาของหน้า” หรือกด Ctrl + U เพื่อดูแหล่งที่มาของหน้าในแท็บใหม่
แท็บใหม่จะเปิดขึ้นพร้อมกับ HTML ทั้งหมดสำหรับหน้าเว็บซึ่งขยายโดยสมบูรณ์และไม่ได้จัดรูปแบบ
หากคุณกำลังมองหาองค์ประกอบที่เฉพาะเจาะจงหรือบางส่วนในซอร์ส HTML การใช้ View Source นั้นน่าเบื่อและยุ่งยากโดยเฉพาะอย่างยิ่งหากหน้านั้นใช้ JavaScript และ CSS เป็นจำนวนมาก
ตรวจสอบแหล่งที่มาโดยใช้เครื่องมือสำหรับนักพัฒนา
วิธีนี้ใช้บานหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome และเป็นวิธีที่สะอาดกว่ามากในการดูซอร์สโค้ด ที่นี่อ่าน HTML ได้ง่ายขึ้นด้วยการจัดรูปแบบเพิ่มเติมและความสามารถในการยุบองค์ประกอบที่คุณไม่สนใจจะดู
เปิด Chrome และไปที่หน้าที่คุณต้องการตรวจสอบ จากนั้นกด Ctrl + Shift + i บานหน้าต่างที่เชื่อมต่อจะเปิดขึ้นพร้อมกับหน้าเว็บที่คุณกำลังดูอยู่
คลิกที่ลูกศรสีเทาเล็ก ๆ ถัดจากองค์ประกอบเพื่อขยายเพิ่มเติม
หากคุณไม่ต้องการเห็นโค้ดของทั้งหน้าตามค่าเริ่มต้น แต่ให้ตรวจสอบองค์ประกอบเฉพาะใน HTML แทนให้คลิกขวาที่ช่องว่างนั้นในหน้าจากนั้นคลิก "ตรวจสอบ"
เมื่อบานหน้าต่างเปิดขึ้นในครั้งนี้บานหน้าต่างจะตรงไปยังส่วนของโค้ดที่มีองค์ประกอบนั้นที่คุณคลิก
หากคุณต้องการเปลี่ยนตำแหน่งท่าเรือคุณสามารถย้ายไปที่ด้านล่างซ้ายขวาหรือแม้แต่ปลดล็อกลงในหน้าต่างแยกต่างหาก คลิกไอคอนเมนู (จุดสามจุด) จากนั้นเลือกปลดล็อกในหน้าต่างที่แยกจากกันเชื่อมต่อทางด้านซ้ายเชื่อมต่อที่ด้านล่างหรือเชื่อมต่อทางด้านขวา
นั่นคือทั้งหมดที่มีให้ เมื่อคุณดูโค้ดเสร็จแล้วให้ปิดแท็บ View Source หรือคลิก "X" ในบานหน้าต่าง Developer Tools เพื่อกลับไปที่หน้าเว็บของคุณ
