Веб инспектор 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 – Модель выбранного устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и можно будет провести отладку.

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

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

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

Источник

Web Inspector 4+

Developer Console for Safari

And a Dinosaur

• • #30 in Developer Tools
• • 4.5 • 31 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.

Источник

Inspect Browser 17+

Web Inspector and Dev Tools

Parallax Dynamics Inc.

Designed for iPad

• • #12 in Developer Tools
• • 4.3 • 94 Ratings

• • $7.99
  • Offers In-App Purchases

Screenshots

Description

Web development tools for iOS.

Inspect is a web inspector for iOS that provides desktop-class developer tools, right in the app. No need for remote debugging, connecting to a desktop, proxies, or remote systems.

Included are:
— JavaScript console.
— HTML element inspection and editing (with live preview).
— CSS inspection and editing (with live preview).
— View element details: CSS rules, JavaScript properties, dimension statistics, and more.
— Open files and folders from other apps (like Working Copy), or from iCloud to test locally.
— Network panel, displaying page headers and XHR requests.
— Responsive design tools: View your site with a variety of mobile and desktop sizes and orientations, including support for custom sizes and user agents.
— Cookies, local storage, and session storage inspector and editor.
— Resource graph.
— View raw page source.
— Control over browser operation: disable JavaScript, cache, and clear cache and cookies to test various operations and states.
— Save a screenshot of your site, including the ability to save the full page.

What’s New

Happy Summer 2021!

Inspect v2.1 is mostly focused on refinements, but we have some new features as well.

Highlights:
— New IndexedDB inspector added to the «Storage» panel.
— Context menus added in several places — console items, elements, and page refresh button.
— Support for ShadowRoot in the elements panel.
— Configurable search engine, and @keywords to quickly search other sites.
— CSS and XPath search support in Elements panel.
— Performance and rendering improvements, and numerous bugfixes.

As usual, a full list of changes is available in the «What’s New» link from the homepage.

Ratings and Reviews

I sit at work all day debugging on 3 large screen monitors. I chuckled a bit when I first saw this app but seriously, WOW! The mere fact that I can’t inspect a nodes box model, change some css properties, sort/analyze network requests, view/edit local/session storage is pretty ridiculous for a phone app. These guys did a phenomenal job incorporating webkits’ debugging capability’s into a small screen. Although I laugh at the idea of actually using this on my iPhone, I could see it being actually useful for those on an iPad. That being said, actual developers probably don’t own iPads but rather surfaces or chrome books because Apple won’t expose runtimes or compilers on their mobile or tablet devices. hence why you can’t set breakpoints in scripts in this app.

Some of the panels & windows can be a little finicky operating but considering the capabilities of this app I’d find it hard to believe anyone could do it better. A nice feature would be a json/js beautifier when viewing in sources tab. Keeping in mind that the compiler is off limits, I would think it’s definitely possible to run scripts through a static syntax highlighter for easy viewing.

Impressed

Based on my first 10 minutes, color me impressed. As a front end developer who spends a great deal of time debugging in Chrome & Firefox web inspectors, I found it intuitive and useful. Was able to successfully run a simple jQuery method in the console and toggle CSS attributes exactly like in a desktop browser.

Some less than intuitive behaviors I observed: unexpected pinch-to-zoom action (the whole viewport frame would shrink rather than just the page), couldn’t scroll the page in Inspect mode, and there was some Line 0 script errors w/o details. Any of these could be due to my lack of experience with the app but they seemed like they could be more obvious, if so.

Regardless, I consider it worth the cost as a quick and easy way to do some debugging on iOS (I tried it on iPhone Xs, which made everything crowded, but entirely useful in a pinch.)

This app is exactly what I have been looking for.

I will be giving a more thorough review at a later time but I wanted to immediately provide a comment here to express my views on this app.

This is exactly what I’ve been looking for. Needless to say, an iPad will not replace a laptop/desktop when it comes to web development but man does this app provide me the extra bit of convenience I need to view a page source, execute functions from within the console, and jam out a bit of css here and there on existing or new elements!

There are times when I cannot be whipping out a laptop just to do these little bit of “testing and poking” and I have always been bummed that such an app like this did not exist (or so I thought).

To the developer(s):
Please implement a way for me to obtain a selector for a chosen element, similar to how in Google Chrome we can right click > copy > copy selector (or JavaScript path). Also, can you provide me a way to view the “Elements and console” in the same panel?

Your app is already a 5 star app, I love it. If you could implement the above two things, then this would really be more than I could have hoped on an iPad (without using Jump, Chrome RDT, MS RDT to connect to my desktop).

Thank you so much for coming up with this app. I do hope you find this review helpful.

App Privacy

The developer, Parallax Dynamics Inc. , indicated that the app’s privacy practices may include handling of data as described below. For more information, see the developer’s privacy policy.

Data Not Collected

The developer does not collect any data from this app.

Privacy practices may vary, for example, based on the features you use or your age. Learn More

Источник

Web Inspector +4

And a Dinosaur

• • Nº 16 em Para desenvolvedores
• • 4,6 • 7 avaliações

• • Grátis

Capturas de tela

Descrição

### 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.

Источник