Библиотека фронтендера | 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
加入频道
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
🔐 Кстати, в новой версии Firefox завезли несколько новых фич, связанных с приватностью, в том числе операция "Copy Link Without Site Tracking", позволяющая скопировать URL выбранной ссылки в буфер обмена без отслеживания переходов между сайтами.

📌 Разбираемся, что нового в Firefox 120 для разработчиков (обзор от OpenNET):

• Добавлен API User Activation, позволяющий определить взаимодействовал ли раньше пользователь со страницей, взаимодействует ли в настоящий момент или ничего не делал на странице.

• Добавлена поддержка нового кода ответа HTTP — 103 Early Hints, который может использоваться для упреждающего вывода заголовков.

• В CSS добавлены новые единицы измерения размера lh и rlh, позволяющие указать размер, соответствующий линейной высоте (CSS-свойство line-height) элемента или корневого элемента.

• В CSS добавлена функция light-dark() для выставления цветов сразу для светлой и тёмной цветовой схемы без применения media-запроса prefers-color-scheme.

• В JavaScript-функцию Date.parse() добавлена поддержка дополнительных вариантов форматирования даты.

• Обеспечена поддержка атрибута media в элементе <source>, вложенном в элементы <picture>, <audio> и <video>.

• Включена по умолчанию поддержка расширения WasmGC, упрощающего портирование в WebAssembly программ, написанных на языках со сборщиком мусора.

• В инструменты для веб-разработчиков добавлена возможность симуляции работы вкладок в offline-режиме.

• В панель редактирования стилей добавлена кнопка Pretty Print для форматирования и приведения в наглядную форму минифицированной таблицы стилей (ранее минифицированные стили форматировались автоматически).

• В инструментах для разработчиков значительно (до 70%) ускорена работа отладчика при большом объёме исходного кода. Проведён рефакторинг отладчика, нацеленный на корректное срабатывание точек останова, привязанных к событию unload.

#новости #tip #devtool
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️Кстати, в VS Code 1.85 завезли несколько полезных фич для фронтендера:

1. Визуализация снэпшотов кучи JavaScript: новая версия включает возможность визуализации снэпшотов кучи V8, сохраняемых в формате .heapsnapshot. Это позволяет лучше анализировать производительность и утечки памяти, предоставляя как традиционное табличное представление, так и графическое представление связей между объектами в памяти.

2. Переход к определению из подсказок TypeScript: позволяет быстро переходить к определению элементов кода прямо из всплывающих подсказок в TypeScript, что ускоряет навигацию и повышает эффективность работы с кодом.

3. Поддержка TypeScript 5.3

#новости #devtool
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Иногда бывает сложно разработать/отладить стили для различных состояний элемента, таких как наведение, фокус и т. д.

Выше показано, как мы можем перевести элемент в такие состояния в DevTools, чтобы легко решить эту проблему☝️

#devtool #tip by Shripal Soni
💡Быстрый способ доступа к результату последнего выражения в консоли Chrome: на заметку фронтенд-разработчику

#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Network => Overview: простой способ фильтрации запросов по времени в Chrome Dev Tools

#devtool #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
💡 В Chrome Dev Tools мы можем переопределять заголовки ответов, что может быть удобно для локальной обработки ошибок CORS до тех пор, пока они не будут исправлены на уровне сервера.

#devtool #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM