วิธีดูรหัสต้นฉบับของเว็บเพจในเบราเซอร์ทุกๆ

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

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

บางคนมีฟังก์ชันและโครงสร้างขั้นสูงทำให้สามารถอ่าน โค้ด HTML และโค้ดโปรแกรมอื่น ๆ บนหน้าได้ง่ายขึ้น

ทำไมคุณถึงอยากเห็นรหัสต้นฉบับ?

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

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

ด้านล่างนี้เป็นคำแนะนำในการดูซอร์สโค้ดในเบราว์เซอร์ที่คุณเลือก

Google Chrome

ทำงานบน: Chrome OS, Linux, MacOS, Windows

Chrome รุ่นเดสก์ท็อปมีวิธีการที่แตกต่างกันสามวิธีในการดูซอร์สโค้ดของหน้าเว็บซึ่งเป็นโค้ดแรกและง่ายที่สุดโดยใช้แป้นพิมพ์ลัดต่อไปนี้: CTRL + U ( COMMAND + OPTION + U on macOS)

เมื่อกดปุ่มทางลัดนี้จะเปิดแท็บเบราเซอร์ใหม่ที่แสดง HTML และโค้ดอื่น ๆ สำหรับเพจที่ใช้งานอยู่ แหล่งที่มานี้เป็นรหัสสีและมีโครงสร้างในลักษณะที่ทำให้ง่ายขึ้นในการแบ่งส่วนและค้นหาสิ่งที่คุณกำลังมองหา นอกจากนี้คุณยังสามารถเข้าถึงได้ด้วยการป้อนข้อความต่อไปนี้ในแถบที่อยู่ของ Chrome แนบท้ายด้านซ้ายของ URL ของหน้าเว็บและกดปุ่ม Enter : view-source: (เช่น view-source: https: // www. .)

วิธีที่สามคือการ ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ของ Chrome ซึ่งช่วยให้คุณสามารถเจาะลึกลงไปในโค้ดของหน้าเว็บและปรับแต่งได้อย่างรวดเร็วเพื่อการทดสอบและการพัฒนา คุณสามารถเปิดและปิดอินเทอร์เฟซเครื่องมือของนักพัฒนาซอฟต์แวร์โดยใช้แป้นพิมพ์ลัดนี้: CTRL + SHIFT + I ( COMMAND + OPTION + I on macOS) นอกจากนี้คุณยังสามารถเปิดใช้งานได้โดยทำตามขั้นตอนต่อไปนี้

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

Android
การดูแหล่งที่มาของเว็บเพจใน Chrome สำหรับแอนดรอยด์ทำได้ง่ายเพียงแค่เพิ่มข้อความต่อไปนี้ลงในด้านหน้าของที่อยู่ (หรือ URL) และส่งข้อมูล: view-source:. ตัวอย่างนี้จะเป็น แหล่งข้อมูลมุมมอง: https: // www . HTML และโค้ดอื่น ๆ จากหน้าเว็บที่ต้องการจะปรากฏขึ้นทันทีในหน้าต่างที่ใช้งานอยู่

iOS
แม้ว่าจะไม่มีวิธีการดั้งเดิมในการดูซอร์สโค้ดโดยใช้ Chrome บน iPad, iPhone หรือ iPod touch การใช้โซลูชันของบุคคลที่สามเช่นแอปดูซิงค์ทำได้ง่ายและมีประสิทธิภาพมากที่สุด

มีให้เลือก 0.99 ดอลลาร์ใน App Store ดูแหล่งที่มาพร้อมท์ให้คุณป้อน URL ของหน้าเว็บ (หรือคัดลอก / วางจากแถบที่อยู่ของ Chrome ซึ่งบางครั้งก็เป็นเส้นทางที่ง่ายที่สุด) และนั่นแหละ นอกเหนือจากการแสดง HTML และซอร์สโค้ดอื่น ๆ แล้วแอปยังมีแท็บที่แสดงเนื้อหาของหน้าเว็บแต่ละรูปแบบ Document Object Model (DOM) ตลอดจนขนาดหน้า คุกกี้ และรายละเอียดที่น่าสนใจอื่น ๆ

Microsoft Edge

กำลังทำงานบน: Windows

เบราว์เซอร์ Edge ช่วยให้คุณสามารถดูวิเคราะห์และจัดการกับรหัสต้นฉบับของหน้าปัจจุบันได้จากอินเทอร์เฟซ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ในการเข้าถึงชุดเครื่องมือที่มีประโยชน์นี้คุณสามารถใช้แป้นพิมพ์ลัดเหล่านี้ได้: F12 หรือ CTRL + U หากคุณต้องการเมาส์ให้คลิกที่ปุ่มเมนูของ Edge (จุดสามจุดที่มุมขวาบน) และเลือกตัวเลือก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ F12 จากรายการ

หลังจากที่มีการเรียกใช้เครื่องมือ dev เป็นครั้งแรก Edge จะเพิ่มตัวเลือกเพิ่มเติมอีกสองตัวเลือกในเมนูบริบทของเบราเซอร์ (สามารถเข้าถึงได้โดยคลิกขวาที่ใดก็ได้ภายในเว็บเพจ): ตรวจสอบองค์ประกอบ และ ดูซอร์สโค้ด ซึ่งจะเปิดส่วน ดีบักเกอร์ ของ dev อินเทอร์เฟซสำหรับเครื่องมือที่มีรหัสแหล่งที่มา

Mozilla Firefox

ทำงานบน: Linux, macOS, Windows

หากต้องการดูซอร์สโค้ดของหน้าเว็บใน Firefox ของเดสก์ท็อปคุณสามารถกด CTRL + U ( COMMAND + U บน MacOS) บนแป้นพิมพ์ซึ่งจะเปิดแท็บใหม่ที่มี HTML และโค้ดอื่น ๆ สำหรับเว็บเพจที่ใช้งานอยู่

การพิมพ์ข้อความต่อไปนี้ลงในแถบที่อยู่ของ Firefox โดยตรงที่ด้านซ้ายของ URL ของหน้าเว็บจะทำให้แหล่งข้อมูลเดียวกันปรากฏในแท็บปัจจุบันแทน: view-source: (เช่น view-source: https: // www.) .

อีกวิธีหนึ่งในการเข้าถึงซอร์สโค้ดของหน้าเว็บคือการใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Firefox เข้าถึงได้โดยทำตามขั้นตอนต่อไปนี้

1. คลิกที่ปุ่มเมนูหลักซึ่งอยู่ที่มุมขวาบนของหน้าต่างเบราว์เซอร์และแสดงด้วยเส้นแนวนอนสามเส้น
2. เมื่อเมนูป๊อปออกปรากฏขึ้นให้คลิกที่ไอคอน นักพัฒนาซอฟต์แวร์ "wrench"
3. ตอนนี้เมนู Web Developer ของ Web Developer จะปรากฏขึ้น เลือกตัวเลือก แหล่งที่มาของหน้าเว็บ

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

Android
การดูซอร์สโค้ดใน Firefox เวอร์ชันแอนดรอยด์ทำได้โดยนำหน้า URL ของหน้าด้วยข้อความต่อไปนี้: view-source:. ตัวอย่างเช่นหากต้องการดูแหล่งข้อมูล HTML คุณจะต้องส่งข้อความต่อไปนี้ในแถบที่อยู่ของเบราเซอร์: view-source: https: // www. .

iOS
วิธีที่เราแนะนำสำหรับการดูซอร์สโค้ดของหน้าเว็บบน iPad, iPhone หรือ iPod touch ของคุณคือผ่านแอป View Source ซึ่งมีอยู่ใน App Store ในราคา $ 0.99 แม้ว่าจะไม่ได้รวมไว้กับ Firefox โดยตรง แต่คุณสามารถคัดลอกและวาง URL จากเบราว์เซอร์ลงในแอปพลิเคชันเพื่อเปิดเผย HTML และโค้ดอื่น ๆ ที่เชื่อมโยงกับหน้าเว็บที่ต้องการได้อย่างง่ายดาย

Apple Safari

กำลังทำงานบน iOS และ macOS

iOS
แม้ว่า Safari สำหรับ iOS จะไม่มีความสามารถในการดูแหล่งที่มาของหน้าโดยค่าเริ่มต้นเบราว์เซอร์จะรวมเข้ากับแอป View Source ซึ่งมีอยู่ใน App Store เพียง $ 0.99

หลังจากติดตั้งแอปพลิเคชันของบุคคลที่สามนี้กลับมายังเบราว์เซอร์ Safari แล้วแตะที่ปุ่มแบ่งปันซึ่งอยู่ที่ด้านล่างของหน้าจอและแสดงด้วยลูกศรสี่เหลี่ยมและลูกศรขึ้น ตอนนี้ควรใช้แผ่นข้อมูลการแชร์ iOS และซ้อนทับครึ่งล่างของหน้าต่าง Safari ของคุณ เลื่อนไปทางขวาและเลือกปุ่ม ดูแหล่งที่มา

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

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

1. คลิกที่ Safari ในเมนูเบราเซอร์ซึ่งอยู่ที่ด้านบนของหน้าจอ
2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือกตัวเลือก Preferences
3. การตั้งค่า Safari ควรปรากฏให้เห็น คลิกที่ไอคอน ขั้นสูง ซึ่งอยู่ที่ด้านขวาสุดของแถวบนสุด
4. ด้านล่างสุดของส่วนขั้นสูงคือตัวเลือกที่มีข้อความ แสดงเมนู Develop ในแถบเมนู พร้อมด้วยช่องทำเครื่องหมายว่างเปล่า คลิกที่ช่องนี้หนึ่งครั้งเพื่อวางเครื่องหมายถูกและปิดหน้าต่าง Preferences โดยคลิกที่เครื่องหมาย 'x' สีแดงที่มุมซ้ายบน
5. คลิกที่เมนู Develop ซึ่งอยู่ที่ด้านบนของหน้าจอ
6. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก Show Page Source นอกจากนี้คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทน: COMMAND + OPTION + U

อุปรากร

ทำงานบน: Linux, macOS, Windows

เมื่อต้องการดูซอร์สโค้ดจากเว็บเพจที่ใช้งานอยู่ในเบราว์เซอร์ Opera ให้ใช้แป้นพิมพ์ลัดต่อไปนี้: CTRL + U ( COMMAND + OPTION + U on macOS) หากคุณต้องการโหลดซอร์สโค้ดในแท็บปัจจุบันแทนให้พิมพ์ข้อความต่อไปนี้ทางด้านซ้ายของ URL ของหน้าเว็บภายในแถบที่อยู่แล้วกด Enter : view-source: (เช่น view-source: https: // www. )

รุ่นเดสก์ท็อปของ Opera ยังช่วยให้คุณสามารถดูซอร์สโค้ด HTML, CSS และองค์ประกอบอื่น ๆ ได้โดยใช้ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แบบรวม เมื่อต้องการเปิดอินเทอร์เฟซนี้ซึ่งโดยค่าเริ่มต้นจะปรากฏที่ด้านขวามือของหน้าต่างเบราเซอร์หลักให้กดแป้นพิมพ์ลัดต่อไปนี้: CTRL + SHIFT + I (คำ สั่ง + ตัวเลือก + ฉัน บน macOS)

ชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Opera สามารถเข้าถึงได้โดยทำตามขั้นตอนต่อไปนี้

1. คลิกที่โลโก้โอเปร่าซึ่งอยู่ที่มุมซ้ายบนของหน้าต่างเบราเซอร์
2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลื่อนเมาส์ไปวางเหนือตัวเลือก เครื่องมือเพิ่มเติม
3. คลิกที่ เมนู Show developer
4. คลิกที่โลโก้โอเปร่าอีกครั้ง
5. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลื่อนเมาส์ไปวางเหนือ นักพัฒนาซอฟต์แวร์
6. เมื่อเมนูย่อยปรากฏขึ้นให้คลิกที่ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

Vivaldi

มีหลายวิธีในการดูซอร์สโค้ดภายในเบราว์เซอร์ Vivaldi วิธีที่ง่ายที่สุดคือผ่านทางแป้นพิมพ์ลัด CTRL + U ซึ่งแสดงรหัสจากหน้าเว็บที่ใช้งานอยู่ในแท็บใหม่

นอกจากนี้คุณสามารถเพิ่มข้อความต่อไปนี้ที่ด้านหน้าของ URL ของหน้าซึ่งแสดงซอร์สโค้ดในแท็บปัจจุบัน: view-source:. ตัวอย่างนี้จะเป็น แหล่งข้อมูลมุมมอง: http: // www. .

อีกวิธีหนึ่งคือผ่านเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แบบเบราว์เซอร์ที่เข้าถึงได้โดยการกด CTRL + SHIFT + I หรือผ่านตัวเลือก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ในเมนู เครื่องมือ ของเบราว์เซอร์โดยคลิกที่โลโก้ 'V' ที่มุมบนด้านซ้าย การใช้เครื่องมือ dev ช่วยให้สามารถวิเคราะห์แหล่งที่มาของหน้าได้อย่างละเอียดมากขึ้น