Инструмент «Удалить/скрыть элемент» позволяет удалить или временно скрыть любой элемент веб-страницы одним нажатием. Очищайте страницы для снимков экрана, убирайте отвлекающую рекламу и баннеры с cookie или проверяйте, как выглядит компоновка без определённых разделов — всё в неразрушающем режиме.
Делаете ли вы чистый снимок экрана для портфолио, проверяете, как перекомпонуется страница при удалении раздела, или просто скрываете надоедливые всплывающие оверлеи, чтобы прочитать контент под ними — «Удалить/скрыть элемент» справится с задачей. Инструмент предлагает два режима: «Удалить» (полностью убирает элемент из DOM, заставляя окружающий контент заполнить освободившееся место) и «Скрыть» (устанавливает visibility в hidden, сохраняя место элемента в компоновке). Оба действия обратимы с помощью «Отмены». Красный оверлей при наведении показывает точно, какой элемент будет затронут до нажатия, — никаких догадок. Инструмент ведёт текущий счётчик удалённых и скрытых элементов, и вы можете отменять их по одному или все сразу. Как и все инструменты DevSuite, изменения являются неразрушающими — обновите страницу, и всё вернётся на место.
В режиме «Удалить» нажмите на любой элемент, чтобы полностью убрать его со страницы. Элемент извлекается из DOM, а окружающий контент перекомпонуется, заполняя освободившееся место — как если бы этого HTML-кода никогда не существовало. Идеально для просмотра того, как страница выглядит без определённых разделов.
В режиме «Скрыть» нажмите на элемент, чтобы сделать его невидимым, сохраняя при этом его место в компоновке. Элемент становится прозрачным, но его размеры блока остаются, поэтому остальная часть компоновки страницы остаётся неизменной. Полезно для проверки визуального веса без смещений компоновки.
Перед нажатием перемещение мыши показывает красный полупрозрачный оверлей на элементе, который будет затронут. Этот предпросмотр предотвращает случайное удаление не того элемента — вы всегда точно видите, что именно собираетесь убрать.
Каждое действие удаления или скрытия фиксируется в истории отмены. Нажмите кнопку «Отмена», чтобы отменить последнее действие и вернуть элемент. Вы можете последовательно отменять несколько действий, откатывая изменения шаг за шагом.
Счётчик в реальном времени показывает, сколько элементов вы удалили и сколько скрыли за текущую сессию. С первого взгляда вы видите, сколько изменений сделано и сколько отмен доступно.
Все изменения носят исключительно визуальный характер и существуют только в памяти браузера. Фактический код страницы никогда не изменяется. Обновите страницу в любой момент, чтобы мгновенно восстановить каждый удалённый и скрытый элемент в исходном состоянии.
Удалите баннеры согласия на cookie, виджеты чата, рекламные всплывающие окна, закреплённые заголовки и оверлеи с подпиской на рассылку перед созданием снимков экрана. Получите чистый, профессиональный захват контента страницы без визуального мусора.
Интересно, как будет выглядеть страница без раздела с отзывами? Или что произойдёт при удалении сайдбара? Удалите раздел и мгновенно увидите перекомпоновку — никаких изменений в коде не нужно.
На страницах с большим количеством контента и навязчивой рекламой скрывайте рекламные элементы, чтобы читать статьи и документацию без отвлекающих факторов. Контент перекомпонуется, заполняя доступное пространство.
Готовите презентацию, в которой ссылаетесь на сложную веб-страницу? Удалите элементы, которые не относятся к вашей теме, оставив только те разделы, которые хотите обсудить. Затем сделайте снимок упрощённого вида.
Если элементы перекрываются или закрывают друг друга, удалите верхний, чтобы увидеть, что находится под ним. Это быстрее, чем настройка z-index или свойств display в DevTools, когда нужен лишь быстрый взгляд на то, что скрывается под элементом.
Откройте плавающую панель DevSuite Pro и нажмите на иконку «Удалить/скрыть элемент». Выберите режим «Удалить» (убирает элемент и перекомпоновывает страницу) или режим «Скрыть» (делает элемент невидимым, сохраняя его место).
Перемещайте мышь по странице. Красный полупрозрачный оверлей подсвечивает элемент под курсором, точно показывая, что будет затронуто при нажатии.
Нажмите на выделенный элемент. В режиме «Удалить» он убирается, а окружающий контент перекомпонуется. В режиме «Скрыть» элемент становится невидимым, но его место сохраняется.
Продолжайте нажимать для удаления других элементов или нажмите «Отмена», чтобы вернуть последний удалённый или скрытый элемент. Счётчик действий отображает текущие изменения.
Закончили эксперименты? Обновите страницу, чтобы мгновенно восстановить каждый элемент в исходном состоянии.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
