В блоге sqreen была опубликована статья про эксперименты с удалённой отладкой Node.js — "Experimenting with remote debugging: Node.js runtime code injection".

Любой Node.js-процесс, работающий на Linux или macOS, можно перевести в режим отладки с помощью сигнала SIGUSR1: kill -USR1 <PID>. Затем к этому процессу можно подключиться с помощью Chrome DevTools, поставить брекпойнты, проинспектировать код и сделать всё, что можно сделать в отладчике.

В статье разбирается другой подход — внедрение кода в работающий процесс. Для этого используется библиотека chrome-remote-interface, которая реализует протокол Chrome DevTools, но предоставляет больше возможностей, чем стандартный JS-отладчик в браузере.

Автор статьи пишет, что нигде не встречал подобный подход, но он может использоваться для создания мощных инструментов отладки Node.js.

#nodejs #debug

https://blog.sqreen.com/remote-debugging-nodejs-runtime-code-injection/

В блоге DebugBear была опубликована статья, посвящённая отладке проблем производительности сайта с помощью Chrome DevTools, — "Profiling site speed with the Chrome DevTools Performance tab".

Вкладка "Performance" в инструментах разработчика может показаться очень сложной. Но если немного разобраться, то с её помощью можно быстро находить проблемы, связанные с производительностью и рендерингом. Например, для поиска запросов, приводящих к изменению страницы, для определения кода, приводящего к перекомпановке страницы, для локализации наиболее "горячих" функций и т.п.

Совет из статьи. Часто возникает ситуация, когда сложно понять взаимосвязи между активностями во время загрузки страницы, так как они происходят почти одновременно. Для упрощения отладки можно "растянуть" по времени эти активности с помощью троттлинга сети и CPU.

Полезная статья. Рекомендую заглянуть.

#performance #debug

https://www.debugbear.com/blog/devtools-performance

Минко Гечев из Google представил Angular DevTools — "Introducing Angular DevTools".

Angular DevTools — это расширение для Chrome, облегчающее отладку и профилирование Angular-приложений. Оно было разработано с нуля с участием разработчиков Augury — популярного расширения для отладки Angular.

С помощью Angular DevTools можно инспектировать и редактировать дерево компонентов, профилировать исполнение цикла отслеживания изменений (change detection cycle). Также в рамках этого проекта был улучшен опыт отладки Angular-приложений: был добавлен новый API и улучшены сообщения об ошибках. В следующих релизах разработчики планируют добавить наиболее полезные фичи Augury.

Angular DevTools поддерживает приложения, разработанные с помощью Angular v9 и выше на базе Ivy.

#angular #debug #announcement

https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

Брайан Люиз Рамирез рассказал об использовании Local Overrides для анализа производительности сайта — "Using Chrome Local Overrides To Optimize Page Speed".

Local Overrides — это фича Chrome DevTools, с помощью которой можно временно подменить любой ресурс сайта. Например, в инструментах разработчика можно поправить index.html, добавить исправленный HTML в Local Overrides, и при повторном переходе на сайт вместо оригинального index.html будет браться его изменённая версия.

Этот трюк очень хорошо подходит для исследования влияния потенциальных оптимизаций. Для упрощения анализа исправлений автор статьи поделился своим скриптом для сбора метрик.

Рекомендую почитать статью и поэкспериментировать с Local Overrides. Эта фича может быть полезна для любых быстрых экспериментов.

#performance #debug

https://blr.design/blog/local-overrides/

Руководство по отладке CSS

Стефани Эклз написала статью про отладку CSS — "A Guide To CSS Debugging".

В статье рассказывается про способы поиска элементов, которые вызывают переполнение и приводят к появлению нежелательных полос прокрутки. Про решение проблем с каскадом. Про ошибки, вызванные неконсистентностью браузеров. Про проблемы CSS, которые чрезмерно опираются на структуру документа. В тексте есть много ссылок на смежные статьи, которые будут полезны всем, кто не очень сильно погружён в вёрстку.

Тем не менее в статье есть и странные моменты. В разделе про уменьшение сдвига контента описывается проблема и приводится несколько общих советов, но нет рекомендаций по отладке. Также ожидал увидеть рекомендации по отладке ошибок, связанных с контекстом наложения (stacking context), но их нет.

#css #debug

https://www.smashingmagazine.com/2021/10/guide-debugging-css/

Космические лучи и ошибки в программах

