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 + , чтобы открыть меню настроек.
• Находясь в меню Настройки, вы должны находиться на вкладке Основные.

• Перейдите на вкладку Дополнительно.
• Чуть ниже параметра Прокси вы должны увидеть флажок для Показать меню разработчика в строке меню. Установите этот флажок.

• Теперь меню Разработчика Safari появится на панели инструментов Mac.

Вот как вы можете активировать функцию Web Inspector в вашем браузере Safari. Шаги аналогичны для самой последней версии macOS Ventura и более ранних, таких как Monterey, Big Sur, Catalina и т. д., до Jaguar.

Также читайте: Html 4.01

До сих пор вы узнали, как получить функцию Web Inspector в приложении Safari на Mac. Узнайте ниже, как использовать ее на 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. Вот как это сделать:

• Откройте Программы и перейдите в папку Утилиты.
• Внутри утилит вы должны найти Терминал. Это командная строка компьютеров на macOS.
• Теперь запустите интерфейс командной строки Терминал и введите следующую команду:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Нажмите Return, чтобы выполнить команду.
• Теперь вы можете открыть веб-страницу в Safari и щелкнуть правой кнопкой мыши или удерживать кнопку мыши в любом месте страницы, пока не появится контекстное меню.
• Там щелкните опцию Проверить элемент, чтобы просмотреть исходные CSS и HTML коды веб-сайта.

Safari Web Inspector: Заключительные слова

Итак, это методы для легкого включения Web Inspector в Safari. Вы можете следовать шагам самостоятельно и начать разработку или создание контента всего за несколько минут. Вы узнали методы активации инструмента проверки элемента в Safari для новых и устаревших версий macOS. Если я пропустил какой-либо метод, чтобы получить и использовать Web Inspector, не стесняйтесь сообщить мне об этом, оставив комментарий ниже.

Следующий материал — лучшие приложения для кодирования на iPad.