เป็นเวลานานสำหรับฉันตัวเลือกคือ "show ซอร์สโค้ดหน้า" ไม่มีประโยชน์และไม่น่าสนใจ ลาก่อน การเรียนรู้ HTMLใน Codecademy และเลย์เอาต์ของเว็บไซต์ของฉันเองไม่ได้พัฒนาเป็นงานอดิเรกใหม่ของฉัน นี่คือที่มาของคำถาม: จะหาคดีจริงและยืมได้ที่ไหน โซลูชั่นที่น่าสนใจสำหรับ “กระปุกออมสิน” ของคุณล่ะ? คำตอบนั้นง่ายอย่างไม่คาดคิด เช่นเดียวกับสิ่งที่ชาญฉลาดทั้งหมด: ดูซอร์สโค้ดของหน้าใน กูเกิลโครม- ฉันแบ่งปันกับคุณที่พบเล็กน้อย

ซอร์สโค้ดของหน้าคืออะไร

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

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

วิธีดูซอร์สโค้ดในหน้าเบราว์เซอร์ Google Chrome

ค้นหาเพจที่คุณชอบ เช่น ฉันสนใจการออกแบบเมนูของเว็บไซต์ โอเพ่นซอร์สโค้ดได้ที่ เบราว์เซอร์ Google Chrome สามารถทำได้สามวิธี:

1. คลิกที่ไอคอน เมนูทางด้านขวา มุมบนเบราว์เซอร์และเลือก " เครื่องมือเพิ่มเติม- มีตัวเลือก "ดูซอร์สโค้ด" บอกตามตรงว่าฉันไม่ค่อยใช้วิธีนี้: มีการเคลื่อนไหวที่ไม่จำเป็นมากมาย มันสามารถทำให้ง่ายยิ่งขึ้นไปอีก
2. กดคีย์ผสม Ctrl+U– หน้าต่างใหม่พร้อมซอร์สโค้ดจะเปิดขึ้น
3. สำหรับผู้ชื่นชอบเมนูบริบท: คลิกขวาที่หน้าแล้วเลือกตัวเลือก "ดูรหัสหน้า"

เราจัดการกับงานในการดูโค้ด HTML ของเพจในเบราว์เซอร์ เรามาดูขั้นตอนที่น่าสนใจที่สุดกันดีกว่า

วิธีแก้ไขและบันทึกซอร์สโค้ด

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

ตัวเลือก 1. “ด้วยตนเอง”

หลังจากที่เราเปิดซอร์สโค้ดของเพจแล้วเราก็โทร เมนูบริบทและเลือกตัวเลือก "บันทึกเป็น" และบันทึกไฟล์ไปที่ ฮาร์ดไดรฟ์- เราแก้ไขไฟล์ใน Notepad หรือ Notepad บันทึกการเปลี่ยนแปลงและเปิดผ่านเบราว์เซอร์ ผลลัพธ์ของการเปลี่ยนแปลงของเรา (สำเร็จและไม่สำเร็จ) จะปรากฏในหน้าต่างเบราว์เซอร์

ตัวเลือกที่ 2. สำหรับมืออาชีพ

เมื่อคุณ "เล่น" ด้วยซอร์สโค้ดทุกวัน กระบวนการ "บันทึก - เปิด - เปลี่ยนแปลง - บันทึก - ตรวจสอบ" จะน่าเบื่อหน่าย สำหรับตัวฉันเอง ฉันพบวิธีแก้ปัญหาในรูปแบบของการติดตั้งปลั๊กอินสำหรับ Google Chrome - Firebug Lite ช่วยให้คุณสามารถแก้ไขและบันทึกซอร์สโค้ดได้โดยไม่ต้องออกจากหน้าต่างเบราว์เซอร์

1 โหวต

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

ปรากฎว่าคำตอบนั้นค่อนข้างง่าย และหากคุณมีทักษะอยู่บ้าง คุณสามารถรวบรวมฟีเจอร์เหล่านี้มากมายและสร้างเว็บไซต์ที่ไม่ซ้ำใครของคุณเองได้ในเวลาอันสั้น

วันนี้เราจะพูดถึงวิธีเปิดโค้ดของเพจ องค์ประกอบบางอย่าง และเรียนรู้วิธีใช้ทักษะนี้เพื่อประโยชน์ของคุณ

