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

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

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

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

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

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

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

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

Google Chrome

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

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

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

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

1. เลือกปุ่มเมนูหลักของ Chrome ที่มุมขวาบนและแสดงด้วย 3 จุดในแนวตั้ง

2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้วางเคอร์เซอร์ไว้ที่ด้านบน เครื่องมือเพิ่มเติม ตัวเลือก

3. เมื่อเมนูย่อยปรากฏขึ้นให้เลือก เครื่องมือสำหรับนักพัฒนา.

Android

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

iOS

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

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

Microsoft Edge

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

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

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

Mozilla Firefox

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

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

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

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

1. เลือกปุ่มเมนูหลักซึ่งอยู่ที่มุมขวาบนของหน้าต่างเบราว์เซอร์และแสดงด้วยเส้นแนวนอนสามเส้น

2. เมื่อปรากฏเมนูป๊อปอัพให้คลิกที่ไอคอน ผู้พัฒนา ไอคอน "ประแจ"

3. ตอนนี้เมนู Web Developer ของ Web Developer จะปรากฏขึ้น เลือกปุ่ม แหล่งที่มาของหน้าเว็บ ตัวเลือก

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

Android

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

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 รุ่นเดสก์ท็อปคุณต้องเปิดใช้งาน พัฒนา เมนู. ขั้นตอนด้านล่างนี้จะแนะนำให้คุณเปิดใช้งานเมนูที่ซ่อนไว้นี้และแสดงแหล่งที่มา HTML ของหน้า

1. เลือก การแข่งรถวิบาก ในเมนูเบราเซอร์ที่อยู่ด้านบนของหน้าจอ

2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก การตั้งค่า ตัวเลือก

3. การตั้งค่า Safari ควรปรากฏให้เห็น คลิกที่ สูง ไอคอนที่อยู่ทางขวาสุดของแถวบนสุด

4. ด้านล่างของส่วนขั้นสูงเป็นตัวเลือกที่มีข้อความ แสดงเมนู Develop ในเมนูบาร์พร้อมด้วยช่องทำเครื่องหมายที่ว่างเปล่า เลือกช่องนี้หนึ่งครั้งเพื่อวางเครื่องหมายถูกและปิดหน้าต่าง Preferences โดยคลิกที่เครื่องหมาย 'x' สีแดงที่มุมซ้ายบน

5. เลือกปุ่ม พัฒนา เมนูอยู่ที่ด้านบนของหน้าจอ

6. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก แสดงแหล่งที่มาของหน้าเว็บ. นอกจากนี้คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทน: คำสั่ง + ตัวเลือก + U.

อุปรากร

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

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

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

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

1. เลือกโลโก้โอเปร่าซึ่งอยู่ที่มุมซ้ายบนของหน้าต่างเบราเซอร์

2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้วางเคอร์เซอร์ไว้ที่ด้านบน เครื่องมือเพิ่มเติม ตัวเลือก

3. คลิกที่ แสดงเมนูนักพัฒนาซอฟต์แวร์.

4. เลือกโลโก้โอเปร่าอีกครั้ง

5. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้วางเคอร์เซอร์ไว้เหนือ ผู้พัฒนา.

6. เมื่อเมนูย่อยปรากฏขึ้นให้เลือก เครื่องมือสำหรับนักพัฒนา.

Vivaldi

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

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

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