Статьи

Знайте свои инструменты: станьте JavaScript-разработчиком

Август 23, 2018

Одной из проблем, с которой сталкиваются классические веб-разработчики при погружении в богатый мир JavaScript-приложений, является их инструментарий. Они привыкли работать в полностью интегрированных средах, где вы запускаете веб-сервер, вы напрямую устанавливаете точки останова и в реальном времени проверяете состояние приложения. С JavaScript RIA все немного меняется, взаимодействие с браузером увеличивается, кодирование выполняется в вашей любимой IDE,
отладка в браузере . Такое переключение сознания часто бывает трудным и некомфортным. Но это не так, инструменты JavaScript становятся все лучше.
Хотя классические веб-разработчики имеют опыт разработки веб-приложений более 10 лет, я обнаружил, что они не взаимодействуют с инструментами браузера, такими как Firebug или инструменты Chrome Developer, так, как они, вероятно, уже должны были это делать в прошлом. Эти инструменты являются чрезвычайно мощными и могут реально повысить вашу производительность при правильном использовании

Хотя иногда я использую Firebug, я вынужден признать, что моим основным инструментом для повседневной работы является Chrome. Это в основном вопрос личных предпочтений, но инструменты Chrome Developer более привлекательны по нескольким причинам:

  • Chrome V8 быстрее
  • Раскраска синтаксиса в редакторах JavaScript и CSS
  • Элегантная навигация по коду с клавиатуры
  • Просмотр исходного кода JavaScript с вкладками
  • Функциональность Prettyprint для сжатого исходного кода
  • Интегрированные селекторы запросов DOM
  • …

Это лишь некоторые из них, но помимо них, одна из наиболее замечательных и ценных функций — это живое редактирование загруженных файлов JavaScript. Интегрированная панель исходного кода JavaScript позволяет вам не только просматривать, отлаживать и проверять код JavaScript, но и мгновенно вносить изменения из самой панели кода.

Нажатие
Ctrl+
S затем применяет изменения с огромным преимуществом, что вы можете непосредственно проверить его эффект. Однако, к сожалению, после обновления страницы эти изменения снова теряются, так как файлы перезагружаются с сервера.
Разве не было бы неплохо сохранить их напрямую в исходные файлы?

Автосохранение

Chrome Devtools Autosave — проект, созданный Никитой Васильевым для решения именно этой проблемы. Проект состоит из
  • расширение Chrome и
  • локальный сервер NodeJS

Я не буду вдаваться в подробности процесса установки, просто зайдите в
репозиторий GitHub и посмотрите там файл readme. Это должно сработать отлично. Если нет, не стесняйтесь оставить комментарий к этому сообщению или напишите мне, и я посмотрю, как я могу здесь.

Есть некоторые важные вещи, которые необходимо знать, а именно, чтобы расширение Chrome работало, необходимо включить «API экспериментального расширения»

Перезапуск браузера необходим, чтобы флаг вступил в силу.

Запуск сервера


После успешной установки сервера автосохранения, простая команда
autosaveна вашей консоли должна дать вам это
$ autosave
DevTools Autosave 1.0.0 is running on http://127.0.0.1:9104

Включение маршрутизации


Автосохранение из коробки напрямую работает с
file:///URL. Это означает, что вы должны открыть свою HTML-страницу прямо из файловой системы. Зачем? Потому что таким образом URL-адрес в строке браузера напрямую отображается на местоположение файла на жестком диске. Теперь, это может работать во многих случаях, особенно в простых сценариях, но обычно вы запускаете свое приложение с какого-либо веб-сервера, который работает локально на вашем компьютере, верно?

У автосохранения есть решение для этого также, а именно маршрутизация. Если в Chrome вы идете в Инструменты> Расширения, а затем нажмите «Опция» в расширении DevTools Autosave

Затем должна открыться следующая страница:

Эта страница не требует пояснений. Как вы можете видеть, с левой стороны, первая маршрутизация обрабатывает простые
file:///отображения, в то время как 2-я запись — это та, которую я разместил там, которая в основном отображает все запросы, идущие по адресу
http://coding.jmbp.local/(который является моим локальным веб-сервером Apache), в путь
/Users/juri/coding/. Необходимо обратить внимание на окончание пути, однако, если сохранение не удалось, вы получите уведомление Chrome на рабочем столе, объясняющее проблему.

Но помимо изменения файлов JavaScript, что еще более удобно, это изменения файла CSS. Вы можете в реальном времени проверить изменения в вашем браузере и одновременно сохранить их в реальных файлах CSS на FS. Огромная победа !!

Tincr


Хорошо, пока все хорошо, но слушай, я не тот, у кого на моей машине NodeJS, я даже не знаю, что это такое.

: O. Шучу;), хотя я настоятельно рекомендую вам взглянуть на Node как на веб-разработчика JavaScript. Во всяком случае, со страницы AutoSave Devtools я нашел
Tincr . Разница? Не так много, за исключением того, что вам не нужно запускать отдельный сервер, но вместо этого все обрабатывается самим
расширением Chrome .

Маршрутизация


Опять же, как и в AutoSave Devtools, работа с использованием протокола file: /// работает «из коробки». Если вы хотите работать с веб-сервера, вам нужно просто открыть инструменты разработчика Chrome, переключиться на вкладку Tincr и дать ему
корень вашего проекта.

Вот и все.

Вывод 

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

Пол Ириш (Paul Irish) — разработчик Chrome Developer —
публикует множество отличных видео о том, как повысить производительность с Devtools. Если вы хотите взглянуть на мою личную коллекцию трюков,
здесь я добавлю материал, когда найду их .

36
Share: