Отладка мобильных сайтов с помощью Dashcode



    Описание применимо только к компьютерам с установленной Mac OS X.

    Сейчас, когда практически ни один сайт не обходится без использования JavaScript, доступ к консоли JS – необходимое средство на этапе отладки. Кроме отладки самого JS, при определённых навыках, можно через подобную консоль и всю страницу на лету переделать.

    Для «больших» браузеров существует FireBug, Developer Tools, встроенные в браузер, и т.п., но часто нужно запустить отладку мобильного сайта не в браузере с переключенным User Agent, а в эмуляторе iOS…

    Оказалось, что если во время отладки виджета в Dashcode, перейти в эмуляторе iPhone/iPad на другой сайт, отладка будет продолжена для нового сайта.

    Итак, последовательность действий:
    • запускаем Dashcode
    • создаём новый проект по шаблону Custom, галочку для обычного Safari снимаем
    • сохраняем проект
    • из главного меню, в пункте Debug выбираем Run Settings и далее нужный эмулятор
    • запускаем эмулятор (Debug -> Run или кнопкой)
    • в эмуляторе переходим на нужный нам сайт
    • из главного меню, в пункте Debug выбираем Show Evaluator Window


    Это и есть желанная консоль.


    В случае, если сайт при работе в эмуляторе выводит ошибки, жмём Continue и продолжаем работу. Все ошибки будут описаны в логе в главном окне (Run Log) и с ними можно будет позже разобраться.



    Кстати, в этот же лог выводятся сообщения от console.log, если эта команда используется в коде.

    Хочу jQuery

    В процессе работы с сайтом лично я предпочитаю использовать jQuery, и насколько к этому привык, что в JS консоли тоже хочется иметь подобный синтаксис, даже на сайтах, где jQuery не используется. Несколько строк – и он у нас будет.

    Предположим, что мы поленились проверить наличие jQuery просто посмотрев в исходник страницы. В окне Evaluator вводим jQuery и нажимает Enter. Убеждаемся, что нам ответили ReferenceError: Can't find variable: jQuery. На всякий случай можно проверить, не занята ли $. Вводим $, Enter, и… в случае с Хабром, к примеру, получаем:

    function (B, C) {if(B&&B.$family&&B.uid){return B;}var A=$type(B);return($[A])?$[A](B,C,this.document):null;}

    Вывод: во избежание конфликта, при встраивании jQuery нужно будет использовать Safe Mode.
    Теперь добавляем jQuery к сайту: копируем следующий код через буфер обмена в окно Evaluator и жмём Enter

    var head = document.getElementsByTagName('HEAD')[0];
    var script = document.createElement('script');
    script.src="http://code.jquery.com/jquery-1.5.2.min.js";
    head.appendChild(script);
    jQuery.noConflict(); // Safe Mode


    Начинаем мучить сайт…
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 1

      0
      Предложение добавить jQuery таким методом — просто бред. Это делается в коде страницы, доступ к которому можно получить нажатием на вторую кнопку (со значком списка) на панели слева, либо (что еще проще), нажав на кнопку {≡ внизу. А следующая за ней кнопка >≡ открывает Evaluator.
      Кроме того, вы не описали абсолютно ничего, что нельзя было бы увидеть в первые пять минут знакомства с Dashcode. И кроме того, Dashcode не предназначен для создания и отладки сайтов. Это инструмент для разработки виджетов и приложений на основе HTML. В принципе, сайты на нем разрабатывать можно (например, внизу — редактор, вверху просмотр), но это будет все равно, что забивать шурупы молотком.

      Only users with full accounts can post comments. Log in, please.