Poista/Piilota elementti antaa sinulle mahdollisuuden poistaa tai piilottaa tilapäisesti minkä tahansa verkkosivun elementin yhdellä napsautuksella. Siivoa sivuja kuvakaappauksia varten, poista häiritsevät mainokset ja evästebannerit tai testaa layoutin ulkoasua ilman tiettyjä osioita — kaikki ei-destruktiivisesti.
Olipa kyse siistien kuvakaappausten ottamisesta portfoliota varten, testaamisesta, kuinka sivun layout juoksee uudelleen, kun osio poistetaan, tai yksinkertaisesti ärsyttävien popup-overlayjen piilottamisesta lukeaksesi alla olevan sisällön — Poista/Piilota elementti on työkalu tähän. Se tarjoaa kaksi tilaa: Poista (poistaa elementin kokonaan DOM:sta aiheuttaen ympäröivän sisällön juoksemisen uudelleen tilaan) ja Piilota (asettaa näkyvyyden piiloon säilyttäen elementin tilan layoutissa). Molemmat toiminnot ovat peruutettavissa Kumoa-toiminnolla. Punainen hover-overlay näyttää tarkalleen, mihin elementtiin vaikutetaan ennen napsautusta, joten ei arvailua. Työkalu pitää jatkuvaa laskentaa poistetuista ja piiloitetuista elementeistä, ja voit kumota niitä yksi kerrallaan tai kaikki kerralla. Kuten kaikki DevSuite-työkalut, muutokset ovat ei-destruktiivisia — päivitä sivu ja kaikki tulee takaisin.
Poista-tilassa napsauta mitä tahansa elementtiä poistaaksesi sen kokonaan sivulta. Elementti otetaan pois DOM:sta ja ympäröivä sisältö juoksee uudelleen täyttämään tilan — aivan kuin HTML:ää ei olisi olemassa. Erinomainen nähdäksesi, miltä sivu näyttää ilman tiettyjä osioita.
Piilota-tilassa napsauta elementtiä tehdäksesi siitä näkymätön samalla säilyttäen sen tilan layoutissa. Elementistä tulee läpinäkyvä, mutta sen box-dimensiot säilyvät, joten muu sivun layout pysyy täsmälleen samana. Hyödyllinen visuaalisen painon testaamiseen ilman layoutsiirtymiä.
Ennen napsautusta hiiren liikuttaminen näyttää punaisen puoliläpäisevän overlayn elementillä, johon vaikutetaan. Tämä esikatselu estää väärän elementin vahingollisen poistamisen — näet aina tarkalleen, mitä olet poistamassa.
Jokainen poisto- ja piilotustoiminto seurataan kumoa-historiassa. Napsauta Kumoa-painiketta peruuttaaksesi viimeisen toiminnon tuoden elementin takaisin. Voit kumoa useita toimintoja peräkkäin palataksesi muutosten läpi.
Live-laskuri näyttää, kuinka monta elementtiä olet poistanut ja kuinka monta piilottanut nykyisessä istunnossa. Yhdellä silmäyksellä tiedät, kuinka monta muutosta olet tehnyt ja kuinka monta kumoamista on saatavilla.
Kaikki muutokset ovat puhtaasti visuaalisia ja ovat olemassa vain selaimen muistissa. Sivun varsinaista koodia ei koskaan muuteta. Päivitä sivu milloin tahansa palauttaaksesi välittömästi kaikki poistetut ja piiloitetut elementit alkuperäiseen tilaansa.
Poista evästeen hyväksymisbannerit, chat-widgetit, mainosponnahdusikkunat, kiinteät otsikot ja uutiskirje-overlayt ennen kuvakaappausten ottamista. Saat siistin, ammattimaisen tallennuksen sivun sisällöstä ilman visuaalista sotkua.
Mietitkö, kuinka sivu virtaa ilman suositteluosiota? Tai mitä tapahtuu, kun poistat sivupalkin? Poista osio ja katso layoutin juoksevan uudelleen välittömästi — ei koodimuutoksia tarvita.
Sisältörikkaille sivuille, joissa on häiritseviä mainoksia, piilota mainoselementin niin, että voit lukea artikkeleita ja dokumentaatiota ilman häiriötä. Sisältö juoksee uudelleen täyttämään käytettävissä olevan tilan.
Valmisteletko esitystä, joka viittaa monimutkaiseen verkkosivuun? Poista elementit, jotka eivät liity puheenvuoroosi, jättäen vain ne osiot, joista haluat keskustella. Ota sitten kuvakaappaus yksinkertaistetusta näkymästä.
Jos elementit ovat päällekkäin tai peittävät toisensa, poista päällimmäinen elementti nähdäksesi, mitä on alla. Tämä on nopeampaa kuin z-index- tai display-ominaisuuksien säätäminen DevToolsissa, kun tarvitset vain nopean katsauksen.
Avaa DevSuite Pron kelluva telakka ja napsauta Poista/Piilota elementti -kuvaketta. Valitse Poista-tilan (poistaa elementin ja juoksee layoutin uudelleen) tai Piilota-tilan (tekee näkymätöntä mutta säilyttää tilan) välillä.
Siirrä hiirtä sivun yli. Punainen puoliläpäisevä overlay korostaa kohdistimesi alla olevan elementin näyttäen tarkalleen, mihin vaikutetaan, kun napsautat.
Napsauta korostettua elementtiä. Poista-tilassa se poistetaan ja ympäröivä sisältö juoksee uudelleen. Piilota-tilassa siitä tulee näkymätön, mutta sen tila säilyy.
Jatka napsauttamista poistaaksesi lisää elementtejä tai napsauta Kumoa tuodaksesi takaisin viimeksi poistetun/piiloitetun elementin. Toimintolaskuri näyttää nykyiset muutoksesi.
Oletko valmis kokeilemaan? Päivitä sivu palauttaaksesi välittömästi jokainen elementti alkuperäiseen tilaansa.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
