คุณต้องการเรียนรู้ ดูซอร์สโค้ดของหน้าใน Chrome? หากคุณเป็นนักพัฒนาเว็บหรือเพียงอยากรู้ว่าเว็บไซต์ที่คุณเยี่ยมชมถูกสร้างขึ้นมาอย่างไร บทความนี้จะแสดงให้คุณเห็นวิธีเข้าถึงซอร์สโค้ดของหน้าเว็บทุกหน้าโดยใช้เบราว์เซอร์ Chrome แบบทีละขั้นตอน ไม่ว่าคุณจะต้องตรวจสอบ HTML, CSS, JavaScript หรือทรัพยากรอื่นๆ ของหน้า Chrome ก็มีเครื่องมือในตัวที่ให้คุณสำรวจและทำความเข้าใจการทำงานภายในของเว็บไซต์ต่างๆ ได้ ดังนั้นอย่าพลาดคำแนะนำที่ง่ายและรวดเร็วเพื่อเป็นผู้เชี่ยวชาญในการสำรวจซอร์สโค้ดใน Chrome
- ทีละขั้นตอน ➡️ ดูซอร์สโค้ดของหน้าใน Chrome
ที่นี่เราจะแสดงวิธีดูซอร์สโค้ดของหน้าเว็บใน Chrome ด้วยวิธีง่ายๆ
ดูซอร์สโค้ดของหน้าใน Chrome
-
ขั้นตอนที่ 1: เปิด Google Chrome บนคอมพิวเตอร์ของคุณ
- ขั้นตอนที่ 2: นำทางไปยังหน้าเว็บที่มีซอร์สโค้ดที่คุณต้องการดู
- ขั้นตอนที่ 3: คลิกขวาที่ใดก็ได้บนหน้าและเลือก “ตรวจสอบ” ในเมนูที่ปรากฏขึ้น
-
ขั้นตอนที่ 4: หน้าต่างเครื่องมือจะเปิดขึ้นที่ด้านล่างหรือด้านข้างของหน้าจอ ในหน้าต่างนี้ เลือกแท็บ "แหล่งที่มา"
-
ขั้นตอนที่ 5: ภายในแท็บ Sources คุณจะเห็นซอร์สโค้ด ของเว็บไซต์ คุณสามารถเรียกดู HTML, CSS, JavaScript และไฟล์อื่นๆ ที่ประกอบเป็นเพจได้
Q & A
คำถามที่พบบ่อย – ดูซอร์สโค้ดของหน้าใน Chrome
ฉันจะดูซอร์สโค้ดของหน้าใน Chrome ได้อย่างไร
- เปิด Google Chrome บนคอมพิวเตอร์ของคุณ
- ไปที่เว็บไซต์ที่คุณต้องการดูซอร์สโค้ด
- คลิกขวาที่ใดก็ได้บนหน้า
- เลือก “ดูซอร์สโค้ด” หรือกด Ctrl+U บนแป้นพิมพ์
เครื่องมือใดที่ฉันสามารถใช้เพื่อตรวจสอบซอร์สโค้ดใน Chrome
- เมื่อคุณเปิดซอร์สโค้ดของหน้าแล้ว คุณสามารถใช้เครื่องมือ "Elements" หรือ "Inspector" ของ Chrome ได้
- เครื่องมือนี้ จะทำให้คุณสามารถดูและแก้ไข โค้ด HTML, CSS และ JavaScript ของเพจ ได้ในแบบเรียลไทม์
ฉันจะใช้เครื่องมือ "องค์ประกอบ" ใน Chrome ทำอะไรได้บ้าง
- เครื่องมือ “องค์ประกอบ” ช่วยให้คุณสามารถตรวจสอบและแก้ไขโครงสร้างของ เพจ รวมถึงสไตล์ที่ใช้กับองค์ประกอบต่างๆ
- เครื่องมือนี้มีประโยชน์สำหรับนักพัฒนาเว็บที่ต้องการแก้ไขข้อบกพร่องหรือแก้ไขโค้ดของเพจ
ฉันจะ ค้นหาส่วนเฉพาะของซอร์สโค้ดใน Chrome ได้อย่างไร
- เมื่อคุณเปิดซอร์สโค้ดของเพจแล้ว คุณสามารถกด Ctrl+F บนคีย์บอร์ดได้
- แถบค้นหา จะเปิดขึ้นโดยคุณสามารถป้อนคำหรือวลีที่คุณต้องการ ค้นหาในโค้ด
ฉันสามารถบันทึกซอร์สโค้ดของเพจจาก Chrome ได้หรือไม่
- ได้ คุณสามารถบันทึกซอร์สโค้ดของเพจได้ด้วยการคลิกขวาในหน้าต่างโค้ดแล้วเลือก “บันทึกเป็น…” หรือโดยใช้ Ctrl+S
- ซึ่งจะช่วยให้คุณสามารถบันทึกโค้ด HTML บนคอมพิวเตอร์ของคุณเพื่อใช้อ้างอิงหรือแก้ไขในอนาคต
ฉันจะทราบได้อย่างไรว่าเพจใช้สคริปต์หรือไลบรารีบางตัว
- การใช้เครื่องมือ "Elements" หรือ "Inspector" ของ Chrome ช่วยให้คุณค้นหาชื่อสคริปต์หรือไลบรารีที่คุณสนใจในซอร์สโค้ดของหน้าได้
- นอกจากนี้ คุณยังสามารถดูคำขอเครือข่ายที่ทำโดยเพจเพื่อระบุไฟล์ภายนอกที่อัปโหลด
ฉันสามารถ แก้ไข แหล่งที่มาของหน้าจาก Chrome ได้หรือไม่
- ได้ คุณสามารถแก้ไขโค้ด HTML, CSS และ JavaScript ของเพจได้โดยใช้เครื่องมือ "องค์ประกอบ" หรือ "ตัวตรวจสอบ" ของ Chrome
- สิ่งสำคัญคือต้องจำไว้ว่า การเปลี่ยนแปลงที่ทำในลักษณะนี้ จะส่งผลต่อการแสดง เพจ ในเบราว์เซอร์ของคุณเท่านั้น ไม่ใช่เวอร์ชันดั้งเดิมบนเซิร์ฟเวอร์
การดูซอร์สโค้ดของเพจใน Chrome ถูกกฎหมายหรือไม่
- ใช่ การดูซอร์สโค้ดของหน้าเว็บใน Chrome เป็นเรื่องถูกกฎหมาย เนื่องจากสามารถเข้าถึงได้ผ่านเบราว์เซอร์แบบสาธารณะ
- สิ่งสำคัญคือต้องเคารพลิขสิทธิ์และนโยบายการใช้งานไซต์เมื่อใช้หรือแก้ไขโค้ด
ฉันสามารถตรวจสอบซอร์สโค้ดบนอุปกรณ์มือถือด้วย Chrome ได้หรือไม่
- ใช่ คุณสามารถตรวจสอบซอร์สโค้ดของหน้าเว็บบนอุปกรณ์เคลื่อนที่ได้โดยใช้ Chrome
- ในการดำเนินการนี้ ให้เปิดหน้าบนอุปกรณ์ จากนั้นแตะปุ่มตัวเลือก และเลือก "ตรวจสอบ" หรือ "ตรวจสอบ" หากอุปกรณ์เชื่อมต่อกับคอมพิวเตอร์
ฉันจะเรียนรู้การใช้เครื่องมือ Elements ของ Chrome อย่างมีประสิทธิภาพได้อย่างไร
- คุณสามารถค้นหาบทช่วยสอนและคำแนะนำออนไลน์เพื่อเรียนรู้วิธีใช้เครื่องมือ Elements ของ Chrome อย่างมีประสิทธิภาพ
- นอกจากนี้ การทดลองกับซอร์สโค้ดของหน้าเว็บต่างๆ จะช่วยให้คุณเข้าใจการทำงานและประโยชน์ของหน้าเว็บต่างๆ ได้ดียิ่งขึ้น
ฉันชื่อ Sebastián Vidal วิศวกรคอมพิวเตอร์ผู้หลงใหลในเทคโนโลยีและ DIY นอกจากนี้ฉันยังเป็นผู้สร้าง tecnobits.com ที่ฉันแชร์บทช่วยสอนเพื่อทำให้ทุกคนสามารถเข้าถึงและเข้าใจเทคโนโลยีได้มากขึ้น