🖥 Devtools — must-have для работы в ИТ

Сегодня расскажу про один из любимых инструментов, про который я бы хотел узнать как можно раньше, когда попал в ИТ — DevTools (Developer Tools). Это встроенные в браузер (Yandex, Chrome, Firefox, Safari, Edge), инструменты, которые позволяют анализировать, тестировать и оптимизировать сайт/веб-приложение/сервис.

Я не разработчик, но эти инструменты помогают и мне быстрее решать проблемы, экономить время команды. Делюсь личными кейсами, как я использую DevTools в повседневной работе:

🎨 Вкладка "Elements"
Когда дизайнеры или разработчики спорят о том, как лучше сделать, можно создать «живой» прототип в DevTools:
— Убираю лишнее. Например, скрываю пункты меню или баннеры, чтобы показать, как будет выглядеть страница после оптимизации. Делаю скриншот — и у команды уже есть визуальная база для обсуждения.
— Дублирую элементы. Если нужно добавить новый блок, я копирую существующий, меняю текст и цвет — и сразу вижу, как это повлияет на макет.
— Сохраняю SVG. Иногда нужно передать иконку дизайнеру. Выделяю SVG-элемент в коде, копирую его и сохраняю как .svg-файл — готовый исходник без лишних запросов к команде.

Пример
На встрече спорили, куда поставить кнопку. За 5 минут отредактировал HTML, сделал скриншот и отправил всем — проблема решилась без долгих обсуждений.

💬 Вкладка "Console"
Одна из моих любимых. Тут можно увидеть логи веб-приложения, но чаще всего я использую её для взаимодействия с сайтом через js-скрипты. Введите document.querySelector('h1').style.color = 'red' прямо в консоль — это изменит цвет заголовка.
Если команда разработчиков работает над интеграцией с внешним API, я часто проверяю его работу самостоятельно. Например:
— Модифицирую запросы. Копирую fetch-запрос из кода, меняю параметры (например, лимит записей с 10 до 1000), чтобы получить все данные за один раз. Это помогает сразу увидеть, как API ведет себя при больших нагрузках или как выглядит ответ.
— Тестирую гипотезы. Если пользователи жалуются на неработающую кнопку, я запускаю функцию вручную через консоль, чтобы понять, где проблема — в интерфейсе или бэкенде.
— Смотрю логи ошибок, которые возникают при загрузке страницы (например, «Uncaught TypeError»).

Пример
Нужно было выгрузить много данных по каждой из категорий. Написал js-скрипт, который по АПИ вытащил категории, потом по каждой из категорий вытащил записи. В итоге получил полные данные сервиса, которые смог потом уже проанализировать в Excel.

🌐 Вкладка "Network"
Отображает все запросы, которые браузер делает при загрузке страницы: картинки, скрипты, стили, API-запросы и т.д. Здесь видно время загрузки, размер файлов, статус ответа сервера (успешно, ошибка и т.д.).
Тут я чаще всего:
— Смотрю АПИ-запросы, чтобы скопировать их и использовать на вкладке Console
— Смотрю что фронт отправил на бэк (request), и что бэк прислал на фронт (response)
— Используя фильтр Media скачиваю видео и аудио с сайтов 🏴‍☠️

Пример
Надо было получить список всех элементов меню. На вкладке Network нашел запрос, который получал данные для меню, скопировал response, сконвертировал в Excel и использовал при формировании ТЗ на разработку.

Остальные вкладки я использую редко, но если кратко вот их назначение:
— 🧠 Sources — скачиваю изображения, изучаю исходники и отлаживаю JS.
— ⚡️ Performance — тестирую производительность страницы.
— 🧠 Memory — отслеживаю утечки памяти.
— 📁 Application — управляю кэшем, куками.

DevTools — это не только для технарей, немного практики — и вы начнете видеть в них помощника, который упрощает жизнь в ИТ-проектах.
В этой статье на Хабре можно найти несколько классных лайфхаков, которые пригодятся не только в работе 😜.

🔗 См. также
Новичкам
— Intro Video от команды Chrome
— DevTools (Документация)
— Обзор SkillFactory
— Обзор HTML-academy

Бывалым
— Одно из многочисленных видео Никиты Дубко (devtools-евангелиста)
— Официальные советы Chrome DevTools
— DevToolsTips.org — подборка практических примеров.
— Can I dev tools? — интерактивный гайд, который покажет, как решать конкретные задачи через DevTools.

#devtools #tools #tips

☕️7 заблуждений в продуктовом менеджменте

Вдохновился постом Димы Некрасова из JetMetrics про "7 заблуждений в аналитике". Решил перенять эстафету и сделать подобное по продуктовому менеджменту. Результат выше ↑ 😉

#tips #product

☕️ Как писать SQL-запросы с помощью LLM: гайд для менеджеров без аналитиков

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

У меня такое постоянно)) Поэтому в последнее время часто пишу SQL-запросы в обнимку с LLM-моделью (мог бы и сам, но с моделью быстрее😉).

