ข้อควรรู้
- คลิกขวาบนหน้าเว็บและเลือก ดูที่มาของหน้า .
- ทางลัด:กด Ctrl +คุณ (Windows PC) หรือ คำสั่ง +ตัวเลือก +คุณ (แมค).
- ในการใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ให้เลือก เมนู (สามจุด) > เครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนา .
บทความนี้อธิบายวิธีเข้าถึงซอร์สโค้ด HTML ของเว็บไซต์ในเว็บเบราว์เซอร์ Google Chrome ตลอดจนการเข้าถึงและใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome การดูซอร์สโค้ดของไซต์เป็นวิธีที่ยอดเยี่ยมสำหรับผู้เริ่มต้นในการเรียนรู้ HTML
ดูซอร์สโค้ดใน Chrome
ดังนั้นคุณจะดูซอร์สโค้ดของเว็บไซต์ได้อย่างไร? ต่อไปนี้คือคำแนะนำทีละขั้นตอนในการดำเนินการโดยใช้เบราว์เซอร์ Google Chrome
-
เปิด เว็บเบราว์เซอร์ Google Chrome (หากคุณไม่ได้ติดตั้ง Google Chrome นี่เป็นการดาวน์โหลดฟรี)
-
ไปที่หน้าเว็บที่คุณต้องการตรวจสอบ .
-
คลิกขวาที่หน้า และดูที่เมนูที่ปรากฏ จากเมนูนั้น คลิกดูแหล่งที่มาของหน้า .
-
ซอร์สโค้ดสำหรับหน้านั้นจะปรากฏเป็นแท็บใหม่ในเบราว์เซอร์
-
หรือคุณสามารถใช้แป้นพิมพ์ลัดของ Ctrl +คุณ บนพีซีเพื่อเปิดหน้าต่างที่มีซอร์สโค้ดของไซต์แสดงขึ้น สำหรับ Mac ทางลัดนี้คือ Command +ตัวเลือก +คุณ .
ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome
นอกเหนือจาก ดูแหล่งที่มาของหน้า . อย่างง่าย ความสามารถที่ Google Chrome นำเสนอ คุณยังสามารถใช้ประโยชน์จากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ยอดเยี่ยมเพื่อเจาะลึกเข้าไปในเว็บไซต์ได้อีกด้วย เครื่องมือเหล่านี้ไม่เพียงแต่ช่วยให้คุณเห็น HTML เท่านั้น แต่ยังรวมถึง CSS ที่ใช้เพื่อดูองค์ประกอบในเอกสาร HTML นั้นด้วย
ในการใช้เครื่องมือสำหรับนักพัฒนาของ Chrome:
-
เปิด Google Chrome .
-
ไปที่หน้าเว็บที่คุณต้องการตรวจสอบ .
-
เลือกเมนูสามจุด ที่มุมบนขวาของหน้าต่างเบราว์เซอร์
-
จากเมนู ให้วางเมาส์เหนือ เครื่องมือเพิ่มเติม จากนั้นเลือก เครื่องมือสำหรับนักพัฒนา ในเมนูที่ปรากฏขึ้น
-
หน้าต่างจะเปิดขึ้นโดยแสดงซอร์สโค้ด HTML ทางด้านซ้ายของบานหน้าต่างและ CSS ที่เกี่ยวข้องทางด้านขวา
-
หรือหากคุณคลิกขวาที่ องค์ประกอบในหน้าเว็บ และเลือกตรวจสอบ จากเมนูที่ปรากฏขึ้น เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome จะปรากฏขึ้นและไฮไลต์ส่วนเฉพาะที่คุณเลือกใน HTML โดยแสดง CSS ที่เกี่ยวข้องไว้ทางด้านขวา มีประโยชน์มากหากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับส่วนใดส่วนหนึ่งของเว็บไซต์
การดูซอร์สโค้ดถูกกฎหมายหรือไม่
หลายปีที่ผ่านมา เรามีนักออกแบบเว็บไซต์ใหม่ๆ หลายคนตั้งคำถามว่าการดูซอร์สโค้ดของไซต์นั้นเป็นที่ยอมรับและใช้เพื่อการศึกษาของพวกเขาหรือไม่ และสุดท้ายก็สำหรับงานที่พวกเขาทำ แม้ว่าการคัดลอกโค้ดของเว็บไซต์แบบขายส่งและส่งต่อเป็นของคุณเองบนเว็บไซต์นั้นเป็นสิ่งที่ยอมรับไม่ได้ แต่การใช้โค้ดนั้นเป็นจุดเริ่มต้นในการเรียนรู้จริง ๆ แล้วมีความก้าวหน้าในอุตสาหกรรมนี้มากน้อยเพียงใด
ดังที่เราได้กล่าวไว้ในตอนต้นของบทความนี้ คุณอาจจะรู้สึกลำบากใจที่จะหาผู้เชี่ยวชาญด้านเว็บที่ทำงานอยู่ในปัจจุบันซึ่งไม่ได้เรียนรู้อะไรจากการดูแหล่งที่มาของเว็บไซต์! ใช่ การเห็นซอร์สโค้ดของไซต์นั้นถูกกฎหมาย การใช้รหัสนั้นเป็นทรัพยากรในการสร้างสิ่งที่คล้ายกันก็ปลอดภัยเช่นกัน การรับรหัสตามที่เป็นอยู่และส่งต่อเมื่องานของคุณเป็นที่ที่คุณเริ่มประสบปัญหา
ในท้ายที่สุด ผู้เชี่ยวชาญด้านเว็บจะเรียนรู้จากกันและกันและมักจะปรับปรุงงานที่พวกเขาเห็นและได้รับแรงบันดาลใจจาก ดังนั้นอย่าลังเลที่จะดูซอร์สโค้ดของเว็บไซต์และใช้เป็นเครื่องมือในการเรียนรู้
เป็นมากกว่า HTML
สิ่งหนึ่งที่ต้องจำไว้คือ ไฟล์ต้นฉบับอาจซับซ้อนมาก (และยิ่งเว็บไซต์ที่คุณกำลังดูซับซ้อนมากขึ้น โค้ดของเว็บไซต์นั้นก็จะยิ่งซับซ้อนมากขึ้นเท่านั้น) นอกจากโครงสร้าง HTML ที่ประกอบเป็นหน้าแล้ว ยังมี CSS (สไตล์ชีตแบบเรียงซ้อน) ที่กำหนดรูปลักษณ์ของเว็บไซต์นั้น นอกจากนี้ เว็บไซต์จำนวนมากในปัจจุบันจะรวมไฟล์สคริปต์ไว้พร้อมกับ HTML
มีแนวโน้มว่าจะมีไฟล์สคริปต์หลายไฟล์รวมอยู่ด้วย อันที่จริงแล้ว แต่ละอันให้พลังในด้านต่างๆ ของไซต์ ตรงไปตรงมา ซอร์สโค้ดของไซต์อาจดูล้นหลาม โดยเฉพาะอย่างยิ่งหากคุณยังใหม่ต่อการทำเช่นนี้ อย่าหงุดหงิดถ้าคุณนึกไม่ออกว่าเกิดอะไรขึ้นกับเว็บไซต์นั้นทันที การดูซอร์ส HTML เป็นเพียงขั้นตอนแรกในกระบวนการนี้ ด้วยประสบการณ์เพียงเล็กน้อย คุณจะเริ่มเข้าใจมากขึ้นว่าชิ้นส่วนเหล่านี้เข้ากันได้อย่างไรเพื่อสร้างเว็บไซต์ที่คุณเห็นในเบราว์เซอร์ของคุณ เมื่อคุณคุ้นเคยกับโค้ดมากขึ้น คุณก็จะสามารถเรียนรู้เพิ่มเติมจากโค้ดนี้ และดูไม่น่ากลัวสำหรับคุณ
