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

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

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

Наши каналы: https://yangx.top/proglibrary/9197

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
💭 Можете назвать ваш личный топ-3 инструментов, которые вы используете в ходе разработки/отладки/профилирования веб-приложений? Git в расчет не берем, ведь его и так все используют.

Кажется, это будет VS Code, Chrome DevTools и ...

#холивар #devtool
В продолжение вчерашней темы, ловите 15 полезных советов и рекомендаций по использованию DevTools

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

Читать

#devtool
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ изменения цветовых форматов CSS с помощью Chrome Dev Tools.

#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
Простая альтернатива console.log() для отладки: на заметку фронтенд-разрабочику.

#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ определения шрифта, используемого для любого текста веб-страницы.

#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
#devtool #tip by Shripal Soni

Когда вы устанавливаете точку останова, вы можете сделать ее условной на основе результата выражения. Просто выберите Add Conditional Breakpoint и введите свое выражение.
This media is not supported in your browser
VIEW IN TELEGRAM
#devtool #tip by Addy Osmani

💡Chrome Dev Tools теперь может переопределять содержимое запросов Fetch/XHR. Отлично подходит для мокинга API, ведь теперь не надо ждать изменения на бэкэнде. Про эти и многие другие изменения Chrome 117 читайте в блоге.
#devtool #tip

В новом Chrome появились удобочитаемые коды состояния HTTP

Теперь вы можете быстрее выяснить, что случилось с запросом. Тот же результат можно получить, если навести курсор на код состояния в таблице запросов.
💡Во время отладки иногда может быть полезно просмотреть все event listener’ы, прикрепленные к элементу, и удалить их один за другим, чтобы найти основную причину проблемы.

#devtool #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
Во время отладки JavaScript-кода иногда приходится устанавливать множество точек останова в разных функциях. Возможно, вы захотите сохранить эти точки останова, но не останавливаться на них.

📌В DevTools это можно сделать двумя способами:

1️⃣Принудительное выполнение, пропуск других точек останова (Chrome и Edge).

🔸Открываем инструмент Sources и устанавливаем необходимые точки останова.
🔸После паузы на первой точке останова нажимаем и удерживаем «Возобновить выполнение сценария», а затем «Принудительное выполнение сценария».

2️⃣Временное отключение точки останова (Chrome, Edge и Firefox).

🔸Открываем инструмент Sources в Chrome/Edge или Debugger в Firefox и устанавливаем необходимые точки останова.
🔸После приостановки на первой точке останова нажимаем «Деактивировать точки останова», а затем «Возобновить».

📌Выполнение сценария возобновляется и не приостанавливается ни в одной другой точке останова.

#devtool #tip