ในกรณีที่คุณไม่ทราบ หน้าเว็บจะประกอบด้วยองค์ประกอบจำนวนหนึ่งซึ่งได้รับการจัดรูปแบบให้ปรากฏเป็นเอนทิตีเดียว นักพัฒนาเว็บจำเป็นต้องเข้าใจแต่ละองค์ประกอบเหล่านี้ วิธีการจัดวางองค์ประกอบบนเว็บเพจ และดูว่าแต่ละองค์ประกอบทำงานอย่างไร
ผู้ใช้ Windows และ Mac น่าจะคุ้นเคยกับตัวเลือก "Inspect" หรือ "Inspect element" ที่มีให้เลือกใช้เมื่อคลิกขวาบนหน้าเว็บใดก็ได้ สิ่งที่ตัวเลือกนี้มีให้คือวิธีการดูซอร์สโค้ดของเว็บไซต์ ดูองค์ประกอบทั้งหมด บรรทัดโค้ดที่อยู่ด้านหลังแต่ละองค์ประกอบ และแก้ไข Javascript, HTML, CSS และไฟล์มีเดียอื่น ๆ ทั้งหมดที่อยู่ในนั้น ด้วยวิธีนี้ คุณไม่เพียงแต่จะได้เรียนรู้วิธีการทำงานและการทำงานของเว็บไซต์นั้นๆ เท่านั้น แต่ยังทำการปรับเปลี่ยนเว็บไซต์บนเบราว์เซอร์ของคุณเอง โดยไม่ส่งผลกระทบต่อหน้าเว็บจริงอีกด้วย
แม้ว่าตัวเลือกการตรวจสอบจะรู้กันว่าเป็นเครื่องมือสำหรับ "นักพัฒนา" แต่ไม่ใช่แค่นักพัฒนาเท่านั้นที่ได้รับประโยชน์จากตัวเลือกนี้ แม้แต่ผู้เริ่มต้นและผู้ที่ไม่ใช่นักพัฒนาก็สามารถใช้เครื่องมือนี้เพื่อเรียนรู้วิธีสร้างเว็บไซต์และวิธีการทำงานของแต่ละองค์ประกอบร่วมกัน หากคุณกำลังตั้งตารอที่จะใช้ตัวเลือกตรวจสอบองค์ประกอบเมื่อท่องเว็บบน iPhone โพสต์นี้จะช่วยคุณค้นหาวิธีการดังกล่าว
ที่เกี่ยวข้อง: วิธีตรวจสอบองค์ประกอบบน Android
คุณสามารถตรวจสอบองค์ประกอบเว็บได้โดยตรงบน Safari ได้หรือไม่
คำตอบง่ายๆคือไม่ Safari บน iOS เช่นเดียวกับเบราว์เซอร์มือถืออื่นๆ ไม่มีเครื่องมือตรวจสอบเนทิฟสำหรับการดูการพัฒนาของหน้าเว็บ Apple ไม่ได้ให้เหตุผลว่าทำไมไม่มีตัวเลือกดังกล่าว แต่เราเชื่อว่าเกี่ยวข้องกับขนาดจอแสดงผลขนาดเล็กบนสมาร์ทโฟน ขนาดการแสดงผลที่เล็กลงอาจทำให้ผู้ใช้นำทางไปรอบๆ กล่องที่กำลังตรวจสอบได้ยากขึ้น เนื่องจากคุณอาจต้องวางเคอร์เซอร์อย่างระมัดระวังเมื่อคุณต้องการแก้ไขโค้ดของหน้าเว็บ หรือแม้แต่ค้นหาตำแหน่ง
อีกสาเหตุหนึ่งอาจเป็นเพราะสมาร์ทโฟนขาดพลังในการประมวลผล แม้ว่า iPhone สมัยใหม่จะมีพลังเพียงพอที่จะเล่นเกมที่เน้นกราฟิกได้ แต่การดูข้อมูลหน้าเว็บไซต์อาจเป็นเรื่องยาก เนื่องจากบางเว็บไซต์ไม่ได้ถูกสร้างขึ้นอย่างเท่าเทียมกัน เว็บไซต์บางแห่งอาจมีทรัพยากรและเลเยอร์จำนวนมากที่ได้รับการสร้างขึ้นมาอย่างพิถีพิถันเพื่อให้ดูราบรื่น แต่ทรัพยากรเดียวกันอาจใช้เวลาในการโหลดเมื่อได้รับการตรวจสอบ
ที่เกี่ยวข้อง: วนวิดีโอบน iPhone [คำแนะนำ]
ตรวจสอบองค์ประกอบบน iPhone: คุณมีตัวเลือกอื่นใดอีกบ้าง
แม้ว่าคุณจะไม่สามารถใช้เครื่องมือ 'ตรวจสอบองค์ประกอบ' ในแอป Safari บน iOS ได้ตามปกติ แต่ก็ยังมีวิธีแก้ไขข้อจำกัดนี้ ด้านล่างนี้คือสามวิธีที่คุณสามารถตรวจสอบองค์ประกอบของหน้าเว็บที่คุณเยี่ยมชมบน Safari บน iPhone ของคุณได้
วิธีที่ #01: การใช้ Safari บน Mac ของคุณ
หากคุณเป็นเจ้าของอุปกรณ์ macOS นอกเหนือจาก iPhone ของคุณ คุณยังคงสามารถตรวจสอบหน้าเว็บได้โดยตรงจากแอพ Safari แต่บน Mac Apple ให้คุณแก้ไขข้อบกพร่องหน้าเว็บจาก Safari บน iOS ได้เหมือนกับที่คุณทำบน Mac โดยใช้เครื่องมือ 'พัฒนา' แม้ว่ากระบวนการแก้ไขข้อบกพร่องของไซต์จะค่อนข้างง่าย แต่การตั้งค่าเริ่มต้นอาจยาวกว่าที่คุณคาดหวัง แต่ไม่ต้องกังวล เราจะอธิบายขั้นตอนการตั้งค่าด้วยวิธีที่ง่ายที่สุดเท่าที่จะเป็นไปได้ และช่วยให้คุณตรวจสอบหน้าเว็บต่างๆ ได้อย่างง่ายดายหลังจากครั้งแรก
เปิดใช้งาน Web Inspector บน iOS
หากต้องการแก้ไขข้อบกพร่องขององค์ประกอบเว็บ คุณต้องเปิดใช้งาน Web Inspector สำหรับแอป Safari บน iOS ก่อน ในการดำเนินการนี้ ให้เปิดแอปการตั้งค่าและเลือก 'Safari'
ภายใน Safari เลื่อนลงแล้วแตะ 'ขั้นสูง'
ในหน้าจอถัดไป ให้แตะปุ่มสลับที่อยู่ติดกับ 'Web Inspector' จนกระทั่งเปลี่ยนเป็นสีเขียว
การตั้งค่าเริ่มต้นบน Mac
เมื่อคุณเปิดใช้งาน Web Inspector สำหรับ Safari บน iOS สำเร็จแล้ว ก็ถึงเวลาตั้งค่าให้เสร็จสิ้นบน Mac ของคุณ บน Mac ให้เปิดแอปพลิเคชัน Safari คลิกที่ตัวเลือก 'Safari' จากแถบเมนูและเลือก 'Preferences'
ในหน้าต่างที่ปรากฏขึ้น ให้เลือกแท็บ 'ขั้นสูง' จากด้านบนและทำเครื่องหมายที่ช่อง 'แสดงเมนูพัฒนาในแถบเมนู'
ตอนนี้คุณควรเห็นตัวเลือก 'พัฒนา' ปรากฏที่แถบเมนูด้านบน
ตอนนี้ ใช้สาย USB ที่มาพร้อมกับ iPhone ของคุณ สร้างการเชื่อมต่อระหว่าง iPhone และ Mac เมื่อ iPhone ของคุณเชื่อมต่อกับ Mac แล้ว คุณสามารถคลิกที่ "พัฒนา" บนแถบเมนูและดูว่า iPhone ของคุณปรากฏในรายการอุปกรณ์หรือไม่ หากใช่ ให้คลิกที่ชื่ออุปกรณ์จากรายการนี้
เพื่อให้แน่ใจว่าคุณสามารถตรวจสอบหน้าเว็บแบบไร้สายโดยไม่ต้องใช้สาย USB เหมือนที่คุณทำเมื่อกี้ ให้คลิกที่ตัวเลือก "เชื่อมต่อผ่านเครือข่าย" เมื่อเมนู iPhone เปิดขึ้น
ตอนนี้คุณสามารถยกเลิกการเชื่อมต่อ iPhone ของคุณจาก Mac และคุณจะยังสามารถตรวจสอบหน้าเว็บได้โดยไม่ต้องเชื่อมต่อสายเคเบิลระหว่างนั้น
ตรวจสอบหน้าเว็บจาก iOS บน Mac
ตอนนี้คุณได้เปิดใช้งาน 'เชื่อมต่อผ่านเครือข่าย' บนเมนู 'พัฒนา' แล้ว คุณสามารถตรวจสอบหน้าเว็บจาก Safari บน iOS ได้โดยตรงบน Mac ของคุณ คุณเพียงแค่ต้องแน่ใจว่าทั้ง iPhone และ Mac เชื่อมต่อกับเครือข่ายไร้สายเดียวกันเพื่อให้สามารถแก้ไขข้อบกพร่องของหน้าเว็บแบบไร้สายได้
ในการดำเนินการนี้ ให้เปิดแอป Safari บน iPhone ของคุณแล้วไปที่หน้าเว็บที่คุณต้องการตรวจสอบ
เมื่อปลดล็อค iPhone ของคุณและเปิดหน้าเว็บที่เลือกแล้ว ให้เลื่อนไปที่ Mac ของคุณแล้วเปิดแอปพลิเคชัน Safari ที่นั่น ที่นี่ คลิกที่ 'พัฒนา' จากแถบเมนูและไปที่ 'iPhone'
เมื่อคุณวางเมาส์เหนือ 'iPhone' คุณจะเห็นรายการหน้าเว็บที่เปิดบน iOS คลิกหน้าเว็บที่คุณต้องการตรวจสอบจากรายการนี้
หน้าต่างใหม่จะโหลดขึ้นมาบน Mac เพื่อแสดงข้อมูลทั้งหมดที่สามารถตรวจสอบได้จากหน้าเว็บที่เลือก
ในระหว่างการตรวจสอบ คุณจะสามารถดูได้ว่าบรรทัดโค้ดชี้ไปที่ส่วนใดของหน้าโดยมองหาพื้นที่สีน้ำเงินบน iPhone ของคุณ
พื้นที่สีน้ำเงินนี้ระบุว่าโค้ดที่คุณวางเมาส์เหนือ Mac คือสิ่งที่ประกอบขึ้นเป็นองค์ประกอบที่ไฮไลต์สำหรับหน้าเว็บนี้ การย้ายระหว่างบรรทัดโค้ดต่างๆ จะย้ายไฮไลต์สีน้ำเงินนี้ไปยังส่วนต่างๆ ของหน้าบน iPhone ของคุณแบบเรียลไทม์
ที่เกี่ยวข้อง: วิธีรักษาเอฟเฟกต์ใน FaceTime
วิธีที่ # 02: การใช้ทางลัดบน iOS
หากคุณไม่ได้เป็นเจ้าของ Mac หรือต้องการดูเว็บไซต์โดยตรงจาก iPhone ของคุณ คุณจะดีใจที่รู้ว่ามีแอป iOS Shortcuts สำหรับสิ่งนี้ แอพทางลัดบน iOS มีตัวเลือกที่สร้างไว้ล่วงหน้ามากมายที่ให้คุณดูซอร์สโค้ดของหน้า แก้ไขหน้าเว็บ ดึงภาพจากเว็บไซต์ และค้นหาหน้าเว็บเวอร์ชันเก่าจากภายในแอพ Safari น่าเสียดายที่ไม่มีทางลัดเพียงตัวเดียวที่นำเสนอการแก้ไขข้อบกพร่องเว็บอย่างเต็มรูปแบบบน iOS ดังนั้นคุณจะต้องเพิ่มทางลัดสำหรับวัตถุประสงค์แต่ละข้อเหล่านี้
เราพบทางลัดต่อไปนี้ที่คุณสามารถใช้เพื่อแก้ไขจุดบกพร่องบนเว็บไซต์ได้โดยตรงจาก iOS เหล่านี้คือ:
ดูแหล่งที่มา - ทางลัดนี้ช่วยให้คุณดูซอร์สโค้ดของหน้าเว็บในรูปแบบกระดูกฐาน
แก้ไขหน้าเว็บ - ปุ่มลัดนี้ช่วยให้คุณแก้ไขเนื้อหาของหน้าเว็บในเครื่อง เพื่อให้คุณสามารถทดสอบการออกแบบหรือรูปแบบใหม่และลักษณะที่ปรากฏบน iPhone ของคุณ
รับรูปภาพจากเพจ – เหตุผลหลักในการตรวจสอบเพจอาจเป็นเพื่อดูรูปภาพหรือบันทึกรูปภาพที่ไม่มีการโต้ตอบ ทางลัดนี้จะดึงภาพทั้งหมดจากหน้าเว็บบางหน้าแล้วดูตัวอย่างโดยรวม ตามภาพหน้าจอด้านล่าง คุณสามารถดูภาพทุกภาพจาก 24 ภาพที่ถูกโฮสต์บนหน้าเว็บที่เลือกได้
Wayback Machine - ทางลัดนี้จะนำคุณไปยัง Wayback Machine ของหน้าเว็บ ซึ่งคุณสามารถดูเวอร์ชันก่อนหน้าที่ยังคงบันทึกไว้ใน Internet Archive
คุณสามารถเพิ่มทางลัดเหล่านี้ไปยัง iPhone ของคุณได้โดยคลิกลิงก์ที่เกี่ยวข้องด้านบนหรือค้นหาในทางลัด > แกลเลอรี ทั้งนี้ขึ้นอยู่กับวิธีที่คุณต้องการตรวจสอบหน้าเว็บบน iOS
ในผลการค้นหา ให้แตะทางลัดที่คุณต้องการเพิ่มลงใน iPhone
เมื่อหน้าจอแสดงตัวอย่างเปิดขึ้น ให้แตะตัวเลือก "เพิ่มวิดเจ็ต" ที่ด้านล่าง
ทางลัดที่คุณทั้งหมดจะปรากฏในหน้าจอทางลัดของฉัน > ทางลัดทั้งหมด และจะสามารถเข้าถึงได้จากแผ่นแบ่งปันของ Safari
หากต้องการตรวจสอบหน้าเว็บ ให้เปิดบน Safari แล้วแตะปุ่ม "แชร์" ที่ด้านล่าง
ในแผ่นแบ่งปันที่ปรากฏขึ้น ให้เลื่อนลงและค้นหาทางลัดที่คุณเพิ่มลงใน iPhone ของคุณ
การเลือก 'แก้ไขหน้าเว็บ' จะทำให้คุณสามารถแก้ไขบางส่วนของหน้าเว็บได้โดยตรง เมื่อคุณเลือกตัวเลือกใดตัวเลือกหนึ่งจากสามตัวเลือกอื่น คุณจะได้รับแจ้งว่าคุณต้องการให้ทางลัดเข้าถึงหน้าเว็บหรือไม่ ที่นี่ แตะที่ 'อนุญาตครั้งเดียว'
ที่เกี่ยวข้อง: วิธีเพิ่ม WidgetSmith ให้กับหน้าจอหลัก
วิธีที่ #03: การใช้แอปของบุคคลที่สาม
หากคุณไม่พอใจกับผลลัพธ์ข้างต้น คุณจะต้องสำรวจแอปของบุคคลที่สามเพื่อตรวจสอบองค์ประกอบของหน้าเว็บ เช่นเดียวกับ Safari คุณจะไม่พบวิธีตรวจสอบหน้าเว็บในเว็บเบราว์เซอร์ยอดนิยม (Chrome, Firefox, Brave ฯลฯ) คุณจะต้องพึ่งพาแอปที่สร้างขึ้นเพื่อทำงานเฉพาะนี้แทน และแอปประเภทนี้อาจหายาก
แม้ว่าการค้นหาง่ายๆ ใน App Store จะให้ผลลัพธ์หลายประการสำหรับการตรวจสอบองค์ประกอบเว็บ แต่คุณจะไม่พบว่ามีแอปมากมายที่ให้บริการฟรีและได้รับการจัดอันดับสูง ตามคำติชมของผู้ใช้ เราขอแนะนำให้คุณติดตั้ง แอป Inspect BrowserหรือGear Browser จาก App Store ซึ่งมีการตรวจสอบและแก้ไของค์ประกอบบน JavaScript, CSS และ HTML
นั่นคือทั้งหมดที่คุณต้องรู้เกี่ยวกับการตรวจสอบองค์ประกอบต่างๆ บน iPhone
ที่เกี่ยวข้อง
เบื่อไหมกับหน้าจอเริ่มต้นใช้งาน Microsoft Teams ที่ค้างอยู่ที่ข้อผิดพลาด 2026? พบกับวิธีแก้ไขแบบทีละขั้นตอนที่ได้ผลจริง เพื่อแก้ไขปัญหาอย่างรวดเร็ว ล้างแคช รีเซ็ตแอป และอื่นๆ อีกมากมาย – ทำให้ Teams ทำงานได้อย่างราบรื่นในวันนี้!
เบื่อกับปัญหาการบันทึกภาพหน้าจอผิดพลาดของ Microsoft Teams หรือไม่? ทำตามคำแนะนำทีละขั้นตอนของเราพร้อมวิธีแก้ไขปัญหาอย่างรวดเร็วเพื่อแก้ไขปัญหาและบันทึกภาพหน้าจอได้อย่างง่ายดาย อัปเดตด้วยเคล็ดลับล่าสุดเพื่อการทำงานเป็นทีมที่ราบรื่น
กำลังประสบปัญหาข้อผิดพลาด 503 "Service Unavailable" ใน Microsoft Teams อยู่ใช่ไหม? มาดูวิธีแก้ไขปัญหาข้อผิดพลาด 503 ของ Microsoft Teams แบบทีละขั้นตอนกัน ล้างแคช ตรวจสอบสถานะ และอื่นๆ เพื่อการทำงานร่วมกันอย่างราบรื่น ใช้งานได้กับเบราว์เซอร์รุ่นล่าสุด!
เบื่อไหมกับการส่งข้อความแชทใน Microsoft Teams ไม่สำเร็จ? ทำตามคำแนะนำทีละขั้นตอนของเราเพื่อแก้ไขข้อผิดพลาด "ส่งไม่สำเร็จ" อย่างรวดเร็ว วิธีแก้ปัญหาที่ได้ผลจริงเพื่อการสื่อสารในทีมที่ราบรื่น
ประสบปัญหาการเล่นสื่อใน Microsoft Teams ปี 2026 ใช่ไหม? พบกับวิธีแก้ไขปัญหาเสียง/วิดีโอ หน้าจอดำ และความหน่วงที่ได้รับการพิสูจน์แล้ว พร้อมขั้นตอนการแก้ไขทีละขั้นตอน วิธีแก้ปัญหาที่รวดเร็วเพื่อให้การประชุมกลับมาราบรื่น!
ติดปัญหาข้อผิดพลาด "msvcp140.dll หายไป" ใน Microsoft Teams ใช่ไหม? ค้นพบวิธีแก้ไขอย่างรวดเร็วทีละขั้นตอน รวมถึงการติดตั้ง Visual C++ Redistributable, การซ่อมแซม Teams และอื่นๆ แก้ไขข้อผิดพลาด DLL ได้อย่างรวดเร็ว!
เบื่อไหมกับปัญหา Microsoft Teams ค้างและแสดงข้อผิดพลาดร้ายแรง? วิธีแก้ไขปัญหาอย่างถาวรด้วยการแก้ไขรีจิสทรีเวอร์ชัน 2026 นี้ พร้อมวิธีที่ได้รับการพิสูจน์แล้วและภาพหน้าจอประกอบ – กลับมาใช้งานร่วมกันได้อย่างราบรื่นอีกครั้ง!
รู้สึกหงุดหงิดเพราะปลั๊กอิน Microsoft Teams หายไปจาก Outlook ใช่ไหม? เรียนรู้สาเหตุหลักและวิธีแก้ไขทีละขั้นตอนเพื่อคืนการทำงานร่วมกันระหว่าง Teams และ Outlook อย่างราบรื่นได้ทันที วิธีแก้ปัญหาที่ได้ผลสำหรับผู้ใช้ทุกคน
เบื่อกับปัญหาข้อผิดพลาดของ Microsoft Teams บน Windows 7 ที่ขัดขวางการโทรของคุณหรือไม่? รับคำแนะนำการแก้ไขปัญหาทีละขั้นตอนสำหรับปัญหาความเข้ากันได้บน Windows 7 วิธีแก้ไขที่ได้รับการพิสูจน์แล้วเพื่อคืนความราบรื่นให้กับการทำงานเป็นทีม—อัปเดตตามแพทช์ล่าสุด!
รู้สึกหงุดหงิดกับสถานะ "ไม่อยู่" ใน Microsoft Teams ที่ค้างอยู่ใช่ไหม? มาดูสาเหตุหลักและวิธีแก้ไขง่ายๆ ทีละขั้นตอนเพื่อเปลี่ยนสถานะกลับเป็น "พร้อมใช้งาน" กัน วิธีแก้ไขด่วนสำหรับเวอร์ชันเดสก์ท็อป มือถือ และเว็บ โดยใช้การอัปเดต Teams ล่าสุด
