Debug javascript on android

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

Источник

Отладка javascript на мобильных устройствах

Недавно возникла у меня необходимость создать небольшое html5 приложение для смартфонов.
Почему html5? Все предельно просто: при наличии мобильной версии, сайт можно за пару дней допилить до необходимого состояния или же написать с нуля (что не так важно) и в дальнейшем заниматься поддержкой только одной версии кода, не распыляясь на различные платформы.

Для сборки приложения я использовал Phonegap (не буду вдаваться в описания тулзы, так как статей на хабре хватает). HTML, javascript вроде был отлажен на десктопе, успешно собран и залит на тестовые смартфоны, однако не все так гладко. В процессе тестирования мне пришлось столкнуться с несколькими глюками свойственными, только конкретным платформам и браузерам ( Скажем в android 2.1-2.2 если вставить input с обработчиком какого-либо события в определенное место DOM, баузер будет просто падать и главное тут ничего не поделать, это чисто баг андройда и его браузера, эта проблема «попортила мне не мало крови», так как в начале я не понимал что вообще происходит и грешил на кривой phonegap, пока не подключился дебагером и не посмотрел что там происходит).

проблема встала довольно реальная, как посмотреть что происходит в мобильном браузере, какие ошибки возникают и когда. На хавбе я нашел решение через window.onerror но по мне такой подход хорош для отлова багов в длительном периоде, когда же у тебя что-то не работает конкретно сейчас, хочется иметь в распоряжении более удобные инструменты

Для отладки html приложения под андройд неплохо подойдет Eclipse (скорей всего вы используете именно его для сборки приложения). Если у вас установлен android sdk и плагин для eclipse ( если нет, пройдя по ссылочке это можно исправить ), то во вьюшках можно найти logCat, который при подключении к устройству будет выводить все полученную информацию, в том числе и сообщения console.log() выводимые javascript’ом + выводятся все действия производимые с телефоном, это помогает отлаживать если есть какие-то проблемы с обработкой событий.
LogCat можно кстати использовать и без эклипса, это инструмент android sdk, но по мне такой вариант не совсем удобен.

Для iphone есть неплохая утилитка weinre, кстати её рекомендуют ребятки из phonegap. Более конктено с ней можно ознакомиться по сылке, но суть такая: вы скачиваете программку, запускаете и она начинает слушать порт компьютера. В код вашего приложения добавляете js, который подгружается запущенного вами сервера, конектится к нему и начинает общаться с приложением. Далее вся отладка происходит по стандартному сценарию в отладчике хрома. который запускает программка, имхо это самый удобный вариант. Краткое пособие по запуску:

1. скачиваем и распаковываем архив
2. устанавливаем
3. идем в папочку

/.weinre/ (если её нет создаем) там создаем файл server.properties с таким текстом
настройки конечно можно поменять под себя.

далее узнаем ip своей машинки и добавляем в наше приложение эта строчка будет подгружать js код для общения с сервером weinre. Соответственно надо чтобы телефон и компьютер были в одной сети и a.b.c заменить на свой ip. Запускаем приложение в телефоне или симулятор и начинаем отлаживать в привычной среде.

Мне кажется что можно было бы поэкспериментировать и внедрить выдаваемый ею код в приложение под android, хотя у меня не дошли пока руки покопаться в js для того, чтобы понять, что там используется.

В заключении хотел бы поведать вам ещё про один интересный способ, недавно наткнулся на него, принцип работы схож с weinre. Есть такой сайтик jsconsole.com, который предоставляет инструмент, с помощью которого можно достучаться до html на удаленном устройстве и получать от туда сообщения через console.log, а также работать с его DOM деревом. Это конечно не полноценный дебагер, как в случае с wienre но простота и доступность способа заставляет обратить на него внимание! На сайте прекрасная документация и пара обучающих видео, так что проблем с использованием ни у кого возникнуть не должно.
Если в двух словах то вам надо зайти на сайт, вбить команду «:listen», скопировать выданный скрипт в ваш сайт или приложение и вуаля — все работает.

Это конечно не все возможные варианты, мне попадалось описание и других, но проблематичность их использования заставила исключить их из списка. Если кто-то может дополнить список достойным кандидатом, то я только за! (включу его в статью с копирайтом автора)

Источник

Отладка CSS и JavaScript на Android смартфоне

Статья по мотивам вот этого мануала. Если вам лень читать и заниматься этим, то вот маленький спойлер: мобильные устройства не умеют реагировать на события mouseenter, mouseleave и им подобные, т.к. там нет мышки. Поэтому нужно обрабатывать события тачскрина: touchstart, touchmove, touchend. Ещё одно отличие — события blur, focus могут срабатывать не тогда, когда вы ожидаете, либо вообще отсутствовать.

DevTools в современных браузерах позволяет переключиться в адаптивный режим и весьма неплохо справляется со своей задачей. Но иногда случается так, что где-то что-то на мобильном работает не так, как на десктопе. В таких случаях понять в чём дело, а не тыкать пальцем в небо, поможет отладка JavaScript прямо на мобильном. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.

1. Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять с сайта Android.

Включаем на телефоне режим отладки. Для этого в настройках переходим в меню разработчика. Если его нет — переходим в раздел «О телефоне» и кликаем несколько раз по пункту «Номер сборки». Затем в самом меню, наверху, активируем режим, находим пункт «Режим отладки» и активируем его тоже.

Включаем режим разработчика

Переходим в меню разработчика

Включаем отладку по USB

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

1. Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»
2. Ставим галочку «Discover USB devices».
3. Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».
4. Видим слева своё устройство и его статус. Кликаем по нему.
5. Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.
6. Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Читайте также

Бывают ситуации, когда что-то идёт не так и нужно по-быстрому запилить килялку чего либо и как можно скорее вернуться к…

Весь stdout контейнеров докер бережливо сохраняет в файлики. По-дефолту эти логи никак не ротируются и копятся до тех пор, пока…

Бывают ситуации, когда что-то идёт не так и нужно по-быстрому запилить килялку чего либо и как можно скорее вернуться к…

Источник