Скришоты в Dev Tools

#инструменты #Лаборатория_веб_платформы

Из средств разработчика DevTools в Chrome и Firefox можно делать скришоты.

📸 Отдельная DOM-нода страницы

Для этого нужно просто вызвать контекстное меню на ноде в инспекторе и выбрать нужный пункт:

- в Chrome — вкладка Elements, в меню на ноде пункт Capture node screenshot;
- в Firefox — вкладка Inspector, в меню на ноде пункт Screenshot Node.

📸 Выделенная область или весь сайт

Для этого нужно перейти в режим «адаптивности» и оттуда уже сделать скриншот:

- в Chrome нужно нажать кнопку Toggle device toolbar в левом верхнем углу окошка средств разработчика (или нажать Cmd/Ctrl + Shift + M), затем в появившейся верхней панели в её правом углу нажать три точки, чтобы выпало меню, и там выбрать Capture screenshot (для снимка видимой области) или Capture full size screenshot (для снимка всего экрана). Также эти команды можно вызвать текстом из командного меню по Cmd/Ctrl + Shift + P;

- в Firefox нужно перейти в режим Responsive Design Mode кнопкой в правом верхнем углу окошка средств разработчика (или нажать Cmd/Ctrl + Opt/Alt + M), затем в появившейся верхней панели нажать на иконку с фотоаппаратом. Чтобы заскриншотить всю страницу, то сначала нужно включить эту фичу в настройках DevTools: открыть настройки и там поставиьт галочку Take a screenshot of the entire page. После этого рядом с иконкой Responsive Design Mode появится иконка с фотоаппаратом, которая делает полноразмерный скриншот страницы.

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

💡 Заодно в настройках FF нашёл встроенную в DevTools линейку.