MacOS: Активиране на Web Inspector в Safari

Ако искате да видите изходния код на уеб страница в Apple Safari за macOS Sierra, трябва да активирате инструмента Safari Web Inspector, използвайки следните методи.

Разработчиците на уеб браузъри като Apple, Google и др. предлагат изключително полезни инструменти за виждане на основния код. Разработчиците основно го използват за отстраняване на грешки и визуализиране на промени, направени на живо на уебсайт, без да нарушават действителния код на сървъра. Въпреки това, този инструмент вече е станал популярен сред създателите на съдържание и технически напредналите интернет потребители, които искат да редактират жив уебсайт за лични или професионални цели. Ако вие сте един от тях, прочетете статията до края, за да научите всичко за Safari Web Inspector и как да инспектирате елемент.

Съдържание

• 1 Какво е Safari Web Inspector?
• 2 Как да активирате Safari Web Inspector в Safari 10 и по-нови версии
• 3 Как да използвате Safari Web Inspector на macOS
• 4 Как да отворите Safari Web Inspector в по-стари версии на macOS
  • 4.1 Safari Web Inspector: Заключителни думи

Какво е Safari Web Inspector?

Web Inspector е част от пакета от инструменти за разработка, които Apple предлага на разработчиците на уебсайтове и приложения по целия свят. Инструментът е наличен както за macOS, така и за iOS устройства. Разработчиците могат лесно да модифицират, оптимизират и отстраняват грешки в уебсайтовете, за да постигнат максимална производителност за своите онлайн имоти.

Инструментът Web Inspector в Safari обединява повечето ресурси на уебсайтовете под единен интерфейс. Инструментът също така разделя ресурсите и техните параметри в специализирани раздели, така че да не се чувствате потопени в толкова много кодове и опции. Web Inspector също така ви дава времева линия на паметта на уебсайта, така че да можете да отстраните грешки в паметта лесно. Освен това, като разработчик, можете да коригирате и оптимизирате над 150 популярни CSS свойства, които са ви необходими за разработване на функционален уебсайт.

В инструмента Web Inspector получавате следните раздели за ресурсите на уебсайта:

• Елементи
• Конзола
• Източници
• Мрежа
• Времеви линии
• Хранилище
• Графики
• Слоеве
• Аудит

Как да активирате Safari Web Inspector в Safari 10 и по-нови версии

По подразбиране Apple Mac деактивира Web Inspector в Safari. Това е, за да се предотврати ненужно разсейване на интерфейса на уеб браузъра. Въпреки това, ако сте разработчик, създател на съдържание и опитен потребител на Mac, може да искате да активирате функцията, следвайки тези стъпки:

• Отворете приложението Safari на вашия MacBook или iMac.
• Убедете се, че сте кликнали върху браузъра, за да получите значката Safari в лентата с инструменти на Mac.

• Кликнете на Safari в горния ляв ъгъл и изберете Предпочитания.
• Алтернативно, можете да използвате клавишната комбинация Command + ,, за да покажете менюто с предпочитания.
• Докато сте в менюто Предпочитания, трябва да сте на раздела Общи.

• Навигирайте до раздела Разширени.
• Точно под опцията Proxy, трябва да видите отметката за Показване на менюто за разработка в менюто лента. Поставете отметката.

• Сега менюто за разработка на Safari ще се появи в лентата с инструменти на Mac.

Така можете да активирате функцията Web Inspector на вашия Mac браузър Safari. Стъпките са подобни за най-новата версия на macOS Ventura и по-ранни като Monterey, Big Sur, Catalina и т.н. до Jaguar.

Също така прочетете: Html 4.01

Досега научихте как да получите функцията Web Inspector в приложението Mac Safari. Научете по-долу как да го използвате на Safari за живи уебсайтове:

Как да използвате Safari Web Inspector на macOS

Намирайте по-долу стъпките за повикване на инструмента Web Inspector за уеб разработка, създаване на съдържание или каквито и да било други цели. В тази статия показвам стъпките, използвайки операционната система macOS Monterey. Въпреки това, стъпките са доста подобни от macOS Jaguar до Venture.

• Отворете Safari и посетете уебсайт, който искате да инспектирате.
• Има два начина да инспектирате основните HTML/CSS кодове на уебсайт или да направите промени с помощта на инструмента за разработчици на Apple Web Inspector. Те са:
  • Разработка > Покажи Web Inspector.
  • Щракнете с десния бутон > Инспектирай елемент.
• За да използвате първия, отидете на лентата с инструменти на Mac за браузъра Safari и кликнете на менюто Разработка.

• В контекстното меню, което се появява, кликнете на Покажи Web Inspector. Горното за това действие е Option + Command + I.

• Това ще отвори инструмента Web Inspector в долната половина на уеб браузъра. Кодът, който видите, е за целия URL или уеб страница, до която сте получили достъп.
• Ако искате да визуализирате основния код за конкретен елемент на уеб страницата, без да отваряте кода за цялата уеб страница, изберете елемента, който искате да инспектирате.

• Щракнете с десния бутон и изберете Инспектирай елемент в контекстното меню, което се отваря.
• Web Inspector на Safari ще се отвори.

• Но този път Safari ще ви отведе директно до основния HTML или CSS код на елемента, който проверявате.
• В този инструмент получавате HTML и CSS кодовете на елемента на уеб страницата, който сте инспектирали.

Също така прочетете: Technipages обяснява CSS

Как да отворите Safari Web Inspector в по-стари версии на macOS

Предположим, че сте на Mac по-стар от Jaguar и трябва да използвате инструмента Web Inspector. Ако не намерите горепосочените стъпки на този Mac, можете да изпълните проста команда, за да активирате Web Inspector. Ето как става:

• Отворете Приложения и отидете на папката Утилити.
• Вътре в Utility, трябва да намерите Terminal. Това е командният ред на компютри с macOS.
• Сега стартирайте интерфейса на командния ред Terminal и напишете следната проста команда:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Натиснете Return, за да изпълните командата.
• Сега можете да отворите уеб страница в Safari и да щракнете с десния бутон или да задържите бутона на мишката навсякъде на страницата, докато се появи контекстното меню.
• Там кликнете на опцията Инспектирай елемент, за да видите основните CSS и HTML кодове на уебсайта.

Safari Web Inspector: Заключителни думи

Така че, това са методите за лесно активиране на Web Inspector в Safari. Можете да следвате стъпките сами и да започнете с разработката или създаването на съдържание за няколко минути. Научихте методите за активиране на Inspector Element на Safari за нови и стари версии на macOS. Ако съм пропуснал някой метод за получаване и използване на Web Inspector, не се колебайте да ми кажете, като оставите коментар по-долу.

Следващото е най-добрите приложения за кодиране за iPad.