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

สิ่งที่ต้องรู้

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

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

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

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

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

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

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

   

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

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

ฮิลารี อัลลิสัน / Lifewire

วิธีส่งคำขอเป็นเพื่อนใน discord

ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome

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

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

1. เปิด Google Chrome .

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

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

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

   

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

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

   วิธีเลื่อนเซลล์ลงใน excel

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

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

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

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

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

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

วิธีปิดการแจ้งเตือน Cortana

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

• ฉันจะแก้ไขโค้ด HTML ใน Chrome ได้อย่างไร

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

• ฉันจะดูซอร์สโค้ดของหน้าใน Chrome ได้อย่างไรหาก View Source ถูกปิดใช้งาน

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

• ฉันจะดูซอร์สโค้ดของไซต์ใน Chrome โดยใช้อุปกรณ์ Android ของฉันได้อย่างไร

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