ความรู้พื้นฐานเกี่ยวกับโค้ด

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

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

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

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

เมื่อคุณเริ่มเข้าใจภาษาลับและเห็นว่าทุกอย่างง่ายกว่าที่คิดไว้ในตอนแรกมาก คุณอดไม่ได้ที่จะเชื่อใน ความแข็งแกร่งของตัวเองและความสามารถของสมอง นี่มันเจ๋งมาก

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

ตามรูปวาดนี้. ดูภาพหน้าจอด้านล่าง คุณอาจคิดว่านี่เป็นชุดสัญลักษณ์ที่ไร้สาระและซับซ้อนมาก ที่จริงแล้วทุกอย่างไม่ซับซ้อนนัก มีอัลกอริธึมที่แน่นอน

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

ด้วยความรู้เกี่ยวกับคุณลักษณะเหล่านี้ คุณจึงสามารถแก้ไขปัญหาได้เกือบทุกปัญหา แต่นักพัฒนาแต่ละคนก็ค้นหาวิธีการของตนเองเพื่อให้บรรลุเป้าหมาย

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

อีกไม่นาน ฉันจะแสดงตัวอย่างที่เฉพาะเจาะจงให้คุณดู

ดูโค้ด

ก่อนอื่นให้ฉันแสดงให้คุณเห็นว่าควรทำอย่างไรหากคุณต้องการค้นหา html ของคนอื่น จากนั้นเราจะดูรายละเอียดคำถามอื่น ๆ ทั้งหมดเพิ่มเติม

วิธีที่ดีที่สุด

วิธีที่ฉันจะอธิบายก่อนนั้นซับซ้อนเล็กน้อยสำหรับผู้เริ่มต้น แต่เป็นคำแนะนำให้อ่าน เปิดหน้าและคลิกที่ปุ่มเมาส์ขวา เลือก “บันทึกเป็น...”

บันทึกหน้าเว็บทั้งหมด อย่างที่คุณเห็นในภาพหน้าจอ ฉันได้ดาวน์โหลดทุกอย่างล่วงหน้าแล้ว ที่นี่เรามีสองโฟลเดอร์

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

นี่คือกูเกิลโครม

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

แผ่นโค้ดจะเปิดขึ้นในหน้าต่างใหม่ ซึ่งค่อนข้างยากสำหรับผู้เริ่มต้นที่จะเข้าใจ แต่อย่าตื่นตระหนกก่อนเวลา

หากคุณต้องการทราบโค้ดขององค์ประกอบเดียว เพียงเลื่อนเมาส์ไปวางเหนือองค์ประกอบนั้นแล้วคลิกขวา เลือกฟังก์ชัน Chrome อื่น: “ดูโค้ดองค์ประกอบ”

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

มันจึงปรากฏ ข้อมูลที่จำเป็น- html ด้านบน, css ด้านล่าง เหล่านี้เป็นสองภาษา คนแรกรับผิดชอบส่วนประกอบข้อความ และคนที่สองรับผิดชอบการออกแบบ หากไม่มี CSS คุณจะต้องระบุสีและขนาดตัวอักษรในแต่ละครั้ง แต่ละหน้านี่ยาวมาก แต่ถ้าไม่มี html เราก็จะไม่มีข้อความ ฉันอธิบายมันคร่าวๆ แต่โดยทั่วไป มันเป็นอย่างนั้น

อย่างไรก็ตาม หากคุณสนใจวิธีการทำงานที่นี่ คุณสามารถดูลิงก์ไปยังรูปภาพด้านล่างได้ นี่คือคำตอบของคุณ

มอซซิลา ไฟร์ฟอกซ์

ถ้าคุณชอบที่จะทำงานในสีเหลืองอ่อนทุกอย่างจะเหมือนกันทุกประการ เปิดหน้าและคลิกที่ ปุ่มขวาหนู “ซอร์สโค้ดของหน้า” หากคุณต้องการดูโค้ดทั้งหมด

เมื่อคุณวางเมาส์เหนือองค์ประกอบ คุณสามารถเปิดโค้ดของมันได้

ข้อมูลจะแสดงที่ด้านล่างของหน้าจอที่นี่ แต่อย่างอื่นทุกอย่างจะเหมือนกันทุกประการ

เบราว์เซอร์ยานเดกซ์

