В това ръководство бих искал да ви запозная подробно с това как да използвате инструментите за разработчици на Safari. Въпреки че инструментите за разработчици в Safari имат някои разлики в сравнение с тези в Chrome и Firefox, основният принцип остава същият. Ще научите как да активирате инструментите за разработчици, да използвате различните области и функции и да прилагате основни процеси за отстраняване на грешки. Нека да започнем с най-важните прозрения.
Най-важни констатации
- Инструментите за разработчици в Safari не са толкова лесно достъпни, колкото в другите браузъри, тъй като трябва да се активират чрез настройките.
- Потребителският интерфейс и функциите на Инструментите за разработчици са сходни от други браузъри, но конкретните имплементации се различават.
- Отстраняването на грешки на устройства с iOS е възможно в Safari чрез свързване на устройството чрез USB.
Инструкции стъпка по стъпка
1. активирайте Инструментите за разработчици в Safari
За да активирате Developer Tools в Safari, трябва да коригирате настройките на Safari. Стартирайте Safari и отидете в лентата с менюта. Изберете "Safari" и след това "Preferences" (Настройки).
Превключете на раздела "Разширени" в крайния десен ъгъл. Там ще откриете опцията "Показване на функциите за разработка за уеб разработчици". Активирайте тази опция, за да активирате инструментите за разработчици.
2. достъп до инструментите за разработчици
Веднага след като инструментите за разработчици са активирани, можете да ги отворите чрез менюто "Developer" (Разработване) в лентата с менюта или чрез използване на определени клавишни комбинации. Директният достъп чрез клавишите F12 или Alt-Cmd-I не работи, но можете например да щракнете с десния бутон на мишката върху елемента и да изберете "Examine element" (Разглеждане на елемента).
Можете също така да използвате клавишната комбинация Cmd+Option+C, за да отворите конзолата и да превключвате напред и назад между различните изгледи.
3. навигация чрез инструментите за разработчици
Въпреки че потребителският интерфейс на инструментите за разработчици изглежда подобен на този, с който сте свикнали от други браузъри, те имат някои специални разлики. В лявата странична лента можете да превключвате между разделите "Елементи", "Конзола", "Източници", "Мрежа" и други.
Тук можете да научите повече за елементите на уебсайта, за да преглеждате и редактирате техните стилове и оформления. Можете да редактирате всеки стил, като просто щракнете върху съответните CSS правила.
4. работа с конзолата
Конзолата в Safari ви позволява да изпълнявате JavaScript код и да показвате желаните изходи. Вълнуващ аспект е, че тук форматирането на изходите е различно. Първият аргумент се извежда като текст, докато всички следващи аргументи се показват като JavaScript обекти.
Ако извеждате допълнителни съобщения в дневника, уверете се, че извеждането няма интервали между отделните аргументи, а е разделено с тирета. Това може да е важно, за да се избегнат недоразумения по време на отстраняване на грешки.
5. задаване на изходен код и точки на прекъсване
В раздела "Източници" можете да видите оригиналните файлове и транспонираните файлове на вашия уебсайт. Тук също така е възможно да зададете точки на прекъсване, за да улесните отстраняването на грешки. За да направите това, просто щракнете върху съответния ред от кода.
Не забравяйте да използвате различните контроли, за да улесните преминаването през кода. В Safari прекият път за преминаване е различен; вместо това използвайте специфични икони.
6. извършване на мрежови анализи
Табът "Мрежа" ви дава изчерпателна информация за всички заявки, които вашата страница прави по време на зареждането си. Тук можете да видите изпратените и получените заявки, както и техните заглавия и прегледи.
Интересна функция тук е разграничението между хедъри и времеви прегледи, което ви дава по-задълбочена представа за производителността на вашия сайт.
7. използвайте измервания на производителността и времеви линии
В раздела "Timelines" (Времеви линии) можете да извършвате обширни анализи на производителността и да правите записи, за да разберете по-добре скоростта и процесите във вашия сайт.
Тази функция работи по сходен начин с профилите на производителността в други браузъри, но може да се наложи да свикнете с някои разлики в показването и именуването.
8 Отстраняване на грешки при мобилни устройства
Особено важен момент в инструментите за разработчици на Safari е възможността за отстраняване на грешки в уебсайтове на вашия iPhone или iPad. Свържете устройството си чрез USB и активирайте съответните опции за отстраняване на грешки в настройките на устройството.
След това отидете в менюто "Разработване" и изберете свързаното устройство, за да получите достъп до отворените прозорци и техните Инструменти за разработчици.
Обобщение
В това подробно ръководство научихте как да активирате Safari Developer Tools, да използвате различните функции и раздели и да извършвате отстраняване на грешки на мобилни устройства. Повечето от функциите са подобни на инструментите в други браузъри, но има специфични разлики, особено в потребителския интерфейс и бързите клавиши. След като се запознаете с тях, бързо ще можете да отстранявате грешки в Safari.
Често задавани въпроси
Как да активирам инструментите за разработчици в Safari? Отидете в настройките на Safari в раздел "Разширени" и активирайте опцията "Показване на функции за разработчици на уеб".
Как да отворя конзолата в Safari? Можете да отворите конзолата с клавишната комбинация Cmd+Option+C или като щракнете върху "Explore item" (Изследване на елемент) в контекстното меню.
Какви са разликите в конзолата на Safari в сравнение с други браузъри? В Safari първият аргумент се извежда като текст, а следващите аргументи се извеждат като JavaScript обекти, като между извежданията не се използва интервал.
Мога ли да дебъгвам на моя iPhone със Safari? Да, като свържете вашия iPhone чрез USB и активирате опциите за дебъгване, можете да дебъгвате уеб страници на вашия iPhone.
Има ли същия анализ на производителността в Safari, както в Chrome?Да, функцията за времева линия в Safari позволява подобни анализи на производителността, но показването може да е различно.
