หากคุณเคยอยากรู้ว่าเว็บไซต์โปรดของคุณมีโครงสร้างอย่างไร บริการ "ตรวจสอบ" ของเบราว์เซอร์อาจเป็นพรที่ซ่อนอยู่ เราได้กล่าวถึงเครื่องมือ "ตรวจสอบ" ของ Chrome แล้ว และ Firefox ก็มาพร้อมกับข้อเสนอที่คล้ายกันเช่นกัน
เครื่องมือ "ตรวจสอบองค์ประกอบ" ของ Firefox สามารถช่วยคุณตรวจสอบการสนับสนุนการทำงานของเว็บไซต์ ซึ่งรวมถึงองค์ประกอบ HTML และ CSS ที่ใช้ การโหลดบนเครือข่าย เวลาแฝงขององค์ประกอบการโหลด และไฟล์ที่เก็บไว้ในที่จัดเก็บ เช่น คุกกี้
นักพัฒนาที่มีประสบการณ์อาจไม่พบสิ่งใหม่ในไพรเมอร์นี้มากนัก อย่างไรก็ตาม สามเณรและผู้ใช้เว็บทุกวันควรพบด้านใหม่ที่ทรงพลังสำหรับความสามารถของ Firefox และไฟล์และการทำงานที่ลึกซึ่งอยู่ใต้ทุกไซต์บนอินเทอร์เน็ต
การติดตั้ง
หากคุณใช้ Firefox คุณไม่จำเป็นต้องดำเนินการใดๆ เพิ่มเติม หากคุณต้องการเริ่มใช้ Firefox และคุณใช้ Windows, Linux, Mac, iOS หรือ Android ให้ไปที่ลิงก์นี้เพื่อค้นหาเบราว์เซอร์เวอร์ชันล่าสุด ติดตั้งไฟล์ตัวติดตั้งที่ดาวน์โหลดตามปกติโดยดับเบิลคลิกหรือแตะหากคุณใช้สมาร์ทโฟน
Linux distros รายใหญ่มักมาพร้อมกับ Firefox ที่ติดตั้งไว้ล่วงหน้าหรือมีสำเนาของ Firefox ใน Software center/ที่เก็บแพ็คเกจซึ่งผู้ใช้สามารถติดตั้งได้อย่างง่ายดาย
กำลังเปิด “ตรวจสอบองค์ประกอบ”
หลังจากติดตั้ง Firefox คุณสามารถค้นหาตัวตรวจสอบได้โดยคลิกขวาที่องค์ประกอบใด ๆ บนหน้าเว็บ ซึ่งจะแสดงเมนูดรอปดาวน์ให้คุณเห็น ดังภาพด้านล่างนี้ โดยที่ “Inspect Element” ตั้งอยู่ใกล้ด้านล่างของรายการ
สารวัตร
การคลิก "ตรวจสอบองค์ประกอบ" จะเป็นการเปิดตัวตรวจสอบที่ด้านล่างของหน้าจอทันที ณ จุดนี้ ชื่อเรื่องเริ่มคลุมเครือเล็กน้อย เนื่องจากผู้ตรวจสอบจะเปิดบริการส่วน "ผู้ตรวจสอบ" ในทางเทคนิค
ไม่ว่าในกรณีใด องค์ประกอบที่คุณคลิกจะแสดงอยู่ตรงกลางของเครื่องมือ และเมื่อคุณวางเมาส์เหนือองค์ประกอบนั้น เช่น <div> แท็กที่ฉันวางเมาส์เหนือในภาพหน้าจอด้านล่าง – “ผู้ตรวจสอบ” จะเน้นองค์ประกอบภาพนั้นบนหน้าจอของคุณในหน้าเว็บเอง
ทำให้ง่ายต่อการทราบว่าคุณกำลังดูองค์ประกอบใด นอกจากนี้ยังทำให้ง่ายต่อการค้นหาคุณสมบัติต่างๆ ขององค์ประกอบเหล่านั้น หากคุณมองไปทางด้านขวาของ “สารวัตร” คุณจะเห็นคุณสมบัติของ <div> เฉพาะนั้น รวมถึงการตั้งค่าสำหรับระยะขอบ ช่องว่างภายใน เส้นขอบ ขนาดแบบอักษร และการจัดแนวแนวตั้ง
หากคุณเลื่อนดูแผงด้านขวา คุณจะเห็นคุณสมบัติที่สืบทอดมาจากองค์ประกอบอื่นๆ คุณยังสามารถเปลี่ยนคุณสมบัติในหน้าต่างนั้นและให้ปรากฏบนหน้าเว็บแบบเรียลไทม์ได้อีกด้วย
ตัวแก้ไขสไตล์
คุณสามารถเดินทางต่อไปยังขอบเขตของ cascading style ชีต (CSS) ได้โดยทำตามแถบเครื่องมือที่ด้านบนสุดของตัวตรวจสอบ คลิกที่ข้อความว่า “Style Editor” เพื่อเปิดกล่องโต้ตอบใหม่ที่แสดงแผงใหม่ 3 แผงที่ด้านล่างของหน้าจอ
คุณจะเห็นไฟล์สไตล์ชีต 2 ไฟล์ที่ DuckDuckGo ใช้ องค์ประกอบของสไตล์ชีตแรกที่เลือก และกฎ "@media" ต่างๆ ของชีตนั้น ซึ่งควบคุมการออกแบบที่ตอบสนองได้สำหรับหน้าจอขนาดเล็กและขนาดใหญ่
คุณสามารถแก้ไขสไตล์ชีตเหล่านี้ได้เช่นเดียวกับในส่วน "ผู้ตรวจสอบ" ในกรณีนี้มีกฎมากมายให้เลือก – 1262 กฎในสไตล์ชีตแรกเพียงอย่างเดียว
หากคุณไปยัง "การตรวจสอบเครือข่าย" ในแถบเครื่องมือให้ดียิ่งขึ้นไปอีก คุณจะพบคำขอของเว็บไซต์สำหรับไฟล์เหล่านั้นและสถานะของพวกเขา องค์ประกอบอื่นๆ เช่น รูปภาพและแบบอักษรอาจมีอยู่ในแท็บนั้นด้วย และคุณสามารถดูคำขอทั้งหมดและขนาดของแต่ละไฟล์หลังจากที่คำขอได้รับการประมวลผลแล้ว
ประสิทธิภาพ
เมื่อคุณเปิดแท็บ "ประสิทธิภาพ" คุณจะต้องคลิกปุ่ม "เริ่มการบันทึก" เพื่อให้ผู้ตรวจสอบรวบรวมข้อมูล ภายในไม่กี่วินาที มันจะค้นพบเฟรมต่อวินาที (FPS) ที่หน้าเว็บของคุณทำงาน เหตุการณ์ document object model (DOM) ที่เกิดขึ้น และการคำนวณรูปแบบใหม่ ควบคู่ไปกับเวลา (โดยปกติในหน่วยมิลลิวินาที) ที่ใช้องค์ประกอบเหล่านั้น โหลด
สำหรับไซต์นี้ คุณสามารถดูเหตุการณ์ DOM ที่ไฮไลต์ ซึ่งเป็นเมาส์โอเวอร์ ซึ่งใช้เวลาในการโหลด 6.03 มิลลิวินาที FPS เฉลี่ยสำหรับหน้านี้อยู่ที่ประมาณ 39 และแผนภูมิแสดงช่วงเวลาตอบสนองของฉันถึง 9000 มิลลิวินาทีสำหรับบางเหตุการณ์
หน่วยความจำ
ในแท็บ "หน่วยความจำ" คุณจะต้องคลิกปุ่ม - "ถ่ายภาพ" เพื่อรวบรวมข้อมูล สำหรับฉัน มันสร้างแผนที่ของเหตุการณ์ที่แสดงสตริงประมาณ 600 Kb, ออบเจ็กต์ 1 Mb และสคริปต์ 1 Mb เพื่อค้นหาวิธีการของพวกเขาในหน่วยความจำ คุณดูองค์ประกอบเดียวกันนี้ได้หลายวิธีโดยคลิกเมนูแบบเลื่อนลงซึ่งมีข้อความว่า "Tree Map" ดังที่คุณเห็นในภาพหน้าจอนี้
ที่เก็บข้อมูล
สุดท้าย หากคุณคลิกแท็บ "ที่เก็บข้อมูล" คุณจะเห็นไฟล์ถาวรที่เว็บไซต์อาจวางไว้บนคอมพิวเตอร์ของคุณ เกี่ยวข้องกับผู้ใช้ส่วนใหญ่ ซึ่งรวมถึงคุกกี้ คุณสามารถดูหนึ่งโหลดในภาพด้านล่าง
คุณจะเห็นในแผงด้านขวาว่าคุกกี้นี้จะหมดอายุในกลางทศวรรษหน้า และฉันเข้าถึงคุกกี้นี้ในระหว่างการเขียนบทความนี้
บทสรุป
มีหลายสิ่งให้ต้องลุยเมื่อใช้ตัวตรวจสอบ Firefox การแนะนำส่วนต่างๆ ของเนื้อหานี้จะทำให้คุณไม่ว่างอยู่พักหนึ่ง
ใช้เวลาในการเปลี่ยนองค์ประกอบ HTML ของไซต์ เยี่ยมชมเว็บไซต์ต่างๆ สองสามแห่งเพื่อดูเวลาในการโหลด ค้นหาจำนวนคุกกี้ที่หน้าเว็บหนึ่งๆ พยายามจัดเก็บในเครื่องของคุณ ในบางครั้ง ข้อมูลดังกล่าวอาจทำให้คุณหยุดชั่วคราวได้
หวังว่าการเดินทางของการค้นพบนี้จะทำให้คุณเข้าใจมากขึ้นว่าเว็บไซต์ทำอะไรเพื่อให้สามารถทำงานได้ตามที่คุณคาดหวัง อาจมากกว่าที่คุณคิดไว้ก่อนหน้านี้มาก
