В продолжение вчерашней темы, ловите 15 полезных советов и рекомендаций по использованию DevTools
Здесь вам и про кейсы получения используемого списка шрифтов, и про измерение произвольного расстояния, и про обнаружение неиспользуемого кода, и про многое другое.
Читать
#devtool
Здесь вам и про кейсы получения используемого списка шрифтов, и про измерение произвольного расстояния, и про обнаружение неиспользуемого кода, и про многое другое.
Читать
#devtool
Telegram
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
💭 Можете назвать ваш личный топ-3 инструментов, которые вы используете в ходе разработки/отладки/профилирования веб-приложений? Git в расчет не берем, ведь его и так все используют.
Кажется, это будет VS Code, Chrome DevTools и ...
#холивар #devtool
Кажется, это будет VS Code, Chrome DevTools и ...
#холивар #devtool
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ изменения цветовых форматов CSS с помощью Chrome Dev Tools.
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
Простая альтернатива console.log() для отладки: на заметку фронтенд-разрабочику.
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ определения шрифта, используемого для любого текста веб-страницы.
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
This media is not supported in your browser
VIEW IN TELEGRAM
#devtool #tip by Shripal Soni
Когда вы устанавливаете точку останова, вы можете сделать ее условной на основе результата выражения. Просто выберите Add Conditional Breakpoint и введите свое выражение.
Когда вы устанавливаете точку останова, вы можете сделать ее условной на основе результата выражения. Просто выберите 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 читайте в блоге.
💡Chrome Dev Tools теперь может переопределять содержимое запросов Fetch/XHR. Отлично подходит для мокинга API, ведь теперь не надо ждать изменения на бэкэнде. Про эти и многие другие изменения Chrome 117 читайте в блоге.
#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
📌В DevTools это можно сделать двумя способами:
1️⃣Принудительное выполнение, пропуск других точек останова (Chrome и Edge).
🔸Открываем инструмент Sources и устанавливаем необходимые точки останова.
🔸После паузы на первой точке останова нажимаем и удерживаем «Возобновить выполнение сценария», а затем «Принудительное выполнение сценария».
2️⃣Временное отключение точки останова (Chrome, Edge и Firefox).
🔸Открываем инструмент Sources в Chrome/Edge или Debugger в Firefox и устанавливаем необходимые точки останова.
🔸После приостановки на первой точке останова нажимаем «Деактивировать точки останова», а затем «Возобновить».
📌Выполнение сценария возобновляется и не приостанавливается ни в одной другой точке останова.
#devtool #tip
📌 Разбираемся, что нового в 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
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