Android browser with developer tools

Браузеры для Android с функцией исследования элемента

Исследование элемента (оно же веб-инспектор) – это полезная функция, которая существует во всех ПК-браузерах и позволяет отлаживать верстку в режиме «Live» без внесения изменений непосредственно в файлы сайта.

Простыми словами – у вас есть сайт, и вы визуально (на своей стороне) можете изменить цвет, например, кнопки или размер шрифта без изменений самого сайта. Помимо этого, вы можете исследовать тот или иной элемент на странице, просмотреть его верстку и ознакомиться с его стилями.

С ПК в принципе все понятно, ведь именно на них идет основная часть всех разработок. Но есть умельцы, кто программирует или создает сайты на смартфонах/планшетах. Казалось бы неким безумием (сами понимаете удобство и возможности смартфонов), но вполне имеет место быть. Признаюсь, я сам на начальном этапе своего обучения пробовал создавать простенькие игры на телефоне с помощью Basic, но сейчас не об этом.

Поискав информацию в Интернете, я нашел несколько браузеров для Android, которые позволяют в некоторой степени исследовать элементы на том или ином сайте, о которых я вкратце и с удовольствием вам расскажу.

HTML/CSS Website Inspector – мощный браузер с веб-инспектором для Android

Многофункциональный браузер, содержащий в себе необходимые инструменты для веб-разработчика.

Отличительными особенностями являются:

1. Поиск и редактирование HTML-элементов.
2. Веб-консоль. Позволяет выполнить JavaScript.
3. Просмотр всего исходного кода сайта с возможностью его редактирования.
4. Функция исследования элемента. Позволяет показать код элемента, который выбран на странице.

1. Реклама в приложении.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Помимо этого, хочется отметить, что на момент написания статьи приложение активно развивалось автором и имело более 1 000 000 установок.

Поддержка Android 4.1+. Интерфейс на английском языке.

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Droid Web Inspector – браузер с полным набором инструментов разработчика для Android

Это приложение должно было быть первым в списке ввиду своего богатого функционала, но тогда бы вы не обратили внимание на другие, ничуть не уступающие ему браузеры.

Браузер с консолью разработчика, в функции которой входит:

1. Очистка кэша.
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Полный исходный код страницы (HTML) с функцией отслеживания и редактирования стилей элементов.
4. Отображение дерева DOM.
5. Отслеживание JS- и CSS-файлов с возможностью их редактирования.
6. Отображение сетевых ресурсов (изображения, скрипты, стили и прочее).

1. Не идет на старых версиях Android.
2. Отсутствует исследование отдельных элементов. Возможно, баг моего телефона, но все элементы доступны в общем коде HTML.

В отличие от приложения Web Inspector (Open Source), на момент написания статьи имело всего чуть более 5 000 установок, но, несмотря на это, активно развивалось автором.

Поддержка Android 5.0+. Интерфейс на английском языке.

Источник

Android browser with developer tools

Краткое описание:
Мобильный браузер со встроенными инструментами разработчика, прокси, веб-инспектором и JS-консолью

Next-gen browser with advanced features for power users & developer tools.

⚡Browser DevTools:
Use your own proxies
● Use free or paid proxies from any provider
● HTTP, HTTPS, SOCKS4, SOCKS5 proxies
● Unblock websites
● Mask your IP
● Hide browser location

Inspect web elements
● Inspect and live edit individual web elements and their attributes with the built-in web dom inspector

View website network traffic (Early beta)
● View web resource, ajax, fetch api network traffic
● Note this is in BETA, no other functionality is available at this point apart from viewing network filenames

Run Javascript code on any site
● Write efficient Javascript code with built-in IntelliSense JS autocomplete engine
● Inject JS
● View console logs
● Debug website problems

Switch User Agent
● Dynamically make your browser appear as another device (e.g Nintendo Switch, Samsung TV, etc.)

Analyze website source code
● View web site source code in a highlighted code editor
● Beautify minified HTML and javascript code

Требуется Android: 5.0+
Русский интерфейс: Нет

Скачать:
Версия: 1.0.6 Dev_Browser_1.0.6_arm_en_ru_xxhdpi.apk ( 15.16 МБ )

Источник

Есть ли на Андроиде браузер с инструментами разработчика?

Есть ли на Андроиде браузер с инструментами разработчика? Щоб веб-девелопить прямо с телефончика)

Про веб браузер не знаю, а для явы есть aide (сам не пользовался, но его активно продвигали).
Для других языков есть vim.

Собственно мне больше всего нужен инспектор DOM

не, мне сейчас не это надо

редакторов-то полно, мне инспектор нужен..

Тут хз, в этой теме я полный ноль.

Я не в курсе, но гугл в первых же строчках выдает какой-то dom-viewer и плагин для лисы.

Dom-viewer — просто вьюер. Не инспектор. Нельзя выбрать элемент в браузере и посмотреть его код — только весь код целиком.
Плагин для лисы — для удалённой отладки по юсб или вайфай, т.е. нужен комп и обычная, не мобильная лиса. Для хрома такого же плана видел. Но мне надо прямо с телефона

HTML/CSS Website inspector, кажись, то что нужно!

поставь какой-нибудь RDP/VNC клиент для Андроида, подключись им к обычному компьютеру, на компьютере запусти обычный Хромиум

Нет. Или ты возомнил, что андроид полноценная ОС? Бу-га-га 🙂

подключаешь телефон кабелем к компу в режиме разработчика, в google chrome (на компе) набираешь chrome://inspect/#devices, дальше думаю сам разберешься.

поставь какой-нибудь RDP/VNC клиент для Андроида, подключись им к обычному компьютеру, на компьютере запусти обычный Хромиум

Можно запустить chromium в linux deploy каком-нибудь, чтобы всё локально было.

Мужик, спасибо огромное!

Вот этому мужику ещё более огромная благодарность!

Пришлось погуглить как это всё подключить, но в итоге получилось. Только я на Винде, а не на Линуксе. Если кому нужно — вот более подробная инструкция:

1. На Android-телефоне Настройки-О телефоне-Номер сборки нажать несколько раз для открытия в Настройках пункта Для разработчиков. 2. Настройки-Для разработчиков-Отладка по USB включить. 3. На компьютере установить ADB драйвер http://adbdriver.com/downloads/ 4. Поключить телефон к компьютеру по USB. 5. Включить Google Chrome на телефоне и на компьютере, войти в свой Google-аккаунт. 6. На телефоне открыть нужный сайт. 7. На компьютере Инструменты разработчика-Меню (три точки)-More tools-Remote devices-Devices-Имя вашего телефона-Кнопка Inspect напротив нужной вкладки. 8. Пользуемся! По-умолчанию левый клик имитирует нажатие пальцем на экран, а если нажать на стрелку в квадратике или Ctrl+Shift+C, то можно выбрать на экране интересующий элемент, для просмотра его кода.

Я тоже хотел ему предложить подобное. Но он хочет всё(!) на телефоне.

Re: Вот этому мужику ещё более огромная благодарность!

Точно извращенец. На фига через телефон смотреть в компе? Есть же у хрома эмулирование разных девайсов. Ну выставил параметры своего телефона и вперед

Ситуэйшн такой:
Девелопинг пока параллельно основной работе. Но иногда требуется что-то подправить/посмотреть срочно.
В рабочий комп втыкать нельзя ничего незарегистрированного. Вообще.
Ноуты/нетбуки/планшеты запрещены. Смартфоны пока не отбирают

Источник

Remote debug Android devices

Published on Monday, April 13, 2015

Technically, I’m a writer

Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to:

• Set up your Android device for remote debugging, and discover it from your development machine.
• Inspect and debug live content on your Android device from your development machine.
• Screencast content from your Android device onto a DevTools instance on your development machine.

Figure 1. Remote Debugging lets you inspect a page running on an Android device from your development machine.

# Step 1: Discover your Android device

