Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.5K subscribers
2.43K photos
150 videos
38 files
4.82K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
💡 Быстрый способ выбора элементов в Chrome Dev Tools: на заметку фронтенд-разработчику

#devtools #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉21👍7🥱73
This media is not supported in your browser
VIEW IN TELEGRAM
💡Быстрый способ отладки event listeners, который может быть полезен при работе над новым проектом

#devtools #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27👍8🥰8
💡 Простой способ изменения числового представления упорядоченного списка в CSS: на заметку фронтенд-разработчику

#devtools #tip by Shripal Soni
🔥24👍6
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Простой способ отслеживания текущего сфокусированного элемента на веб-странице: на заметку фронтенд-разработчику

#devtools #tip by Shripal Soni
👍24🔥4🎉2🤔1🥱1
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Простой способ отладки/разработки стилей для различных состояний элементов с помощью Dev Tools: на заметку фронтенд-разработчику

#devtools #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11😁3
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Не нужно ждать изменений от backend API. Мы можем легко переопределить ответ на любой запрос локально, чтобы продолжить работу с помощью Dev Tools

#devtools #tip by Shripal Soni
👍26🔥6👏1
This media is not supported in your browser
VIEW IN TELEGRAM
💡 В Chrome Dev Tools мы можем сохранить любой элемент или объект в качестве глобальной переменной, что может быть очень удобно при отладке или быстром анализе данных

#devtools #tip by Shripal Soni
👍21🥰16🥱5
💡 console.context() в действии

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

console.context() может помочь в этом. Он является экспериментальным и доступен только в браузерах на базе Chromium, но это хороший шаг в правильном направлении.

1️⃣ Создайте конкретный инстанс логгера для части вашего приложения:

const myComponentLogger = console.context("name-of-my-component");


2️⃣ Затем логируйте сообщения в обычном режиме, используя ваш новый логгер:

myComponentLogger.log("This is a log message from my component");

myComponentLogger.warn("This is a warning message from my component");


3️⃣ При просмотре логов в консоли отфильтруйте сообщения по названию контекста.

#devtools #tip
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24🥰31👍1