Как включить инспектор в сафари
Перейти к содержимому

Как включить инспектор в сафари

  • автор:

Как в Safari включить инструменты разработчика

Если необходимо отладить сайт на маке в сафаре, а инструментов для разработчика нет — их необходимо включить в настройках.

В браузере выберите меню и нажимаем «Настройки». В появившемся окне кликните «Дополнения» и в самом низу ставим галочку «Показать меню «Разработка» в строке меню».

После всего этого в меню браузера появится пункт «Разработка». Он дает браузеру много дополнительных функций, включая веб-инспектор, консоль ошибок, инструмент отладки JavaScript, возможность включать/выключать разные элементы страницы и много другое. Конечно же нельзя забывать, что все необходимо стараться писать без ошибок, что бы отладчик не понадобился.

Веб-инспектор Safari

В браузер Safari включено несколько средств для разработчика, позволяющих упростить создание и отладку сайта. К примеру, через Safari можно просматривать, как сайт будет выглядеть на iPhone и iPad. Для этого всего лишь требуется указать соответствующий пользовательский агент через меню Разработка (рис. 7.51).

Выбор пользовательского агента

Рис. 7.51. Выбор пользовательского агента

Также в Safari имеется прекрасный инструмент для отладки HTML и CSS кода под названием веб-инспектор. Для его вызова выберите меню Разработка > Показать веб-инспектор или воспользуйтесь комбинацией клавиш Ctrl + Alt + I . Если у вас нет этого пункта меню, зайдите в настройки браузера, выберите панель Дополнения и поставьте галочку в пункте «Показать меню Разработка в строке меню».

Веб-инспектор выводит список ресурсов, найденных на веб-странице — документы, таблицы стилей, изображения и скрипты. Позволяет увидеть и найти код веб-страницы и стилевые свойства элементов. Интерфейс веб-инспектора продемонстрирован на рис. 7.52. Из всего богатства возможностей программы для вёрстки нас интересует только меню Элементы.

Веб-инспектор

Рис. 7.52. Веб-инспектор

По своему интерфейсу веб-инспектор напоминает Firebug — в левой панели показан HTML-код текущего документа, в правой панели — стиль выбранного элемента. Любой элемент на странице можно выбирать не только через код, но и с помощью инструмента он позволяет выбирать элемент простым щелчком по нему.

Набор стилей в инспекторе представлен в виде раскрывающегося списка, это позволяет компактно включить большой объём информации. Первый пункт «Вычисленный стиль» (рис. 7.53) содержит стиль элемента, который устанавливает браузер на основе собственного стиля, учёта наследования и добавленных свойств.

Вычисленный стиль

Рис. 7.53. Вычисленный стиль

Эти стили приведены для информации, менять что-либо в этом пункте нельзя. По цвету, если он представлен, можно щёлкнуть и изменить его формат представления на шестнадцатеричный, RGB или HSL.

Следующий пункт «Атрибут стиля» показывает встроенный стиль, т. е. тот, который задан через атрибут style . Пункт будет пустовать, если такого стиля нет.

Нижележащая группа пунктов показывает стиль текущего элемента и взаимосвязанных с ним элементов (рис. 7.54).

Стиль элемента

Рис. 7.54. Стиль элемента

Любое свойство в этом списке можно отредактировать, щёлкнув по нему. Универсальные свойства вроде padding или margin выводятся в виде раскрывающегося списка, в котором перечислены отдельные свойства, такие как padding-left , padding-top и др. Напротив каждого свойства стоит галочка, позволяющая быстро отключать свойство. Добавить новое правило можно с помощью меню скрытым за шестерёнкой в правом верхнем углу панели (рис. 7.55).

Меню для добавления новых правил

Рис. 7.55. Меню для добавления новых правил

Пункт «Размеры» демонстрирует блочную модель элемента — ширину и высоту элементов, а также значения отступов, границ, полей и позиционирования (рис. 7.56).

