Я, вероятно, пропущу некоторые важные вехи, но мне было весело установить сегодня вечером старые версии Firefox и проверить, как тогда выглядели DevTools, поэтому позвольте мне поделиться с вами некоторыми из них.

Надеюсь, это даст вам представление о том, как многое изменилось за эти годы! Мы склонны воспринимать инструменты как должное и забываем, насколько они развиваются, пытаясь удовлетворить новые потребности.

Первый выпуск

Хотя проект официально стартовал во время подготовки к Firefox 4, где-то в 2010 году, самая первая версия DevTools, которую я смог найти в комплекте с Firefox 10, в январе 2012 года.
Выглядело это так:

У него не было концепции набора инструментов (то, что обычно находится в нижней части браузера, которое содержит все инструменты). Вместо этого он как бы окружал окно браузера различными панелями.

У него была панель HTML, панель CSS (как для правил CSS, так и для вычисляемых свойств), веб-консоль и даже окно блокнота:

Трехмерный вид!

Тем не менее 2012 год, перескочив вперед на 6 месяцев до Firefox 14, мы получили трехмерное изображение!

Примерно в то же время появилась панель «Редактор стилей», которая позволяла редактировать созданные таблицы стилей, добавлять новые, сохранять их на диск и сразу же визуализировать изменения в браузере. Поскольку концепции панели инструментов еще не было, не было места для ее размещения во вьюпорте, поэтому у нее появилось собственное окно:

Инструменты Moar!

Забегая вперед, конец 2012 года, Firefox 17, у нас появилось так много новых инструментов:

Новая панель отладчика скриптов:

Наш самый первый режим адаптивного дизайна:

Панель инструментов разработчика, интерфейс командной строки прямо в браузере, для запуска общих задач разработчика, первого в своем роде:

И даже темная тема для инспектора элементов!

Появление Ящика для инструментов

Давайте пойдем быстрее и перейдем к середине 2013 года, когда я присоединился к команде Mozilla DevTools.

Глядя на Firefox 22, мы наконец получили набор инструментов! Это означает уникальную панель, которая может быть либо закреплена внизу или справа от окна браузера, либо открыта в отдельном окне, и которая будет содержать все наши инструменты:

Вы можете видеть, что проект также набирал обороты, и было добавлено много новых инструментов:

  • Боковая панель шрифтов
  • Боковая панель блочной модели
  • Совершенно новый инструмент Profiler
  • И инструмент для мигания краски, с помощью которого можно было легко увидеть, когда часть страницы перерисовывалась движком браузера:

Основные инструменты и нишевые инструменты

Давайте перейдем к Firefox 30, середина 2014 года, то есть годом позже.

Первое, что вы заметите, это то, что тема стала более доработанной, во всем наборе инструментов стало больше единообразия.

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

Это основные инструменты, которые вы ожидаете от любого браузера, не так ли?
Я имею в виду, что в настоящее время люди используют гораздо больше, чем это: инструменты производительности, инспекторы хранилища, отладка сервисных рабочих и т. Д., Но самые основные инструменты были там.

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

У нас также есть маркер при наведении курсора, над которым я очень благодарен, что у меня была возможность поработать (до этого маркер всегда был включен, мешая при взгляде на страницу):

Но примерно в то же время мы также начали вкладывать средства в предоставление более нишевых инструментов для людей, создающих классные вещи с помощью менее распространенных веб-технологий, таких как WebGL. Одним из таких инструментов был редактор шейдеров:

Взрыв инструментов

Продолжая наш путь примерно с той же скоростью, мы сейчас находимся в середине 2015 года, Firefox 39 только что выпущен. Примерно в то время. мы достигли рекордного уровня по количеству различных инструментов:

Мы имеем:

  • Наши обычные основные инструменты: инспектор, консоль, отладчик, редактор стилей, сеть.
  • У нас появилась новая панель «Хранилище», которая отображает локальные данные, такие как файлы cookie и локальное хранилище.
  • 3 творческих инструмента: редактор шейдеров, который мы видели ранее, для просмотра и редактирования шейдеров WebGL, инспектор холста для профилирования операций рисования контекста холста и инструмент веб-аудио для визуализации узлов веб-аудио, которые в настоящее время добавляются на страницу.
  • И, наконец, новая панель производительности, Timeline, которая должна была стать нашим новым универсальным инструментом производительности.

Вот как выглядели инструменты Web Audio и Canvas соответственно:

Эти инструменты, к сожалению, изменились очень мало (если вообще изменились). В самом деле, это инструменты, которые, как правило, использует меньшее количество людей, и, даже если они имеют решающее значение для нескольких пользователей, наша небольшая команда не может эффективно их обслуживать. Так что эти скриншоты все еще актуальны.

Новый инструмент временной шкалы также был действительно новаторским. Идея заключалась в том, что он покажет вам производительность веб-страницы во время ее записи! Так вы увидите вживую маркеры производительности:

Забавный факт: я участвовал в создании этой новой панели и тогда сделал свое первое изменение, связанное с C ++. Это было действительно устрашающе, но чей-то наставник очень помог!

Но, что гораздо важнее, в то время у нас также была действительно крутая темная тема:

Инструменты дизайнера

Перенесемся в прошлый год, середину 2016 года и в Firefox 47. Мы действительно сосредоточились на добавлении дополнительных инструментов, ориентированных на дизайнеров, таких как инструменты измерения, инструменты анимации, инструменты для создания снимков экрана, средства выбора цвета:

Но примерно в то же время дебютировал еще один инструмент: панель памяти. Это позволило вам сделать снимок памяти, которую Firefox использовал для вашей страницы, и провести на ней всевозможные полезные анализы:

Хорошо, мы прошли весь путь с 2012 по прошлый год, мы могли бы продолжить, но это приведет нас к настоящему моменту, а это не так весело, как смотреть на старые версии вещей, над которыми вы работали или использовали, верно? Так что давай остановимся на этом (к тому же здесь уже слишком поздно).

Просто для удовольствия, вот анимация, показывающая, как набор инструментов выглядел на протяжении многих лет, от Firefox 22 до Firefox 55:

Надеюсь, вам было так же весело, как и мне!