สมมติว่าคุณกำลังเยี่ยมชมเว็บไซต์ที่คุณทำงานอยู่และเห็นข้อบกพร่องบางอย่าง คุณต้องดูแหล่งที่มาของหน้าบน iPhone หรือ iPad เพื่อค้นหารหัสบั๊กกี้และแก้ไข คุณเปิด Safari และคลั่งไคล้เพื่อค้นหาปุ่มมุมมองซอร์สโค้ด HTML บน Safari ที่ไม่มีประโยชน์ ตอนนี้คุณทำอะไร? ง่ายนิดเดียว แค่อ่านบทความนี้!
นักพัฒนาเว็บไซต์ โปรแกรมเมอร์ นักออกแบบซอฟต์แวร์ นักพัฒนาแอพ App Store ผู้สร้างเนื้อหา และเว็บมาสเตอร์ทุกคนรู้ดีว่าซอร์สโค้ดมีความสำคัญเพียงใด ในการทำงานส่วนนี้ คุณจะต้องดูซอร์สโค้ดของหน้าเว็บเสมอเพื่อแก้ไขปัญหา แก้ไขจุดบกพร่อง ออกแบบ และเพิ่มมูลค่าให้กับเว็บไซต์
แม้ว่างานนี้ค่อนข้างง่ายในอุปกรณ์ Android และ Windows แต่ก็ยากพอๆ กันในอุปกรณ์ Apple เช่น iPhone, iPad, MacBook และ iMac แม้ว่าใน macOS คุณลักษณะนี้จะพร้อมใช้งาน แต่ซ่อนอยู่ และคุณสามารถค้นหาได้โดยทำตามนี้ “ดูซอร์สโค้ด HTML ใน Safari" บทความ. อย่างไรก็ตาม สำหรับอุปกรณ์ iOS นั้นเป็นคนละเรื่องกัน
Apple ทำให้การดูแหล่งที่มาของเพจบน iPad/iPhone เป็นเรื่องยากอย่างยิ่ง ไม่มีวิธีการง่ายๆ แบบดั้งเดิมที่คุณสามารถแตะหรือสัมผัสเพื่อรับซอร์สโค้ด HTML ของหน้าเว็บ แต่อย่าเพิ่งบ้าเกินไป ให้อ่านบทความนี้จนจบเพื่อหาวิธีที่ดีที่สุดในการเรียนรู้วิธีดูแหล่งที่มาของหน้าใน Safari บน iPhone หรือ iPad
เหตุผลที่คุณต้องดูแหล่งที่มาของหน้าบน iPhone/iPad
ค้นหาสถานการณ์และเหตุผลด้านล่างเพื่อดูแหล่งที่มาของหน้าใน Safari บน iPad/iPhone:
- คุณต้องดูแหล่งที่มาของหน้าเว็บสำหรับอุปกรณ์เฉพาะ เช่น iPhone หรือ iPad หากคุณเข้าถึงเว็บไซต์บน Mac และดูซอร์สโค้ด HTML คุณจะเห็นองค์ประกอบสำหรับเวอร์ชันเดสก์ท็อป ไม่ใช่เวอร์ชัน iPhone หรือ iPad
- คุณกำลังเดินทางและต้องการใช้เวลาในการดูโค้ดของหน้าเว็บเพื่อรับแนวคิดใหม่ๆ หรือสร้างแผนการแก้จุดบกพร่อง
- คุณชอบการพัฒนาเว็บไซต์บน iPad ของคุณมากกว่า เนื่องจากมาพร้อมกับคุณสมบัติการทำงานหลายอย่างพร้อมกัน เช่น ผู้จัดการเวที, Split View เป็นต้น
ดังนั้น ทำตามวิธีการด้านล่างเพื่อเตรียมพร้อมหากจำเป็นต้องดูแหล่งที่มาของหน้าบน iPhone หรือ iPad ปรากฏขึ้นทุกเมื่อ
วิธีที่ดีที่สุดในการดูแหล่งที่มาของหน้าบน iPhone/iPad
ด้านล่างนี้คือวิธียอดนิยมในการดูแหล่งที่มาของหน้าในโค้ด HTML บน iPhone หรือ iPad โดยไม่ต้องใช้ประโยชน์จากแอปของบุคคลที่สาม วิธีการเหล่านี้เหมาะสมสำหรับผู้เข้ารหัสและผู้ใช้ปลายทางที่เกี่ยวข้องกับความเป็นส่วนตัวและความปลอดภัย:
1. รับซอร์สโค้ด HTML โดยใช้แอพทางลัด
วิธีนี้จะใช้ได้เฉพาะเมื่อคุณใช้ iOS 12.0 (iPadOS 12.0) และใหม่กว่า ต่อไปนี้เป็นวิธีสร้างทางลัดแหล่งที่มาของหน้าดูบน iPhone หรือ iPad:
- เปิด ทางลัด แอปจากหน้าจอหลักหรือ App Drawer
- แตะ บวก (+) ไอคอนเพื่อสร้างทางลัดใหม่ที่ว่างเปล่า
- ในช่องค้นหา พิมพ์ HTML และเลือก สร้าง HTML จาก Rich Text.
- อีกครั้งให้มองหา ดูอย่างรวดเร็ว ในช่องค้นหาและเพิ่มลงในตัวแก้ไขทางลัด
- ตอนนี้ แตะไอคอนทางลัดที่ด้านบนแล้วเลือก เปลี่ยนชื่อ.
- เปลี่ยนชื่อเป็น ดูซอร์สโค้ด แล้วแตะเสร็จสิ้น
- แตะ (ฉัน) ปุ่มและสลับบน แสดงใน Share Sheet ตัวเลือก.
- ตอนนี้ เปิดเบราว์เซอร์ Safari และไปที่หน้าเว็บที่คุณเลือก
- สัมผัส แบ่งปัน บนแอป Safari แล้วเลื่อนลงมาเพื่อค้นหา ดูซอร์สโค้ด ทางลัด
- แตะทางลัดและคุณจะได้รับซอร์สโค้ด HTML ใน Quick Look
2. ดูแหล่งที่มาของหน้าโดยใช้สคริปต์บุ๊กมาร์ก
ในวิธีนี้ คุณจะสร้างบุ๊กมาร์กและ URL จะเป็นสคริปต์ดูต้นฉบับ เมื่อคุณเรียกดูหน้าเว็บใดๆ และต้องการดูแหล่งที่มาของหน้าบน Safari เพียงแตะที่บุ๊กมาร์ก คุณจะได้รับซอร์สโค้ด HTML สำหรับเพจ นี่คือวิธีการ:
- เยี่ยมชมเว็บไซต์แบบสุ่มและบุ๊กมาร์กบนเบราว์เซอร์ Safari สำหรับ iPad หรือ iPhone
- แตะ เมนูซาฟารี ที่มุมบนซ้ายแล้วไปที่ ที่คั่นหนังสือ.
- สัมผัส รายการโปรด เพื่อค้นหาบุ๊กมาร์กที่คุณเพิ่งเพิ่มเข้าไป
- แตะที่คั่นหน้าค้างไว้แล้วเลือก แก้ไข บนเมนูบริบท
- ล้างชื่อบุ๊กมาร์กที่มีอยู่และเปลี่ยนชื่อเป็น ซอร์สโค้ด HTML หรืออย่างอื่นเพียงเพื่อจำที่คั่นหน้า
- แตะ ที่อยู่ ฟิลด์และล้าง URL ที่มีอยู่
- คัดลอกและวางโค้ดต่อไปนี้เป็น URL (ผู้สร้างโค้ด: Rob Flaherty):
จาวาสคริปต์:(function(){var a=window.open('about: blank').document; a.write('');a.close();var b=a.body.appendChild (a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace=' ตัดล่วงหน้า';b.appendChild (a.createTextNode (document.documentElement.innerHTML))})();- แตะ เสร็จแล้ว บนแป้นพิมพ์เพื่อบันทึกการเปลี่ยนแปลงที่คุณทำไว้
- ตอนนี้ ไปที่หน้าเว็บที่คุณต้องการตรวจสอบซอร์สโค้ด
- ไปที่ ที่คั่นหนังสือ เมนูและแตะที่ ซอร์สโค้ด HTML บุ๊กมาร์กที่คุณเพิ่งสร้างขึ้น
- คุณควรเห็นโค้ด HTML ของหน้าที่คุณกำลังเข้าชมในแท็บ Safari ใหม่
อ่านเพิ่มเติม:วิธีจัดการบุ๊กมาร์กใน Safari บน iOS และ Mac
3. ดูแหล่งที่มาของหน้าโดยใช้ macOS Tethering
แอพ Safari บน iPhone และ iPad มาพร้อมกับเครื่องมือตรวจสอบเว็บในตัว น่าเสียดายที่คุณสมบัตินี้ใช้ไม่ได้กับอุปกรณ์ iPhone หรือ iPad โดยตรง คุณต้องเชื่อมโยงอุปกรณ์กับ MacBook หรือ iMac จากนั้น คุณสามารถใช้การควบคุมบน Mac Safari เพื่อแสดงภาพซอร์สโค้ด HTML กระบวนการทำงานในสองขั้นตอนตามที่ระบุไว้ด้านล่าง:
เปิดใช้งานตัวตรวจสอบเว็บ
ทำตามขั้นตอนเหล่านี้เพื่อเปิด สารวัตรเว็บ ฟังก์ชันการทำงานบน Safari สำหรับ iPad และ iPhone:
- บน iPhone หรือ iPad ให้เปิด การตั้งค่า แอป.
- ไปที่ การตั้งค่าซาฟารี.
- เลื่อนลงไปที่ด้านล่างของหน้าต่างการตั้งค่า Safari เพื่อค้นหา ขั้นสูง เมนู. แตะที่มัน
- เปิดใช้งาน สารวัตรเว็บ โดยแตะที่ปุ่มสลับ
ดูแหล่งที่มาของหน้าบน Mac Safari
ไปที่ Mac ของคุณและทำตามขั้นตอนเหล่านี้:
- เสียบ iPhone หรือ iPad กับ MacBook หรือ iMac โดยใช้สาย USB
- หากอุปกรณ์ไม่ได้รับการรับรองความถูกต้องก่อนหน้านี้ Mac จะขอให้คุณตรวจสอบความถูกต้องโดยใช้ Apple ID
- ตอนนี้เปิดแอป Safari บน Mac แล้วไปที่เว็บไซต์ใดก็ได้
- บนแถบเครื่องมือ Mac ให้คลิก พัฒนา.
- ค้นหา iPad หรือ iPhone ของคุณในเมนูบริบทที่เปิดขึ้น
- คลิก iPad หรือ iPhone ของคุณเพื่อเปิดหน้าต่างใหม่บน Mac ที่แสดงหน้าจอ Safari ของอุปกรณ์เหล่านี้
- ตอนนี้ เปิดเว็บไซต์เป้าหมายบน iPhone หรือ iPad ของคุณ และดูซอร์สโค้ดบนเบราว์เซอร์ Mac Safari
หากคุณพอใจกับแอพและเครื่องมือของบุคคลที่สาม คุณอาจต้องการดูวิธีการเพิ่มเติมเหล่านี้เพื่อดูซอร์สโค้ด HTML ของหน้าเว็บ:
4. ส่วนขยาย Safari – ตัวตรวจสอบเว็บ
คุณสามารถติดตั้งส่วนขยาย Web Inspector สำหรับเบราว์เซอร์ Apple Safari บน iPad และ iPhone จากนั้น เรียกใช้ส่วนขยายเมื่อเรียกดูหน้าเว็บเพื่อดูซอร์สโค้ด HTML นี่คือขั้นตอนที่คุณควรลอง:
- เปิด การตั้งค่า แอพแล้วไปที่ การตั้งค่าซาฟารี ส่วน.
- เลื่อนลงมาจนเจอ ส่วนขยาย ตัวเลือก. แตะที่มัน
- ภายในส่วนขยาย ให้แตะ ส่วนขยายเพิ่มเติม.
- หน้า App Store สำหรับส่วนขยายของ Safari จะปรากฏขึ้น
- สัมผัส ค้นหา กล่องและประเภท สารวัตรเว็บ แล้วแตะค้นหาบนแป้นพิมพ์
- ค้นหาและติดตั้งแอป Web Inspector
- อีกครั้งไปที่ การตั้งค่า > ซาฟารี > ส่วนขยาย > และแตะ สารวัตรเว็บ.
- ใช้ปุ่มสลับเพื่อเปิดใช้งานส่วนขยายนี้สำหรับ Safari
- เปิด Safari และเยี่ยมชมเว็บไซต์ใดก็ได้
- แตะ ส่วนขยาย ไอคอนที่มุมด้านขวาของแถบที่อยู่
- เลือก สารวัตรเว็บ ส่วนขยาย.
- เลือก อนุญาตสำหรับหนึ่งวัน ตัวเลือกในป๊อปอัปที่แสดงขึ้น
- แตะอีกครั้ง ส่วนขยาย ไอคอน จากนั้นกดเลือก Web Inspector
- ซอร์สโค้ด HTML ควรปรากฏขึ้นจากด้านล่างของหน้าเว็บที่คุณกำลังดูอยู่
- คุณสามารถสลับไปมาระหว่างแท็บต่างๆ เช่น DOM, Elements, Console, Network และ Resources
- หากต้องการกลับไปที่มุมมองปกติ เพียงแตะส่วนขยาย Web Inspector ในส่วนส่วนขยายของ Safari
5. แอป iOS – ดูแหล่งที่มา
คุณสามารถรับได้ฟรีใน App Store ในช่องค้นหา ให้พิมพ์ ดูแหล่งที่มา แล้วแตะ ค้นหา คุณจะเห็นผลลัพธ์หลายรายการใน App Store ติดตั้งอันที่ระบุว่า View Source ผู้ให้บริการแอพนี้คือ Roman Tomjak
เปิดแอปจากหน้าจอหลักหรือ App Drawer จากนั้นพิมพ์ URL ของเว็บไซต์ในแถบที่อยู่เพื่อแสดงซอร์สโค้ด HTML
เครื่องมือนี้ให้มุมมองขนาด iPhone ของซอร์สโค้ด อย่างไรก็ตาม คุณสามารถเปลี่ยนการวางแนวหรือซูมเข้าได้โดยใช้ปุ่มที่เกี่ยวข้องที่มุมล่างขวาของหน้าจอ
6. ดูซอร์สโค้ดฟรีโดยใช้ Google Web Cache
คุณสามารถใช้เคล็ดลับเจ๋ง ๆ ต่อไปนี้กับเว็บไซต์ที่เยี่ยมชมเพื่อดูซอร์สโค้ดพื้นฐานบน Safari หรือ Chrome:
- ไปที่หน้าเว็บที่คุณต้องการค้นหาซอร์สโค้ด HTML
- แตะที่อยู่บนแถบที่อยู่ Safari หรือ Chrome
- ใช้เคอร์เซอร์พิมพ์ที่จุดเริ่มต้นของที่อยู่ตามที่แสดงในภาพด้านบน
- ตอนนี้พิมพ์รหัสต่อไปนี้ก่อน https://
แคช:
- ตี ไป ปุ่มบนแป้นพิมพ์ iOS
- ที่ด้านบนของหน้า คุณต้องเห็น ดูแหล่งที่มา ตัวเลือก. แตะที่มัน
- ตอนนี้คุณได้รับซอร์สโค้ดของหน้าเว็บที่คุณเพิ่งเยี่ยมชม
อ่านเพิ่มเติม:วิธีนำเข้าบุ๊กมาร์ก รหัสผ่าน และอื่นๆ
7. ดูซอร์สโค้ดบนเว็บแอป
มีเว็บไซต์มากมายที่ให้คุณเปิดเผยซอร์สโค้ดของเว็บไซต์และหน้าเว็บได้ฟรีหรือเสียค่าธรรมเนียมเล็กน้อย จากเว็บแอปทั้งหมด ฉันเลือก Source Code Viewer ของ CodeBeautify นี่คือวิธีการทำงาน:
- บน iPhone หรือ iPad ให้ไปที่ลิงก์นี้: โปรแกรมดูซอร์สโค้ด โดยใช้เบราว์เซอร์ Safari
- ใน ป้อน URL กล่อง พิมพ์หรือคัดลอกและวาง URL ของหน้าเว็บที่คุณต้องการเปิดเผยซอร์สโค้ด HTML
- แตะ ดู ปุ่มเพื่อดูแหล่งที่มาของหน้าบนเบราว์เซอร์ Safari ของ iPhone/iPad
บทสรุป
ตอนนี้คุณรู้เคล็ดลับทั้งหมดในการดูแหล่งที่มาของหน้าบนอุปกรณ์ iPhone และ iPad แล้ว คุณค้นพบวิธีการดั้งเดิมและไม่ใช่ดั้งเดิมในบทความนี้ คุณสามารถยึดติดกับเทคนิคดั้งเดิมบน iPad หรือ iPhone เพื่อดูซอร์สโค้ด HTML ของหน้าเว็บหรือใช้แอพที่ทำให้งานง่ายขึ้นมาก
แจ้งให้เราทราบว่าคุณชอบวิธีใดโดยแสดงความคิดเห็นด้านล่าง นอกจากนี้ แชร์บทความบนโซเชียลมีเดียและ WhatsApp เพื่อช่วยเพื่อนๆ ของคุณที่กำลังเรียนรู้การพัฒนาเว็บไซต์และการเขียนโค้ดแอป
ถัดไป วิธีเรียนรู้ Swift บน Mac และ iPad.