ในการตรวจสอบองค์ประกอบ ให้คลิกขวาที่องค์ประกอบนั้น แล้วเลือกInspectใน Chrome, Firefox หรือ Edge สำหรับ Safari ให้เปิดใช้งานคุณสมบัติสำหรับนักพัฒนาเว็บก่อน จากนั้นคลิกขวาหรือกด Control+คลิก แล้วเลือกInspect Elementเบราว์เซอร์จะเปิดเครื่องมือและเลือกรายการในโครงสร้างเอกสารแบบเรียลไทม์ Chrome และ Edge เรียกแผงนี้ว่าElements , Firefox เรียกว่าInspectorและ Safari เรียกว่าWeb Inspector
หรือใช้เมนูจุดสามจุดของ Chrome: เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนาทางลัด: F12หรือCtrl+Shift+I (Windows/Linux) และCommand+Option+I (Mac) กดCtrl+Shift+CหรือCommand+Shift+Cเพื่อเปิด Elements ในโหมดเลือกหน้า
หรือเลือกการตั้งค่าและอื่นๆ (…) > เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนากดF12หรือCtrl+Shift+I (Windows/Linux) และCommand+Option+I (Mac) เพื่อเปิดแผงเครื่องมือสำหรับนักพัฒนาล่าสุด ปุ่มลัดที่กำหนดเองอาจแตกต่างกันไป
เปิดเครื่องมือสำหรับนักพัฒนา (Developer Tools) โดยกดF12หรือCtrl+Shift+I (Windows/Linux) หรือCommand+Option+I (Mac) กดCtrl+Shift+CหรือCommand+Option+Cเพื่อเปิด Inspector หากเว็บไซต์ใดแทนที่เมนูคลิกขวา ให้ใช้ทางลัดหรือเมนูของ Firefox
เครื่องมือตรวจสอบเว็บจะเลือกองค์ประกอบที่คลิก คุณยังสามารถเลือกพัฒนา > แสดงเครื่องมือตรวจสอบเว็บหรือกดOption+Command+Iเพื่อเปิดใช้งานสำหรับหน้าปัจจุบัน ขั้นตอนเหล่านี้ใช้ได้กับ Safari บน Mac
แถวที่ไฮไลต์คือโหนดในโครงสร้าง DOM แบบเรียลไทม์ ขยายลูกศรเพื่อดูองค์ประกอบที่ซ้อนกัน หรือคลิกไอคอนเลือกองค์ประกอบ เลื่อนเมาส์ไปเหนือหน้าเว็บ แล้วเลือกเป้าหมาย ตัวเลือกนี้ช่วยในการเลือกองค์ประกอบขนาดเล็กหรือที่ซ้อนทับกันได้
ใช้บานหน้าต่างสไตล์ (หรือที่เรียกว่ากฎใน Firefox) เพื่อดูว่าการประกาศ CSS ใดบ้างที่เกี่ยวข้องและมาจากที่ใด ยกเลิกการเลือกการประกาศหรือแก้ไขค่าเพื่อดูตัวอย่างการเปลี่ยนแปลงเค้าโครง สี ระยะห่าง หรือรูปแบบตัวอักษร การดำเนินการนี้จะไม่เขียนทับไฟล์ของเว็บไซต์หรือเปลี่ยนแปลงสิ่งที่ผู้เข้าชมคนอื่นเห็น
เบราว์เซอร์แต่ละตัวมีตัวควบคุมการแสดงผลแบบ Responsive หรือ Device Preview เลือกหรือป้อนขนาดวิวพอร์ตที่แคบลง จากนั้นตรวจสอบ DOM และสไตล์เดียวกัน วิธีนี้สามารถช่วยเปิดเผยปัญหาเรื่อง Breakpoint และ Layout ได้ แต่ไม่สามารถทดแทนการทดสอบบนอุปกรณ์จริงได้
| เบราว์เซอร์ | เปิดเครื่องมือสำหรับนักพัฒนา | ตรวจสอบรายการในหน้าเว็บ |
|---|---|---|
| Chrome | กด F12 หรือ Ctrl+Shift+I; สำหรับ Mac: กด Command+Option+I | Ctrl+Shift+C; Mac: Command+Shift+C |
| Firefox | กด F12 หรือ Ctrl+Shift+I; สำหรับ Mac: กด Command+Option+I | Ctrl+Shift+C; Mac: Command+Option+C |
| Safari | Option+Command+I บน Mac | คลิกขวา/คลิกขวา > ตรวจสอบองค์ประกอบ |
| ขอบ | กด F12 หรือ Ctrl+Shift+I; สำหรับ Mac: กด Command+Option+I | ใช้ไอคอนตัวเลือกใน DevTools |
ทางลัดอาจแตกต่างกันไปตามระบบปฏิบัติการ เวอร์ชันของเบราว์เซอร์ หรือการตั้งค่าที่กำหนดเอง หากทางลัดใดใช้ไม่ได้ผล ให้ใช้เมนูของเบราว์เซอร์หรือคำสั่งเมนูบริบทแทน
การแก้ไขทั่วไปในแผง Elements, Inspector หรือ Styles เป็นการเปลี่ยนแปลงชั่วคราวในเบราว์เซอร์ของคุณ การโหลดหน้าเว็บใหม่มักจะคืนค่าเวอร์ชันที่เว็บไซต์แสดงผล ขั้นตอนการทำงานของนักพัฒนาบางอย่างสามารถบันทึกการแก้ไขเฉพาะที่บนคอมพิวเตอร์ของคุณได้ แต่แม้แต่การแก้ไขเหล่านั้นก็ไม่ได้เผยแพร่การเปลี่ยนแปลงไปยังเซิร์ฟเวอร์ของเว็บไซต์ ควรใช้ DevTools เป็นเครื่องมือในการตรวจสอบและทดสอบหน้าเว็บ ไม่ใช่เป็นเครื่องมือในการแก้ไขเว็บไซต์ที่ใช้งานจริงสำหรับทุกคน
สำหรับรายละเอียดล่าสุด โปรดดูคู่มือ Chrome DevTools อย่างเป็นทางการ , ทางลัด ของFirefox , คู่มือ การตั้งค่า และ การตรวจสอบ Safariของ Apple และภาพรวม Edge ของ Microsoft
เรียนรู้ความหมายของคำว่า "ภารกิจเสริม" ในโลกออนไลน์ วิธีลองทำกิจกรรมและเข้าร่วมชุมชนต่างๆ ในแอป และวิธีปกป้องความเป็นส่วนตัว เวลา และขอบเขตของคุณ
เรียนรู้ว่าเมื่อใดที่คลิปขั้นตอนการทำงาน บันทึกการผลิต และการบันทึกสั้นๆ สามารถสร้างความน่าเชื่อถือได้ และวิธีการเปรียบเทียบอย่างยุติธรรมกับวิดีโอที่ตัดต่ออย่างสมบูรณ์แล้ว
สำรวจวิธีการผ่อนคลายอย่างสบายๆ ในราคาประหยัด ในโลกที่เชื่อมต่อออนไลน์ตลอดเวลา กำหนดขอบเขตการใช้งานดิจิทัลอย่างนุ่มนวล และเพลิดเพลินกับกิจวัตรประจำวันโดยไม่ต้องเปลี่ยนความสงบให้กลายเป็นการช้อปปิ้ง
ดูว่า TikTok และ YouTube ช่วยเหลือในเรื่องใดบ้าง เช่น บทแนะนำ ผลิตภัณฑ์ การท่องเที่ยว และคำถามทั่วไปในชีวิตประจำวัน รวมถึงวิธีการตรวจสอบวันที่ การสนับสนุน และข้อกล่าวอ้างที่สำคัญต่างๆ
สำรวจวิธีการที่ผู้สร้างสรรค์นำดนตรี ตัวอักษร สีสัน แฟชั่น และพื้นผิววิดีโอจากยุค 1970 และ 1980 มาผสมผสานใหม่สำหรับผู้ชมชาวอเมริกัน โดยคำนึงถึงบริบททางวัฒนธรรมและลิขสิทธิ์
เปรียบเทียบ Reddit, Substack และ Discord ในด้านการค้นพบ การดูแลจัดการ เอกลักษณ์ ค่าใช้จ่าย และความสามารถในการเคลื่อนย้ายกลุ่มผู้ชม พร้อมคู่มือภาคปฏิบัติสำหรับผู้อ่านและผู้สร้างเนื้อหา
วัฒนธรรมแห่งความโกลาหล (Chaos culture) หมายถึงวิดีโอที่รวดเร็ว ซับซ้อน และสามารถนำมาผสมผสานใหม่ได้ ไม่ใช่กฎตายตัวว่าผู้ชม Gen Alpha ทุกคนจะชอบสไตล์เดียวกัน เรียนรู้ลักษณะเด่น ข้อจำกัดในการวิจัย และเช็คลิสต์สำหรับผู้สร้างคอนเทนต์
ค้นหาภาพพื้นหลังเคลื่อนไหวฟรีสำหรับ Android เพื่อใช้กับนาฬิกาและแผงสถานะแบบกำหนดเอง หมุนภาพ เปลี่ยนฉาก และเอฟเฟ็กต์ภาพถ่าย Pixel พร้อมเคล็ดลับการตั้งค่า
บล็อกบุคคลบน TikTok โดยใช้เมนูแชร์ จัดการผู้แสดงความคิดเห็นที่ไม่ต้องการ ตรวจสอบรายชื่อผู้ถูกบล็อก และเรียนรู้ว่าการบล็อกจะซ่อนอะไรบ้างและไม่ซ่อนอะไรบ้าง
เปรียบเทียบเซิร์ฟเวอร์ DNS สาธารณะฟรี 11 ตัว รวมถึง Cloudflare, Google และ Quad9 ที่มีที่อยู่เว็บไซต์ที่ได้รับการตรวจสอบแล้ว ตัวเลือกการกรอง และเคล็ดลับการตั้งค่าสำหรับ Windows 11
