วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

ผู้ใช้ 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'

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ภายใน Safari เลื่อนลงแล้วแตะ 'ขั้นสูง' 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ในหน้าจอถัดไป ให้แตะปุ่มสลับที่อยู่ติดกับ 'Web Inspector' จนกระทั่งเปลี่ยนเป็นสีเขียว 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

การตั้งค่าเริ่มต้นบน Mac

เมื่อคุณเปิดใช้งาน Web Inspector สำหรับ Safari บน iOS สำเร็จแล้ว ก็ถึงเวลาตั้งค่าให้เสร็จสิ้นบน Mac ของคุณ บน Mac ให้เปิดแอปพลิเคชัน Safari คลิกที่ตัวเลือก 'Safari' จากแถบเมนูและเลือก 'Preferences' 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ตอนนี้คุณควรเห็นตัวเลือก 'พัฒนา' ปรากฏที่แถบเมนูด้านบน 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ตอนนี้ ใช้สาย USB ที่มาพร้อมกับ iPhone ของคุณ สร้างการเชื่อมต่อระหว่าง iPhone และ Mac เมื่อ iPhone ของคุณเชื่อมต่อกับ Mac แล้ว คุณสามารถคลิกที่ "พัฒนา" บนแถบเมนูและดูว่า iPhone ของคุณปรากฏในรายการอุปกรณ์หรือไม่ หากใช่ ให้คลิกที่ชื่ออุปกรณ์จากรายการนี้ 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

ตรวจสอบหน้าเว็บจาก iOS บน Mac

ตอนนี้คุณได้เปิดใช้งาน 'เชื่อมต่อผ่านเครือข่าย' บนเมนู 'พัฒนา' แล้ว คุณสามารถตรวจสอบหน้าเว็บจาก Safari บน iOS ได้โดยตรงบน Mac ของคุณ คุณเพียงแค่ต้องแน่ใจว่าทั้ง iPhone และ Mac เชื่อมต่อกับเครือข่ายไร้สายเดียวกันเพื่อให้สามารถแก้ไขข้อบกพร่องของหน้าเว็บแบบไร้สายได้ 

ในการดำเนินการนี้ ให้เปิดแอป Safari บน iPhone ของคุณแล้วไปที่หน้าเว็บที่คุณต้องการตรวจสอบ 

เมื่อปลดล็อค iPhone ของคุณและเปิดหน้าเว็บที่เลือกแล้ว ให้เลื่อนไปที่ Mac ของคุณแล้วเปิดแอปพลิเคชัน Safari ที่นั่น ที่นี่ คลิกที่ 'พัฒนา' จากแถบเมนูและไปที่ 'iPhone' 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

เมื่อคุณวางเมาส์เหนือ 'iPhone' คุณจะเห็นรายการหน้าเว็บที่เปิดบน iOS คลิกหน้าเว็บที่คุณต้องการตรวจสอบจากรายการนี้ 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

หน้าต่างใหม่จะโหลดขึ้นมาบน Mac เพื่อแสดงข้อมูลทั้งหมดที่สามารถตรวจสอบได้จากหน้าเว็บที่เลือก 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

ที่เกี่ยวข้อง: วิธีรักษาเอฟเฟกต์ใน FaceTime

วิธีที่ # 02: การใช้ทางลัดบน iOS 

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

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

ดูแหล่งที่มา - ทางลัดนี้ช่วยให้คุณดูซอร์สโค้ดของหน้าเว็บในรูปแบบกระดูกฐาน 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

แก้ไขหน้าเว็บ - ปุ่มลัดนี้ช่วยให้คุณแก้ไขเนื้อหาของหน้าเว็บในเครื่อง เพื่อให้คุณสามารถทดสอบการออกแบบหรือรูปแบบใหม่และลักษณะที่ปรากฏบน iPhone ของคุณ 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

