Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Отладка утечек памяти с помощью "Detached Elements" в Edge DevTools
Патрик Броссет из Microsoft рассказал о новом инструменте для упрощения поиска утечек памяти в клиентских JavaScript-приложениях — "Debug memory leaks with the Microsoft Edge Detached Elements tool".
В DevTools Edge была добавлена новая вкладка "Detached Elements". С её помощью можно получить список всех DOM-элементов, откреплённых от документа, и быстро найти участок кода, в котором были сохранены ссылки на эти элементы. Для поиска утечек также можно использовать вкладку "Memory" со снятием снапшотов памяти (доступно во всех Chromium-based браузерах), но по сравнению с "Detached Elements" это не так удобно.
"Detached Elements" будет доступен в Edge 97.
#edge #devtools #debug
https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/
Патрик Броссет из Microsoft рассказал о новом инструменте для упрощения поиска утечек памяти в клиентских JavaScript-приложениях — "Debug memory leaks with the Microsoft Edge Detached Elements tool".
В DevTools Edge была добавлена новая вкладка "Detached Elements". С её помощью можно получить список всех DOM-элементов, откреплённых от документа, и быстро найти участок кода, в котором были сохранены ссылки на эти элементы. Для поиска утечек также можно использовать вкладку "Memory" со снятием снапшотов памяти (доступно во всех Chromium-based браузерах), но по сравнению с "Detached Elements" это не так удобно.
"Detached Elements" будет доступен в Edge 97.
#edge #devtools #debug
https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/
Microsoft Edge Blog
Debug memory leaks with the Microsoft Edge Detached Elements tool
Memory leaks occur when the JavaScript code of an application retains more and more objects in memory that it doesn’t need any longer instead of releasing them for the browser to garbage collect (GC). For long-running apps, small memory leaks of on
Forwarded from Веб-стандарты (Vadim Makeev)
Внутреннее устройство карт кода для JavaScript. Манодж Вивек подробно объясняет, как минифицированный JavaScript связывается с исходным: от структуры формата и VLQ-кодирования до того, как DevTools восстанавливают пути, строки и имена. Разбор проходит через этапы сборки TypeScript, структуру сегментов и примеры декодирования. #js #devtools
https://www.polarsignals.com/blog/posts/2025/11/04/javascript-source-maps-internals
https://www.polarsignals.com/blog/posts/2025/11/04/javascript-source-maps-internals
Forwarded from Веб-стандарты (Vadim Makeev)
Отладка веб-перфоманса с Chrome DevTools. Жоан Леон показывает, как искать тяжелые ресурсы и слабое кеширование в Network, сравнивать локальные метрики с CrUX и разбирать LCP, CLS и INP в Performance Insights и трассировках. А также снипеты,
https://calendar.perfplanet.com/2025/chrome-devtools-for-debugging-web-performance/
content-visibility и оптимизация видео через HandBrake бонусом. #performance #devtools #chromehttps://calendar.perfplanet.com/2025/chrome-devtools-for-debugging-web-performance/
Forwarded from Веб-стандарты (Vadim Makeev)
Автоматизация браузера из терминала с Chrome DevTools MCP CLI. Джоан Леон рассказывает о CLI, которая управляет Chrome через консоль вместо скриптов на Puppeteer или Playwright. Постоянный демон сохраняет состояние между командами для навигации, троттлинга сети, мобильного вьюпорта, тёмной темы и взаимодействия с формами. Можно получать дерево доступности, выполнять JavaScript, делать скриншоты, запускать Lighthouse и трейсить Core Web Vitals. #devtools #tools
https://joanleon.dev/en/chrome-devtools-mcp-cli/
https://joanleon.dev/en/chrome-devtools-mcp-cli/