วิธีดูโค้ด HTML ใน Chrome

ลิงค์อุปกรณ์

• แอนดรอยด์
• ไอโฟน
• โครมบุ๊ค
• แม็ค
• หน้าต่าง
• อุปกรณ์หายไป?

คุณสงสัยหรือไม่ว่าส่วนประกอบของหน้าเว็บคืออะไร? ต้องการทราบวิธีการเปลี่ยนขนาดตัวอักษรหรือสีบนเว็บไซต์ของคุณหรือไม่? ด้วยการดูรหัส HTML ของหน้าเว็บ คุณสามารถทำสิ่งเหล่านี้และอีกมากมาย

ในบทช่วยสอนนี้ เราจะแสดงวิธีดูโค้ด HTML ของหน้าเว็บใน Chrome

การดูโค้ด HTML ใน Chrome

เมื่อเขียนด้วย HTML ซอร์สโค้ดคือชุดของแท็กและแอตทริบิวต์ที่ใช้กำหนดโครงสร้างและเนื้อหาของหน้าเว็บ

เว็บเบราว์เซอร์จะอ่านซอร์สโค้ดและแปลเป็นหน้าเว็บแบบกราฟิกที่คุณเห็นบนหน้าจอ นอกจากการกำหนดรูปลักษณ์ของหน้าเว็บแล้ว ซอร์สโค้ดยังสามารถใช้เพื่อเพิ่มการโต้ตอบ เช่น หน้าต่างป๊อปอัป แบบฟอร์ม และเมนูแบบเลื่อนลง

แม้ว่าผู้ใช้อินเทอร์เน็ตทั่วไปอาจไม่จำเป็นต้องดูซอร์สโค้ด HTML ของหน้าเว็บ แต่ก็มีสาเหตุหลายประการที่บางคนอาจต้องการทำเช่นนั้น

สำหรับนักพัฒนา การดูซอร์สโค้ดอาจเป็นวิธีที่มีประโยชน์ในการทำความเข้าใจว่าเพจมีโครงสร้างอย่างไร และกำหนดสไตล์และองค์ประกอบการเขียนสคริปต์ที่ใช้ สำหรับนักออกแบบ การดูว่านักออกแบบคนอื่นๆ ใช้ HTML เพื่อสร้างเค้าโครงที่มีประสิทธิภาพนั้นมีประโยชน์อย่างไร

ในบางกรณี ผู้ใช้อาจต้องการดูซอร์สโค้ดเพื่อแก้ไขข้อผิดพลาดหรือเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของเว็บไซต์หรือเว็บแอปพลิเคชัน ไม่ว่าด้วยเหตุผลใดก็ตาม การดูซอร์สโค้ด HTML เป็นกระบวนการที่ค่อนข้างง่ายใน Chrome

วิธีดูโค้ด HTML ของเว็บเพจใน Chrome บนพีซีที่ใช้ Windows

ระบบปฏิบัติการ Windows เป็นหนึ่งในระบบที่เข้ากันได้มากที่สุดของ Chrome Chrome สร้างขึ้นจากโครงการ Chromium แบบโอเพ่นซอร์ส ซึ่ง Microsoft เป็นผู้สนับสนุนหลัก ความเข้ากันได้นี้ขยายไปถึงขอบเขต HTML ซึ่งเบราว์เซอร์ยอดนิยมอนุญาตให้ผู้ใช้ดูโค้ด HTML ของเว็บไซต์ใดก็ได้

คุณสามารถดูรหัส HTML ได้สองวิธี

ใช้ดูแหล่งที่มาของหน้า

วิธีนี้ตรงไปตรงมา:

1. เปิด Chrome และไปที่หน้าที่คุณต้องการดูซอร์สโค้ด HTML
   
2. คลิกขวาที่หน้าแล้วเลือกดูแหล่งที่มาของหน้า หรือกด Ctrl + U บนแป้นพิมพ์เพื่อเปิดซอร์สโค้ดในแท็บใหม่
   

ซอร์สโค้ดจะปรากฏในแท็บใหม่ และคุณสามารถเลื่อนผ่านเพื่อดูมาร์กอัป HTML สำหรับหน้านั้น

การใช้เครื่องมือสำหรับนักพัฒนา

หากต้องการตรวจสอบซอร์สโค้ดของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Google Chrome ให้ทำตามขั้นตอนด้านล่าง

1. เปิด Google Chrome และไปที่หน้าเว็บที่คุณต้องการตรวจสอบ
   
2. กด Ctrl + Shift + I บนแป้นพิมพ์ของคุณ บานหน้าต่างเครื่องมือสำหรับนักพัฒนาจะเปิดขึ้นใน Dock ข้างๆ หน้าเว็บที่คุณกำลังดูอยู่
   
3. คลิกที่แท็บ "องค์ประกอบ" ที่ด้านบนของบานหน้าต่าง นี่จะแสดงซอร์สโค้ด HTML สำหรับหน้าเว็บ
   
4. ตอนนี้คุณสามารถตรวจสอบซอร์สโค้ดของเพจได้แล้ว หากต้องการยุบองค์ประกอบ ให้คลิกที่สามเหลี่ยมถัดจากชื่อแท็ก หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนประกอบ ให้คลิกขวาที่ส่วนประกอบนั้นแล้วเลือก "ตรวจสอบ"
   

โปรดทราบว่าวิธีนี้ดีที่สุดสำหรับหน้า HTML; คุณสามารถดูซอร์สโค้ดของหน้าเว็บประเภทอื่นๆ ได้ แต่การจัดรูปแบบอาจอ่านยากกว่า

วิธีดูโค้ด HTML ของเว็บเพจใน Chrome บน Mac

หากคุณเป็นนักพัฒนาเว็บ สิ่งสำคัญคือต้องสามารถดูโค้ด HTML ของหน้าเว็บได้ ซึ่งช่วยให้คุณเห็นว่าเพจมีโครงสร้างอย่างไรและแก้ไขปัญหาที่อาจเกิดขึ้นได้ โชคดีที่ทำได้ง่ายใน Chrome บน Mac เพียงทำตามขั้นตอนเหล่านี้:

1. เปิด Chrome และไปที่หน้าเว็บที่คุณต้องการดูโค้ด HTML
   
2. คลิกขวาที่หน้าแล้วเลือก “ตรวจสอบ”
   
3. บานหน้าต่างใหม่จะเปิดขึ้นที่ด้านล่างของหน้าจอโดยแสดงโค้ด HTML
   
4. คุณยังสามารถคลิกที่องค์ประกอบเฉพาะในโค้ด HTML เพื่อดูว่ามีการจัดรูปแบบอย่างไรในหน้า ตัวอย่างเช่น คุณสามารถดูได้ว่ามีการใช้สไตล์ CSS ใดกับองค์ประกอบโดยเลือกองค์ประกอบ จากนั้นคลิกแท็บ "สไตล์" ในบานหน้าต่างที่เปิดขึ้น
   
5. หากต้องการปิดบานหน้าต่าง ให้คลิก "X" ที่มุมบนขวา
   

หรือคุณสามารถใช้เครื่องมือสำหรับนักพัฒนา Chrome เพื่อดูซอร์สโค้ด

1. เปิด Google Chrome และไปที่หน้าเว็บที่คุณต้องการตรวจสอบ
   
2. คลิกไอคอนเมนู (สามจุด) ที่มุมขวาบนของเบราว์เซอร์ แล้วเลือกเครื่องมือเพิ่มเติมและเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จากเมนูแบบเลื่อนลง
   
3. แผงเครื่องมือสำหรับนักพัฒนาจะเปิดขึ้นที่ด้านล่างของหน้าจอ เลือก "องค์ประกอบ" ที่ด้านบนของบานหน้าต่าง
   
4. ตอนนี้คุณจะเห็นโค้ด HTML สำหรับหน้าปัจจุบันที่แสดงในแผงองค์ประกอบ คุณสามารถใช้ตัวเลือกต่างๆ ในแผงควบคุมเพื่อตรวจสอบและดีบักโค้ดได้ตามต้องการ
   

เพียงไม่กี่คลิก คุณสามารถดูโค้ด HTML ของหน้าเว็บใดๆ ใน Chrome บน Mac ได้อย่างง่ายดาย สิ่งนี้มีประโยชน์เมื่อคุณพยายามแก้ไขปัญหาการพัฒนาเว็บหรือต้องการดูอย่างละเอียดเกี่ยวกับวิธีการสร้างเว็บไซต์หนึ่งๆ

วิธีดูรหัส HTML ของเว็บเพจใน Chrome บนแอพ iPhone

หากคุณใช้ iPhone คุณสามารถดูโค้ด HTML ของหน้าใดๆ ใน Chrome ได้สองวิธี:

ปรับแต่ง URL

คุณสามารถดูโค้ด HTML ของหน้าใดๆ ได้ง่ายๆ โดยทำการปรับ URL เล็กน้อย:

1. เปิด Chrome และไปที่หน้าเว็บที่คุณต้องการดูโค้ด HTML
   
2. แตะหนึ่งครั้งในแถบที่อยู่เพื่อเริ่มโหมดแก้ไข
   
3. ย้ายเคอร์เซอร์ไปที่ด้านหน้าของ URL
   
4. พิมพ์ “View-source” จากนั้นกดปุ่ม “Go” รหัส HTML สำหรับหน้าเว็บจะแสดงใน Chrome
   

การใช้เครื่องมือสำหรับนักพัฒนา

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome มีให้บริการบน iOS เช่นกัน แต่จำเป็นต้องมีชุดขั้นตอนที่แตกต่างกันในการเปิดใช้งานเมื่อเปรียบเทียบกับพีซี

1. แตะจุดสามจุดที่มุมขวาบนของหน้าจอ แล้วเลือก “การตั้งค่า”
2. เลื่อนลงแล้วแตะ "ขั้นสูง" จากนั้นเปิดใช้งานการสลับที่อยู่ถัดจาก "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์"
3. แตะพื้นที่ว่างของหน้าค้างไว้ จากนั้นเลือก “ตรวจสอบองค์ประกอบ” ซึ่งจะเป็นการเปิดแผงด้านข้างพร้อมรหัส HTML สำหรับหน้านั้น

วิธีดูรหัส HTML ของเว็บเพจใน Chrome บนแอพ Android

เมื่อใช้แอป Chrome บนโทรศัพท์ Android คุณอาจต้องการดูโค้ด HTML สำหรับหน้าเว็บ ซึ่งจะมีประโยชน์หากคุณพยายามแก้ไขปัญหาเกี่ยวกับเพจหรือต้องการดูว่าเพจมีโครงสร้างอย่างไร หากต้องการดูโค้ด HTML สำหรับหน้าเว็บใน Chrome บนโทรศัพท์ Android ให้ทำตามขั้นตอนเหล่านี้:

1. เปิด Chrome บน Android ของคุณ
   
2. พิมพ์ “view-source:” ตามด้วย URL ของหน้าที่คุณต้องการดูซอร์สโค้ด เช่น ถ้าอยากดู source code ของ www.google.com ให้พิมพ์ "view-source:www.google.com" ในแถบ address ของ Chrome
   

ซึ่งจะเป็นการเปิดโค้ด HTML สำหรับหน้านั้นในอินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัวของ Chrome จากตรงนั้น คุณสามารถดูและแก้ไขโค้ดได้ตามต้องการ โปรดทราบว่าวิธีนี้จะใช้ได้ก็ต่อเมื่อเว็บไซต์ที่คุณพยายามดูอนุญาตให้เข้าถึงซอร์สโค้ดได้ หากไม่มี คุณจะไม่เห็นสิ่งอื่นใดนอกจากข้อความแสดงข้อผิดพลาด

วิธีดูโค้ด HTML ของเว็บเพจใน Chrome บน iPad

Chrome บนแอป iPad ทำให้การดูโค้ด HTML ของหน้าเว็บใดๆ เป็นเรื่องง่าย เพียงทำตามขั้นตอนเหล่านี้:

1. เปิด Chrome แล้วพิมพ์ “view-source:” ตามด้วย URL ของเพจที่คุณต้องการดู ตัวอย่างเช่น หากคุณต้องการดูซอร์สโค้ดของ www.alphr.com คุณต้องพิมพ์ “view-source:www.alphr.com” ลงในแถบที่อยู่ของ Chrome
   
2. กดปุ่ม “ไป”
   

สิ่งนี้ควรโหลดซอร์สโค้ดของหน้าในแท็บใหม่ภายใน Chrome จากที่นั่น คุณสามารถบันทึกหรือแชร์โค้ดได้ตามต้องการ

ซอร์สโค้ดคือกาวที่ยึดหน้าต่างๆ ไว้ด้วยกัน

HTML เป็นรากฐานของเว็บไซต์ใดๆ ให้โครงสร้างและเนื้อหาที่ผู้เข้าชมเห็นเมื่อโหลดหน้าเว็บในเบราว์เซอร์

แม้ว่าลักษณะที่ปรากฏสุดท้ายของเพจอาจถูกกำหนดโดย CSS หรือภาษาสไตล์อื่นๆ แต่โค้ด HTML จะกำหนดโครงสร้างพื้นฐานและเนื้อหาของเพจ การเปลี่ยนแปลงบางอย่างอาจทำให้เพจเสียหายได้ ด้วยเหตุนี้ สิ่งสำคัญคือต้องมีความเข้าใจ HTML เป็นอย่างดีเมื่อดูหรือทำการเปลี่ยนแปลงซอร์สโค้ด

นอกจากนี้ โปรดทราบว่าในขณะที่ดูโค้ด HTML อาจมีประโยชน์ในบางกรณี การเปลี่ยนแปลงที่ทำกับโค้ดจะไม่ปรากฏบนหน้าเว็บจริง เฉพาะการเปลี่ยนแปลงที่เผยแพร่โดยผู้ดูแลระบบของไซต์เท่านั้นที่จะปรากฏแก่ผู้เข้าชม

คุณได้ลองดูรหัส HTML ของหน้าเว็บใดๆ โดยใช้วิธีการใดๆ ที่กล่าวถึงในบทช่วยสอนนี้หรือไม่? มันไปได้อย่างไร?

แจ้งให้เราทราบในส่วนความคิดเห็น