LLM не заменяет аналитика, но помогает сгенерировать правильный запрос, если передать в модель минимально достаточный контекст.

📦 Что собрать перед запросом к LLM
Для качественного ответа LLM нужно передать 4 ключевых блока (👀см.скрин)

✨ Как передать данные LLM: шаблон промпта
Если у вас есть набор таблиц, с которым вы часто работаете, вот структурированный текст, который вы можете скопировать, заполнить и использовать для генерации запросов с помощью LLM:

У меня есть следующие таблицы в базе данных Postgres:

Таблица: users
Описание: Информация о пользователях платформы
Колонки:
- user_id (INT, PK): Уникальный ID пользователя
- email (VARCHAR): Email пользователя
- signup_date (DATE): Дата регистрации

Таблица: orders
Описание: Заказы пользователей
Колонки:
- order_id (INT, PK): Уникальный ID заказа
- user_id (INT, FK → users.user_id): Кто сделал заказ
- order_date (TIMESTAMP): Дата заказа
- amount (DECIMAL): Сумма заказа
- status (VARCHAR): Статус ("completed", "cancelled", "pending")

Связи:
- orders.user_id ссылается на users.user_id

Пример данных (orders):
| order_id | user_id | order_date | amount | status |
|----------|---------|---------------------|--------|----------|
| 101 | 5 | 2025-10-01 14:30:00 | 99.99 | completed|

Бизнес-логика:
- Активный пользователь — заходил в систему за последние 7 дней.
- Отмененные заказы (status = 'cancelled') не учитываются в выручке.

Запрос пользователя:
"Составь SQL запрос для расчёта общей выручки по месяцам за 2025 год."

💡 Советы для повышения качества генерации
— Указывайте СУБД
Синтаксис отличается: PostgreSQL, Vertica, Trino, Clickhouse — упомяните, какая система используется.
— Четко формулируйте цель
Лучше: «Покажи выручку по месяцам за 2025 год, учитывая только статус completed»
Хуже: «Нужна статистика по продажам»
— Ограничивайте scope
Не передавайте всю БД — только релевантные таблицы. Это снизит шум и повысит точность.
— Вместо ручного составления описания таблиц можно автоматически получить метаданные через системные таблицы вашей БД. Например для Postgres:

SELECT 
  tbl.table_name,
  col.column_name,
  col.data_type,
  pg_catalog.col_description(c.oid, col.ordinal_position::int) AS column_comment
FROM information_schema.tables tbl
JOIN information_schema.columns col ON col.table_name = tbl.table_name
JOIN pg_catalog.pg_class c ON c.relname = tbl.table_name
WHERE tbl.table_schema = 'public'
  AND tbl.table_type = 'BASE TABLE'
ORDER BY tbl.table_name, col.ordinal_position;

Скопируйте результат в формате таблицы или JSON
Вставьте в промпт LLM вместо ручного описания структуры

А вы уже пробовали генерировать SQL через LLM? Делитесь в комментариях — какие фишки помогают вам!

#tips #llm #sql #analytics

☕️ Лайфхак: как за 2 секунды создать документ или таблицу в Google

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

Знаете этот момент, когда нужно срочно записать идею, сделать табличку для расчётов или начать новый проект — и вы лезете в Google Диск, ищете значок, кликаете... а потом ещё ждёте загрузки?

Спасение есть, просто введите в адресной строке браузера:
docs.new → создаётся новый Google Docs
sheet.new → создаётся новый Google Sheets
slide.new → Google Slides
form.new → Google Forms
site.new → Google Sites (даже не знал, что такое есть)))
draw.new → открывается playground Mermaid (киллерфича для техписов)
keep.new → Google Keep

✅ Профит!
— Нет лишних кликов
— Нет ожидания
— Нет поиска по папкам

Работает в любом браузере (Chrome, Safari, Edge, Firefox).

Делитесь в комментариях, если есть ещё хаки!

#tips #lifehacks #productivity

☕️ Инструмент, который превратит ваш код из "уродца" в "звездочку"

Вы когда-нибудь тратили 20 минут, чтобы сделать скриншот кода для поста, только чтобы в итоге всё равно выглядело как школьная тетрадь с помарками? 😅

На прошлой неделе я написал пост про SQL-запросы и буквально стонал от ужаса при мысли о скриншотах. Старые инструменты давали:
— Скучное белое поле с серым текстом
— Обрезанные края и размытые шрифты
— И главное — полное отсутствие стиля

И тогда я открыл для себя Carbon — сервис, который превращает ваш сухой код в визуальные шедевры. Просто вставляете код → выбираете тему → экспортите картинку. И всё!

Раньше я бы потратил полчаса на скриншоты, а с Carbon — сделал 4 идеальных изображения за 4 минуты.

Это бесплатно. Не требует регистрации. И работает так быстро, что вы не успеете допить кофе.

Проверьте — прямо сейчас вставьте свой любимый кусок кода в Carbon. Поверьте, разница впечатлит.

P.S. А вы какие инструменты используете для оформления технического контента?

#tools #dev #productivity #coding #tips