ในเบราว์เซอร์ Yandex ทุกอย่างเหมือนกับในสองตัวเลือกก่อนหน้าทุกประการ เปิดหน้า คลิกขวา ดูโค้ดของหน้า

เราวางเคอร์เซอร์ไว้เหนือองค์ประกอบหากเราต้องการค้นหารหัสของมันอย่างชัดเจน

ทุกอย่างจะแสดงที่นี่เหมือนกับใน Chrome ทุกประการ

โอเปร่า

และสุดท้าย โอเปร่า

อย่างไรก็ตาม คุณอาจสังเกตเห็นว่าคุณไม่จำเป็นต้องใช้เมาส์ ในการเปิดรหัสก็มี การรวมกันอย่างรวดเร็วปุ่มต่างๆ และเหมือนกันสำหรับเบราว์เซอร์ทั้งหมด: CTRL+U.

สำหรับองค์ประกอบ: Ctrl+Shift+C

นี่คือสิ่งที่ผลลัพธ์ดูเหมือน

สิ่งนี้จะน่าสนใจสำหรับผู้เริ่มต้น

ตอนนี้ดูว่าทุกอย่างทำงานอย่างไร คุณพบเว็บไซต์และชอบองค์ประกอบบางอย่างมาก ตัวอย่างเช่นอันนี้ คุณรู้วิธีเปิดโค้ดองค์ประกอบแล้ว

ตอนนี้คัดลอกมัน

ฉันใช้มันวางรหัสนี้ลงในรหัสใหม่ ไฟล์ .htmlลงในแท็ก body (body เป็นภาษาอังกฤษ)

ตอนนี้เรามาดูกันว่าทุกอย่างจะดูเป็นอย่างไรในเบราว์เซอร์

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

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

หากคุณทนไม่ไหว แต่ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ html และ css ตอนนี้ ฉันสามารถแนะนำหลักสูตรการฝึกอบรมฟรีให้คุณได้

นี่คือ 33 บทเรียนที่จะช่วยให้คุณเชี่ยวชาญ html - « หลักสูตรฟรีโดย HTML" .

และที่นี่ ข้อมูลครบถ้วนเกี่ยวกับซีเอส - “หลักสูตรฟรีเกี่ยวกับ CSS (45 บทเรียนวิดีโอ!)” .

ตอนนี้คุณรู้เพิ่มเติมอีกเล็กน้อยแล้ว ฉันขอให้คุณประสบความสำเร็จในความพยายามของคุณ แล้วพบกันใหม่!

นักพัฒนาเบราว์เซอร์ได้ดูแลความสะดวกสบายของผู้ที่สร้างเว็บไซต์ที่เปิดในเบราว์เซอร์เดียวกันเหล่านี้ ได้แก่ เว็บมาสเตอร์ พวกเขาเพิ่มเข้ามา คุณสมบัติมาตรฐานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ทำให้ง่ายต่อการเปิดและ ดูซอร์สโค้ดของหน้าเว็บไซต์ในเบราว์เซอร์: HTML, CSS, JavaScript (JS) รับข้อมูลที่เป็นประโยชน์ต่างๆ เกี่ยวกับโครงสร้างของเว็บไซต์ นำทาง การวิเคราะห์ทางเทคนิค- โดยทั่วไปเห็นสิ่งที่มีประโยชน์มากมาย

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

จากบทความนี้ คุณจะได้เรียนรู้วิธีดูซอร์สโค้ดของหน้าเว็บไซต์ในเบราว์เซอร์ (วิธีเปิด HTML, CSS, รหัสจาวาสคริปต์เว็บไซต์).

วิธีเปิดซอร์สโค้ดของหน้าในเบราว์เซอร์

มีสองวิธีในการเปิดซอร์สโค้ดของหน้าเว็บในเบราว์เซอร์:

1. การใช้ปุ่มลัด
2. เปิดจากเมนูบริบท

Ctrl+U– ปุ่มลัดเพื่อดูซอร์สโค้ดของทั้งหน้าเว็บไซต์ในหน้าต่างใหม่ที่แยกต่างหาก มาตรฐานสำหรับทุกเบราว์เซอร์: Google Chrome, Opera, มอซซิลา ไฟร์ฟอกซ์, เบราว์เซอร์ Yandex, IE

คุณยังสามารถเข้าสู่เครื่องมือสำหรับนักพัฒนาได้ดังนี้:

เพื่อค้นหาอย่างรวดเร็ว รหัสที่จำเป็นคำหรือข้อความบนเพจ คุณสามารถใช้คีย์ลัดการค้นหามาตรฐานสำหรับเบราว์เซอร์ทั้งหมดได้: Ctrl + G

คำแนะนำวิดีโอ:

ดูรหัสองค์ประกอบ | สำรวจองค์ประกอบ | ตรวจสอบองค์ประกอบ

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

วิธีดูโค้ดขององค์ประกอบบนเพจ:

คุณยังสามารถใช้แป้นพิมพ์ลัดเพื่อ เข้าถึงได้อย่างรวดเร็วเพื่อตรวจสอบองค์ประกอบ

ปุ่มลัด (ปุ่ม):

Google Chrome: Ctrl+Shift+I และ Ctrl+Shift+C

โอเปร่า: Ctrl+Shift+I และ Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I และ Ctrl+Shift+C

เบราว์เซอร์ Yandex: Ctrl+Shift+I และ Ctrl+Shift+C

หลังจากขั้นตอนเหล่านี้ ไฟล์ต้นฉบับจะเปิดขึ้นในหน้าต่างเบราว์เซอร์เดียวกัน รหัสเว็บหน้า:

HTML ทั้งหมดรหัสจะอยู่ในคอลัมน์ด้านซ้ายขนาดใหญ่ ก สไตล์ CSS- ทางด้านขวา

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

คำแนะนำแบบวิดีโอนี้อธิบายโดยละเอียดและแสดงวิธีทำงานกับเครื่องมือสำหรับนักพัฒนา:

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

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

วิธีดูซอร์สโค้ดบนโทรศัพท์ Android

ฉันอยากจะทราบด้วยว่าเครื่องมือสำหรับนักพัฒนานั้นมีให้ใช้งานไม่เฉพาะในเบราว์เซอร์เวอร์ชันเดสก์ท็อปเท่านั้น นั่นก็คือบนคอมพิวเตอร์และแล็ปท็อป บนโทรศัพท์และแท็บเล็ต (Android, iOS) คุณสามารถดูซอร์สโค้ดได้

ในการดำเนินการนี้ ให้เพิ่มคำนำหน้าวิวซอร์สให้กับ URL ของเพจที่กำลังตรวจสอบ:

ตัวอย่างเช่น:

ดูแหล่งที่มา:https://site/turbo-rezhim-opera/

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

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

วิธีดูซอร์สโค้ดของหน้า html ในเบราว์เซอร์ Google

เพื่อให้คุณสามารถดูโค้ดของหน้าใน Chrome ได้ คุณต้องไปที่ไซต์ที่คุณสนใจและทำตามขั้นตอนต่อไปนี้:

ทั้งสองรายการนี้มีความแตกต่างกันในด้านฟังก์ชันการทำงานและข้อมูลสำหรับผู้ใช้ โปรแกรมเมอร์ หรือแฮ็กเกอร์

อะไรคือความแตกต่างระหว่างโค้ดเพจและคำสั่ง "ดูโค้ด"?

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

แต่เพื่ออธิบายสำหรับผู้ใช้ทั่วไป ฟังก์ชั่นเหล่านี้สามารถแบ่งออกเป็นวัตถุประสงค์ดังต่อไปนี้:

