Web inspector safari iphone

Отладка в мобильном Safari

Есть несколько способов потестировать и подебажить сайт или веб-приложение в мобильном Safari:

• с помощью user agent в десктопном браузере;
• с помощью физического устройства – реального iPhone или iPad подключенному к Mac через USB-порт;
• с помощью виртуального устройства – симулятора iOS в Xcode.

Во всех трех случаях понадобится Mac и десктопный Safari со включённым Web Inspector.

Как включить Web Inspector в Safari

Если в воем Safari на Mac вы не можете найти веб-инспектор, значит его нужно включить. Для этого, из главного меню перейдите Safari – Preferences – Advanced (Safari – Настройки – Дополнения), отметьте пункт Show Develop menu in menu bar (Показывать меню Разработка в строке меню). В меню появится пункт Develop (Разработка), а в контекстном меню Safari, пункт для вызова веб-инспектора Inspect Element (Исследовать Элемент).

Горячие клавиши для вызова веб-инспектора: Opt + Cmd + I

Используя команды меню Develop, можно просматривать код веб-страниц, менять юзер агент, включать и отключать различные элементы страниц, чистить кэш и другое.

Отладка мобильного Safari с помощью User Agent и Web Inspector

Самый простой способ заглянуть «под капот» мобильного сайта – использовать веб-инспектор десктопного Safari, эмулируя необходимое iOS устройство. Способ не заменит честного тестирования на физических устройствах, так как не учитывает всех их особенностей, однако будет полезен при верстке или быстрой диагностики проблемы, когда реального устройства нет под рукой.

Чтобы эмулировать работу сайта на мобильном Safari, перейдите на сайт, включите режим адаптивного дизайна Develop – Enter Responsive Design Mode (Разработка – Войти в режим адаптивного дизайна), затем выберите устройство и при необходимости юзер агент (версию мобильного браузера).

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

Отладка мобильного Safari с помощью iPhone или iPad

Часто ошибка может воспроизводится на определенной версии браузера, операционной системе или устройстве. Поэтому способ тестирования и отладки на реальных iPhone или iPad самый «честный» из перечисленных. Однако он же самый неудобный и затратный: множество устройств надо иметь при себе, заряжать, поддерживать.

Чтобы провести отладку, подключите кабелем iPhone или iPad к Mac. Если появится сообщение Доверять этому компьютеру?, выберите Да, тем самым разрешив доступ к устройству.

В настройках мобильного Safari: Settings – Safari – Advanced (Настройки – Safari – Дополнения) включите Web Inspector (Веб-инспектор).

На устройстве в мобильном Safari перейдите на сайт, отладку которого хотите провести. Затем откройте Safari на Mac. Если устройство корректно подключилось, то в меню Develop (Разработка) появится пункт с названием вашего устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и вы сможете провести отладку.

Отладка мобильного Safari с помощью симулятора iOS в Xcode

Удобный способ для разработки и тестирования адаптивных сайтов и веб-приложений на устройствах максимально приближенных к реальным.

Симулятор все же не реальное устройство, за то не требуется держать «зоопарк» различных девайсов, а переключение между ними происходит в несколько кликов мыши.

Simulator – это приложение, которое поставляется в комплекте с Xcode. Скачайте его из магазина приложений .

Откройте Xcode. В меню выберите Xcode – Open Developer Tool – Simulator (Xcode – Открыть инструменты разработчика – Симулятор). Когда симулятор запустится, рекомендую сразу закрепить его в Dock, чтобы каждый раз не запускать Xcode.

Выберите устройство для эмуляции в меню Hardware – Device.

В устройстве на эмуляторе откройте Safari и перейдите на сайт. Затем откройте Safari на Mac. В меню Develop (Разработка) появится пункт с Simulator – Модель выбранного устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и можно будет провести отладку.

Полезные ссылки

На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.

Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.

Источник

Как активировать консоль отладки iPhone или веб-инспектор

До iOS 6 в веб-браузере iPhone Safari была встроенная консоль отладки, которую разработчики использовали для поиска дефектов веб-страниц. В последних версиях iOS вместо этого используется Web Inspector. Веб-инспектор используется веб-разработчиками для изменения, отладки и оптимизации веб-сайтов на устройствах Mac и iOS.

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

Информация в этой статье относится к iPhone и другим устройствам iOS с iOS 6 по iOS 12 и Mac на Mac OS X Leopard (10.5) и более поздних версиях, если не указано иное.

Активировать веб-инспектор на iPhone iOS 6 и более поздних версиях

По умолчанию веб-инспектор отключен, поскольку большинство пользователей iPhone не используют его. Тем не менее, разработчики могут активировать его в несколько коротких шагов. Вот как:

