Инструменты

Джентльменский набор

• Удобный редактор или IDE, тысячи их
• VCS: Git, Mercurial, svn
• Терминал
• Статический анализ:
  • JavaScript: ESLint, JSHint, JSCS
  • CSS: stylelint, CSSComb
• Инструменты разработчика в браузерах
• Инструменты для работы с графикой

Мобильная специфика

Всё как 10 лет назад:

• Плохие сети
• Cлабое железо
• Нет удобств для разработчика

Повестка дня

• Как разрабатывать без мобильного?
• Как пробросить проект в устройство?
• Как пробраться в мобильный браузер?
• Что, если нужно устройство, но его не найти?

Варианты

• Открыть напрямую: http://192.168.1.100
• Туннелирование:
  • localtunnel
  • ngrok
  • SSH туннель

Открыть напрямую

Туннелирование

localtunnel

github.com/localtunnel/localtunnel

• npm install localtunnel
• lt --port 8487
• Получаем URL в Интернете: http://ipnhrxfvkt.localtunnel.me

ngrok

ngrok.com

• Скачать, распаковать
• ngrok http 8487
• Получаем URL в Интернете:
  • http://a3c04d5b.ngrok.io
  • https://a3c04d5b.ngrok.io

SSH туннель

На UNIX-like системах присутствует по умолчанию

• ssh -N -R 8487:localhost:8487 my-server.me
• Открываем my-server.me:8487

В Windows можно воспользоваться PuTTY

Отладка по USB

• Chromium
• Safari
• Firefox

Минусы

Хорошо и везде работает отладка Android 4.4+ в Chromium

Хорошо на macOS работает отладка iOS 6+ в Safari

А другие сочетания?

Неплохо работает отладка Firefox, но это нечасто нужно

ios-webkit-debug-proxy

Позволяет отлаживать iOS в Chromium

Проект:

• MaxOS, Linux: ios-webkit-debug-proxy
• Windows: ios-webkit-debug-proxy-win32

Встраиваемые отладчики

• Vorlon.JS
• weinre
• Firebug light

Vorlon.JS

github.com/MicrosoftDX/Vorlonjs

Установить, запустить:

$ npm install vorlon
$ vorlon

Подключить к странице:

<script src="http://localhost:1337/vorlon.js"></script>

Vorlon.JS с туннелем

$ lt --port 1337

http://quahpivgsm.localtunnel.me/vorlon.js

Vorlon.JS

Интересные фичи:

• DOM Explorer
• Network Monitoring
• Resource Explorer
• My Device
• Плагины

Vorlon.JS

Расширяем: www.vorlonjs.io/plugins

weinre

people.apache.org/~pmuellr/weinre

$ npm install weinre
$ weinre
$ lt --port 8080

<script
src="http://lthost/target/target-script-min.js#anonymous">
</script>

Firebug light

getfirebug.com/firebuglite

<script
src="https://getfirebug.com/firebug-lite.js#startOpened">
</script>

Эмуляторы

Android	iOS	Windows Phone
Android Studio	XCode	Windows Phone emulator

BrowserStack

browserstack.com

Тестирование в реальных браузерах

Smartphone Test Farm

github.com/openstf/stf

Удалённое тестирование в устройствах

«Свой BrowserStack»

Проблемы и решения