Тестирование адаптивной верстки локального сайта

    Здраствуйте, ребята!

    Сегодня наткнулся на статью «9 интересностей и полезностей для веб-разработчика», в которой рассматриваются всякие полезности для веб-разрабочиков. Среди всего прочего нашел для себя прикольную тулзу для тестирования сайта под разным расширением — «dimensionsapp» (ссылка). Но в чем проблема, мне необходимо тестировать сайт который располагается на моем локальном веб-сервере. И тут мне в голову пришла идея быстренько собрать такую же тулзу, только чтобы она работала у меня в локале!

    Требования к тулзе:
    • Возможность ручного выбора ширины области просмотра и выбор из готовых размеров устройств Apple (iPhone и iPad)
    • Возможность просматривать на 100% высоты окна или полностью подстравить область просмотра под размеры девайса
    • Простой и легковесный интерфейс (никакой графики)
    • Шкала делений с шагом в 5 и 50 пикселей
    • Возможность видеть текущую ширину области просмотра


    Итак в результате 3-х часов кодинга получена тулза с кодовым названием «Moka moka» (ну я долго не думал). Дальше парочка скриншотов работы тулзы:





    Тестировал правда пока только в Chrome, Opera, Firefox.
    Репозиторий на github: github.com/sokal32/moka-moka
    Поделиться публикацией

    Похожие публикации

    Комментарии 20

      +1
      В Firefox, кстати, нативно можно отлаживать адаптивную вёрстку
        0
        Хм, надо посмотреть, не помню даже когда последний раз Firefox открывал
          +2
          В хроме тоже
            0
            Это нативно? Не подскажете где эту тулзу включить?
              +4
              Нативно, Dev Tools (F12) -> Settings (кнопка в правом нижнем углу) -> Overrides. В Settings помимо этого ещё много вкусностей.
                0
                Да, действительно. Спасибо за наводку. Хотя в лисе этот инструмент чуть удобней — есть сразу забитые несколько популярных разрешений, и возможность мышкой изменять размеры
                  0
                  В хроме тоже есть набор популярных. При смене девайса, меняется и разрешение.
                0
                опередили
                0
                не очень то удобно если честно, нельзя мышью изменять ширину, нельзя выбрать какой-то девайс
                  0
                  Если-бы они сделали еще переключаемую плотность пикселов. Я их с пол года назад просил еще…
                0
                Эмм… вопрос. Как на всех этих «тулзах» тестировать некие js вещи которые например определяют ориентацию устройства? Например, я перевернул телефон или планшет. В реале я это могу. На большинстве этих «тулз» мой функционал ограничен изменениями ширины/высоты окна браузера. Чем эти тулзы лучше ручного ресайза окна?
                  0
                  Лучше тем, что:
                  1) ты видишь ширину окна
                  2) ты можешь выбрать размер популярного устройства (в альбомной и в портретной ориентации)
                    0
                    В хроме можно включить линейки и задать ширину окна популярного устройства.
                      0
                      Можно и отверткой в ушах ковыряться)) если есть возможность юзать что-то поудобнее, я буду это использовать
                        0
                        Я не отрицаю, но например в том-же хроме можно и UA выставить и по элементам походить и геолокацию задать и ориентацию по трем осям, а так-же эмулировать CSS media: брайль, print, screen, tv и т.д. А у Вас просто iframe с линейками.
                          0
                          Вот поэтому я и включил в статью свои требования к тулзе, iframe с линейками это то, что мне нужно было))
                  +3
                  Вот еще неплохая штука responsinator.com
                    +1
                    У какая красота! Ничего лучше я прежде не видел (по крайней мере пока)
                      0
                      У dimensions.app (ссылка в посте) после внимательного изучения тоже обнаружилась такая функция — preview mode в правом верхнем углу.
                      Также у них клевый chrome app — можно поставить прямо в браузер, как я и сделал.
                      +1
                      Мне не понравилось, то что я вижу на айфоне и первом айпаде совершенно иное. Тут всего лишь фрейм в картинке, на айфоне же сайт может масштабироваться сам под размер экрана уменьшая все. Потому по факту сомнительная вещь.

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое