Pridať rozšírenie do Chrome
- Otvorte Chrome Web Store a vyhľadajte rozšírenie „DevSuite Pro“.
- Kliknite na „Pridať do Chrome“ a potom potvrďte kliknutím na „Pridať rozšírenie“ vo vyskakovacom okne.
Viac ako 64 výkonných nástrojov na kontrolu, meranie, snímanie, analýzu a navrhovanie webových stránok priamo vo vašom prehliadači.
Začať je jednoduché. Nainštalujte rozšírenie, otvorte ľubovoľnú webovú stránku a získajte prístup k viac ako 64 vývojárskym nástrojom z vyskakovacieho okna alebo plávajúceho panelu. Nevyžaduje sa žiadna konfigurácia.
DevSuite Pro poskytuje viac ako 64 vývojárskych nástrojov na kontrolu, meranie, návrh a analýzu webových stránok. Urýchlite svoj pracovný postup pomocou výkonných funkcií zabudovaných priamo vo vašom prehliadači.
Prejdite myšou nad ľubovoľný prvok, aby ste okamžite videli jeho štýly CSS a upravovali ich naživo, čo uľahčuje ladenie a úpravu návrhov v reálnom čase.
Dozvedieť sa viac →Kliknutím na ľubovoľný prvok skontrolujete jeho vlastnosti, rozmery, rozstupy, písma a farby. Okamžite pochopte štruktúru stránky bez otvárania prehliadačových nástrojov DevTools.
Dozvedieť sa viac →Merajte vzdialenosti, kontrolujte zarovnanie a pridávajte pixelovo presné pravítka a vodítka na ľubovoľnú webovú stránku, aby ste zabezpečili, že vaše návrhy budú dokonale zarovnané.
Dozvedieť sa viac →Vyberajte farby z ľubovoľného prvku na stránke a kopírujte hodnoty HEX, RGB alebo HSL do schránky jedným kliknutím.
Dozvedieť sa viac →Snímajte celú stránku alebo viditeľnú oblasť a sťahujte ich okamžite — ideálne na zdieľanie návrhov a nahlasovanie chýb.
Dozvedieť sa viac →Zobrazte si náhľad webovej stránky pri rôznych veľkostiach obrazovky a rozlíšeniach zariadení, aby ste otestovali responzívny dizajn bez opustenia prehliadača.
Dozvedieť sa viac →Kontrolujte a upravujte CSS štýly v reálnom čase
CSS Inšpektor je výkonný, bezplatný vývojársky nástroj, ktorý vám umožňuje prejsť kurzorom nad akýkoľvek prvok na…
Ladite a ovládajte CSS animácie v reálnom čase
Inšpektor animácií vám dáva úplnú kontrolu nad každou CSS animáciou a prechodom na akejkoľvek webovej stránke.
Konvertujte CSS akéhokoľvek prvku na triedy Tailwind
Kopírovať ako Tailwind prepája vizuálny dizajn s kódom Tailwind CSS.
Vizualizujte kompletnú štruktúru rozloženia stránky
Režim obrysu pridáva farebne odlíšené obrysové okraje ku každému HTML prvku na webovej stránke, čím vám poskytuje…
Získajte kategorizované triedy Tailwind pre akýkoľvek prvok
Tailwind Pomocník skontroluje akýkoľvek prvok na webovej stránke a vygeneruje kompletný, kategorizovaný rozpis…
Vizuálny HTML stromový náhľad na akejkoľvek stránke
Zobrazovač stránky renderuje kompletnú DOM štruktúru akejkoľvek webovej stránky ako vizuálny stromový náhľad priamo na stránke.
Detekcia komponentov React, Vue, Angular a Svelte
Detektor komponentov automaticky identifikuje, aký frontend framework webová stránka používa a odhalí kompletný strom komponentov.
Presuňte akýkoľvek prvok na stránke ťahaním
Presunúť prvok vám umožňuje kliknúť na akýkoľvek prvok a fyzicky ho presunúť na novú pozíciu.
Odstráňte alebo prepnite viditeľnosť akéhokoľvek prvku
Zmazať/Skryť prvok vám umožňuje odstrániť alebo dočasne skryť akýkoľvek prvok na stránke jedným kliknutím.
Exportujte akýkoľvek prvok ako HTML, CSS alebo JSON
Exportovať prvok vám umožňuje kliknúť na akýkoľvek prvok a exportovať jeho kompletnú štruktúru v troch formátoch.
Generujte komponenty React, Vue a Svelte z akéhokoľvek prvku
Kopírovať kód komponentu transformuje akýkoľvek prvok na čistý, produkčne pripravený súbor komponentu pre váš framework.
Zachyťte viditeľnú oblasť alebo celú stránku
Snímka obrazovky zachytáva vysokokvalitné obrázky akejkoľvek webovej stránky v dvoch režimoch — viditeľná oblasť alebo celá stránka.
Zobrazte, vyberte a stiahnite všetky obrázky z akejkoľvek stránky
Extrahovať obrázky skenuje akúkoľvek webovú stránku a prezentuje každý obrázok v prehliadateľnej galérii.
Nájdite, zobrazte a stiahnite každý SVG na akejkoľvek stránke
SVG Zachytávač objaví každý SVG na webovej stránke — inline SVG prvky, externé .svg súbory, SVG sprite a SVG data URI.
Vymeňte akýkoľvek obrázok na stránke za vlastný
Nahradenie obrázkov vám umožňuje kliknúť na akýkoľvek obrázok a nahradiť ho vlastným — nahraním súboru alebo vložením URL.
Okamžite generujte QR kódy pre akúkoľvek URL alebo text
Generátor QR kódov vytvorí skenovateľný QR kód pre aktuálnu URL stránky automaticky alebo pre akúkoľvek vlastnú URL.
Pixelovo presné pravítka, vodítka a merania na akejkoľvek stránke
Pravítko stránky pridáva pravítka a ťahateľné vodiacich čiar v štýle Photoshopu na akúkoľvek webovú stránku.
Zobrazenie viacerých zariadení súčasne
Responzívny prehliadač zobrazuje aktuálnu stránku vo viacerých veľkostiach viewportu vedľa seba.
Merajte presnú pixelovú vzdialenosť medzi akýmikoľvek dvoma prvkami
Meranie vzdialenosti vám umožňuje kliknúť na dva prvky a okamžite vidieť presnú vzdialenosť medzi nimi.
Vizualizujte kontexty prekrývania a vrstvy z-index
Z-Index Inšpektor odhaľuje kompletné poradie prekrývania každého prvku na stránke.
Kontrolujte CSS Grid a Flexbox rozloženia s vizuálnymi prekrytiami
Grid/Flex Vizualizér detekuje každý CSS Grid a Flexbox kontajner a renderuje ich štruktúru ako farebné prekrytia.
Simulujte hotspoty pozornosti používateľov
Simulátor tepelnej mapy generuje predpokladanú tepelnú mapu pozornosti pre akúkoľvek stránku na základe UX výskumných vzorcov.
Selektívne vyčistite cache, cookies, localStorage a sessionStorage
Rýchlo a selektívne vyčistite konkrétne typy údajov prehliadania pre aktuálnu stránku.
Detekujte každú technológiu za akoukoľvek webovou stránkou
Technologický stack skenuje akúkoľvek webovú stránku a identifikuje jej kompletný technologický stack.
Komplexný SEO audit: Meta tagy, nadpisy, OpenGraph a viac
SEO Inšpektor poskytuje okamžitý, komplexný SEO audit akejkoľvek webovej stránky.
Automatizovaný WCAG audit: Kontrast, Alt text, ARIA a viac
Inšpektor prístupnosti spúšťa automatizované kontroly WCAG 2.1 Level AA na akejkoľvek stránke.
Kliknite na akýkoľvek text na stránke a okamžite ho upravte
Živý textový editor robí každý textový prvok na stránke editovateľným jedným kliknutím.
Vymeňte akékoľvek písmo globálne alebo pre jednotlivý prvok
Zmena písma vám umožňuje nahradiť akékoľvek písmo na stránke iným z knižnice Google Fonts.
Objavte každé písmo použité na akejkoľvek stránke
Zoznam všetkých písiem skenuje stránku a prezentuje kompletný inventár každej použitej rodiny písiem.
Presný nástroj pipety pre HEX, RGB a HSL hodnoty
Výber farby poskytuje pixelovo presný nástroj pipety na vyberanie farieb z akéhokoľvek prvku.
Extrahujte kompletnú farebnú paletu z akejkoľvek stránky
Farebná paleta skenuje každý prvok a extrahuje kompletný súbor použitých farieb zoradených podľa frekvencie.
Okamžite aplikujte tmavý režim na akúkoľvek stránku
Vynútiť tmavý režim aplikuje tmavú farebnú schému na akúkoľvek stránku, ktorá ju neponúka.
Okamžite zapnite alebo vypnite JavaScript pre aktuálnu kartu
Prepnúť JavaScript deaktivuje alebo reaktivuje vykonávanie JavaScriptu pre aktuálnu kartu jedným kliknutím.
Zobrazte, upravte, pridajte a vymažte cookies pre akúkoľvek doménu
Editor cookies zobrazuje všetky cookies pre aktuálnu doménu v prehľadnej, triediteľnej tabuľke.
Zobrazte výstup konzoly v plávajúcom paneli — bez DevTools
Konzolový záznamník zachytáva všetok výstup konzoly a zobrazuje ho v plávajúcom paneli priamo na stránke.
Monitorujte všetky sieťové požiadavky v reálnom čase
Sieťový monitor zachytáva a zobrazuje každú sieťovú požiadavku vykonanú aktuálnou stránkou v reálnom čase.
Zobrazte a upravte localStorage a sessionStorage
Editor lokálneho úložiska poskytuje čisté tabuľkové rozhranie na správu localStorage a sessionStorage.
Skenujte každý odkaz na stránke a nájdite nefunkčné
Kontrola nefunkčných odkazov skenuje každý odkaz na stránke a identifikuje nefunkčné (404, timeout, chyby).
Okamžitý dashboard výkonu: čas načítania, štatistiky DOM a zdroje
Výkon stránky poskytuje okamžitý prehľad výkonu akejkoľvek webovej stránky.
Formátujte, minifikujte a validujte JSON na jedno kliknutie
JSON Formátovač prehľadne formátuje, minifikuje a validuje JSON priamo vo vašom prehliadači.
Okamžite kódujte reťazce do a z Base64
Base64 Kodér/Dekodér prevádza text na Base64 a Base64 späť na text priamo vo vašom prehliadači.
Kódujte a dekódujte URL reťazce na jedno kliknutie
URL Kodér/Dekodér prevádza URL reťazce do a z ich percentuálne kódovanej formy.
Okamžite kódujte a dekódujte HTML entity
HTML Entity Kodér prevádza špeciálne znaky (< > & " ') na ich HTML entity ekvivalenty (< > & " ') a späť.
Escapujte a unescapujte reťazce pre kód
Escapovanie/Unescapovanie spätnej lomky prevádza reťazce do a z ich escapovanej formy (\n \t \r \" \' \\ a Unicode escape sekvencie).
Konvertujte obrázky do Base64 a späť
Obrázok ↔ Base64 konvertuje obrázkové súbory (PNG, JPG, SVG, WebP, GIF) na Base64-kódované data URI a späť.
Okamžite dekódujte JSON Web Tokeny
JWT Debugger dekóduje a skúma JSON Web Tokeny — rozoberá hlavičku, payload a podpis, zobrazuje claimy a upozorňuje na stav expirácie.
Generujte hromadne identifikátory UUID v4
Generátor UUID vytvára kryptograficky silné identifikátory UUID v4 pomocou crypto API prehliadača.
Vypočítajte hashe MD5, SHA-1, SHA-256, SHA-384, SHA-512
Generátor hashov vypočíta kryptografické hashe (MD5, SHA-1, SHA-256, SHA-384, SHA-512) z ľubovoľného textového vstupu.
Generujte kryptograficky silné heslá
Generátor hesiel vytvára silné, náhodné heslá pomocou kryptografického API náhodnosti prehliadača.
Testujte regulárne výrazy naživo so zvýrazňovaním zhôd
Regex Tester vyhodnocuje regulárne výrazy voči testovaciemu textu v reálnom čase.
Konvertujte medzi Unix, ISO a čitateľnými dátumami
Timestamp Converter prevádza medzi Unix časovými značkami (sekundy, milisekundy, mikrosekundy, nanosekundy), ISO 8601…
Porovnajte dva bloky textu riadok po riadku
Diff Tool porovnáva dva bloky textu a farebne zvýrazňuje pridané, odstránené a nezmenené riadky.
Skontrolujte WCAG kontrastný pomer akýchkoľvek dvoch farieb
Contrast Checker vypočíta kontrastný pomer podľa WCAG 2.1 medzi dvoma farbami a vyhodnotí ho voči hraniciam AA/AAA pre…
Okamžite konvertujte HEX, RGB, HSL, HSV a OKLCH
Color Format Converter prevádza akúkoľvek farbu medzi HEX, RGB, HSL, HSV a OKLCH.
Získajte Dominantnú Paletu Z Akéhokoľvek Obrázka
Extraktor Farieb z Obrázka analyzuje akýkoľvek obrázkový súbor (pretiahnutím, vložením alebo kliknutím na načítanie) a…
Získajte CSS Selektory & XPath Pre Akýkoľvek Prvok
Vyhľadávač DOM Cesty umožňuje prejsť kurzorom nad akýkoľvek prvok na stránke a zobraziť jeho jedinečný CSS selektor…
Testujte Cross-Origin Požiadavky & Skontrolujte CORS Hlavičky
CORS Kontrola otestuje, či by cross-origin požiadavka z vašej stránky bola povolená cieľovým serverom.
Zachyťte WebSocket Rámce V Reálnom Čase
WebSocket Inšpektor zachytáva každý WebSocket rámec — odoslaný aj prijatý — naprieč všetkými spojeniami na stránke.
Okamžite Prehľadajte Stránku Na Nefunkčné Obrázky
Vyhľadávač Nefunkčných Obrázkov prehľadá každý <img> a CSS background-image na stránke, zistí nefunkčné načítania (404…
Automaticky vyplňte formuláre realistickými testovacími údajmi
Form Filler vyplní každé viditeľné pole formulára na stránke realistickými testovacími údajmi — meno, email, telefón…
Konvertujte medzi CSV a JSON v oboch smeroch
CSV ↔ JSON konvertor zvláda kompletnú obojsmernú konverziu medzi dvoma najbežnejšími tabuľkovými formátmi.
Formátujte, validujte a zobrazujte XML so zvýraznením syntaxe
XML formátovač prehľadne formátuje, minifikuje a validuje XML priamo v prehliadači.
Skrášlite a naformátujte SQL dotazy
SQL formátovač premení minifikované alebo neusporiadané SQL na čitateľné, odsadené dotazy.
Uložte webové stránky ako čisté PDF súbory
Prevod do PDF uloží aktuálnu webovú stránku ako PDF cez dialógové okno tlače v prehliadači, pričom najprv aplikuje…
Vyberte si najlepší plán pre svoj pracovný postup. Začnite zadarmo, upgradujte kedykoľvek.
Bežné otázky o funkciách a používaní rozšírenia DevSuite Pro. Ak máte otázku, odpoveď môže byť už nižšie.
Navštívte Chrome Web Store, vyhľadajte „DevSuite Pro“, kliknite na „Pridať do Chrome“ a potvrďte výberom „Pridať rozšírenie“. Po inštalácii sa ikona rozšírenia objaví v paneli nástrojov vášho prehliadača. Kliknutím na ňu získate okamžitý prístup k viac ako 64 vývojárskym nástrojom.
Bezplatné nástroje (43+) sú k dispozícii pre všetkých bez licencie. Pro nástroje majú zlatý odznak PRO a na ich používanie sa vyžaduje aktívna Pro licencia. Vo vyskakovacom okne vidíte, ktoré nástroje sú bezplatné alebo pro – bezplatné nástroje nemajú ikonu zámku, zatiaľ čo pro nástroje vyzerajú mierne stlmené, kým si neaktivujete licenciu.
Niektoré webové stránky majú prísne zásady zabezpečenia obsahu (CSP), ktoré blokujú určité akcie prehliadačových rozšírení. Je to bežné najmä na bankových a vládnych stránkach. Okrem toho interné stránky Chrome (chrome://) neumožňujú rozšíreniam spúšťať obsahové skripty.
Nie. Všetky zmeny vykonané nástrojmi ako Presunúť prvok, Živý textový editor, Odstrániť/Skryť prvok a CSS Inspector sú dočasné. Ovplyvňujú len to, čo práve vidíte vo svojom prehliadači. Obnovením stránky sa všetko vráti do pôvodného stavu.
Otvorte vyskakovacie okno DevSuite Pro, kliknite na ikonu nastavení v pravom hornom rohu. Prejdite nadol na sekciu Licencia, vložte svoj licenčný kľúč do vstupného poľa a kliknite na Aktivovať. Ak je kľúč platný, odznak sa zmení z FREE na PRO a všetky pro nástroje sa okamžite odomknú.
Panel môžete presunúť tak, že prejdete do nastavení a vyberiete inú polohu bočného panela — hore, dole, vľavo alebo vpravo. Panel môžete tiež úplne skryť vypnutím možnosti „Zobraziť panel na stránkach“ v nastaveniach alebo stlačením Ctrl+Shift+X kedykoľvek.
Nie. DevSuite Pro nezhromažďuje, nesleduje ani neprenáša žiadne z vašich údajov o prehliadaní. Všetky nastavenia sú uložené lokálne vo vašom prehliadači. Jediná externá požiadavka sa odosiela počas aktivácie licenčného kľúča na overenie vášho kľúča voči nášmu serveru.
Áno! DevSuite Pro je k dispozícii v obchode Chrome Web Store aj vo Firefox Add-ons. Funguje v prehliadačoch Chrome, Edge, Brave a ďalších prehliadačoch založených na Chromium, ako aj vo Firefoxe.