Delete/Hide Element ви позволява да премахнете или временно да скриете всеки елемент на уебстраницата с едно щракване. Изчистете страниците за екранни снимки (screenshots), премахнете разсейващите реклами и банери за бисквитки или тествайте как би изглеждало оформлението без определени секции — всичко това напълно недеструктивно.
Независимо дали правите чиста екранна снимка за портфолио, тествате как се пренарежда оформлението на страницата, когато се премахне дадена секция, или просто скривате досадни изскачащи прозорци, за да можете да прочетете съдържанието под тях — Delete/Hide Element е вашият инструмент. Той предлага два режима: Изтриване (напълно премахва елемента от DOM, което кара околното съдържание да се пренареди/запълни пространството) и Скриване (hide) (задава видимостта на скрита, запазвайки пространството на елемента в оформлението). И двете операции са обратими с функцията за отмяна (Undo). Червено покритие при задържане на курсора (hover overlay) показва точно кой елемент ще бъде засегнат, преди да щракнете, така че няма нужда да гадаете. Инструментът поддържа текущ брой на изтритите и скритите елементи и можете да ги отменяте един по един или всички наведнъж. Както всички инструменти на DevSuite, промените са недеструктивни — презаредете страницата и всичко се връща.
В режим на изтриване (Delete mode), щракнете върху произволен елемент, за да го премахнете напълно от страницата. Елементът се изважда от DOM дървото и околното съдържание се пренарежда, за да запълни празното пространство — сякаш този HTML никога не е съществувал. Чудесно за това да видите как изглежда дадена страница без специфични секции.
В режим на скриване (Hide mode), щракнете върху елемент, за да го направите невидим, като запазите пространството му в оформлението. Елементът става прозрачен, но размерите му (box dimensions) остават, така че останалата част от оформлението на страницата остава абсолютно същата. Полезно за тестване на визуална тежест без размествания в оформлението.
Преди да щракнете, преместването на мишката показва червено полупрозрачно покритие (overlay) върху елемента, който ще бъде засегнат. Този предварителен преглед предотвратява случайно изтриване на грешен елемент — винаги виждате точно какво сте на път да премахнете.
Всяко действие за изтриване и скриване се проследява в история за отмяна. Щракнете върху бутона Отмяна (Undo), за да отмените последното действие, връщайки елемента обратно. Можете да отмените множество действия последователно, за да преминете назад през промените си.
Брояч на живо показва колко елемента сте изтрили и колко сте скрили в текущата сесия. С един поглед знаете колко промени сте направили и колко отмени (undos) са налични.
Всички промени са чисто визуални и съществуват само в паметта на браузъра. Действителният код на страницата никога не се променя. Опреснете (refresh) страницата по всяко време, за да възстановите незабавно всеки изтрит и скрит елемент до първоначалното му състояние.
Премахнете банерите за съгласие за бисквитки, уиджетите за чат, промоционалните изскачащи прозорци, лепкавите хедъри (sticky headers) и слоевете за бюлетини (newsletter overlays), преди да правите екранни снимки. Направете чисто, професионално заснемане на съдържанието на страницата без визуален хаос.
Чудите се как тече страницата без раздела за отзиви (testimonials)? Или какво се случва, когато премахнете страничната лента (sidebar)? Изтрийте раздела и вижте как оформлението се пренарежда мигновено — без нужда от промени в кода.
На страници с много съдържание и натрапчиви реклами, скрийте рекламите, за да можете да четете статии и документация без разсейване. Съдържанието се пренарежда (reflows), за да запълни наличното пространство.
Подготвяте презентация, която препраща към сложна уебстраница? Премахнете елементите, които не са подходящи (нерелевантни) за вашата тема, оставяйки само секциите, които искате да обсъдите. След това направете екранна снимка на опростения изглед.
Ако елементите се припокриват или се скриват взаимно, изтрийте горния елемент, за да видите какво има отдолу. Това е по-бързо от коригирането на z-index или display свойствата в DevTools, когато имате нужда само от бърз поглед.
Отворете плаващия док на DevSuite Pro и щракнете върху иконата Delete/Hide Element. Изберете между режим на изтриване (премахва елемента и пренарежда оформлението) или режим на скриване (прави невидимо, но запазва пространството).
Преместете мишката върху страницата. Червен полупрозрачен слой (overlay) подчертава елемента под курсора ви, показвайки точно какво ще бъде засегнато, когато щракнете.
Щракнете върху маркирания елемент. В режим на изтриване, той се премахва и околното съдържание се пренарежда. В режим на скриване, той става невидим, но пространството му се запазва.
Продължете да щраквате, за да премахнете още елементи, или щракнете върху Undo, за да върнете последния премахнат/скрит елемент. Броячът на действията показва вашите текущи промени.
Готови ли сте с експериментите? Опреснете страницата, за да възстановите незабавно всеки елемент до първоначалното му състояние.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