รับรูปภาพจากเพจ – เหตุผลหลักในการตรวจสอบเพจอาจเป็นเพื่อดูรูปภาพหรือบันทึกรูปภาพที่ไม่มีการโต้ตอบ ทางลัดนี้จะดึงภาพทั้งหมดจากหน้าเว็บบางหน้าแล้วดูตัวอย่างโดยรวม ตามภาพหน้าจอด้านล่าง คุณสามารถดูภาพทุกภาพจาก 24 ภาพที่ถูกโฮสต์บนหน้าเว็บที่เลือกได้ 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

Wayback Machine - ทางลัดนี้จะนำคุณไปยัง Wayback Machine ของหน้าเว็บ ซึ่งคุณสามารถดูเวอร์ชันก่อนหน้าที่ยังคงบันทึกไว้ใน Internet Archive 

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

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ในผลการค้นหา ให้แตะทางลัดที่คุณต้องการเพิ่มลงใน iPhone 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

เมื่อหน้าจอแสดงตัวอย่างเปิดขึ้น ให้แตะตัวเลือก "เพิ่มวิดเจ็ต" ที่ด้านล่าง 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ทางลัดที่คุณทั้งหมดจะปรากฏในหน้าจอทางลัดของฉัน > ทางลัดทั้งหมด และจะสามารถเข้าถึงได้จากแผ่นแบ่งปันของ Safari  

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

หากต้องการตรวจสอบหน้าเว็บ ให้เปิดบน Safari แล้วแตะปุ่ม "แชร์" ที่ด้านล่าง 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ในแผ่นแบ่งปันที่ปรากฏขึ้น ให้เลื่อนลงและค้นหาทางลัดที่คุณเพิ่มลงใน iPhone ของคุณ 

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

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

วิธีตรวจสอบองค์ประกอบบน iPhone: ทุกสิ่งที่คุณต้องการรู้

ที่เกี่ยวข้อง: วิธีเพิ่ม WidgetSmith ให้กับหน้าจอหลัก

วิธีที่ #03: การใช้แอปของบุคคลที่สาม

หากคุณไม่พอใจกับผลลัพธ์ข้างต้น คุณจะต้องสำรวจแอปของบุคคลที่สามเพื่อตรวจสอบองค์ประกอบของหน้าเว็บ เช่นเดียวกับ Safari คุณจะไม่พบวิธีตรวจสอบหน้าเว็บในเว็บเบราว์เซอร์ยอดนิยม (Chrome, Firefox, Brave ฯลฯ) คุณจะต้องพึ่งพาแอปที่สร้างขึ้นเพื่อทำงานเฉพาะนี้แทน และแอปประเภทนี้อาจหายาก

แม้ว่าการค้นหาง่ายๆ ใน App Store จะให้ผลลัพธ์หลายประการสำหรับการตรวจสอบองค์ประกอบเว็บ แต่คุณจะไม่พบว่ามีแอปมากมายที่ให้บริการฟรีและได้รับการจัดอันดับสูง ตามคำติชมของผู้ใช้ เราขอแนะนำให้คุณติดตั้ง แอป Inspect BrowserหรือGear Browser  จาก App Store ซึ่งมีการตรวจสอบและแก้ไของค์ประกอบบน JavaScript, CSS และ HTML 

นั่นคือทั้งหมดที่คุณต้องรู้เกี่ยวกับการตรวจสอบองค์ประกอบต่างๆ บน iPhone 

ที่เกี่ยวข้อง

ฝากความเห็น

วิธีสร้างแบบสำรวจใน Microsoft Teams

วิธีสร้างแบบสำรวจใน Microsoft Teams

เรียนรู้วิธีสร้างแบบสำรวจในแชท ช่อง และการประชุมของ Microsoft Teams เลือกการตั้งค่าการตอบกลับ ตรวจสอบผลลัพธ์ และปิดการลงคะแนน

วิธีปิดเสียงการแจ้งเตือนช่องและข้อความใน Microsoft Teams

วิธีปิดเสียงการแจ้งเตือนช่องและข้อความใน Microsoft Teams

