Повышая продуктивность через Chrome расширение

О Developer Experience

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

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

Chrome расширение для Nuxt

Сегодня я хочу поделиться одним из моих последних инструментов — расширением для Chrome — Nuxt Assistant. Это инструмент, который я разработал, чтобы помочь разработчикам, работающим с фреймворком Nuxt.js, улучшить их рабочий процесс и повысить скорость дебага сайтов.

Мотивация за созданием Nuxt Assistant была проста: я сам активно работаю с Nuxt.js и неоднократно сталкивался с повторяющимися и рутинными задачами, которые отнимали много времени. Заметив, как многие разработчики сталкиваются с аналогичными проблемами в nuxt.js, я понял, что эффективное решение этих задач может оказать значительное влияние на продуктивность при работе с Nuxt.

Возможности

Расширение представляет собой кастомную вкладку в DevTools, с несколькими секциями.

Overview

Предоставляет общие сведения о проекте, включая версию Nuxt, Vue.js и наличие SSR и i18n.

Routes

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

SSR Requests

Отображает http запросы выполняемые сервером, перед отправкой HTML, с подробной информацией и подсветкой синтаксиса, что критически важно для определения работоспособности nitro сервера.

Configurations

Предоставляет доступ к конфигурациям и состоянию приложения, давая полное представление о текущем состоянии проекта.

i18n

Отображает доступные языковые настройки, активную локаль и язык браузера, а также позволяет просматривать и искать по i18n ключам и их значениям.

Internals

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

Процесс разработки

Сложность #1: Мало информации

Создание расширения для браузера ничем не отличается от создания какого-нибудь сайта — тот же HTML, Javascript. Больше сложностей было с изучением DevTools API, скудная документация, из-за чего приходилось, например, название API писать в поиске github, изучить там код сторонних расширений и если нужно, то адаптировать пример под новую версию API. Так же надо было настроить обмен сообщений между основным файлом расширения и кастомной вкладкой в DevTools.

Сложность #2: Минификация кода

Так как код сайта в продакшн среде минифицирован, для парсинга внутренних данных nuxt приходится гадать что хранится в каких-нибудь переменных r,e,a и так далее. Добавляем сюда разные версии фреймворка, разные версии плагинов для nuxt и сложность резко повышается

Сложность #3: Ограничения API

Расширения Chrome ограничены функционалом, нежели типичные сайты — нет возможности дать юзеру скопировать текст; по-дефолту, нет возможности подключать скрипты из сторонних URL и т.д. А на использование большинства браузерных функций, например, чтобы узнать данные о текущей вкладке, нужно давать объяснение команде модерации Chrome Web Store зачем тебе нужны эти доступы. Все эти ограничения справедливы и дают пользователям некоторый уровень безопасности, а процесс разработки становится еще интереснее!

Преодоление каждого из этих сложностей на самом то деле улучшило Nuxt Assistant как расширение, а я получил колоссальный опыт.

Примеры использования расширения

Приведу пару примеров, когда расширение становится незаменимым при работе с Nuxt.js:

1. Build ID: зная Build ID можно точно определять какая версия сборки сейчас на сайте. Это бывает нужно, когда хочешь протестировать свежие коммиты в приложении, но изменений на сайте нет. Это помогало выявить несколько проблем, в том числе с CI/CD.
2. SSR: легко определять, был ли запрос на сервере, какой был ответ, был ли ответ успешным, а если с ошибкой, то какой был текст ошибки. Тот же Sentry решает эту проблему, но его отключают на staging средах для уменьшения шума
3. Роуты: файловый роутинг Nuxt.js довольно неоднозначное решение, и не каждому это по вкусу. Опытные разработчики предпочитают явное магическому, но при работе с Nuxt.js имеются определенные ограничения — файловый роутинг слишком сильно завязан на фреймворк. С помощью расширения можно определить какие роуты созданы, и какая из них активная

В завершение

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

Не могу не радоваться тому, что за месяц у расширения уже 200 пользователей из разных континентов, и это без какой-либо рекламы. Думаю, расширение и вправду решает множество проблем. Если вам хочется попробовать расширение, то ссылка на нее: https://chromewebstore.google.com/detail/nuxt-assistant/nebkdnlhchcbbjpgfmhifafhfjipphgi

Если хочется написать свое расширение, то Chrome Extension api по этой ссылке: https://developer.chrome.com/docs/extensions/reference