Размеры элемента

Рис. 7.56. Размеры элемента

Только надо учитывать, что отступами здесь называются свойства padding , а полями margin , т.е. наоборот, а не в привычном понимании.

Данный пункт можно применять не только для определения нужных значений, но и для их установки. Достаточно дважды щёлкнуть по нужному значению и ввести число. Указывать единицы измерения не нужно, по умолчанию принимаются пикселы.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

DevTools: как открыть инструменты разработчика в браузере и почему они делают работу эффективнее

DevTools: как открыть инструменты разработчика в браузере и почему они делают. главное изображение

DevTools (инструменты разработчика) доступны во всех современных браузерах и полезны по нескольким причинам. Например, их можно использовать для отладки кода и тестирования изменений в HTML, CSS и JavaScript в режиме реального времени. В этой статье расскажем, как открывать DevTools в разных браузерах и на примере разберем, какие возможности они предоставляют.

Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:

  1. Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
  2. Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
  3. Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.

Сначала разберемся, как открыть консоль в разных браузерах.

Профессия «Инженер по тестированию»

  • Смените профессию за 4 месяца — короткий путь в IT
  • Познакомьтесь с этапами разработки и жизненным циклом ПО
  • Узнайте всё о техниках тест-дизайна
  • Разберитесь с системами управления тестированием и системами баг-трекинга
  • Научитесь работать с API и базами данных

Google Chrome

  1. Нажмите значок с тремя точками в правом верхнем углу окна браузера.
  2. В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
  3. После этого в правой части экрана откроется раздел с DevTools.

Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).

Microsoft Edge

  1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
  2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
  3. После этого в правой части экрана откроется раздел с DevTools.

Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).

Mozilla

  1. Выберите меню-гамбургер в верхнем углу экрана.
  2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
  3. После этого в нижней части экрана откроется раздел с DevTools.

Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).

Opera

  1. Щелкните на значок Opera в верхнем левом углу окна браузера.
  2. Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
  3. После этого в правой части экрана откроется раздел с DevTools.

В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command+option+I на Mac).

Safari

  1. Выберите меню Safari в верхнем левом углу экрана.
  2. Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
  3. Выберите «Показать веб-инспектор» в раскрывающемся меню .
  4. После этого откроется новое окно с инструментами разработчика.

Горячие клавиши для Safari — Command + option+ I.

Яндекс.Браузер

  1. Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
  2. Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
  3. После этого переходим к пункту «Инструменты разработчика» в следующем меню.

Для запуска консоли также можно нажать Ctrl + Shift + I.

Как использовать консоль

Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.

Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2 , так и большие функции.

Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2 DevTools сразу выдаст ответ 4 . Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:

'hexlet'.toUpperCase() // => HEXLET [1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16] 

Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:

document.querySelectorAll('a').length // => 73 

Кроме того, DevTools позволяет создавать переменные. Пока страница существует, созданные переменные будут существовать и вы можете взаимодействовать с ними в будущем:

const linksCount = document.querySelectorAll('a').length // => undefined 2 + 2 // => 4 linksCount // => 73 linksCount * 2 // => 146 

Однострочные выражения и инструкции — это довольно просто. Что, если хочется создать функцию, а нажатие на Enter сразу выполняет код? Для многострочных выражений используется перенос с помощью Shift + Enter. Эта опция позволяет писать и использовать красивые функции, которые, как и переменные, могут быть использованы в текущей сессии:

const getElementCount = (tag) =>  const elementCount = document.querySelectorAll(tag).length; return `Найдено $elementCount> элементов $tag>` > getElementCount('div') // => 'Найдено 105 элементов div' 

Это лишь часть возможностей, которые дает использование вкладки Console в различных браузерах. Но этого достаточно, чтобы сделать свою работу эффективнее.

