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

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

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

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

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

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

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

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

   

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

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

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

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

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

1. จุดเปิด Google Chrome.

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

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

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

   

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

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

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

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

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

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

เป็นมากกว่า HTML

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

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