เรียนรู้วิธีปิดเสียงการแจ้งเตือนช่องและข้อความใน Microsoft Teams เลิกติดตามกลุ่มสนทนาที่มีข้อความรบกวน และควบคุมแบนเนอร์ พร้อมทั้งทำความเข้าใจเกี่ยวกับการแจ้งเตือนการกล่าวถึง (mention alerts)

วิธีโอนการประชุม Microsoft Teams ไปยังอุปกรณ์อื่น

วิธีโอนการประชุม Microsoft Teams ไปยังอุปกรณ์อื่น

เรียนรู้วิธีการถ่ายโอนการประชุม Microsoft Teams ระหว่างคอมพิวเตอร์และโทรศัพท์ของคุณ วิธีใช้งานทั้งสองอุปกรณ์ร่วมกัน และวิธีแก้ไขปัญหาตัวเลือกการถ่ายโอนที่หายไปหรือปัญหาด้านเสียง

วิธีเลื่อนการแจ้งเตือนข้อความใน Microsoft Teams

วิธีเลื่อนการแจ้งเตือนข้อความใน Microsoft Teams

เรียนรู้วิธีเลื่อนการแจ้งเตือนข้อความใน Microsoft Teams ด้วย Snooze Bot กลับมาดูข้อความนั้นในภายหลัง และใช้ข้อความที่บันทึกไว้หรือปุ่มปิดเสียงเมื่อคุณต้องการตัวเลือกอื่น

วิธีสร้างทีมใน Microsoft Teams (และจัดการทีม)

วิธีสร้างทีมใน Microsoft Teams (และจัดการทีม)

เรียนรู้วิธีสร้างทีมใน Microsoft Teams เพิ่มสมาชิก เลือกประเภทช่อง จัดการสิทธิ์ และใช้งานศูนย์การดูแลระบบของ Teams

วิธีดาวน์โหลดการบันทึกการประชุม Microsoft Teams: สามวิธีง่ายๆ

วิธีดาวน์โหลดการบันทึกการประชุม Microsoft Teams: สามวิธีง่ายๆ

เรียนรู้วิธีดาวน์โหลดการบันทึกการประชุม Microsoft Teams จาก Teams, OneDrive หรือ SharePoint และแก้ไขปัญหาตัวเลือกการดาวน์โหลดที่หายไป ปัญหาการเข้าถึง และการบันทึกที่หมดอายุ

การเชื่อมต่อ Microsoft Teams กับ Slack: วิธีการตั้งค่า

การเชื่อมต่อ Microsoft Teams กับ Slack: วิธีการตั้งค่า

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

เกิดเสียงสะท้อนระหว่างการประชุม Microsoft Teams ใช่ไหม? นี่คือวิธีแก้ไข

เกิดเสียงสะท้อนระหว่างการประชุม Microsoft Teams ใช่ไหม? นี่คือวิธีแก้ไข

แก้ปัญหาเสียงสะท้อนระหว่างการประชุม Microsoft Teams โดยการลบการเชื่อมต่อเสียงที่ซ้ำซ้อน เลือกชุดหูฟังและไมโครโฟนที่ถูกต้อง และตรวจสอบการตั้งค่าเสียง

ไม่สามารถเชื่อมต่อกับการประชุม Microsoft Teams ได้ใช่ไหม วิธีแก้ไข

ไม่สามารถเชื่อมต่อกับการประชุม Microsoft Teams ได้ใช่ไหม วิธีแก้ไข

ไม่สามารถเชื่อมต่อกับการประชุม Microsoft Teams ได้ใช่ไหม ตรวจสอบลิงก์การประชุม บัญชี เครือข่าย และแอป จากนั้นเรียนรู้วิธีติดต่อผู้จัดหรือฝ่ายไอที

แก้ไขปัญหาการซิงค์ข้อมูลของ Microsoft Teams: คู่มือฉบับเต็ม

แก้ไขปัญหาการซิงค์ข้อมูลของ Microsoft Teams: คู่มือฉบับเต็ม

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