Профессия «Инженер по тестированию»

  • Смените профессию за 4 месяца — короткий путь в IT
  • Познакомьтесь с этапами разработки и жизненным циклом ПО
  • Узнайте всё о техниках тест-дизайна
  • Разберитесь с системами управления тестированием и системами баг-трекинга
  • Научитесь работать с API и базами данных

Как использовать веб-инспектор в Safari на iOS и macOS

Как использовать веб-инспектор в Safari на iOS и macOS

Мобильного трафика становится всё больше, люди активно общаются и покупают в интернете, используя смартфон. Компьютеры остаются только для работы и решения сложных задач.

Разработчики часто проверяют отображение контента на мобильных устройствах с помощью эмуляторов. Это софт, который позволяет приблизительно посмотреть, как отображается сайт на iPhone. При этом пользователь сидит за компьютером и управляет виртуальным айфоном в режиме реального времени.

В статье расскажем, как пользоваться консолью разработчика на смартфоне, чтобы не тратить время на эмуляторы.

Веб-инспектор в Safari

Если вы по работе часто используете панель разработчика, то наверняка устали от того, что напрямую посмотреть исходный код не получается. Доступ к консоли на мобильном Safari осуществляется через браузер на Mac.

iCloud профиль

Чтобы использовать веб-инспектор в Safari на iOS, необходимо привязать к телефону и Mac одинаковый профиль iCloud и настроить синхронизацию.

macOS
  1. Откройте настройки.
  2. Найдите Apple ID и запишите идентификатор учётной записи.
  3. Выберите iCloud и включите Safari на панели справа.
  4. Зайдите в настройки Safari и выберите вкладку «Дополнительно».
  5. Включите опцию «Показать меню разработки в строке меню».

Safari macOS

iOS
  1. Зайдите в настройки смартфона.
  2. Выберите аккаунт в верхней части меню.
  3. Убедитесь, что на телефоне привязан тот же Apple ID, что и на Mac.
  4. Найдите iCloud и включите его для Safari.
  5. Вернитесь на главный экран настроек и выберите пункт «Общие».
  6. Сбросьте местоположение и настройки конфиденциальности.

Включение веб-инспектора

Все готово к подключению iOS к Mac для синхронизации Safari.

  1. Подключите iPhone или iPad к Mac по кабелю.
  2. Согласитесь с запросом о доверии и введите код доступа.
  3. Откройте браузер на iPhone и зайдите на сайт, который нужно отладить
  4. Запустите Safari на Mac, выберите пункт «Разработка».
  5. В подменю должен появиться iPhone. Выберите его и зайдите на сайт.
  6. Откроется новое окно с веб-инспектором.

Safari

Решение проблем

В некоторых случаях инструкция не сработает. Это проблема macOS, которую можно решить. Выполняйте действия ниже после того, как шаги, описанные выше, не дали результата.

  1. Отключите iPhone от компьютера
  2. Зайдите в настройки смартфона.
  3. Сбросьте данные местоположения и конфиденциальности.
  4. Отключите Wi-Fi на iPhone, включите Bluetooth и мобильную точку доступа.
  5. Подключите смартфон к компьютеру.
  6. Создайте доверенную связь.
  7. Откройте Safari на iPhone и посетите сайт, который хотите отладить.
  8. На Mac тоже запустите браузер. В разделе «Разработка» выберите iPhone и пункт «Подключиться через сеть».
  9. Вернитесь в «Разработку», затем выберите пункт iPhone и сайт, который открыт на iPhone.

Safari

Отладка сайта на iOS может пригодиться разработчикам и тестировщикам. Каждый раз подключаться через Mac неудобно, но других стандартных решений нет. Старайтесь всегда устанавливать последнюю версию Safari для iPhone и Mac, чтобы защититься от различий в отображении контента.

Еще по теме:

  • Как открыть веб-страницу из Safari в другом браузере на Mac
  • Как навсегда отключить режим приватного просмотра в Safari на iOS 13
  • Как удалить кэш в Safari на iPhone и iPad

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *