วิธีดูซอร์สโค้ดของเว็บไซต์ใน Microsoft Edge
เผยแพร่แล้ว: 2021-09-20ใน Windows 11 ในที่สุด Microsoft ก็กำจัดเบราว์เซอร์ Internet Explorer ที่มีชื่อเสียงและน่าอับอาย คุณจะมีเฉพาะ Edge ซึ่งอิงตาม Chromium codebase ของ Google ดังนั้น คุณจะรู้สึกว่าเบราว์เซอร์ Edge นั้นคล้ายกับ Google Chrome ในหลาย ๆ ด้าน เมื่อคุณต้องการวิเคราะห์ซอร์สโค้ดของหน้าเว็บ คุณสามารถทำได้ใน Edge โดยไม่ต้องมองหา Chrome หรือ Firefox ในบทความนี้ เราจะอธิบายวิธีการดูซอร์สโค้ดของเว็บไซต์ เช่น HTML, CSS และ JavaScript ในเบราว์เซอร์ Microsoft Edge
รหัสที่มาของเว็บไซต์
โดยทั่วไป หน้าเว็บจะเขียนด้วย HTML และใช้ไฟล์ประเภทต่างๆ เช่น CSS, JavaScript, รูปภาพ, วิดีโอ ฯลฯ เบราว์เซอร์อย่าง Edge จะประมวลผล HTML / CSS / JavaScript เหล่านี้ และแสดงเฉพาะข้อความและเนื้อหาสื่อที่อ่านได้ต่อผู้อ่าน อย่างไรก็ตาม ในหลายสถานการณ์ คุณอาจต้องวิเคราะห์ซอร์สโค้ดเพื่อดูรายละเอียดเพิ่มเติม
- คุณเป็นนักพัฒนาหรือบล็อกเกอร์และต้องการตรวจสอบซอร์สโค้ดเพื่อวัตถุประสงค์ในการแก้ปัญหา
- หน้าเว็บที่คุณกำลังดูมีความน่าสนใจ และคุณต้องการค้นหาสีและแบบอักษรที่ใช้บนหน้า
- คุณต้องการแก้ไขซอร์สโค้ดและทดสอบผลลัพธ์ในเบราว์เซอร์ที่ใช้งานจริงโดยไม่ต้องแก้ไขโค้ดต้นฉบับจริงๆ ตัวอย่างเช่น คุณต้องการใช้สีต่างๆ กับส่วนหัวของคุณหรือตรวจสอบขนาดแบบอักษร
- ทดสอบการตอบสนองบนมือถือของหน้าหรือค้นหาองค์ประกอบที่โหลดบนหน้า
ในบางกรณี คุณยังสามารถค้นหาธีมและปลั๊กอินที่ใช้ในไซต์ได้โดยดูที่ซอร์สโค้ด ไม่ว่าด้วยเหตุผลใดก็ตาม คุณสามารถวิเคราะห์ซอร์สโค้ดได้สองวิธี
- โดยการดูซอร์สโค้ดที่สมบูรณ์โดยตรง
- การใช้ตัวเลือกตรวจสอบองค์ประกอบกับ Microsoft Edge DevTools
ให้เราอธิบายทั้งสองวิธีโดยละเอียด
กำลังดูซอร์สโค้ดที่สมบูรณ์
สมมติว่า คุณต้องการค้นหาไฟล์ CSS และ JS ที่ใช้ในหน้า คุณสามารถทำสิ่งนี้ได้อย่างง่ายดายโดยดูซอร์สโค้ดที่สมบูรณ์ เปิดหน้าใน Edge คลิกขวาที่พื้นที่ว่างและเลือก "ดูแหล่งที่มาของหน้า" จากเมนูบริบท
ซึ่งจะเป็นการเปิดหน้าใหม่ที่แสดงซอร์สโค้ดที่สมบูรณ์ของหน้าที่คุณกำลังดูอยู่ดังด้านล่าง
คุณสามารถค้นหาโค้ด HTML ของแต่ละองค์ประกอบ ไฟล์ CSS ที่เชื่อมโยงระหว่างส่วน <head> และ </head> เมตาแท็ก สคริปต์ที่ลิงก์ก่อนปิดแท็กเนื้อหา </body> แม้ว่าสิ่งนี้จะมีประโยชน์ในหลาย ๆ สถานการณ์ คุณจะไม่พบรายละเอียดว่าสไตล์ CSS ใดถูกนำไปใช้กับองค์ประกอบ HTML ใดบนหน้า ตัวอย่างเช่น คุณจะไม่พบตระกูลแบบอักษรขององค์ประกอบชื่อโดยดูจากซอร์สโค้ดที่สมบูรณ์ คุณต้องคลิกที่ลิงค์ไฟล์ .css หรือ .min.css และค้นหาในไฟล์นั้นเพื่อค้นหาสไตล์ที่ใช้สำหรับส่วนหัว เป็นงานที่ยากเนื่องจากคุณไม่ทราบว่าชื่อเป็นของแท็กหัวเรื่อง HTML จาก H1 ถึง H6 นอกจากนี้ อาจมีคลาส CSS แบบกำหนดเองที่ใช้กับแท็กชื่อซึ่งคุณไม่สามารถค้นหาได้จากการดู CSS อย่างอิสระ
ปัจจุบัน เว็บไซต์จำนวนมากรวมไฟล์ CSS ทั้งหมดเข้าด้วยกันเพื่อลดจำนวนคำขอ HTTP และปรับปรุงการแคช ดังนั้น การดูซอร์สโค้ดที่สมบูรณ์จะไม่ช่วยเมื่อไฟล์ CSS ของเพจถูกรวมเป็นไฟล์เดียว วิธีแก้ไขคือการดู HTML ขององค์ประกอบและ CSS ร่วมกันเพื่อให้เห็นภาพที่สมบูรณ์ขององค์ประกอบเฉพาะนั้น
ตรวจสอบตัวเลือกองค์ประกอบใน Edge
คุณสามารถวิเคราะห์องค์ประกอบใดๆ บนหน้าเว็บเพื่อรับ HTML และ CSS โดยใช้ตัวเลือกนี้ หากต้องการใช้สิ่งนี้ ให้เปิดเบราว์เซอร์ Edge และเปิดหน้าเว็บที่คุณต้องการวิเคราะห์ คุณต้องเปิด Microsoft Edge DevTools (หรือ Edge Developer Tools) เพื่อเริ่มวิเคราะห์องค์ประกอบบนหน้าเว็บ มีหลายวิธีในการเปิด Edge DevTools
- เพียงคลิกขวาที่พื้นที่ว่างและเลือก "ตรวจสอบ" จากเมนูบริบท
- คุณสามารถกด F11 ใน Windows ซึ่งจะใช้งานได้กับเดสก์ท็อปและแล็ปท็อปส่วนใหญ่ หรือกดแป้น “Control + Shift + I” เพื่อเปิดส่วนเครื่องมือสำหรับนักพัฒนา Edge
- กด "Alt + F" เพื่อเปิดเมนูและไปที่ "เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนา"
ตามค่าเริ่มต้น Edge จะเปิดส่วนเครื่องมือสำหรับนักพัฒนาที่ด้านล่างของเบราว์เซอร์ดังที่แสดงด้านล่าง
คุณสามารถปรับความสูงได้ด้วยการลากแล้วคลิกไอคอนแนวนอนสามจุดบนแถบเมนูเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อเปลี่ยนตำแหน่งเป็นด้านบน/ด้านล่างหรือเปิดในหน้าต่างใหม่
แม้ว่า DevTools จะมีรายการเมนูมากมาย แต่คุณต้องใช้เพียงไม่กี่รายการในการวิเคราะห์ซอร์สโค้ดของเว็บไซต์ใน Edge จะมีแท็บ "ยินดีต้อนรับ" เมื่อคุณเปิด DevTools เป็นครั้งแรก ซึ่งคุณสามารถปิดได้
กำลังดูซอร์สโค้ด HTML และ CSS
ดังที่กล่าวไว้ แต่ละองค์ประกอบบนหน้าเว็บประกอบด้วยซอร์สโค้ด HTML ที่มีสไตล์ CSS หากต้องการดูซอร์ส HTML และ CSS คุณต้องเลือกองค์ประกอบ
- ไอคอนแรกในเมนู DevTools คือเครื่องมือการเลือกองค์ประกอบ
- คลิกที่ไอคอนและวางเมาส์เหนือองค์ประกอบที่คุณต้องการค้นหา HTML ต้นทาง ตัวอย่างเช่น ให้เราค้นหารายละเอียดของหัวข้อที่ระบุว่า "บริการระดับพรีเมียมของเรา"
เมื่อวางเมาส์เหนือองค์ประกอบส่วนหัวนั้น Edge จะแสดงป๊อปอัปแบบลอยพร้อมรายละเอียดที่จำเป็นส่วนใหญ่ คุณสามารถค้นหาส่วนหัวได้ h3 ขนาดตัวอักษรเป็น 26px โดยใช้ตระกูลแบบอักษรเป็น Museo500Regular และสีเป็น #0875c9 คุณยังสามารถคลิกที่องค์ประกอบที่แสดงภายใต้แท็บ "องค์ประกอบ" และดูรายละเอียด CSS ที่คล้ายกันภายใต้ส่วน "สไตล์" ในบานหน้าต่างด้านขวา เมื่อใช้เครื่องมือ Select Element คุณจะได้รับรายละเอียดทั้งหมดของ HTML และ CSS สำหรับองค์ประกอบใดๆ
ในส่วน "สไตล์" คุณจะเห็นลิงก์ไฟล์ CSS สำหรับแต่ละสไตล์ คุณสามารถคลิกที่ลิงก์ของไฟล์เพื่อเปิดภายใต้แท็บ "แหล่งที่มา" ซึ่งเราจะอธิบายในส่วนด้านล่าง
การแก้ไขเนื้อหาหน้าเว็บแบบสด
ตอนนี้คุณต้องการใช้การเปลี่ยนแปลงบางอย่างกับส่วนหัวและดูว่ามีลักษณะอย่างไรในไซต์สด ในการดำเนินการนี้ คุณต้องลงชื่อเข้าใช้แผงผู้ดูแลระบบของเว็บไซต์ของคุณและอัปเดตเนื้อหาต้นฉบับ อย่างไรก็ตาม คุณจะประสบปัญหา เช่น การแสดงภาพองค์ประกอบด้วยสีหรือขนาดตัวอักษรที่ต่างกัน วิธีง่ายๆ คือแก้ไขซอร์ส HTML ในส่วน "องค์ประกอบ" หรือสไตล์ CSS ในส่วน "สไตล์"
ในการแก้ไข HTML ก่อนอื่นให้เลือกองค์ประกอบภายใต้แท็บ "องค์ประกอบ" และคลิกขวาที่องค์ประกอบ หรือคุณสามารถคลิกที่ไอคอนสามจุดที่ด้านซ้ายสุดขององค์ประกอบที่เลือก คุณสามารถลบหรือซ่อนองค์ประกอบได้โดยเลือกตัวเลือกนั้นจากเมนูบริบท หากคุณต้องการแก้ไข ให้เลือกตัวเลือก "แก้ไขเป็น HTML"
การดำเนินการนี้จะเปิดการแก้ไขข้อความ และคุณสามารถเปลี่ยนแท็ก HTML ในตัวแก้ไขหรือเพิ่มคลาส CSS เพิ่มเติมให้กับองค์ประกอบได้ หลังจากแก้ไข ให้คลิกที่พื้นที่ว่างใน DevTools เพื่อออกจากการแก้ไข ตัวแก้ไขจะตรวจสอบและแก้ไขแท็กโดยอัตโนมัติ ตัวอย่างเช่น หากคุณเปลี่ยนแท็กเริ่มต้นเป็น <h4> และลืมเปลี่ยนแท็กปิดท้ายและปล่อยให้เป็น </h3> แท็กจะเปลี่ยนกลับเป็นแท็ก <h3>…</h3> เดิมโดยอัตโนมัติ
ในทำนองเดียวกัน คุณสามารถเปลี่ยนสไตล์ CSS ได้ภายใต้แท็บ "สไตล์" ตัวอย่างเช่น เพิ่มแบบอักษรของส่วนหัว h3 เป็น 40px และเปลี่ยนสีเป็น #c94608
คุณสามารถดูการแสดงตัวอย่างทันทีบนหน้าเว็บ เพื่อให้คุณได้แนวคิดว่าหน้าตัวอย่างจะมีลักษณะอย่างไรเมื่อใช้ CSS และ HTML ที่แก้ไข อย่างไรก็ตาม การเปลี่ยนแปลงเป็นเพียงชั่วคราว และการรีเฟรชหรือโหลดหน้าซ้ำจะเป็นการคืนค่าเนื้อหาเดิม คุณสามารถทำการเปลี่ยนแปลงในแบ็กเอนด์เพื่อนำไปใช้กับหน้าเว็บอย่างถาวร
การแก้ไขปัญหาข้อผิดพลาดของหน้าเว็บ
จุดประสงค์หลักประการหนึ่งของ DevTools คือการค้นหาปัญหาเบราว์เซอร์ที่ทำให้ไม่สามารถแสดงหน้าได้อย่างถูกต้อง ดังที่คุณเห็นในภาพหน้าจอด้านบน Edge จะแสดงตัวเลขสองตัว (34 และ 33) ในแถบเมนู DevTools
- ไอคอนตัวเลขแรกแสดงข้อผิดพลาดคอนโซลของเบราว์เซอร์และคำเตือนที่คุณสามารถดูได้ในแท็บ "คอนโซล"
- หมายเลขที่สองจะแสดงปัญหาที่เปิดอยู่ หากมีในหน้าต่างแยกต่างหากภายใน DevTools ซึ่งคุณสามารถปิดได้อย่างอิสระ
ข้อผิดพลาด คำเตือน และคำแนะนำจะแสดงพร้อมป้ายกำกับเพื่อช่วยให้คุณเข้าใจปัญหา คลิกที่แต่ละรายการเพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับปัญหาและทรัพยากรที่ได้รับผลกระทบในหน้าของคุณ คุณต้องแก้ไขรหัสและทดสอบใหม่อีกครั้งเพื่อตรวจสอบว่าข้อผิดพลาดได้รับการแก้ไขหรือไม่
ดูไฟล์ต้นฉบับอย่างอิสระ
แท็บ "แหล่งที่มา" ใน Edge DevTools คล้ายกับการดูซอร์สโค้ดที่สมบูรณ์ อย่างไรก็ตาม จะแสดงทรัพยากรที่โหลดจากแต่ละส่วนของโดเมนและจากโดเมนภายนอกแยกกันในโครงสร้าง คุณสามารถเลือกไฟล์ใดก็ได้และดูตัวอย่างเนื้อหาภายใน DevTools
เมื่อคุณเลือกไฟล์ย่อขนาด Edge จะถามคุณว่า "Pretty-print this minified file?" การลดขนาดจะลบช่องว่างและการขึ้นบรรทัดใหม่ทั้งหมดในไฟล์ และทำให้ผู้ใช้ไม่สามารถอ่านได้ คุณสามารถใช้การพิมพ์ที่สวยงามเพื่อแปลงไฟล์ย่อขนาดให้เป็นโหมดที่อ่านได้ด้วยการขึ้นบรรทัดใหม่และการเว้นวรรค คุณสามารถคลิกที่ปุ่ม “Pretty-print” หรือคลิกที่ { } ที่แสดงที่แถบสถานะ
รายการอื่นๆ ทั้งหมด เช่น เครือข่าย ประสิทธิภาพ ฯลฯ มีประโยชน์สำหรับการวิเคราะห์ขั้นสูงของเวลาในการโหลดหน้าเว็บ การตรวจสอบส่วนหัว HTTP การค้นหาปัญหาด้านความปลอดภัย และการทดสอบคะแนนประสิทธิภาพ SEO คุณสามารถปิด DevTools ได้เมื่อวิเคราะห์เสร็จแล้ว
คำพูดสุดท้าย
Edge Chromium เวอร์ชันล่าสุดมีประสิทธิภาพมากกว่าเบราว์เซอร์อื่นๆ คุณสามารถใช้ Microsoft Edge DevTools เพื่อดูซอร์สโค้ดของหน้าเว็บเพื่อแก้ไขปัญหาและวัตถุประสงค์ในการออกแบบ นอกจากนี้ยังสามารถรับซอร์สโค้ดที่สมบูรณ์เพื่อดูไฟล์ที่ใช้ในเพจ