Одна из моих любимых фишек инструментов разработчика Google Chrome (aka девтулзов) — это возможность сделать скриншот ноды.
Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.
Нужен лишь кусочек? Не вопрос, выдели нужную ноду мышкой и скриншоть себе на здоровье.
Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...
Если в вашей ноде есть картинки, добавленные через тег img с атрибутом
decoding="async" — они потеряются :(Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)
Решается проблема удалением атрибута, прямо в девтулзах, и повторным скриншотом. Иногда достаточно и просто убедиться, что все картинки загружены — я пока паттерна не понял.
Но неприятный осадок всё-таки остался.
Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.
Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/
Просто попробуйте сделать скриншот body, не скролля заранее.
Проверено на Chrome 128.0.6613.120.
В итоге, часть картинок может появиться, а часть — нет.
Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.
P. S. В Firefox баг тоже имеется.
#chrome #bug #async