В университете у меня был предмет по теории управления. Там преподаватель рассказывал про альфа-частицы и протоны из космоса, переключающие биты в процессоре и ломающие программы. На эту тему на youtube-канале Veritasium было опубликовано видео — "The Universe is Hostile to Computers".

Ошибки, вызванные подобными явлениями, называются нарушениями в результате единичного события (single-event upset, SEU). Их учитывают при проектировании микроэлектроники и при разработке программного обеспечения, которое должно надёжно работать в условиях высокой радиации и повышенного влияния космических лучей. По этой причине в космосе вычисления дублируют на независимых компьютерах, а NASA во многих космических миссиях использует специальную версию процессора PowerPC — RAD750. По сравнению с обычными процессорами RAD750 в 30 раз более устойчив к возникновению SEU.

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

#programming #debug #video

https://www.youtube.com/watch?v=AaZ_RSt0KP8
https://www.youtube.com/watch?v=jOTM9T59IX4 (на русском языке)

Отладка утечек памяти с помощью "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/

Fuite — инструмент для поиска утечек памяти в SPA

Нолан Лоусон представил утилиту для автоматизированного поиска утечек памяти в SPA — "Introducing fuite: a tool for finding memory leaks in web apps".

Fuite — консольная утилита, работающая поверх Puppeteer. Она запускает циклический сценарий перехода по ссылкам приложения и возврата назад по истории браузера. После сбора статистики выводится список объектов, которые увеличились кратно количеству прогонов.

Fuite не интегрируется в DevTools, как недавно представленный инструмент Edge, но помогает в поиске более широкого спектра утечек памяти.

#debug #tool #spa

https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/

Встроенный браузер Facebook

Томас Штайнер проанализировал работу встроенного браузера Facebook (In-App Browser — IAB), чтобы разобраться, чем он отличается от обычных браузеров — "Inspecting Facebook's WebView".

Некоторые приложения открывают ссылки во встроенном браузере на базе WebView, потому что это даёт им больше возможностей для работы со страницей. На сайтах, открытых с помощью IAB Facebook, встраивается код сбора метрик производительности и информации о доступных возможностях WebView, в window добавляются свойства TEMPORARY и PERSISTENT, модифицируется отправляемый HTTP-заголовок User-Agent.

WebView не поддерживает все возможности браузеров, поэтому некоторые страницы в нём могут быть сломаны или отображаться неправильно. Так как пользователей Facebook несколько миллиардов, вероятность встречи с подобными ошибками довольно высока. Для упрощения решения проблем в IAB включён режим отладки, чтобы разработчики могли подключиться к WebView удалённо с помощью DevTools браузера.

#facebook #debug #mobile

https://blog.tomayac.com/2019/12/09/inspecting-facebooks-webview/

Новое дерево доступности в Chrome DevTools

Йохан Бей из команды разработки Chrome DevTools рассказал про новое дерево доступности, которое появится в будущих версиях Chrome — "Full accessibility tree in Chrome DevTools".

С помощью дерева доступности скринридеры и другие технологии доступности предоставляют средства для работы со страницей. В Chrome 97 и ниже дерево доступности в один момент времени может отображать только выбранный элемент и его потомков. В новой версии Chrome дерево будет отображаться для всей страницы сразу, упрощая поиск элементов, которые недоступны скринридерам. Обновлённое дерево также позволит реализовать новые функции и инструменты для решения проблем доступности.

Новое дерево доступности пока доступно только в Chrome Canary.

#debug #a11y #internals #devtools

https://developer.chrome.com/blog/full-accessibility-tree/

Time-travel debugging в Svelte

Сэм Ван Тассел рассказал про DeLorian — новый инструмент для упрощения отладки Svelte-приложений — "Time Travel Debugging in Svelte with DeLorean".

DeLorian — это расширение Chrome DevTools для отслеживания изменений состояния приложения во времени (time-travel debugging). При изменении состояния создаётся снапшот, к которому можно вернуться в любое время. Перемещение по истории работает также как в Redux DevTools. Также DeLorian отображает дерево компонентов и связанные с ними переменные.

На данный момент есть ограничения: корень приложения должен находится в DOM-элементе с id="root", приложение должно быть собрано в dev-режиме и работать локально.

#svelte #debug #tool

https://medium.com/@vantassel.sam/time-travel-debugging-in-svelte-with-delorean-26e04efe9474