Как использовать возможности современного Web Inspector

1656597254 kak ispolzovat vozmozhnosti sovremennogo web inspector

Содержание статьи

Крейга Фицпатрика

Маленький, удобный зверь (он же Web Inspector), безусловно, прошел долгий путь со времен «источника просмотра»!

Для тех из вас, кто слишком молод, чтобы помнить, еще в доисторические времена разработки веб-сайтов команда «просмотреть источник» просто открывала HTML страницы в Блокноте Windows. Не было отлично.

Z315UwxriuUc1bIFJZBKuOL9GMrnnVNsA3NG
9HzsRSz98dsHAIyxljAA7MEmuPG81wOlLaLq

Перемотаем на сегодня, у нас есть…

…изменяемые правила CSS со встроенными средствами выбора цветов…

huO9Eg2fuA3IfS1hnziYbgTJpBjzAL2nbbHZ

…возможность смещать значения пикселей с помощью клавиатуры, вызывая движение вашего содержимого в реальном времени…

vtVRPpwtF0GAW6ROWFWHAPDgRm9V4d0nfiMA

…и наибольшее изобретение из всех: «загляд вперед», автоматически заполняющий имена и значения CSS во время ввода. Это сэкономит вам часы времени на отладку, вызванную вашим собственным ужасным правописанием:

7WQBILjFGLGLxGqSFU-VATjY8yRs5dffoGJW

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

Например, ты знал что вы можете создать целую страницу HTML в инспекторе?

Просто откройте новую вкладку и Inspector (вы, вероятно, увидите страницу поиска Google или что-то другое по умолчанию) и начните удалять узлы прямо из инспектора DOM. Перейдя к узлу HTML, щелкните правой кнопкой мыши и выберите РЕДАКТИРОВАТЬ КАК HTML.

GSt70yFCJfH3HgGtGNNf4i1NM63KCaOu1hep

Создайте свою страницу с нуля с помощью автоматического просмотра работы в реальном времени во фрейме браузера выше! Вы можете даже перетаскивать узлы HTML внутри инспектора, чтобы перемещать вещи.

Даже не объясняйте, насколько удивительна консоль JavaScript для проверки памяти, прохождения вверх и вниз по стеку и т.д.

Это отличный день, чтобы стать веб-разработчиком!

Но

Но есть только одна крошечная икота. Сохранение вашей работы стало доступным только недавно, и это немного неудобно.

  • откройте навигатор и выберите замены
  • включить локальные переопределения
  • щелкните правой кнопкой мыши файл CSS и сохраните для замены

Конечно… Здесь достаточно мощная технология, но как быстро вернуть внесенные изменения на производственный сайт? тьфу Так близко к совершенству!

Page Cloud

Когда я писал первую версию PageCloud, я думал об этом.

Несмотря на то, что PageCloud является визуальным конструктором веб-сайтов, помогающим нетехникам создавать веб-страницы, я подумал: инспектор DOM является таким мощным инструментом, не было бы замечательно, если бы вы могли просто внести некоторые изменения и немедленно отправить их в облако. ?

Для этого я решил предоставить разработчикам возможность использовать Web Inspector для редактирования рабочего сайта.

Однако единственный способ достичь этого – сделать шаг назад и переосмыслить, как создаются, управляются и обслуживаются веб-страницы.

fJOKYJXQW7npJiN5Mlux5ngsBWH2QQGf27x5

По пути была целая куча технических проблем, таких как серверы приложений, шаблоны, вложения, базы данных, кэши…

Поэтому я решил извлечь страницу из настольного издательского пособия. Идея была проста: вы запускаете приложение, чтобы иметь возможность читать, редактировать и создавать документы. После того, как вы нажмете «Сохранить», все ваши изменения останутся.

Поэтому я спросил себя:

Что, если бы мы просто рассматривали веб-страницы как документы?

Я не буду утомлять вас трудностями, чтобы сделать это действительно работающим (и несколькими бутылками вина, которые помогли успокоить боль), но эта первоначальная идея была основой для всего, что есть в PageCloud сегодня. И пока мы единственные, кто это делал.

Опираясь на эту концепцию, мы смогли позволить пользователям взаимодействовать с Интернетом так же, как с приложениями для настольных компьютеров: например, копировать/вставлять из буфера обмена, создавать слои, изменять размеры и свободно перемещать объекты на странице.

Эта же идея позволила нам интегрироваться с Web Inspector, позволяя пользователям настраивать что-либо, нажимать Сохранить и готово.

Вот краткий пример:

tCpOmzM9SMCBJfPnTlZKBo7ZewNNZ7uFvF6r

Используя всю красоту современного Web Inspector, вы можете редактировать HTML, CSS и создавать ссылки на внешние CSS и JS. Вы можете даже запускать команды в консоли JavaScript, чтобы изменить DOM!

Любой способ, с помощью которого вы можете изменить этот DOM, является честной игрой. Когда вы «Сохраните», все ваши изменения сохраняются и отправляются обратно в облако – ведь ваша страница – это все-таки документ!

9Zwy1AALskP8H9q8hJnGROEAPL5FVaTwpjzO

Благодаря магии веб-инспектора вы можете даже скопировать узлы из одного окна браузера и вставить их в DOM другой страницы.

Да, мы амбициозны. Но мы верим, что этот новый образ мышления позволит PageCloud стать первым инструментом, удовлетворяющим потребности визуального дизайнера, сохраняя при этом неограниченный доступ для разработчиков.

Возможно, однажды в обозримом будущем «Инспект» заменит удобный интерфейс, а «просмотр источника» войдет в ряды устаревших. То есть, если PageCloud имеет какое-то отношение к этому!

Добавить комментарий

Ваш адрес email не будет опубликован.