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

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



Leave a Comment

ใบอนุญาต Adobe หมดอายุหรือยังไม่ได้เปิดใช้งาน

ใบอนุญาต Adobe หมดอายุหรือยังไม่ได้เปิดใช้งาน

หากใบอนุญาต Adobe Acrobat ของคุณหมดอายุหรือไม่ได้เปิดใช้งาน ให้ปิดใช้งานกระบวนการ AcroTray ในตัวจัดการงานและอัปเดตแอป

Google Jamboard คืออะไร เครื่องมือกระดานไวท์บอร์ดแบบโต้ตอบล่าสุด

Google Jamboard คืออะไร เครื่องมือกระดานไวท์บอร์ดแบบโต้ตอบล่าสุด

Google Jamboard เป็นเครื่องมือที่ช่วยให้การทำงานร่วมกันในองค์กรมีประสิทธิภาพมากขึ้น โดยเน้นการแบ่งปันข้อมูลอย่างมีประสิทธิภาพ

วิธีการ: ปิดเสียงผู้เข้าร่วมการประชุม เสียง และไมโครโฟนของ Zoom

วิธีการ: ปิดเสียงผู้เข้าร่วมการประชุม เสียง และไมโครโฟนของ Zoom

การประชุมออนไลน์ง่ายและสะดวกมากยิ่งขึ้นด้วยการตั้งค่าต่างๆ ของ Zoom เช่นการปิดเสียงผู้เข้าร่วมและไมโครโฟน.

Walkie Talkie ใน Microsoft Teams คืออะไรและทำงานอย่างไร

Walkie Talkie ใน Microsoft Teams คืออะไรและทำงานอย่างไร

เรียนรู้เกี่ยวกับ Walkie Talkie ใน Microsoft Teams ฟีเจอร์ใหม่ที่ช่วยให้การสื่อสารในทีมง่ายขึ้นด้วยการพูดคุยแบบเรียลไทม์

Soft Block หมายถึงอะไรบน Twitter? ทำอย่างไรและเพราะเหตุใด

Soft Block หมายถึงอะไรบน Twitter? ทำอย่างไรและเพราะเหตุใด

เรียนรู้เกี่ยวกับ Soft Block บน Twitter วิธีการทำและเหตุผลที่คุณควรใช้มันเป็นเครื่องมือในการจัดการผู้ติดตามของคุณอย่างมีประสิทธิภาพ

แก้ไข Microsoft Teams: ไม่เห็นหน้าจอที่แชร์บนพีซี

แก้ไข Microsoft Teams: ไม่เห็นหน้าจอที่แชร์บนพีซี

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

Microsoft Teams: วิธีลบข้อความ

Microsoft Teams: วิธีลบข้อความ

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

แก้ไข: แขกของ Microsoft Teams ไม่สามารถแชทได้

แก้ไข: แขกของ Microsoft Teams ไม่สามารถแชทได้

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

แก้ไข Google Maps ไม่หมุนอัตโนมัติ

แก้ไข Google Maps ไม่หมุนอัตโนมัติ

หาก Google Maps ไม่สามารถหมุนอัตโนมัติในขณะที่คุณกำลังนำทาง คู่มือนี้จะนำเสนอวิธีแก้ปัญหาสามวิธีในการแก้ปัญหานี้

วิธียกเลิกการประชุมใน Microsoft Teams

วิธียกเลิกการประชุมใน Microsoft Teams

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