Как да използвате Web Inspector за отстраняване на грешки в Mobile Safari (iPhone или iPad)

Разработването на уеб страници за мобилни устройства или отстраняването на грешки във вашето хибридно приложение често е трудно. Но за щастие на хората, които проектират на iOS, започвайки още с iOS 6, Apple предлага функция за отдалечен уеб инспектор в iOS.

Web Inspector позволява на разработчиците на уеб и мобилни приложения да използват macOS и OS X Safari Developer Tools за дистанционно отстраняване на грешки в уеб съдържание или хибридни приложения в мобилно Safari на iPad или iPhone.

Това е лесен и практичен начин за отстраняване на грешки, оптимизиране и модифициране на вашите уеб страници или хибридни приложения на iOS.

За да получите достъп до тези инструменти за разработка, активирайте менюто Разработка в разширените предпочитания на Safari на вашия Mac.

Бързи съвети

Следвайте тези бързи съвети, за да накарате уеб инспектора да работи, за да можете да отстраните грешки в сайта или приложението си за Safari

• Нулирайте настройките за местоположение и поверителност на вашия iPhone, iPad или iPod touch. Отидете на Настройки > Общи > Нулиране > Нулиране на местоположение и поверителност
• Уверете се, че влизате в същия Apple ID на компютъра като вашия iPhone, iPad или iPod touch
• Включете синхронизирането на Safari iCloud както за компютъра, така и за всеки iPhone, iPad или iPod touch
• На iPhone или iPad отидете на Настройки > Safari > Разширени и включете Уеб инспектор
• На компютъра отворете Safari и отидете на Меню на Safari > Предпочитания > Разширени и отметка Показване на меню Разработване в лентата с менюта

Свързани статии

• Прегледайте изходния код на HTML уеб страницата на iPad или iPhone. Не се изисква приложение!
• Как да видите HTML изходния код в Safari
• Как да видите Favicons в Safari за iPhone и Mac

Изисква се компютър Mac

Съжаляваме, Windows хора, но Web Inspector на Safari е съвместим само с Mac!

Използвайте същия Apple ID и iCloud Sync!

Уверете се, че и вашето iDevice, и вашият Mac са влезли с един и същ Apple ID и че сте включили Safari в iCloud.

За вашето iDevice: Настройки > Apple ID профил > iCloud > Safari > включено

За вашия Mac: Меню на Apple > Системни предпочитания > Apple ID или iCloud > Safari > Отметка

И проверете дали Safari също е същата версия

Уверете се, че Safari на вашия Mac е същата версия като Safari на вашето iDevice. Може да се наложи да актуализирате вашата версия на iOS или версията на Safari, работеща на вашия Mac.

Нулирайте настройките си за местоположение и поверителност

1. Отидете на Настройки > Общи
2. Изберете Нулиране
3. Изберете да Нулиране на местоположението и поверителността

Професионален съвет за клавишни комбинации за Mac за уеб разработчици

Ако натиснете CTRL+Command+R в Safari, можете да видите как би изглеждал уебсайт на определено устройство, като изберете устройството.

Използвайте Web Inspector за отстраняване на грешки в мобилно Safari

1. На вашия iPad, iPhone или iPod touch докоснете Настройки > Safari > Разширени и включете Уеб инспектор. И активирайте JavaScript, ако все още не е включен

2. На вашия Mac стартирайте Safari и отидете на Меню на Safari > Предпочитания > Разширени след това проверете "Показване на меню Разработване в лентата с менюта” ако още не сте го направили

3. Свържете вашето iOS устройство към вашия Mac с USB кабел. Това е критично – трябва да свържете устройствата ръчно, като използвате кабел. Не работи през WiFi!

4. Сега на вашия iPad отворете уебсайта, който искате да отстраните грешки, след това на вашия Mac отворете Safari и отидете на „Развийте се" меню. Сега виждате вашето iDevice, което сте свързали с вашия Mac. Ако нямате отворена страница на вашето iDevice, ще видите съобщение „Няма приложения за проверка“.

5. Сега отстранете грешките в страницата, която е отворена в мобилно Safari, точно както бихте отстранили грешките на Mac, инспектирайте DOM елементи, модифицирайте CSS, измервайте ефективността на страницата и изпълнявайте Javascript команди.

Използвайте инструмента за отстраняване на грешки, за да ви помогне да намерите причината за всякакви грешки в JavaScript на вашата уеб страница. Можете да добавяте точки на прекъсване, да отстранявате грешки в javascript и да проверявате стойността на променливите по време на изпълнение.

Safari също трябва да открие всякакви грешки в CSS, HTML и JavaScript. И ще видите подробностите за всяка грешка в инструмента за отстраняване на грешки.

iDevice не се показва в менюто за разработка в Safari?

•  Изчистете кеша и бисквитките на Safari
• Актуализирайте Safari на вашия Mac и iDevice, ако е налична актуализация.
  • Ако използвате бета версия на iOS или macOS, може да се наложи да стартирате най-новата бета версия на всички устройства
• Опитайте с друг кабел и/или порт на вашия Mac. Уверете се, че кабелът е оригинален мълния кабел на Apple или сертифициран за MFI (направен за iPhone)
• Проверете дали Web Inspector е включен. Актуализациите на iOS понякога превключват това обратно към настройката по подразбиране ИЗКЛ. Така че просто не забравяйте да проверите Настройки > Safari > Разширени > Уеб инспектор
  • Опитайте да изключите Web Inspector, изчакайте 10 секунди и го включете отново
• Вместо това опитайте браузъра Safari Technology Preview
• Излезте от Safari на вашия Mac и го рестартирайте. Вижте дали Safari на вашия Mac след това разпознава вашето устройство и позволява отстраняване на грешки
• Проверете дали не използвате режима за частно сърфиране на Safari if вашето iDevice се показва само за кратко в менюто за разработка на Safari и след това изчезва
• Отворете Activity Monitor и проверете какво се случва с Safari

Съвети за читатели 

• Ако използвате по-старо iDevice с iOS 6 или по-стара версия, уеб браузърът Safari на вашето устройство има собствена вградена конзола за отстраняване на грешки! Просто влезте в конзолата за отстраняване на грешки на Safari, като отидете на Настройки > сафари > Разработчик > Конзола за отстраняване на грешки