Веб-разработка для мобильных устройств имеет несколько основных ограничений.
Существуют сильно различающиеся разрешения экрана (от iPad до Blackberry первого поколения), несколько браузеров (веб-набор, но также IEMobile, Firefox, Opera mini и мобильные устройства и т. Д.) И несколько операционных систем (Windows Phone, Android, iOS, Palm, Blackberry. ). Каждое устройство имеет свои ограничения и производительность.
Когда приходит время отлаживать все это, задача не из легких, потому что есть только несколько инструментов, позволяющих это сделать — и из-за размера экрана, даже тогда мы не из леса.
Dragonfly for Opera уже предлагает нативное решение для удаленной отладки, но этот метод довольно ограничен, особенно когда приходится учитывать другие мобильные устройства / браузеры. Некоторые производители телефонов также предлагают эмуляторы, но они не сравнимы с использованием реального устройства, предлагающего «чувствовать и прикасаться» — особенно на стороне программирования веб-клиента, и особенно JavaScript.
Именно для того, чтобы помочь нам в этой опасной задаче, был создан jsconsole.
Консоль JavaScript для мобильных устройств
Перейдите по следующему адресу: http://jsconsole.com .
Jsconsole позволит вам отлаживать приложение JavaScript удаленно через консоль, расположенную на вашем рабочем столе, которая будет использоваться для отладки прямо на вашем телефоне. Чтобы сделать аналогию, это как если бы вы использовали консоль Firebug JS удаленно.
С одной стороны, инструмент будет извлекать каждый вызов console.log с вашего мобильного телефона и отображать его на вашем рабочем столе.
С другой стороны, jsconsole позволит вам вставлять код JavaScript прямо в ваши страницы.
Следует понимать, что этот инструмент обычно используется только на этапе разработки или отладки и всегда должен быть удален до начала производства вашего веб-сайта.
Инициализировать jsconsole
Первый шаг — создать ссылку между вашим сайтом и jsconsole. Для этого введите первую команду в консоли:
:listen
Эта команда вернет идентификатор и тег <script> для интеграции на ваш сайт. Код, который вы получите, будет выглядеть так:
Теперь вам просто нужно добавить эту строку в нужное место в вашем HTML-коде (например, в заголовке).
Если вы часто используете этот инструмент, чтобы избежать необходимости менять тег <script> для каждого теста, вы можете повторно использовать один и тот же идентификатор, указав следующую команду:
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Аналогичным образом вы также можете указать идентификатор, который хотите использовать. Например:
:listen party
Это согласуется с этим <script>:
<script src="http://jsconsole.com/remote.js?party"> </ script>
После того, как этот код вставлен на ваш сайт, вы можете проверить соединение одной строкой на вашей веб-странице, например:
<script type="text/javascript">
console.log ("Connection");
</ script>
Затем войдите на свой сайт с помощью мобильного телефона и убедитесь, что вы получили уведомление в консоли на рабочем столе.
Отправить директивы из jsconsole
Как только соединение установлено правильно, вы можете отправить любую строку кода JavaScript на свой мобильный. Для этого вы можете просто набрать строку кода для запуска непосредственно в консоли.
Например:
document.innerHTML = "Hello World !";
Вы также можете использовать свои обычные библиотеки, например, с установленным на вашем сайте jQuery, вы можете отправить этот фрагмент кода:
$ ("# myElement") fadeOut ();
Вывод
Это обзор инструмента, который более чем необходим, когда мы программируем для мобильных устройств, особенно когда мы используем функции, связанные с ними. Jsconsole также имеет другие интересные функции, которые менее важны. Для этого я предлагаю вам ознакомиться с документацией на сайте jsconsole .