วิธีดูซอร์สโค้ด HTML ใน Google Chrome

สิ่งที่ควรรู้

• คลิกขวาที่หน้าเว็บแล้วเลือก ดูซอร์สหน้า
• ลัดพิมพ์: กด Ctrl+U (Windows PC) หรือ Command+Option+U (Mac)
• เพื่อใช้เครื่องมือสำหรับนักพัฒนาของ Chrome ให้เลือก เมนู (สามจุด) > เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนา

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

ดูซอร์สโค้ดใน Chrome

ลองดูว่าจะดูซอร์สโค้ดของเว็บไซต์ได้อย่างไร นี่คือขั้นตอนทีละขั้นสำหรับการทำอย่างนั้นโดยใช้เบราว์เซอร์ Google Chrome

1. เปิด เบราว์เซอร์เว็บ Google Chrome (หากคุณยังไม่ได้ติดตั้ง Google Chrome สามารถดาวน์โหลดฟรีได้)

2. ไปที่ หน้าเว็บที่คุณต้องการตรวจสอบ

3. คลิกขวา ที่หน้า และดูเมนูที่ปรากฏ จากเมนูนั้น ให้คลิก ดูซอร์สหน้า

   

4. ซอร์สโค้ดของหน้านั้นจะปรากฏเป็นแท็บใหม่ในเบราว์เซอร์

5. อีกวิธีหนึ่ง คุณสามารถใช้ลัดพิมพ์ Ctrl+U บน PC เพื่อเปิดหน้าต่างที่แสดงซอร์สโค้ดของเว็บไซต์ บน Mac ลัดพิมพ์คือ Command+Option+U

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

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

วิธีใช้เครื่องมือสำหรับนักพัฒนาของ Chrome:

1. เปิด Google Chrome

2. ไปที่ หน้าเว็บที่คุณต้องการตรวจสอบ

3. เลือก เมนูสามจุด ที่มุมขวาบนของหน้าต่างเบราว์เซอร์

4. จากเมนู ให้ชี้ไปที่ เครื่องมือเพิ่มเติม แล้วเลือก เครื่องมือสำหรับนักพัฒนา ในเมนูที่ปรากฏ

   

5. หน้าต่างจะเปิดขึ้นแสดงซอร์สโค้ด HTML ด้านซ้ายของแผง และ CSS ที่เกี่ยวข้องด้านขวา

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

การดูซอร์สโค้ดถูกต้องตามกฎหมายหรือไม่?

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

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

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

มากกว่าแค่ HTML

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

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