The workflow below works for most users. See Troubleshooting: DevTools is not detecting the Android device for more help.

Open the Developer Options screen on your Android. See Configure On-Device Developer Options.

Select Enable USB Debugging.

On your development machine, open Chrome.

Go to chrome://inspect#devices .

Make sure that the Discover USB devices checkbox is enabled.

Figure 2. The Discover USB Devices checkbox is enabled

Connect your Android device directly to your development machine using a USB cable. The first time you do this, you usually see that DevTools has detected an offline device. If you see the model name of your Android device, then DevTools has successfully established the connection to your device. Continue to Step 2.

Figure 3. The Remote Target has successfully detected an offline device that is pending authorization

If your device is showing up as Offline, accept the Allow USB Debugging permission prompt on your Android device.

# Troubleshooting: DevTools is not detecting the Android device

Make sure that your hardware is set up correctly:

• If you’re using a USB hub, try connecting your Android device directly to your development machine instead.
• Try unplugging the USB cable between your Android device and development machine, and then plugging it back in. Do it while your Android and development machine screens are unlocked.
• Make sure that your USB cable works. You should be able to inspect files on your Android device from your development machine.

Make sure that your software is set up correctly:

• If your development machine is running Windows, try manually installing the USB drivers for your Android device. See Install OEM USB Drivers.
• Some combinations of Windows and Android devices (especially Samsung) require extra set up. See Chrome DevTools Devices does not detect device when plugged in.

If you don’t see the Allow USB Debugging prompt on your Android device try:

• Disconnecting and then re-connecting the USB cable while DevTools is in focus on your development machine and your Android homescreen is showing. In other words, sometimes the prompt doesn’t show up when your Android or development machine screens are locked.
• Updating the display settings for your Android device and development machine so that they never go to sleep.
• Setting Android’s USB mode to PTP. See Galaxy S4 does not show Authorize USB debugging dialog box.
• Select Revoke USB Debugging Authorizations from the Developer Options screen on your Android device to reset it to a fresh state.

If you find a solution that is not mentioned in this section or in Chrome DevTools Devices does not detect device when plugged in, please add an answer to that Stack Overflow question, or open an issue in the webfundamentals repository!

# Step 2: Debug content on your Android device from your development machine

Open Chrome on your Android device.

In the chrome://inspect/#devices , you see your Android device’s model name, followed by its serial number. Below that, you can see the version of Chrome that’s running on the device, with the version number in parentheses. Each open Chrome tab gets its own section. You can interact with that tab from this section. If there are any apps using WebView, you see a section for each of those apps, too. In Figure 5 there are no tabs or WebViews open.

Figure 4. A connected remote device

In the Open tab with url text box, enter a URL and then click Open. The page opens in a new tab on your Android device.

Click Inspect next to the URL that you just opened. A new DevTools instance opens. The version of Chrome running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Chrome, the DevTools instance may look very different than what you’re used to.

# More actions: pause, focus, reload, or close a tab

Below the URL you can find a menu to pause, focus, reload or close a tab.

Figure 5. The menu for pausing, reloading, focusing, or closing a tab

# Inspect elements

Go to the Elements panel of your DevTools instance, and hover over an element to highlight it in the viewport of your Android device.

You can also tap an element on your Android device screen to select it in the Elements panel. Click Select Element on your DevTools instance, and then tap the element on your Android device screen. Note that Select Element is disabled after the first touch, so you need to re-enable it every time you want to use this feature.

# Screencast your Android screen to your development machine

Click Toggle Screencast to view the content of your Android device in your DevTools instance.

You can interact with the screencast in multiple ways:

• Clicks are translated into taps, firing proper touch events on the device.
• Keystrokes on your computer are sent to the device.
• To simulate a pinch gesture, hold Shift while dragging.
• To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer.

Some notes on screencasts:

• Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Chrome address bar, the Android status bar, or the Android keyboard.
• Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of your page’s performance.
• If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast.

Last updated: Monday, April 13, 2015 • Improve article

Источник