Як переглянути вихідний код веб-сторінки на iPhone/iPad: 7 методів

Припустімо, ви відвідуєте веб-сайт, на якому працювали, і бачите деякі збої. Вам потрібно переглянути джерело сторінки на 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, оскільки він має багато багатозадачних функцій, як-от Менеджер сцени, розділений перегляд тощо.

Тому дотримуйтеся наведених нижче методів, щоб бути готовими, якщо будь-якої миті з’явиться потреба переглянути джерело сторінки на iPhone або iPad.

Найкращі методи перегляду вихідного коду сторінки на iPhone/iPad

Нижче наведено популярні способи перегляду вихідних кодів сторінок у HTML-кодах на iPhone або iPad без використання сторонніх програм. Ці методи підходять для програмістів і кінцевих користувачів, які стосуються конфіденційності та безпеки:

1. Отримайте вихідний код HTML за допомогою програми ярликів

Цей метод працюватиме, лише якщо ви використовуєте iOS 12.0 (iPadOS 12.0) і пізніших версій. Ось як створити ярлик джерела перегляду сторінки на iPhone або iPad:

  • Відкрийте Ярлики програму з головного екрана або панелі програм.
  • Торкніться плюс (+) щоб створити новий порожній ярлик.
  • У полі пошуку введіть HTML і вибрати Створення HTML із форматованого тексту.
  • Знову шукайте Швидкий погляд у вікні пошуку та додайте його до редактора ярликів.
  • Тепер торкніться піктограми швидкого доступу вгорі та виберіть Перейменувати.
Ярлик для перегляду вихідного коду на веб-сторінках
Ярлик для перегляду вихідного коду на веб-сторінках
  • Перейменуйте його на Переглянути вихідний код і натисніть Готово.
  • Торкніться (і) і ввімкніть Показати на аркуші спільного доступу варіант.
  • Тепер відкрийте браузер Safari та перейдіть на обрану вами веб-сторінку.
Перегляньте ярлик вихідного коду на аркуші спільного доступу в Safari
Перегляньте ярлик вихідного коду на аркуші спільного доступу в Safari
  • Торкніться Поділіться у програмі Safari та прокрутіть вниз, щоб знайти Переглянути вихідний код ярлик.
  • Торкніться ярлика, і ви отримаєте вихідний код HTML у Quick Look.

2. Перегляд вихідного коду сторінки за допомогою сценарію закладок

У цьому методі ви створите закладку, а URL-адреса буде вихідним сценарієм перегляду. Коли ви переглядаєте будь-яку веб-сторінку і вам потрібно переглянути джерело сторінки в Safari, просто торкніться закладки. Ви отримаєте вихідний код HTML для сторінки. Ось як це робиться:

  • Відвідайте випадковий веб-сайт і додайте його в закладки у своєму браузері Safari для iPad або iPhone.
  • Торкніться Меню Safari у верхньому лівому куті та перейдіть до Закладки.
  • Дотик Вибране щоб знайти закладку, яку ви щойно додали.
  • Утримуйте закладку, а потім виберіть Редагувати у контекстному меню.
Як відредагувати назву та адресу закладки
Як відредагувати назву та адресу закладки
  • Очистіть наявну назву закладки та перейменуйте її на Вихідний код HTML або щось інше, щоб запам’ятати закладку.
  • Торкніться Адреса і очистіть наявну URL-адресу.
  • Скопіюйте та вставте наступний код як URL-адресу (Творець коду: Роб Флаерті):
javascript:(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=' pre-wrap';b.appendChild (a.createTextNode (document.documentElement.innerHTML))})();
  • Торкніться Готово на клавіатурі, щоб зберегти внесені зміни.
  • Тепер перейдіть на веб-сторінку, для якої потрібно перевірити вихідний код.
Як переглянути джерело сторінки в Safari за допомогою сценарію закладок
Як переглянути джерело сторінки в Safari за допомогою сценарію закладок
  • Перейти до Закладки меню та торкніться Вихідний код HTML закладку, яку ви щойно створили.
  • Ви повинні побачити HTML-код сторінки, яку ви відвідуєте, у новій вкладці Safari.

Читайте також:Як керувати закладками в Safari на iOS і Mac

3. Перегляд вихідного коду сторінки за допомогою macOS Tethering

Програма Safari на iPhone та iPad має вбудований інструмент Web Inspector. На жаль, ця функція не працює безпосередньо на пристроях iPhone або iPad. Вам потрібно підключити пристрої до MacBook або iMac. Потім ви можете використовувати елементи керування на Mac Safari для візуалізації вихідного коду HTML. Процес складається з двох етапів, як описано нижче.

Активуйте веб-інспектор

Виконайте ці кроки, щоб увімкнути Веб-інспектор функціональні можливості Safari для iPad і iPhone:

  • На своєму iPhone або iPad відкрийте Налаштування додаток
  • Йти до Налаштування Safari.
  • Прокрутіть униз вікна налаштувань Safari, щоб знайти Просунутий меню. Натисніть на нього.
Як отримати Web Inspector на Safari iPad
Як отримати Web Inspector на Safari iPad
  • Активуйте Веб-інспектор торкнувшись перемикача.

