Як переглянути вихідний код веб-сторінки на iPhone та iPad
Різне / / December 02, 2021
Хоча додатки для iOS не зовсім ті розробні машини проте, зазвичай ви знайдете iPhone або iPad в наборі інструментів веб-дизайнера/розробника. Хоча якщо ви розробник/видавець або просто хтось, хто хоче переглянути вихідний код сторінки або переглянути всі активи, розгорнуті на ній, ви зазвичай робите це з комп’ютера.
![Dsc 0433](/f/cad76343272a761931799e47924b8c8b.jpg)
Тепер iOS 8 значно полегшила перегляд джерела, ресурсів і ресурсів DOM сторінки. Завдяки чудовим програмам сторонніх розробників із підтримкою розширень, ви можете зробити це прямо в Safari (Chrome не підтримується, оскільки розширення мають доступ до DOM тільки в Safari).
Давайте поговоримо про дві програми, які допоможуть вам переглядати та зберігати вихідний код для будь-якого веб-сайту, коли ви в дорозі.
Переглянути вихідне розширення для Safari
Переглянути джерело ($0,99) – це простий і потужний додаток з розширенням Safari. Він коштує $0,99, але має багато функцій.
Після встановлення програми перейдіть у Safari, торкніться значка Поділіться кнопку, проведіть пальцем праворуч у нижньому рядку й торкніться
Більше. Звідси перемикайтеся Переглянути джерело. Це дозволить увімкнути розширення.Більше про розширення iOS 8: Розширення iOS 8 швидко стають а потужний інструмент. Подивись на як вони працюють, найкращі розширення для спільного доступу, і як одне розширення може допомогти вам перетворити Safari у повноцінний завантажувач.
Тепер перейдіть на сторінку, торкніться Поділіться і виберіть Переглянути джерело. Ви побачите вихідний код сторінки у всій красі. Торкніться значка Поділіться кнопку, щоб відкрити власний аркуш спільного доступу. Звідси ви можете надіслати код до програми нотаток або надіслати його електронною поштою.
![Зображення 2418](/f/e49aedc99552deb9eecf66ead536de44.png)
![Зображення 2419](/f/3b2b6992425db2c5067e8eadd5d3c007.png)
Нижче ви побачите чотири кнопки – Активи, DOM, Сценарій та Інформація.
Активи перераховують усі зображення на сторінці. Ви можете натиснути посилання, щоб переглянути попередній перегляд і зберегти зображення.
The DOM кнопка покаже вам модель дерева з ієрархічною структурою документів HTML, XML і SVG. Ви можете натиснути на будь-який елемент, щоб розгорнути його.
![Зображення 2421](/f/c7559589a97db587646c1c6caccb3bee.png)
![Зображення 2422](/f/db4f5e31b6d7e4bdfd1c52cdba47aed2.png)
The Сценарій Кнопка дозволяє писати та вводити Javascript на будь-яку сторінку (локально). The Інформація панель відображає інформацію про сторінку.
Srcfari
Srcfari ($0,99) є альтернативою View Source. Хоча програма покаже вам вихідний код та такі ресурси, як зображення, таблиці стилів CSS та сценарії, запущені на сторінці, вам доведеться робити це з самої програми. Для Srcfari немає розширення Safari.
![Зображення 2426](/f/493aff8a6dc703d96eedcdfa1d2362e6.png)
![Зображення 2428](/f/85e46e1bf946f8ebd9aa79ccdf1dcc66.png)
Тим не менш, використання Srcfari не є поганим досвідом. Програма має гарну типографіку, і вона набагато краще розбиває ресурси за сценаріями, CSS та зображеннями, ніж програма View Source. Одна проблема, яку я маю щодо Srcfari, полягає в тому, що він увімкнув обтікання текстом для таблиць стилів CSS, але не тоді, коли ви переглядаєте все джерело (що робить програма View Source). Це означає, що буде задіяно досить багато панорамування та масштабування, принаймні на iPhone.
![Зображення 2429](/f/0f8a9f380a884ee749ae420798229800.png)
![Зображення 2430](/f/a6a7e9c50bdbd650aebcd8e88313392b.png)
Крім цього, Srcfari - це звичайна справа. Ви можете скопіювати вихідний код у буфер обміну або надіслати його комусь електронною поштою. Ви також можете зберігати зображення за допомогою програми.
Висновок
Safari, ймовірно, вже є вашим браузером на iOS (в основному тому, що iOS не дозволяє вибрати Chrome за замовчуванням). Якщо вам потрібно переглядати вихідний код досить часто, програма View Source з розширенням Safari коштує 0,99 доларів США.
Ви зазвичай використовуєте свій iPhone або iPad для усунення несправностей веб-сайтів? Або подивитися, що з ними не так? Дайте нам знати в коментарях нижче.