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

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

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

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

#performance #debug

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

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

В университете у меня был предмет по теории управления. Там преподаватель рассказывал про альфа-частицы и протоны из космоса, переключающие биты в процессоре и ломающие программы. На эту тему на 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/