1. “ดูรหัสหน้า” จำเป็นเท่านั้นเพื่อดูชุดค่าผสมหลักของหน้าเท่านั้น โดยพื้นฐานแล้วนี่คือโครงสร้างของไซต์ (ไม่มี รุ่นเพิ่มเติมในรูปแบบ ไฟล์ซีเอสเอสและส่วนเพิ่มเติมอื่น ๆ ที่ยังคงอยู่ในโฟลเดอร์ของผู้สร้างไซต์) โครงสร้างนี้ไม่เหมาะแก่การสร้าง. หน้าของตัวเองโดยการ "คัดลอกวาง" แต่จะช่วยให้คุณเห็นว่าโปรแกรมเมอร์ทำอะไรกันแน่และในลำดับใดเพื่อให้ไซต์ในเบราว์เซอร์ Google Chrome มีการออกแบบภายนอกดังกล่าว
2. “ดูโค้ด” จะแสดงโครงสร้างโดยละเอียด โดยเน้นพื้นที่ทั้งหมดที่ได้รับผลกระทบบนหน้า หากชี้ไปที่ รหัสเฉพาะรายการ - จะเน้นองค์ประกอบบนไซต์ที่องค์ประกอบนั้นอยู่
3. การดูโค้ดของเพจจะเปิดขึ้นในเบราว์เซอร์แยกต่างหากโดยไม่สามารถแก้ไขได้ นั่นคือเหมาะสำหรับการคัดลอกและอ่านโค้ดไซต์เท่านั้น แต่นี่เป็นฟังก์ชั่นที่มีประโยชน์ไม่น้อย
4. “ดูโค้ด” สามารถเปลี่ยนแปลงได้ และคุณสามารถแก้ไของค์ประกอบใดๆ ก็ได้ในลักษณะที่สะดวกสำหรับคุณ แน่นอนว่าการเปลี่ยนแปลงทั้งหมดนี้จะ "มีผล" จนกว่าหน้าจะรีเฟรช แต่บางครั้งก็เป็นเรื่องสนุกที่จะผ่านการตั้งค่าเหล่านั้นและเข้าใจว่าเหตุใดจึงจำเป็นต้องมีค่านี้หรือค่านั้น และจะเกิดอะไรขึ้นหากคุณเปลี่ยนแปลง คุณไม่ควรสันนิษฐานว่าการกระทำดังกล่าวจะเป็นอันตรายต่อตัวคุณเองหรือไซต์ในทางใดทางหนึ่ง การเปลี่ยนแปลงเหล่านี้จะส่งผลต่อโค้ดของ Google Chrome ของคุณเท่านั้นและจะไม่ออนไลน์

เรากำลังพิจารณาคำถามว่าจะดูโค้ดองค์ประกอบอย่างไร

หากเราต้องตอบคำถามดังกล่าว ตัวเลือกเดียวที่แนะนำตัวมันเองก็คือตัวอย่าง เพราะในบทความหนึ่งเป็นเรื่องยากมากที่จะเป็นคนที่เข้าใจหัวข้อนี้ (นักพัฒนาเว็บ) แต่การแสดงตัวอย่างเพื่อให้คำถามได้รับการแก้ไขนั้นง่ายกว่ามาก

ฟังก์ชันการทำงานของโค้ดองค์ประกอบนั้นกว้างมาก ดังนั้นเราจึงใช้คำใดคำหนึ่งบนเว็บไซต์เบราว์เซอร์ Google Chrome เราต้องการพิจารณาว่าคำหลักใด (ในโค้ดจะเขียนเป็น "คำหลัก") ที่ใช้สำหรับไซต์ของเรา เมื่อต้องการทำเช่นนี้ เราใช้อัลกอริทึมต่อไปนี้:

วิธีอื่นๆ ในการใช้คุณสมบัตินี้ในเบราว์เซอร์ Google Chrome

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

• ดูโครงสร้างของไซต์โดยเริ่มจาก head (“ส่วนหัวของไซต์”) และลงท้ายด้วย end (คำสั่งสุดท้ายของโปรแกรมใด ๆ );
• ดูฟังก์ชันทั้งหมดของไซต์ ได้แก่ ลิงก์ไปยังไซต์อื่น โมดูลเพิ่มเติมจากไซต์ภายนอก และการมีอยู่ของตัวนับในตัวสำหรับการรวบรวมข้อมูลต่างๆ
• ค้นหาว่าห้ามคัดลอกจากไซต์หรือไม่
• โค้ดจะบันทึกลิงก์ทั้งหมดไปยังหน้าอื่นๆ ของเว็บไซต์ รวมถึงการออกแบบและการดำเนินการที่ตามมาหลังจากคลิกลิงก์เหล่านั้น

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

รายการ "ดูรหัสองค์ประกอบ" ใช้งานไม่ได้

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

• โปรไฟล์ผู้ใช้เสียหาย
• การปรากฏตัวของมัลแวร์ในคอมพิวเตอร์
• การบล็อกโดยส่วนขยายบางอย่างเพื่อเพิ่มประสิทธิภาพ (แม้สิ่งนี้สามารถเกิดขึ้นได้)

แก้ไขโปรไฟล์ผู้ใช้ที่เสียหาย

เพื่อสร้าง โปรไฟล์ใหม่คุณต้องลบอันเก่าออกจากคอมพิวเตอร์ของคุณ เมื่อต้องการทำเช่นนี้ เราทำสิ่งต่อไปนี้:

1. ปิด Google Chrome และเปิดใช้งานในตัว เบราว์เซอร์ Windowsนักสำรวจ
2. เข้ามา แถบที่อยู่คำสั่งต่อไปนี้: %LOCALAPPDATA%\Google\Chrome\User Data\
3. เมื่อไดเร็กทอรีเปิดขึ้น ให้มองหาโฟลเดอร์ "Default" และเพิ่ม "Backup" ลงในชื่อเพื่อให้มีลักษณะดังนี้: "Backup Default"
4. หลังจากรีสตาร์ทเบราว์เซอร์ Chrome แล้ว โปรไฟล์ใหม่จะถูกสร้างขึ้น

เราลบมัลแวร์หรือสิ่งที่เหลืออยู่

หากโปรไฟล์ใหม่ไม่ให้สิทธิ์เราในการเข้าถึงโค้ดองค์ประกอบของหน้าและเรายังคงเห็นข้อผิดพลาด เราควรดำเนินการต่อไปนี้:

1. เปิดบรรทัดคำสั่ง สตริงของ Windows(“Run”) และป้อนคำสั่ง “cmd” ที่นั่น
2. ป้อนคำสั่งต่อไปนี้ลงในบรรทัด: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”
3. หลังจากยืนยันการดำเนินการแล้ว ให้ป้อนสิ่งนี้: RD /S /Q “%WinDir%\System32\GroupPolicy”
4. ตอนนี้ “gpupdate /force” (ไม่มีเครื่องหมายคำพูด)

หากทุกอย่างถูกต้องแล้วหลังจากรีบูต คอมพิวเตอร์กูเกิล Chrome จะเปิดโค้ดขององค์ประกอบต่างๆ และเบราว์เซอร์จะทำงานได้ตามปกติ

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

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

วิธีดูโค้ดหน้า?

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

• กลับ;
• ซึ่งไปข้างหน้า;
• รีบูต;
• บันทึกเป็น;
• ผนึก;
• แปลเป็นภาษารัสเซีย;
• ดูรหัสหน้า;
• ดูโค้ด

เราจำเป็นต้องคลิกที่ ดูรหัสหน้าและโค้ด html ของหน้าเว็บไซต์จะเปิดต่อหน้าเรา

การดูโค้ดหน้า: ต้องใส่ใจอะไร?

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

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

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

ตัวอย่างเช่น:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

เราจะเห็นรูปแบบตัวอักษร CSS ของหน้า ใน ในกรณีนี้แบบอักษรที่ใช้ สามารถดูได้ที่นี่ - ตระกูลฟอนต์: 'Source Sans Pro'

ไซต์นี้ได้รับการปรับให้เหมาะสมโดยใช้ปลั๊กอิน SEO ยีสต์ SEO- สิ่งนี้สามารถเห็นได้จากส่วนที่แสดงความคิดเห็นของโค้ดนี้:

ไซต์นี้ได้รับการปรับให้เหมาะสมด้วยปลั๊กอิน Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

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

/ตัวนับ Yandex.Metrika

มาสรุปกัน

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

• ซีเอ็มเอส เวิร์ดเพรส;
• แบบอักษร Google แหล่งที่มา Sans Pro;
• ธีม WordPress – ซิดนีย์;
• ปลั๊กอิน Yoast;
• ตัวนับเมตริก Yandex

ตอนนี้หลักการวิเคราะห์ รหัสเอชทีเอ็มหน้าเว็บไซต์ค่อนข้างชัดเจน ไม่จำเป็นเลยที่จะต้องเปิดหน้าเว็บที่คุณกำลังค้นหาไว้ในเบราว์เซอร์ คุณสามารถบันทึกโค้ดเพจลงในคอมพิวเตอร์ของคุณโดยใช้คีย์ผสม ctrl+a, ctrl+c, ctrl+v วางลงในอันใดก็ได้ โปรแกรมแก้ไขข้อความ(Notepad++ จะดีกว่า) และบันทึกด้วย ส่วนขยาย html- ด้วยวิธีนี้ คุณสามารถศึกษาให้ลึกซึ้งยิ่งขึ้นได้ตลอดเวลาและค้นหาข้อมูลที่เป็นประโยชน์เพิ่มเติมสำหรับตัวคุณเอง