Перегляньте вихідний код сторінки на 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-код. Ось кроки, які ви повинні спробувати:

  • Відкрийте Налаштування і перейдіть до Налаштування Safari розділ.
  • Прокрутіть вниз, доки не знайдете Розширення варіант. Натисніть на нього.
Перейдіть до «Більше розширень» у налаштуваннях Safari
Перейдіть до «Більше розширень» у налаштуваннях Safari
  • Усередині розширень торкніться Більше розширень.
  • Відкриється сторінка App Store для розширень Safari.
  • Торкніться Пошук коробка і тип Веб-інспектор і натисніть Пошук на клавіатурі.
  • Знайдіть і встановіть програму Web Inspector.
  • Знову перейти до Налаштування > Сафарі > Розширення > і торкніться Веб-інспектор.
  • Використовуйте перемикач, щоб активувати це розширення для Safari.
  • Відкрийте Safari та відвідайте будь-який веб-сайт.
Активуйте Web Inspector у меню Safari Extensions
Активуйте Web Inspector у меню Safari Extensions
  • Торкніться Розширення у правому бічному куті адресного рядка.
  • Виберіть Веб-інспектор розширення.
  • Виберіть Дозвольте на один день у спливаючому вікні, яке з’явиться.
  • Знову торкніться Розширення а потім виберіть Веб-інспектор.
  • Вихідний код HTML має з’явитися знизу веб-сторінки, яку ви переглядаєте.
Дізнайтеся, як переглянути джерело сторінки на iPhone або iPad за допомогою Web Inspector
Дізнайтеся, як переглянути джерело сторінки на iPhone або iPad за допомогою Web Inspector
  • Ви можете перемикатися між такими вкладками, як DOM, Elements, Console, Network і Resources.
  • Щоб повернутися до звичайного перегляду, просто торкніться розширення Web Inspector у розділі «Розширення» Safari.

5. Додаток для iOS – переглянути вихідний код

Ви можете отримати його безкоштовно в App Store. У полі пошуку введіть Переглянути джерело та торкніться Пошук. Ви побачите кілька результатів в App Store. Встановіть той, на якому написано View Source. Розробником програми є Роман Томяк.

Відкрийте програму з головного екрана або панелі програм. Потім введіть URL-адресу веб-сайту в адресний рядок, щоб відкрити вихідний HTML-код.

Як користуватися програмою View Source
Як користуватися програмою View Source

Інструмент надає вихідний код у форматі iPhone. Однак ви можете змінити орієнтацію або збільшити масштаб за допомогою відповідних кнопок у нижньому правому куті екрана.

6. Перегляньте вихідний код безкоштовно за допомогою Google Web Cache

Ви можете застосувати такий чудовий трюк на відвіданих веб-сайтах, щоб переглянути їхній вихідний код у Safari або Chrome:

  • Відвідайте веб-сторінку, для якої потрібно знайти вихідний код HTML.
  • Торкніться адреси в адресному рядку Safari або Chrome.
Візьміть курсор перед кодом HTTPS
Візьміть курсор перед кодом HTTPS
  • Візьміть курсор на початку адреси, як показано на зображенні вище.
Введіть Cache перед кодом HTTPS
Введіть Cache перед кодом HTTPS
  • Тепер введіть наступний код раніше https://
кеш:
  • Вдарити Іди на клавіатурі iOS.
Як переглянути джерело сторінки в Safari за допомогою Google Web Cache
Як переглянути джерело сторінки в Safari за допомогою Google Web Cache
  • У верхній частині сторінки ви повинні побачити Переглянути джерело варіант. Натисніть на нього.
  • Тепер ви отримуєте вихідний код веб-сторінки, яку щойно відвідали.

Читайте також:Як імпортувати свої закладки, паролі тощо

7. Перегляньте вихідний код у веб-програмах

Є багато веб-сайтів, які дозволяють безкоштовно або за невелику плату відкривати базові вихідні коди веб-сайтів і веб-сторінок. З усіх цих веб-програм я вибрав програму перегляду вихідного коду CodeBeautify. Ось як це працює:

  • На iPhone або iPad перейдіть за цим посиланням: Переглядач вихідного коду за допомогою браузера Safari.
Як переглянути вихідний код у веб-програмах
Як переглянути вихідний код у веб-програмах
  • В Введіть URL поле, введіть або скопіюйте та вставте URL-адресу веб-сторінки, для якої ви хочете відкрити вихідний код HTML.
  • Торкніться Переглянути кнопку для перегляду джерела сторінки на iPhone/iPad у браузері Safari.

Висновок

Отже, тепер ви знаєте всі прийоми перегляду джерела сторінки на пристроях iPhone та iPad. У цій статті ви виявили деякі нативні та ненативні методи. Ви можете просто дотримуватися власних прийомів на iPad або iPhone, щоб переглядати вихідний HTML-код веб-сторінок або використовувати програми, які значно полегшують завдання.

Дайте мені знати, який метод вам сподобався, залишивши коментар нижче. Також поділіться статтею в соціальних мережах і WhatsApp, щоб допомогти своїм друзям, які вивчають розробку веб-сайтів і програмування програм.

Далі, Як вивчити Swift на Mac і iPad.

Схожі повідомлення: