Информация в этой статье частично устарела - в . Но первые пару разделов прочитать стоит, особенно если вы впервые подключаете телефон к компьютеру для отладки.
Во всех основных браузерах есть инструментарий для отладки сайтов на мобильных устройствах. В этой статье я рассмотрю возможности Firefox и сравню их с аналогичными в Chrome и Internet Explorer.
Тестируем в отзывчивом режиме Firefox
Отзывчивый веб-дизайн это хороший способ сделать сайт mobile-friendly, позволяющий нам адаптировать макеты в соответствии с размерами экрана.
Самый простой способ протестировать его, это изменение размера окна браузера. Однако, этот метод не всегда точен и практичен. Здесь помогает отзывчивый режим Firefox.
Доступный начиная с Firefox 15, этот режим (также называемый “просмотр отзывчивого дизайна”) предназначен для тестирования мобильно версии сайта.
Этот режим активируется через установку Tools-> Web Developer-> Responsive Design View. Или же нажатием кнопки на девелоперской панели или же нажатием “горячих клавиш” Ctrl + Shift + M (или Cmd + Opt + M в Mac OS). Деактивация производится через то же меню, клавиатурные сочетания или же простым закрытием интерфейса.
Изменяем размер области видимости
Активировав отзывчивый режим, Firefox изменяет размер области видимости, а не окна. Вы можете изменять ее размер, выбирая нужное разрешение из списка или просто изменяя размеры мышкой. 
В списке есть самые распространенные разрешения типа 320×480 пикселей или 768×1024 пикселей. Если вы не нашли нужный вариант, вы можете добавить свой презет и сохранить его.
И, наконец, вы можете имитировать смену ориентации экрана, нажав кнопку поворота.
Обработка касаний (Touch Events)
Крайняя правая кнопка позволяет сделать скриншот, а кнопка перед ней включает “симуляцию касаний”.
После нажатия этой кнопки, события мыши воспринимаются как касания. Таким образом, клик мыши Firefox воспринимает как касание, это облегчает отладку использующих касания сайтов и приложений.
Отлаживайте ваш код с удаленным отлаживанием
Отзывчивый режим полезен, но он не заменит проверку на смартфоне (или планшете). Если ваш смартфон работает на Android, в Firefox есть подходящий инструмент для него - удаленное отлаживание.
Удаленное отлаживание дает вам доступ к инструментам разработчика, но для мобильных сайтов.
Для использования надо установить на телефон Firefox и подсоединить его через USB к компьютеру. Также как и отзывчивый режим, удаленное отлаживание доступно начиная с Firefox 15.
Готовим компьютер
Firefox использует ADB для установки соединения между компьютером и мобильным устройством, поэтому сначала установим ADB. В зависимости от операционной системы, методы установки могут различаться, например, в Ubuntu надо установить пакет android-tools-adb.
Лучший способ установить ADB - скачать Android SDK. Это можно сделать на сайте разработчиков Android , есть версии для трех основных ОС. Если вам не нужна Android Studio, вы можете просто скачать SDK tools.
Теперь нам надо активировать удаленную отладку в Firefox. Это делается в настройках инструментов разработчика, просто активируйте “Enable remote debugging” (также может потребоваться перезапуск Firefox)
Готовим мобильное устройство
На устройстве с Android нам также нужно активировать USB отладку. Без этого компьютер и мобильное устройство не смогут сообщаться.
Для активирования надо открыть настройки мобильного устройства, необходимый пункт есть в разделе Developer options. Если у вас нет доступа к этому разделу, несколько раз нажмите на “Build number”(номер сборки) в разделе About (о телефоне). 
Также как и на десктопе, вам надо активировать удаленную отладку в Firefox для Android. Если Firefox 25+, просто выберите “Remote debugging” в разделе “Developer tools” меню “Settings”. 
В Firefox 15–24 наберите в адресной строке “about:config”. Найдите пункт devtools.debugger.remote-enabled и задайте ему значение true, нажав кнопку “Toggle”.
Напоминаю, что статья устарела и следующие разделы имеют только историческую ценность. .
Устанавливаем соединение
Теперь мы готовы установить соединение между компьютером и мобильным устройством. Заметьте, что все они не будут обязательны каждый раз при активации удаленной отладки. Пока вы не отключите ее, обязательными будут только следующие шаги.
Запуск сервера
Сначала подсоедините свой девайс через USB к компьютеру. Откройте командную строку и запустите ADB-сервер, если он еще не запущен.
Adb start-server
Теперь вам надо убедиться, что ваш девайс правильно распознан:
Adb devices
Будет выведен список подключенных устройств, примерно такой:
List of devices attached BH90TFM516 device
Если вы увидете, что ваш девайс распознан по другому, а не как “device”, остановите сервер, набрав adb kill-server и запустите его снова с правами администратора (т.е. sudo adb start-server).
Создание соединения
Теперь создадим соединение к сокету. Тип команды зависит от версии Firefox на вашем устройстве.
Для стабильной версии Firefox для Android 35+, наберите:
Adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket`
org.mozilla.firefox заменяется на org.mozilla.firefox_beta , если вы используете бета-версию; на org.mozilla.fennec_aurora при использовании Aurora; и на org.mozilla.fennec при использовании ночных сборок.
Если же у вас Firefox для Android 34-, то команда будет проще:
Adb forward tcp:6000 tcp:6000
Соединяем Firefox
Вы уже подключили инструменты разработчика Firefox на десктопе к Firefox для Android. Осталось только через меню Firefox выбрать “Connect…” в подменю “Web Developer”.
Это откроет новую вкладку с заполненной формой, вам остается просто нажать кнопку “Connect”: 
А теперь взгялните на мобильное устройство. На экране должно появиться сообщение с запросом разрешения на соединение. Нажмите кнопку “OK” и возвращайтесь к компьютеру. 
Вы можете выбрать вкладку для отладки, выбирайте и вы готовы к отладке.
Делайте, что угодно
Выбор tab откроет новое окно с инструментами разработчика, привязанное к текущему открытому окну в Firefox для Android. Собственно, целевое окно и есть единственное отличие, в остальном инструменты идентичны.
Это значит, что вы можете делать с этими инструментами, что угодно - от просмотра и редактирования DOM до отладки скриптов и редактирования стилей. Для начала можете провести традиционную проверку, введя alert("Hello World!"); в консоли. Ответ высветится на экране мобильного устройства.
Что с остальными браузерами
Я разрабатываю в Firefox, поэтому я выбрал его средства для работы с мобильными устройствами. Но такие инструменты есть и в других браузерах.
Также как и на компьютере, разные браузеры дают разные результаты и разные баги на мобильных устройствах. Инструменты Firefox хороши, но они совместимы только с мобильным Firefox.
Chrome
В Google Chrome есть свой отзывчивый режим, доступный из инструментов разработчика. Также как и в Firefox, вы можете выбрать подходящее разрешение экрана или выбрать определенное устройство из списка (например, Google Nexus 5 или Apple iPhone 6). Вы также можете имитировать user-agent и качество соединения, проверяя скорость загрузки в условиях, приближенным к реальным.
Chrome позволяет удаленно отлаживать Chrome для Android. Удаленная отладка очень похожа на аналогичную в Firefox и подключается похожим образом, полная методика описана на официальном сайте Chrome .
Internet Explorer
Internet Explorer тоже имеет свой набор средств для разработки, в том числе предназначенных для разработки на мобильных. Эти инструменты позволят выявить баги и проблемы со скоростью. Также как и в Firefox вы можете выбирать разрешение; также как и в Chrome симулировать работу сети. А также в Internet Explorer можно симулировать географическое место нахождения.
Специальных средств для отладки в IE нет, но он совместим с
Mozilla Firefox 14 является официально «старым» браузером, тем кому нравится работать как веб-разработчик, просматривать новости, или просто общаться в интернете, поприветствуйте Firefox 15 для компьютера.
Что нового в Firefox 15
Firefox 15 доступен для Windows, Mac и Linux компьютеров.
14-я версия не плохая. Улучшения были постоянно, но этот релиз чувствовал себя более стабильным и продуманным, чем раньше. Bar, Flash все работало хорошо. Может ли Mozilla развивать этот успех? Новую версию браузера Firefox 15 можно скачивать и устанавливать без проблем, после установки ваши закладки и данные не пропадут.
Ooo — новые интересные возможности! Хотя существует несколько онлайн и закладки реагирования инструменты веб-дизайна, Mozilla является первым поставщиком который это добавил прямо в браузере (Меню> Веб-разработка> Адаптивный дизайн):
Целый ряд типичных резолюции может быть выбран или вы можете перетащить (трудно понять) управления размером в нижней правой части окна. Это простой, но эффективный. Вам никогда не придется изменять размер всего окна браузера снова. Можно сказать что этим инструментом Firefox 15 становится браузером для веб-разработчиков.
Инспектор Layout View
Вид окна макет быть добавлен на страницу Инспектор (Меню> Веб-разработка> Инспектор, затем нажмите синюю полосу в правом нижнем углу):
Рисунок отображает ширину и высоту окна, отступы, границы и поля. Это функция, доступная в Firebug и ряд других дополнений, но это полезно после установки Firefox 15.
JavaScript Debugger
Firefox, наконец, имеет свой собственный отладчик JavaScript! (Меню> Веб-разработка> Отладчик):
Чтобы быть справедливым к Mozilla, их
отладчик
был доступен в течение более десяти лет, но развитие остановили несколько лет назад. Опять же, наличие отладки доступен в Firebug, но родной альтернативные, вероятно, будет быстрее работать — особенно если вы только с вопросами сценариев.
К сожалению, отладчик не работает до сих пор. Это прекрасно, если вы примените точки останова для функции таймера и обработчиков событий, но оно исчезает и вытирает настройки, как только вы обновите страницу.
Будем пересмотреть функции в Firefox 16 — тем более будут реализованы, удаленные мобильные отладки.
Тихое обновление
Firefox 15 может быть последнее обновление, которое нужно скачивать что бы запустить обновление программы. Начиная с этого момента, все обновления будут происходить в фоновом режиме.
Это хорошая новость: пользователи Firefox будут переходить на последнюю версию быстро и безболезненно. Системные администраторы могут быть менее рады, новая версия может нарушить критически важных приложений — хотя
автоматических обновлений можно отключить
.
Это обновление немного более эффективное, чем обновление Google, которая может обновляться на медленных машинах в течение 10 минут или больше.
Основные преимущества браузера Mozilla Firefox это
Новейшие веб-технологии
HTML5 и JavaScript в Firefox 14
Mozilla запускает новое средство просмотра файлов в формате PDF, использующее JavaScript, HTML5 без каких-либо дополнений средствами исключительно движка Firefox 14 — Mozilla pdf.js. Нововведение позволит развивать и ускорять внутреннее средство просмотра PDF вместе с обновлением движка JS, увеличить производительность, стабильность и безопасность браузера. Mozilla pdf.js может быть и в качестве дополнения, однако целиком использует веб-технологии, то есть может исполняться лишь как веб-приложение, имеет открытый код, так что при желании может быть встроен в сайты, а уже с выходом финальной версии браузера Firefox 14 технология pdf.js станет его неотъемлемой частью.
Создателям и разработчикам веб-сайтов понравятся новые возможности Firefox. Если вас интересует создание контента и приложений с использованием передовых технологий, то Firefox будет для вас лучшим выбором среди браузеров. Чтобы узнать больше, посмотрите таблицу сравнения поддержки передовых технологий.
Обновление форм
Оставьте в прошлом раздражающий процесс разработки веб-форм. Инструменты создания форм, интегрированные в Firefox, такие как атрибуты списка и валидация HTML, предоставят вам весь нужный функционал.
Видео в формате WebM и HD
Будучи одним из первых, кто поддержал видео в стандарте HTML5, Firefox теперь поддерживает новый формат WebM, позволяющий вам смотреть видео в HD-качестве.
Парсер
Firefox включает в себя парсер готовый к работе с HTML5. Этот парсер имеет несколько новых возможностей, в первую очередь вложенный , а также повышает производительность, запуская алгоритм парсинга в своём собственном процессоре.
IndexedDB
В Firefox включена предварительная версия , которая даёт разработчикам возможность произвести первые эксперименты с локальным хранилищем браузера.
Графика следующего поколения
Чтобы в это поверить, это нужно увидеть. Благодаря нашему обновлённому графическому движку отображение текста и графики, в том числе и , стало быстрее и точнее, чем когда бы то ни было. Firefox автоматически корректирует цветовую гамму изображений (например ваши цифровые фотографии), чтобы цвета отображались именно так, как нужно.
Улучшенное файловое API
Добавив поддержку метода.click() в диалог загрузки файлов, метода.slice и url-адресов для файлового API, Firefox предоставил разработчикам возможность лучше настроить управление загрузкой файлов на сервер.
Стилизация страниц с помощью CSS3
Поддержка новых функций CSS3, таких как border-radius, box-shadow и других переходов и трансформаций позволяет легко добавить элегантную анимацию на веб-страницы.
Аудио API
Firefox изменяет способ интеграции мультимедиа с Интернетом. С помощью HTML5 разработчики могут легко использовать JavaScript для чтения и записи аудио данных. Мы предоставляем доступ к необработанным аудиоданным, что даст вам возможность создания отличных звуковых эффектов!
Поддержка мультисенсора
В Firefox теперь встроена поддержка мультисенсорной технологии Windows 7, предоставляющей вам абсолютно новый способ взаимодействия с вашим браузером.
Веб-консоль
Хотите узнать что движет сайтами, использующие передовые технологии? С помощью этого экспериментального аналитического инструмента вы можете заглянуть под капот динамических веб-страниц.
Не смотря на всё Mozilla Firefox - это популярный современный браузер, новая версия которого вышла в январе 2010 года. Новая версия концептуально отличается от предыдущей версии, имеет новый эффективный движок, в результате увеличилась скорость загрузки сайтов, улучшилось качество показа, достигается лучшая совместимость стандартов, изменен интерфейс. Возможность скачать «Мозила» бесплатно - это шанс узнать совершенно новый уровень браузера. Теперь доступна «Мазила» на русском.
«Мозила Фаерфокс»
«Мозила Файерфокс» начинает свою историю с браузера Netscape Navigator. В процессе «войн браузеров» проект Netscape преобразовался в браузер «Мозила Файерфокс». Традиционно было можно «Мозила Фаерфокс» скачать бесплатно. С момента создания «Файерфокс» имеет свою «визитную карточку» - это простота освоения. Простой интерфейс - главный козырь браузера. Стоит вспомнить, что Netscape Navigator имел интерфейс, близкий к интерфейсу . Последний имеет лучшие позиции на рынке за счет брендовых пакетных продуктов Майкрософт. Свободно распространяемый Mozilla Firefox, скачать бесплатно который можно на сайте разработчика, в панелях ведущих поисковиков Рунета, является лидером среди браузеров, учитывая, что он не имеет такой мощной поддержки, как Internet Explorer.
Браузер «Мазила Фаерфокс»
Обширные возможности «Мазила Фаерфокс» дополняются хорошим уровнем безопасности, который контролирует также элементы ActiveX и управляет личными данными. Можно скачать Mozilla бесплатно и пользоваться умным поиском, расположенным вблизи строки поиска, а также интеллектуальной строкой ввода интернет-адреса. Можно скачать «Мазила» бесплатно и воспользоваться быстрым механизмом загрузки приложений и файлов, которые можно докачивать после прерывания соединения, а также многие удобные элементы управления и опции.
И еще о преимуществах «Мазила Фаерфокс» относятся:
- специальная панель поиска, интегрированная в поисковую базу одного из поисковиков. При установке плагинов можно расширить количество поисковиков в странице загрузки;
- возможность скачать Mozilla Firefox бесплатно предоставляет шанс пользования развитым интерфейсом, включая закладки, вкладки, безопасную навигацию;
- браузер Mozilla Firefox спроектирован таким образом, чтобы максимально соблюсти вопросы конфиденциальности, а также защитить от вредоносного софта, программ-шпионов, заблокировать всплывающие окна;
- браузер «Мозила» гарантирует качественное масштабирование веб-страниц;
- возможность скачать браузер «Мазила» предполагает расширяемые решения за счет плагинов;
- браузер поддерживает экспорт новостей RSS.
Сообщество Mozilla обнародовало предварительный план развития браузера Firefox в текущем году. Прежде всего в Mozilla планируют ускорить график выпуска новых стабильных версий веб-обозревателя, сообщает ресурс «Компьюлента».
Количество изменений и улучшений в таких релизах будет меньше, но выходить они будут чаще. Такой подход, как ожидается, позволит решить проблему задержек, как в случае с Firefox 4, анонс которого должен был состояться ещё в ноябре, но затем был перенесён на первую четверть 2011-го.
Среди ключевых задач, которые планируется решить в текущем году, Mozilla выделяет обеспечение гарантированного отклика браузера на действия пользователя в пределах 50 мс, реализацию поддержки современных операционных систем, оптимизацию пользовательского интерфейса и разработку единой платформы для выполнения приложений различных типов. Кроме того, Mozilla намерена обеспечить сохранность пользовательских данных при любых сбоях браузера.
Помимо Firefox 4, в нынешнем году Mozilla рассчитывает выпустить пятую, шестую и седьмую версии обозревателя.
В Firefox 5, как ожидается, появятся менеджер аккаунтов, анимация интерфейса, поддержка 64-битных систем и пр. В Firefox 6 усилия программистов будут направлены на оптимизацию работы кеша и движка JavaScript.
Как и было обещано еще до начала выпуска Firefox 4.0, финальная сборка браузера Firefox 5, возможно, увидит свет 21 июня 2011 года. Это косвенно подтверждает обнародованный экспертами компании Mozilla график, в соответствии с которым разработка данного браузера будет включать в себя четыре ключевых этапа, четко регламентирующих и разграничивающих по времени все стадии отладки кода интернет-обозревателя. Опубликованный план представлен в черновом варианте, поэтому не исключено появление в неsм каких-либо корректировок.
Итак, в соответствии с ним уже к концу 2011 года мы должны заполучить Firefox 5, 6 и 7 версии. Каждый новый релиз Firefox должен будет пройти через три основные стадии до релиза — mozilla-central (как, Canary channel для Chrome), mozilla-aurora (Dev канал) и mozilla-beta, каждый из которых продлится около шести недель.
Первым и (пока) единственным исключением из этого правила является Firefox 5, он будет существовать в стадии mozilla-central только в течение трех, а в стадии aurora и beta в течение 5-ти недель. Firefox 5 в настоящее время находится в режиме central, nightly-сборка уже доступна для разработчиков и энтузиастов, и вскоре он должен будет вступить в фазу aurora (с 12 апреля). Если все пойдет по плану, то мы сможем получить Firefox Beta 5 уже 17 мая, а финальный релиз на 21 июня.
Firefox 5 получит усовершенствованный пользовательский интерфейс с функцией множественного выделения вкладок, интегрированную утилиту для просмотра документов формата PDF и улучшенную систему управления учетными записями. Также планируется включение в состав браузера инструментария, обеспечивающего интеграцию программы с социальными сетями.
Сегодня 13 февраля 17-ого. История началась 3 дня назад. Собственно проблема появилась следующая. Есть каруселька (это тип слайдера), верстальщику компании «R&K» пришёл запрос, о том что каруселька не адаптивная, т.е. не сжимается как положено, при сжатии окна браузера по ширине. Баг выявлен в Firefox v50.1.0 32-bit, Win7 32-bit. При этом, на следующий день, появился странный телефонный звонок от заказчика, с сообщением о том, что всё работает, и благодарность за быстрое реагирование. Т.к. вёрстку вообще никто не смотрел, то люди почесали в недоумении репы и разошлись. Через два дня снова позвонил заказчик, и уже яростно/истошно/дико/люто начал орать, что вёрстка снова не адаптивная, и не ужимается в окно браузера при сжатии браузера. Вот тут-то люди призадумались и начали крутить вёрстку.
index.html
style.css * {margin: 0; padding: 0; font-size: 0; } /* сброс стилей */ div { margin: 20px auto; /* центрирование для тестов */ border: 1px solid royalblue; /* видимость блока для тестов */ /*display: inline-block; оригинальное значение div, для теста не нужно */ max-width: 450px; /* 300, 400, 450, 600, ширину перебирайте сами */ white-space: nowrap; /* что бы изображения были в линию */ /*overflow: hidden; оригинальное значение overflow, для теста не нужно */ } input { /*display: none; оригинальное значение display, для теста не нужно */ } img { width: 100%; /* адаптивное сжатие изображения */ }
Само собой все лишнее выпилено для тестов. Что бы ясно был виден смысл проблемы. Итак, обнаруженная проблема «адаптивной верстки» следующая:
Верстаем, верстаем, например то что выше, запускаем опять же в вышеприведённом браузере Firefox. Видим следующую картину, всё как и ожидается, например вот так.
Сжимаем окно, естественно «адаптивная вёрстка» жмёт и изображение, получаем вот это.
Всё в порядке? А не тут то было… Идём пить чаёк, курим, приходим обратно, открываем яндекс, читаем новости (почту, Хабр, рутуб и т.д.), открываем поглядеть нашу верстку, и изумлённо получаем вот это.
Теперь поймите правильно людей. Люди - это люди. Всё учесть невозможно. В мире багнутого ПО учесть всё - тем более невозможно. Сложилась следующая ситуация. Клиент открыл страничку в одной вкладке, сжал браузер, и получил то, что хотел. На следующий день он открыл страничку со второй вкладкой, и верстку расколбасило. При этом, верстальщик ровно так же не замечая вкладок - открывал по-разному и получал разные результаты. На количество вкладок никто не обратил внимания. Дошло до того, что начали приподымать чистую вёнду, смотреть там, начали рыть багрепорты на форумах мозиллы, начали искать странное поведение селекторов width/max-width и предпринимать ну очень фееричные и странные действия, про которые стыдно писать, но на количество вкладок снова и опять никто не обратил внимания. Более того, часа три никто не смог воссоздать баг, потому что открывали тестовую страничку на чистом браузере без вкладок. Были просто поражены тем, что баг исчез сам собой, но конечно же, стоило открыть страничку со вкладками, причем с определенными - баг выполз. Сутки люди имели наилютейший баттхерт, которого я в жизни не видел, сдобренный истошными воплями клиента. Разумеется, у людей начали немножко сдавать нервы, и дело чуть не дошло до откровенного мордобоя. Далее повесть рассказывать смысла нет, но догадаться во что выливаются подобные ситуации можно самостоятельно.
Пожалуйста, в мире багнутого ПО будьте внимательней и терпеливей. Это относится ко всем без исключения. Как к исполнителям, так и к руководителям. С заказчиков брать кроме денег, конечно же нечего, и им простительно.
P.S.: К верстальщикам не имею никакого отношения. Верстал 10 лет назад, слава богу быстро слез с этого непотребного дела. Получил себе эту проблему по телефонному звонку от знакомого, который всю голову изломал, решая оную задачку. Баг успешно воссоздан, верстка выше - моя. Верстка тестовая, никак не продакшн, ни в одном глазу. Специально позвонил еще одному знакомому верстальщику, слышит про этот баг впервые.
От автора: без сомнений за последние пять лет Google Chrome стал доминирующей силой в браузерных войнах для десктопных и (очевидно) мобильных пользователей. Разработчики же более технически подкованы и больше заботятся о безопасности, поэтому предпочитают Firefox. Все дистрибутивы ОС с уклоном в безопасность содержат в себе Firefox, а не браузер на Chromium, хотя последний также имеет открытый исходный код и полностью бесплатный.
К нашему счастью, соблюдение веб-стандартов означает, что браузеры, которые используют разработчики, по большей части совместимы с браузерами, которыми пользуется большая часть обычных пользователей. И это очень важно, так как все, что разработано для Firefox в 99% случаев будет работать в Chrome. IE больше не приоритет для большинства разработчиков. Он устарел и используется для загрузки других браузеров. Edge сейчас тоже никто в серьез не воспринимает.
Firefox любят не только из-за безопасности и конфиденциальности. Firefox, всегда был, по большей части, проектом, продвигаемым сообществом пользователей (хотя на примере Wikipedia «сообщество» стало слишком высокомерным). Сердцем модели разработки сообщества является повышение качества пользовательского опыта. Говоря по-другому, проекты, движимые сообществом, зачастую ставят нужды пользователей на первое место. Корпоративные же проекты ставят в приоритет корпоративные нужды. Для разработчиков это значит, что в сети можно найти множество бесплатных инструментов для упрощения своей работы. По большей части эти инструменты намного легче, чем большинство платных вариантов.
THIMBLE
Thimble изначально предназначен для изучения HTML. В нем есть полноценный HTML и CSS редактор, что делает его крайне полезным инструментом для нахождения быстрых решений и копирования конечного HTML для загрузки файла на сервер. Он работает лучше редактора кода в CPanel, потому что не делает ничего лишнего и не распознает каждый апостроф в тексте, как разделитель строки.
JavaScript. Быстрый старт
Интерфейс делится на две панели. Стандартно панель с кодом расположена слева, панель предварительного просмотра – справа. Доступно три режима просмотра:
мобильный вид;
полноэкранный вид.
В третьем режиме просмотра панель с кодом временно прячется, пока вы не вернетесь в стандартный режим просмотра, что легко сделать нажатием кнопки. Автоматический просмотр включен по умолчанию и показывает результат набора кода. Если он отвлекает, его можно выключить. Автоматический просмотр даже умеет показывать CSS стили в реальном времени. Если создать блок с контентом, а потом добавить ему стили, то можно очень легко поэкспериментировать с разными видами.
В отличие от других онлайн редакторов здесь легче подключить внешние файлы. Можно даже создавать целые деревья папок для хранения. Все это делает Thimble моим любимым инструментом для быстрого создания страниц или обновлений на сайте во время путешествий.
Недостаток очевиден – инструмент требует подключения к сети (если вы, конечно, не смогли клонировать платформу Thimble на локальный сервер). Второй недостаток – на нем нельзя публиковать свои коммерческие проекты, так как платформа не рассчитана для профессионалов.
Вместо этого можно копировать HTML код и вставлять его в редактор кода в CPanel или в текстовый файл, после чего сохранять на своем сервере. Дерево файлов полностью сохранится.
Как и с большинством проектов Mozilla, документация Thimble довольно скудная, особенно в плане того, что можно и что нельзя. Разработчики думают, что вы прочитаете правила использования, что можно назвать довольно сомнительным предположением, даже если всякий веб-менеджер, использующий онлайн решения для разработки, должен это делать.
В правилах использования есть очень важная часть, где говорится, что вы даете Mozilla бесплатную лицензию на все, что публикуете на их платформе, а также даете свое согласие на повторное использование и редактирование вашего продукта другими людьми. Очевидно, что после этого вы не захотите публиковать свои профессиональные проекты на данной платформе.
X-RAY GOGGLES
Дети всегда хотели заполучить рентгеновские очки, но увы такие технологии (по крайней мере, реально работающие) слишком дороги для обычных детей. X-Ray Goggles от Mozilla не покажут вам, что носит школьная медсестра под верхней одеждой, или что у шотландского садовника под его килтом, но с помощью этого инструмента можно увидеть, как работает веб-страница, а также отредактировать код, чтобы он работал по-другому. Это намного круче, чем всякие извращения, правда?
Первичное назначение инструмента с профессиональной точки зрения – песочное моделирование для тестирования изменений в существующих дизайнах без необходимости вносить моментальные изменения. Все очень просто, для установки достаточно перетащить кнопку X-Ray Goggles на панель закладок. Для активации нажмите кнопку, для выхода нажмите ESC.
WEBMAKER
Не самый полезный инструмент для большинства разработчиков, так как он спроектирован только для Android. Webmaker не предлагает почти ничего, что нельзя найти в социальных сетях. Mozilla отказались от довольно полезного онлайн видеоредактора (Popcorn) и заменили его этим инструментом. Webmaker подходит для новичков, так как он использует подход mobile-first в дизайне, который стал обязательным для современных сайтов.
Тем не менее, экспертов смутят те ограничения, которые связаны с разработкой только под мобильную инфраструктуру. Этот инструмент в основном нацелен на привлечение подростков к бренду Mozilla, а также призван помочь учителям выглядеть круто (учит их разговаривать на языке мобильной веб-разработки).
Другая проблема, которая может смутить, связана с тем, что это еще одно приложение, занимающее пространство и ресурсы на устройстве. У Android есть привычка быстро забивать память, а большинство пользователей не закрывают приложения после выхода, потому что Google не удосужились сделать интерфейс закрытия чего-либо интуитивным и простым. Как следствие, большинство смартфонов на Android начинают тормозить спустя пару месяцев, а люди просто меняют их или постоянно жалуются на отсутствие свободного пространства.
EDITOR
Editor – это дедушка панели разработки в Mozilla и изначально назывался Composer. Предположительно название сменили, чтобы не путать с KompoZer, потомком Composer. До KompoZer был Nvu, и вы не захотите пользоваться ни тем, ни другим, так как они оба не поддерживают HTML5. Можно попробовать BlueGriffon, сводного брата KompoZer. Он поддерживает HTML5. Однако вы получите только CSS редактор, если заплатите за плагин. Все эти инструменты до сих пор можно использовать за исключением, может быть, Nvu. Editor/Composer до сих пор есть в браузере Mozilla SeaMonkey.
SCRATCHPAD
Инструмент для написания и тестирования кода JS. Консоль позволяет за раз выполнять только одну строку скрипта, что сильно ограничивает возможности. В то же время в scratchpad можно вводить сколько угодно строк. Активируется в любой вкладке Firefox нажатием Shift + F4.
Откроется окно редактора текста с простым интерфейсом. Можно открыть существующие скрипты, редактировать их и сохранять. Также можно создавать новые скрипты. В редактор встроено автозаполнение вводимых команд. Также есть документация по синтаксису команд. Можно запускать скрипт целиком или его части с помощью выделения.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
RESPONSIVE DESIGN MODE
Эта функция встроена прямо в Firefox (она так же есть в Chromium и Google Chrome). С ее помощью можно проверять макеты страниц под разными разрешениями на одном экране. Инструмент неидеальный (для всех браузеров), но подойдет для большинства сценариев, чтобы проверить одинаковое отображение сайта. Режим адаптивности в Firefox активируется простым нажатием Ctrl + Shift + M. Вернуться в обычный режим можно повторным нажатием.
Изменять макет можно с помощью ряда кнопок, расположенных над макетом. Первая кнопка слева похожа на «закрыть окно», с ее помощью можно выйти из адаптивного режима. Далее идет выпадающий список, где можно выбрать шаблоны разрешений, задать новое или (не рекомендуется) удалить существующий шаблон разрешения из списка. Справа от выпадающего списка расположена кнопка переключения между портретным и альбомным режимом. Далее идет кнопка симуляции событий касания экрана. Последняя кнопка делает скриншот.
В некоторых версиях Firefox можно задавать соотношение пикселей, но насколько это хорошо будет работать зависит от соотношения пикселей на вашем устройстве. Помимо встроенных методов для просмотра адаптивных макетов есть и другие. Сейчас покажем.
WEB DEVELOPER TOOLS EXTENSION
По умолчанию этого инструмента в Mozilla нет, это расширение для Firefox Криса Педерика. В расширении запакован огромный ассортимент инструментов, подходящих под все ваши нужды. С его помощью можно:
включать и выключать что-либо;
контролировать куки;
изменять CSS страницы;
изменять поля форм на странице;
снимать маски с полей типа password;
вытягивать подробную информацию о изображениях;
исследовать DOM элементы;
подчеркивать элементы;
изменять размер экрана;
просматривать макеты в адаптивном режиме лучше, чем во встроенных методах;
и много чего еще.
Простейший способ описать это расширение – швейцарский нож среди инструментов разработки. Он хорош почти во всем, что вам нужно, но все инструменты спрятаны до тех пор, пока они вам не понадобятся. Получить к ним доступ можно с помощью правой кнопкой мыши в контекстном меню, также есть панель инструментов. Панель инструментов намного лучше.
FIREFOX DEVELOPER TOOLS
Большая часть функционала Firebug теперь доступна напрямую во встроенной панели разработчика, в которой также есть консоль. Панель похожа и работает по принципу панели в Chromium и Google Chrome. Интерфейс неинтуитивный, и пока вы освоите и поймете все функции, вы наделаете кучу ошибок.
Неопытные пользователи могут не заметить одну из функций – командную строку JS внизу консоли, она никак не помечена. Она работает лучше версий в Chromium/Chrome, но их реализация, добавляющая мигающий курсор прямо в консоль, намного очевиднее.
MEASUREIT EXTENSION
Проще установить прекрасный Screen Ruler от Ian McIntosh, но у расширения Measureit от Kevin Freitas есть преимущество. Он умеет одновременно измерять ширину и высоту, и он более точный. Полезный инструмент для измерения чего-либо в окне браузера. В некоторых версиях Firefox инструмент не работает, это может быть из-за конфликта с другими расширениями. Попробуйте отключить расширения перед установкой.
COLORZILLA EXTENSION И EYEDROPPER
Оба или один из инструментов должны быть у каждого дизайнера, потому что с их помощью можно быстро найти цвет по любому пикселю в браузере. Также можно использовать GColor — Gnome инструмент, который делает то же самое, но в нем есть возможность получить образец цвета из любого окна, не только из браузера. Преимущество ColorZilla и Eyedropper перед GColor в том, что они показывают увеличенный вид пикселя, от которого получен цвет.
Активируется инструмент кликом по иконке eyedropper, после чего курсор меняется на шаблон в виде крестика (ColorZilla) или большую лупу (Eyedropper). Наведите курсор на окно и найдите пиксель, цвет которого хотите получить. Кликните левой кнопкой мыши для копирования цвета в буфер обмена (в формате hex), после чего расширение автоматически закроется.
Это лишь помощники, они не сделают все за вас
Вы остаетесь разработчиком, вам все еще нужно выполнять свои обязанности. Эти инструменты, если использовать их правильно, упрощают задачи. Они могут помочь разными способами, а для большинства людей некоторые из них вообще бесполезны, несмотря на самые искренние намерения со стороны Mozilla. В сети есть и другие инструменты, лучше описанных в этой статье, однако обычно лучше использовать эти. Иногда полезно знать, что есть бесплатный инструмент от Mozilla, который можно использовать, если возникнет необходимость.
