ลิงค์อุปกรณ์
คุณสงสัยหรือไม่ว่าส่วนประกอบของหน้าเว็บคืออะไร? ต้องการทราบวิธีการเปลี่ยนขนาดตัวอักษรหรือสีบนเว็บไซต์ของคุณหรือไม่? ด้วยการดูรหัส HTML ของหน้าเว็บ คุณสามารถทำสิ่งเหล่านี้และอีกมากมาย
ในบทช่วยสอนนี้ เราจะแสดงวิธีดูโค้ด HTML ของหน้าเว็บใน Chrome
การดูโค้ด HTML ใน Chrome
เมื่อเขียนด้วย HTML ซอร์สโค้ดคือชุดของแท็กและแอตทริบิวต์ที่ใช้กำหนดโครงสร้างและเนื้อหาของหน้าเว็บ
เว็บเบราว์เซอร์จะอ่านซอร์สโค้ดและแปลเป็นหน้าเว็บแบบกราฟิกที่คุณเห็นบนหน้าจอ นอกจากการกำหนดรูปลักษณ์ของหน้าเว็บแล้ว ซอร์สโค้ดยังสามารถใช้เพื่อเพิ่มการโต้ตอบ เช่น หน้าต่างป๊อปอัป แบบฟอร์ม และเมนูแบบเลื่อนลง
แม้ว่าผู้ใช้อินเทอร์เน็ตทั่วไปอาจไม่จำเป็นต้องดูซอร์สโค้ด HTML ของหน้าเว็บ แต่ก็มีสาเหตุหลายประการที่บางคนอาจต้องการทำเช่นนั้น
สำหรับนักพัฒนา การดูซอร์สโค้ดอาจเป็นวิธีที่มีประโยชน์ในการทำความเข้าใจว่าเพจมีโครงสร้างอย่างไร และกำหนดสไตล์และองค์ประกอบการเขียนสคริปต์ที่ใช้ สำหรับนักออกแบบ การดูว่านักออกแบบคนอื่นๆ ใช้ HTML เพื่อสร้างเค้าโครงที่มีประสิทธิภาพนั้นมีประโยชน์อย่างไร
ในบางกรณี ผู้ใช้อาจต้องการดูซอร์สโค้ดเพื่อแก้ไขข้อผิดพลาดหรือเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของเว็บไซต์หรือเว็บแอปพลิเคชัน ไม่ว่าด้วยเหตุผลใดก็ตาม การดูซอร์สโค้ด HTML เป็นกระบวนการที่ค่อนข้างง่ายใน Chrome
วิธีดูโค้ด HTML ของเว็บเพจใน Chrome บนพีซีที่ใช้ Windows
ระบบปฏิบัติการ Windows เป็นหนึ่งในระบบที่เข้ากันได้มากที่สุดของ Chrome Chrome สร้างขึ้นจากโครงการ Chromium แบบโอเพ่นซอร์ส ซึ่ง Microsoft เป็นผู้สนับสนุนหลัก ความเข้ากันได้นี้ขยายไปถึงขอบเขต HTML ซึ่งเบราว์เซอร์ยอดนิยมอนุญาตให้ผู้ใช้ดูโค้ด HTML ของเว็บไซต์ใดก็ได้
คุณสามารถดูรหัส HTML ได้สองวิธี
ใช้ดูแหล่งที่มาของหน้า
วิธีนี้ตรงไปตรงมา:
ซอร์สโค้ดจะปรากฏในแท็บใหม่ และคุณสามารถเลื่อนผ่านเพื่อดูมาร์กอัป HTML สำหรับหน้านั้น
การใช้เครื่องมือสำหรับนักพัฒนา
หากต้องการตรวจสอบซอร์สโค้ดของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Google Chrome ให้ทำตามขั้นตอนด้านล่าง
โปรดทราบว่าวิธีนี้ดีที่สุดสำหรับหน้า HTML; คุณสามารถดูซอร์สโค้ดของหน้าเว็บประเภทอื่นๆ ได้ แต่การจัดรูปแบบอาจอ่านยากกว่า
วิธีดูโค้ด HTML ของเว็บเพจใน Chrome บน Mac
หากคุณเป็นนักพัฒนาเว็บ สิ่งสำคัญคือต้องสามารถดูโค้ด HTML ของหน้าเว็บได้ ซึ่งช่วยให้คุณเห็นว่าเพจมีโครงสร้างอย่างไรและแก้ไขปัญหาที่อาจเกิดขึ้นได้ โชคดีที่ทำได้ง่ายใน Chrome บน Mac เพียงทำตามขั้นตอนเหล่านี้:
หรือคุณสามารถใช้เครื่องมือสำหรับนักพัฒนา Chrome เพื่อดูซอร์สโค้ด
เพียงไม่กี่คลิก คุณสามารถดูโค้ด HTML ของหน้าเว็บใดๆ ใน Chrome บน Mac ได้อย่างง่ายดาย สิ่งนี้มีประโยชน์เมื่อคุณพยายามแก้ไขปัญหาการพัฒนาเว็บหรือต้องการดูอย่างละเอียดเกี่ยวกับวิธีการสร้างเว็บไซต์หนึ่งๆ
วิธีดูรหัส HTML ของเว็บเพจใน Chrome บนแอพ iPhone
หากคุณใช้ iPhone คุณสามารถดูโค้ด HTML ของหน้าใดๆ ใน Chrome ได้สองวิธี:
ปรับแต่ง URL
คุณสามารถดูโค้ด HTML ของหน้าใดๆ ได้ง่ายๆ โดยทำการปรับ URL เล็กน้อย:
การใช้เครื่องมือสำหรับนักพัฒนา
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome มีให้บริการบน iOS เช่นกัน แต่จำเป็นต้องมีชุดขั้นตอนที่แตกต่างกันในการเปิดใช้งานเมื่อเปรียบเทียบกับพีซี
วิธีดูรหัส HTML ของเว็บเพจใน Chrome บนแอพ Android
เมื่อใช้แอป Chrome บนโทรศัพท์ Android คุณอาจต้องการดูโค้ด HTML สำหรับหน้าเว็บ ซึ่งจะมีประโยชน์หากคุณพยายามแก้ไขปัญหาเกี่ยวกับเพจหรือต้องการดูว่าเพจมีโครงสร้างอย่างไร หากต้องการดูโค้ด HTML สำหรับหน้าเว็บใน Chrome บนโทรศัพท์ Android ให้ทำตามขั้นตอนเหล่านี้:
ซึ่งจะเป็นการเปิดโค้ด HTML สำหรับหน้านั้นในอินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัวของ Chrome จากตรงนั้น คุณสามารถดูและแก้ไขโค้ดได้ตามต้องการ โปรดทราบว่าวิธีนี้จะใช้ได้ก็ต่อเมื่อเว็บไซต์ที่คุณพยายามดูอนุญาตให้เข้าถึงซอร์สโค้ดได้ หากไม่มี คุณจะไม่เห็นสิ่งอื่นใดนอกจากข้อความแสดงข้อผิดพลาด
วิธีดูโค้ด HTML ของเว็บเพจใน Chrome บน iPad
Chrome บนแอป iPad ทำให้การดูโค้ด HTML ของหน้าเว็บใดๆ เป็นเรื่องง่าย เพียงทำตามขั้นตอนเหล่านี้:
สิ่งนี้ควรโหลดซอร์สโค้ดของหน้าในแท็บใหม่ภายใน Chrome จากที่นั่น คุณสามารถบันทึกหรือแชร์โค้ดได้ตามต้องการ
ซอร์สโค้ดคือกาวที่ยึดหน้าต่างๆ ไว้ด้วยกัน
HTML เป็นรากฐานของเว็บไซต์ใดๆ ให้โครงสร้างและเนื้อหาที่ผู้เข้าชมเห็นเมื่อโหลดหน้าเว็บในเบราว์เซอร์
แม้ว่าลักษณะที่ปรากฏสุดท้ายของเพจอาจถูกกำหนดโดย CSS หรือภาษาสไตล์อื่นๆ แต่โค้ด HTML จะกำหนดโครงสร้างพื้นฐานและเนื้อหาของเพจ การเปลี่ยนแปลงบางอย่างอาจทำให้เพจเสียหายได้ ด้วยเหตุนี้ สิ่งสำคัญคือต้องมีความเข้าใจ HTML เป็นอย่างดีเมื่อดูหรือทำการเปลี่ยนแปลงซอร์สโค้ด
นอกจากนี้ โปรดทราบว่าในขณะที่ดูโค้ด HTML อาจมีประโยชน์ในบางกรณี การเปลี่ยนแปลงที่ทำกับโค้ดจะไม่ปรากฏบนหน้าเว็บจริง เฉพาะการเปลี่ยนแปลงที่เผยแพร่โดยผู้ดูแลระบบของไซต์เท่านั้นที่จะปรากฏแก่ผู้เข้าชม
คุณได้ลองดูรหัส HTML ของหน้าเว็บใดๆ โดยใช้วิธีการใดๆ ที่กล่าวถึงในบทช่วยสอนนี้หรือไม่? มันไปได้อย่างไร?
แจ้งให้เราทราบในส่วนความคิดเห็น
ค้นพบวิธีใช้ประโยชน์จาก Focus Sessions ใน Windows 11 เพื่อการเรียนที่มีประสิทธิภาพ เรียนรู้เคล็ดลับทีละขั้นตอนเพื่อลดสิ่งรบกวน เพิ่มสมาธิ และบรรลุผลการเรียนที่ดีขึ้นด้วยเครื่องมือเพิ่มประสิทธิภาพการทำงานในตัวนี้
กำลังประสบปัญหาข้อผิดพลาด "DNS Probe Finished Nxdomain" บน Windows 11 อยู่ใช่ไหม? ค้นพบวิธีแก้ไขปัญหา DNS อย่างรวดเร็ว กู้คืนการเชื่อมต่ออินเทอร์เน็ต และกลับมาใช้งานออนไลน์ได้โดยไม่หงุดหงิด คู่มือทีละขั้นตอนสำหรับผู้เริ่มต้น
กำลังประสบปัญหาข้อผิดพลาด "Driver Overran Stack Buffer" ใน Windows 11 อยู่ใช่ไหม? ค้นพบวิธีแก้ไขแบบทีละขั้นตอนที่ได้รับการพิสูจน์แล้ว เพื่อแก้ไขปัญหา BSOD ที่น่าหงุดหงิดนี้ได้อย่างรวดเร็ว และทำให้พีซีของคุณกลับมาทำงานได้อย่างราบรื่นอีกครั้ง อัปเดตด้วยเคล็ดลับล่าสุดเพื่อประสิทธิภาพสูงสุด
เรียนรู้วิธีการใช้งาน Windows Defender ซึ่งเป็นโปรแกรมป้องกันไวรัสในตัวของ Windows 11 อย่างถูกต้อง เพื่อความปลอดภัยสูงสุด รับคำแนะนำทีละขั้นตอน เคล็ดลับ และแนวทางปฏิบัติที่ดีที่สุดในการปกป้องพีซีของคุณอย่างมีประสิทธิภาพ
กำลังประสบปัญหาข้อผิดพลาด iCloud Media Library ที่น่าหงุดหงิดบน Windows 11 อยู่ใช่ไหม? พบกับวิธีแก้ไขแบบทีละขั้นตอนที่ได้รับการพิสูจน์แล้ว เพื่อให้การซิงค์ข้อมูลกลับมาราบรื่นและคุณสามารถเข้าถึงรูปภาพ เพลง และอื่นๆ ได้อย่างง่ายดาย ไม่จำเป็นต้องมีความเชี่ยวชาญด้านเทคโนโลยี คุณก็สามารถกลับมาเพลิดเพลินกับเนื้อหา iCloud ของคุณได้อย่างไม่มีปัญหา
กำลังประสบปัญหาข้อผิดพลาด "ม่านปิดกล้องเว็บแคมเพื่อความเป็นส่วนตัว" ใน Windows 11 อยู่ใช่ไหม? ค้นพบวิธีแก้ไขที่ได้ผลจริงเพื่อกู้คืนการเข้าถึงกล้องของคุณอย่างรวดเร็วและปลอดภัย คู่มือทีละขั้นตอนเพื่อการแก้ไขปัญหาอย่างราบรื่น
กำลังประสบปัญหาเมนูบริบท (Context Menu) ที่ซับซ้อนเกินไปใน Windows 11 ใช่ไหม? ค้นพบคู่มือฉบับสมบูรณ์ที่จะช่วยแก้ปัญหาการสลับเมนูบริบทจากแบบคลาสสิกไปเป็นแบบใหม่ได้อย่างง่ายดาย เพื่อประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น มีคำแนะนำทีละขั้นตอน เคล็ดลับ และวิธีการแก้ไขปัญหาอยู่ภายในเล่มนี้
กำลังประสบปัญหาเกี่ยวกับ Safe Mode ของ Windows 11 ที่มีข้อผิดพลาดเกี่ยวกับการเชื่อมต่อเครือข่ายอยู่ใช่ไหม? พบกับวิธีแก้ไขแบบทีละขั้นตอนที่ได้รับการพิสูจน์แล้ว เพื่อกู้คืนระบบของคุณอย่างรวดเร็วและกลับมาใช้งานออนไลน์ได้โดยไม่มีปัญหา อัปเดตด้วยเคล็ดลับการแก้ไขปัญหาล่าสุดเพื่อประสิทธิภาพการทำงานที่ราบรื่น
กำลังประสบปัญหาเกี่ยวกับการตั้งค่า Winaero Tweaker ใน Windows 11 อยู่ใช่ไหม? คู่มือการแก้ไขปัญหาฉบับนี้จะให้คำแนะนำทีละขั้นตอนสำหรับปัญหาทั่วไป เพื่อให้มั่นใจว่าการปรับแต่งของคุณทำงานได้อย่างราบรื่น ค้นพบเคล็ดลับจากผู้เชี่ยวชาญเพื่อเพิ่มประสิทธิภาพประสบการณ์การใช้งานของคุณได้แล้ววันนี้
กำลังประสบปัญหาเกี่ยวกับ Cortana และ Copilot AI ใน Windows 11 อยู่ใช่ไหม? มาดูวิธีแก้ไขปัญหาทีละขั้นตอนเพื่อแก้ปัญหาการหยุดทำงาน การไม่ตอบสนอง และปัญหาการทำงานร่วมกัน ให้ผู้ช่วย AI ของคุณกลับมาใช้งานได้ตามปกติอย่างง่ายดาย
กำลังประสบปัญหาการเข้าถึง FTP ถูกปฏิเสธใน Windows 11 Explorer อยู่ใช่ไหม? พบกับวิธีแก้ไขแบบทีละขั้นตอนที่ได้รับการพิสูจน์แล้ว เพื่อให้คุณสามารถเข้าถึงไฟล์ได้อย่างราบรื่นอีกครั้ง เพิ่มประสิทธิภาพการทำงานของคุณโดยไม่ต้องหงุดหงิด!
กำลังประสบปัญหาเอฟเฟกต์ Acrylic และ Mica ใน Windows 11 ไม่แสดงผลใช่หรือไม่? ค้นพบวิธีแก้ไขที่ได้รับการพิสูจน์แล้วเพื่อเรียกคืนคุณสมบัติภาพที่สวยงามเหล่านี้และยกระดับประสบการณ์การใช้งานเดสก์ท็อปของคุณได้อย่างง่ายดาย
กำลังประสบปัญหาเกี่ยวกับการจัดวางสกิน Rainmeter บน Windows 11 อยู่ใช่ไหม? พบกับวิธีแก้ไขปัญหาการจัดวางที่ไม่ตรงกัน ปัญหาการลาก และความผิดพลาดของ DPI ที่ได้ผลจริง พร้อมคำแนะนำทีละขั้นตอนเพื่อคืนความสมบูรณ์แบบให้กับเดสก์ท็อปของคุณ
กำลังประสบปัญหาเมาส์เปลี่ยนค่า DPI เองโดยไม่คาดคิดใน Windows 11 อยู่ใช่ไหม? มาดูวิธีแก้ไขปัญหาที่ได้ผลจริง ๆ ตั้งแต่การปรับแต่งง่าย ๆ ไปจนถึงวิธีขั้นสูง เพื่อให้คุณควบคุมเมาส์ได้อย่างราบรื่นอีกครั้ง
กำลังประสบปัญหาการเชื่อมต่อ NFC ใน Windows 11 บนแล็ปท็อปของคุณอยู่ใช่ไหม? พบกับวิธีแก้ไขทีละขั้นตอนเพื่อคืนฟังก์ชัน NFC ให้ใช้งานได้อย่างราบรื่น และกลับมาจับคู่และแชร์ข้อมูลได้อย่างง่ายดาย อัปเดตด้วยเคล็ดลับการแก้ไขปัญหาล่าสุดแล้ว
