วิธีตรวจสอบองค์ประกอบบน 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'

ภายใน 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 

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

• วิธีวางบน iPhone โดยไม่ต้องถือ
• วิธีฝากข้อความกลุ่มไว้ใน iMessage และสิ่งที่เกิดขึ้น
• วิธีค้นหา Airtags ที่ติดตามคุณ
• 30 เคล็ดลับ iOS 15 ที่ไม่ธรรมดาที่คุณควรรู้
• วิธีการตั้งค่าวอลเปเปอร์แบบสุ่มโดยไม่ต้องทำซ้ำบน iPhone