วิธีดูซอร์ส HTML ใน Google Chrome

ไม่ว่าคุณจะเป็นนักออกแบบเว็บไซต์ที่แก้ไขข้อบกพร่องซอร์สโค้ดของไซต์ของคุณหรือแค่อยากรู้ว่าโค้ดของไซต์มีลักษณะอย่างไรคุณสามารถดูซอร์ส 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 เพื่อกลับไปที่หน้าเว็บของคุณ