Как сделать скриншот из рендеринга адаптивного дизайна без масштабирования?

Мне нужен скриншот из нашего веб-приложения. Он будет напечатан на плакате, поэтому мне нужна версия с высоким разрешением. У меня монитор 96 DPI, поэтому при печати стандартный снимок экрана Мое решение этой проблемы было

• Подсчитайте необходимое мне количество пикселей, чтобы изображение можно было печатать с разрешением 300 точек на дюйм в нужном мне размере.
• установите инструмент Responsive Design в Firefox точно на тот же размер области просмотра, скажем, X на Y пикселей
• изменяйте масштаб с помощью Ctrl + +, пока необходимые элементы дизайна не заполнят представление (эта часть важна - решение должно работать, когда содержимое масштабируется или уменьшается)
• используйте встроенный инструмент для создания снимков экрана.
• используйте GIMP для изменения разрешения изображения до 300 точек на дюйм без изменения фактического количества пикселей

К моему удивлению, скриншот был не X на Y пикселей, а меньший размер, например, 0,67X на 0,67Y, поэтому я мог получить только изображение с разрешением 200 точек на дюйм, не масштабируя его. Фактор также варьировался. Поиграв, я обнаружил, что размер скриншота определяется уровнем масштабирования.

Использование аддона для создания скриншота (Awesome Screenshot Plus) привело к точно такой же проблеме. Использование Chrome создало другую проблему, поскольку Chrome не отображает весь большой видовой экран, а захватывается только часть изображения. Насколько мне известно, в IE нет инструмента для увеличения размера области просмотра за пределы физического экрана.

Есть ли у вас какие-либо предложения (аддоны браузера, может быть, другой браузер?), Как сделать мой скриншот? Мне нужен браузер для отображения страницы, а не что-то вроде PageLayouts, потому что JavaScript в приложении несколько задействован, и потому что мне нужно немного подправить HTML и CSS на лету.

Я работаю на ПК под управлением Windows, и у моего отдела нет средств, чтобы инвестировать в платный специальный инструмент для этой задачи.

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

В разделе «Доступные кнопки панели инструментов» я установил флажок «Сделать снимок экрана полной страницы». Это заставило маленькую кнопку камеры появиться рядом с кнопкой настроек панели инструментов.

Затем в режиме адаптивного дизайна я установил разрешение и сделал снимок экрана с помощью кнопки полного экрана. Я вышел как правильное разрешение, которое мне было нужно.

Примечание. Я знаю, что функция адаптивного дизайна имеет кнопку для скриншота, но для меня, когда я делала скриншот, разрешение не соответствовало установленному мною.

Это возможно только с дополнением Firefox под названием Pearl Crescent Page Saver, где вы вводите 200 или 300 к значению% в отмеченной настройке. Он увеличит страницу (не увеличенное до пикселя) и сделает снимок экрана, который в 2-3 раза больше, чем ваш видовой экран. Я использовал его, чтобы сделать скриншоты веб-сайтов с разрешением 300-600 точек на дюйм для печати, и это оказалось потрясающим (особенно если сайт был готов к сетчатке, иначе только CSS-линии, углы, шрифты и т. Д. Хорошо масштабировались).

Я нахожусь в процессе поиска альтернативы для Chrome. Я случайно нашел этот плагин для Firefox, но он выглядит немного заброшенным и больше не работает на последних версиях, но более старый стабильный Firefox работает достаточно хорошо. Возможно, стоит сохранить такую ​​версию только для этого, если нет альтернативы.