Нажмите значок « Настройки» на главном экране iPhone.

На iPhone с более ранней версией iOS откройте консоль отладки через « Настройки» > « Safari» > « Разработчик» > « Консоль отладки» . Всякий раз, когда Safari на iPhone обнаруживает ошибки CSS, HTML и JavaScript, детали каждого из них отображаются в отладчике.

Прокрутите вниз и коснитесь Safari, чтобы открыть экран со всем, что связано с веб-браузером Safari на вашем iPhone, iPad или iPod touch.

Прокрутите страницу вниз и коснитесь Дополнительно .

Источник

Safari Web Inspector Guide

Retired Document

Important: This document no longer represents the most current version of Safari developer tools. Links to downloads and other resources may no longer be valid. For new documentation on Safari Web Inspector, please visit Safari Developer Help .

Get Oriented

Before you start using Web Inspector, familiarize yourself with its organization and interface.

Enabling Web Inspector

To start using Web Inspector, you must first enable the Develop menu. To do so, enable the “Show Develop menu in menu bar” setting found in Safari’s preferences under the Advanced pane, as shown in Figure 1-1 .

Figure 1-1 The Advanced pane of Safari’s preferences

You can then access Web Inspector through the Develop menu that appears in the menubar, or by pressing Command-Option-I. You can also add the Web Inspector toolbar item to Safari’s toolbar by selecting View > Customize Toolbar.

Figure 1-2 The Web Inspector toolbar item

WebKit-based Apps

To enable the developer tools in a WebKit-based application other than Safari, enter the following into the Terminal:

Replace com.bundle.identifier with the bundle identifier of your app, and then launch your app. Web Inspector can now be accessed by a Control-click or right-click from within any web view. You must also enable contextual menus in your app.

Safari on iOS

You can use Web Inspector to debug web content on your device directly from your desktop.

Note: Web Inspector is available on iOS 6 and later.

To enable Web Inspector on iOS

Open the Settings app.

Scroll down and select Advanced.

Switch Web Inspector to ON.

After Web Inspector is enabled, connect your device to your desktop machine with a USB cable. The name of your device appears in the Develop menu of Safari.

Alternately, you can use iOS Simulator to take advantage of Web Inspector’s debugging capabilities, which comes free with Xcode from the Mac App Store. Use the same instructions, To enable Web Inspector on iOS , from within the iOS Simulator’s Settings app.

If you have a development provisioning profile installed on your device, you can even inspect the web content of any UIWebView object in your app. The name of your app will appear as a submenu under the name of your device. When debugging web content in a web view, Web Inspector behaves in the same manner as debugging web content in Safari.

Navigating Web Inspector

The toolbar icons listed in Table 1-1 are in order as they appear in Web Inspector, from left to right.

Resources navigation sidebar

Timelines navigation sidebar

Debugger navigation sidebar

Scope Chain details sidebar

Style details sidebar

Layers details sidebar

Node details sidebar

Resource details sidebar

Positioning Web Inspector

There are three positions that Web Inspector can take: docked to the bottom of the window, docked to the right of the window, or in its own window. When inspecting web content on OS X, Web Inspector is docked to the bottom of the window by default. You can detach Web Inspector into its own window by pressing the detach button (). This mode is especially advantageous when working on a computer with multiple displays.

Note: When inspecting web content on iOS, Web Inspector must be in its own window.

When in its own window, Web Inspector presents another button allowing you to dock Web Inspector to the right of the window. This is particularly useful for inspecting narrow web content on wide monitors. Press the Dock to Right button () to dock Web Inspector to the right side of the window.

Hold down the Option key to switch docking types.

Changing Toolbar Appearance

You can change the look and feel of the toolbar to better suit your liking. Depending on the size of your screen, you might want to adjust your toolbar to take up less space. Right-clicking anywhere on the toolbar invokes a contextual menu which allows you to change the layout and size of the toolbar icons.

Possible toolbar appearances are shown in Table 1-2 . By default, toolbar icons are presented with icons and text positioned vertically.

Источник

Web Inspector 4+

Developer Console for Safari

And a Dinosaur

• • #32 in Developer Tools
• • 4.5 • 29 Ratings

• • Free

Screenshots

Description

### Please refresh the page if you tap the «i» button and nothing happens ###

Web Inspector expands Mobile Safari with a set of web development tools:

DOM: View, inspect, edit, and search the elements that make up the DOM of a webpage.

Elements: See the details about the webpage’s nodes and styles.

Console: Type JavaScript commands in the console to debug, modify, and get information about your webpage. You can also see logs, errors, and warnings emitted from a webpage.

Network: See a detailed list of network requests and responses made from a webpage.

Resource: Find details about the data stored by a webpage such as cookies, local storage, and session storage.

Источник