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 читайте в блоге.
👍30🥱5💯3
#devtool #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30
Во время отладки 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
👍10
📌 Разбираемся, что нового в 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
👍20❤1
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
🔥18👍2🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
Иногда бывает сложно разработать/отладить стили для различных состояний элемента, таких как наведение, фокус и т. д.
Выше показано, как мы можем перевести элемент в такие состояния в DevTools, чтобы легко решить эту проблему☝️
#devtool #tip by Shripal Soni
Выше показано, как мы можем перевести элемент в такие состояния в DevTools, чтобы легко решить эту проблему☝️
#devtool #tip by Shripal Soni
🥱27👍22❤2
💡Быстрый способ доступа к результату последнего выражения в консоли Chrome: на заметку фронтенд-разработчику
#devtool #tip by Shripal Soni
#devtool #tip by Shripal Soni
👍27🥱4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#devtool #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤7
This media is not supported in your browser
VIEW IN TELEGRAM
#devtool #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥47👏4❤1🎉1