Вопрос или проблема
Мне нравится функция “Сделать скриншот полностью” в Chrome и Brave, и я часто ей пользуюсь.
Однако кажется, что некоторые сайты закодированы так, что функция “Сделать скриншот полностью” не знает, как с ними справляться. В результате полученный скриншот не содержит полной прокручиваемой длины страницы.
Пример, с которым я сталкивался несколько раз — это длинные формы на https://airtable.com.
Интересно, есть ли какой-то обходной путь; возможно, я мог бы открыть панель DevTools и настроить HTML или CSS определенного элемента перед нажатием на “Сделать скриншот полностью”. Хотя это было бы неудобно, я действительно не хочу устанавливать расширения.
Я нашел действительно полезный ответ* на форуме поддержки Mozilla, который сработал!
Я открыл DevTools и добавил это правило CSS перед использованием “Сделать скриншот полностью”:
html, body, div, section {
overflow: visible !important;
}
Еще кто-то на той странице упомянул:
Обратите внимание, что вы также можете использовать JavaScript-закладку, чтобы переключать это правило стиля.
javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div,section{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})()
Обновление от 2021-09-15: Я только что попробовал этот JavaScript-закладкe, когда страница на notion.site доставляла проблемы, и закладка исправила проблему (и “Сделать скриншот полностью” после этого сработала корректно).
*Обновление от 2021-10-09: На самом деле я решил добавить , section, так как такие сайты, как LinkedIn, используют этот тег.
Решение от @Ryan сработало для меня, но иногда оно нарушает макет, поскольку селектор div (и section) довольно общий.
Чтобы это исправить:
- Откройте DevTools и выберите элемент (или область прокрутки), которую вы хотите сфотографировать (⌘⇧C на macOS /
CTRL⇧C на Windows, наведите курсор на
конкретный элемент на странице и щелкните его) - Перейдите на вкладку Console в DevTools
- Вставьте приведенный ниже код в Console, и
- Нажмите Enter ⏎
var elem = $0;
while (elem) {
elem.style.setProperty('overflow', 'visible', 'important');
elem = elem.parentElement;
}
Этот код добавит атрибут стиля
overflow: visible !importantтолько к соответствующему узлу и ко всем его родителям.
Затем сделайте скриншот полного размера или узла (⌘⇧P на macOS / CTRL⇧P на Windows, и найдите screenshot).
.
Ответ или решение
Захват полноразмерного скриншота в браузерах Brave или Chrome может не работать корректно на некоторых веб-страницах, таких как Airtable, из-за особенностей их верстки. Этот вопрос требует более глубокого понимания, чтобы обеспечить решение без использования дополнительных расширений.
Теория
Функция «Capture full size screenshot» в браузерах предназначена для создания скриншота всей страницы, включая скрытые области на момент, когда страница отображается полностью. Однако некоторые веб-сайты могут использовать сложные CSS-правила для управления прокруткой и отображением, что мешает нормальной работе этой функции. Часто причиной является настройка свойства overflow, которое контролирует, как отображаются элементы, выходящие за границы видимой области.
Пример
Проблемы с захватом полноразмерных скриншотов могут проявляться, например, на страницах с длинными формами Airtable. В стандартных условиях функция может захватить только видимую часть страницы из-за использования свойств CSS вроде overflow: hidden или overflow: auto, что ограничивает возможности прокрутки.
Применение
Для решения этой проблемы без дополнительных расширений вы можете использовать встроенные DevTools браузера. Вот пошаговая инструкция:
-
Использование CSS: Прежде чем делать скриншот, вы можете временно изменить CSS страницы, установив стиль
overflow: visibleдля элементовhtml,body,div,section. Это позволит прокрутить и заскринить всю страницу.Пример CSS:
html, body, div, section { overflow: visible !important; } -
JavaScript Bookmarklet: Если вы ищете более автоматизированное решение, можно создать JavaScript букмарклет, который будет переключать этот стиль:
javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div,section{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})() -
Изменение через Консоль DevTools: Выберите элемент на странице, кликнув его с предварительно вызванным режимом выбора элемента (
⌘⇧Cна macOS илиCTRL⇧Cна Windows), затем выполните следующий JavaScript код в консоли:var elem = $0; while (elem) { elem.style.setProperty('overflow', 'visible', 'important'); elem = elem.parentElement; }
Данные решения помогут обойти ограничения верстки и успешно получить снимок всей страницы. Это особенно полезно для профессионалов, которые требуют детального документирования веб-страниц для анализа, отчетности или тестирования.