Přidejte rozšíření do Chromu
- Otevřete Chrome Web Store a vyhledejte rozšíření "DevSuite Pro".
- Klikněte na "Přidat do Chromu" a poté potvrďte kliknutím na "Přidat rozšíření" ve vyskakovacím okně.
64+ výkonných nástrojů pro kontrolu, měření, zachycování, analýzu a návrh webových stránek přímo ve vašem prohlížeči.
Začít je jednoduché. Nainstalujte rozšíření, otevřete libovolnou webovou stránku a získejte přístup k více než 64 vývojářským nástrojům z vyskakovacího okna nebo plovoucího panelu. Není vyžadována žádná konfigurace.
DevSuite Pro nabízí 64+ vývojářských nástrojů pro kontrolu stránek, měření, design a analýzu. Zrychlete svůj pracovní postup díky výkonným funkcím integrovaným přímo ve vašem prohlížeči.
Najeďte myší na libovolný prvek a okamžitě uvidíte jeho CSS styly a můžete je přímo upravovat, což usnadňuje ladění a úpravy designu v reálném čase.
Dozvědět se více →Kliknutím na libovolný prvek zkontrolujete jeho vlastnosti, rozměry, mezery, písma a barvy. Okamžitě pochopte strukturu stránky bez otevírání DevTools prohlížeče.
Dozvědět se více →Měřte vzdálenosti, kontrolujte zarovnání a přidávejte na libovolnou webovou stránku pravítka a vodítka s přesností na pixely, abyste zajistili dokonalé zarovnání vašeho designu.
Dozvědět se více →Vybírejte barvy z libovolného prvku na stránce a jedním kliknutím zkopírujte hodnoty HEX, RGB nebo HSL do schránky.
Dozvědět se více →Pořizujte snímky celé stránky nebo viditelné oblasti jakékoli webové stránky a okamžitě je stahujte — ideální pro sdílení návrhů a hlášení chyb.
Dozvědět se více →Zobrazte náhled webové stránky v různých velikostech obrazovky a rozlišeních zařízení a otestujte responzivní design, aniž byste opustili prohlížeč.
Dozvědět se více →Živá kontrola a úprava CSS stylů
Nástroj CSS Inspector je výkonný nástroj pro vývojáře, který vám umožní vidět všechny CSS vlastnosti libovolného prvku…
Ladění a ovládání CSS animací v reálném čase
Inspektor animací vám dává úplnou kontrolu nad každou CSS animací a přechodem na jakékoli webové stránce.
Převeďte CSS libovolného prvku na třídy Tailwind utility
Kopírovat jako Tailwind překlenuje propast mezi vizuálním návrhem a kódem Tailwind CSS.
Vizualizujte kompletní strukturu rozvržení libovolné stránky
Režim pouze obrysy přidává barevně odlišené ohraničení každému HTML prvku na webové stránce, čímž vám poskytuje…
Získejte kategorizované třídy Tailwind pro libovolný prvek
Pomocník Tailwind prověřuje libovolný prvek na webové stránce a generuje komplexní, kategorizovaný přehled…
Vizuální překrytí stromu HTML na libovolné webové stránce
Obrysovač stránky vykresluje kompletní strukturu DOM libovolné webové stránky jako vizuální překrytí stromem — přímo na…
Detekujte komponenty React, Vue, Angular a Svelte na libovolném webu
Detektor komponent automaticky identifikuje, který frontendový framework web používá, a odhaluje jeho kompletní strom komponent.
Přetažením přemístěte libovolný prvek na stránce
Přesunout prvek vám umožňuje kliknout na libovolný prvek na webové stránce a fyzicky ho přetáhnout na novou pozici.
Odstraňte nebo přepínejte viditelnost libovolného prvku
Smazat/Skrýt prvek vám umožňuje jedním kliknutím odebrat nebo dočasně skrýt libovolný prvek na webové stránce.
Exportujte libovolný prvek jako HTML, CSS nebo JSON
Exportovat prvek vám umožňuje kliknout na libovolný prvek na webové stránce a exportovat jeho kompletní strukturu ve…
Generujte komponenty React, Vue a Svelte z libovolného prvku
Kopírovat kód komponenty transformuje libovolný prvek na webové stránce do čistého, produkčně připraveného souboru…
Zachytit viditelnou oblast nebo snímek celé stránky
Snímek obrazovky pořizuje vysoce kvalitní obrázky libovolné webové stránky ve dvou režimech: viditelná oblast (přesně…
Zobrazujte, vybírejte a stahujte všechny obrázky z libovolné webové stránky
Extrakce obrázků prohledá libovolnou webovou stránku a zobrazí každý obrázek v přehledné galerii.
Najděte, zobrazte a stáhněte každý SVG na libovolné stránce
SVG Grabber najde každý SVG na webové stránce — vložené SVG elementy, reference na externí soubory .svg, SVG sprity…
Zaměňte libovolný obrázek na stránce za vlastní
Nahrazení obrázků vám umožní kliknout na libovolný obrázek na webové stránce a nahradit ho vlastním — buď nahráním…
Okamžitě generujte QR kódy pro libovolnou URL nebo text
Generátor QR kódů automaticky vytvoří skenovatelný QR kód pro URL aktuální stránky — nebo pro libovolnou vlastní URL…
Pravítka, vodítka a měření s přesností na pixel na libovolné stránce
Pravítko stránky přidává na libovolnou webovou stránku pravítka ve stylu Photoshopu a přetahovatelné vodítka.
Náhled více výřezů zařízení současně
Responzivní prohlížeč zobrazuje aktuální webovou stránku vykreslenou ve více velikostech výřezů zařízení vedle sebe…
Měřte přesné pixelové vzdálenosti mezi libovolnými dvěma elementy
Měření vzdáleností vám umožní kliknout na libovolné dva elementy na webové stránce a okamžitě vidět přesnou pixelovou…
Vizualizujte každý skládací kontext a vrstvu Z-indexu
Inspektor Z-indexu odhaluje kompletní pořadí skládání každého elementu na webové stránce.
Kontrolujte rozvržení CSS Grid a Flexbox pomocí vizuálních překryvů
Vizualizér Grid/Flex detekuje každý kontejner CSS Grid a Flexbox na webové stránce a vykresluje jejich strukturu…
Simulujte místa pozornosti uživatelů na libovolné stránce
Simulátor teplotní mapy generuje prediktivní teplotní mapu pozornosti pro libovolnou webovou stránku na základě…
Selektivně vymazávejte cache, cookies, localStorage a sessionStorage
Vymazání dat prohlížení poskytuje vývojářům rychlý a selektivní způsob, jak vymazat specifické typy dat prohlížení pro…
Detekujte každou technologii za libovolnou webovou stránkou
Site Stack prohledá libovolnou webovou stránku a identifikuje kompletní technologický zásobník — frontendové frameworky…
Komplexní SEO audit: meta tagy, nadpisy, OpenGraph a další
SEO inspektor poskytuje okamžitý a komplexní SEO audit libovolné webové stránky.
Automatizovaný audit WCAG: kontrast, alt text, ARIA a další
Inspektor přístupnosti spouští automatizované kontroly WCAG 2.1 úrovně AA na libovolné webové stránce a vytváří…
Kliknutím na libovolný text na libovolné stránce ho okamžitě upravíte
Živý textový editor učiní každý textový element na webové stránce upravitelným jediným kliknutím.
Zaměňte libovolný font globálně nebo po elementech z Google Fonts
Změna fontů vám umožní nahradit libovolný font na webové stránce jiným z knihovny Google Fonts — buď globálně (veškerý…
Zjistěte každý font použitý na libovolné webové stránce
Seznam všech fontů prohledá libovolnou webovou stránku a představí kompletní inventář každé rodiny fontů v použití…
Přesné kapátko pro hodnoty barev HEX, RGB a HSL
Kapátko barev poskytuje přesný eyedropper nástroj na pixelové úrovni pro výběr barev z libovolného elementu na webové…
Extrahujte kompletní barevnou paletu z libovolné webové stránky
Barevná paleta prohledá každý element na webové stránce a extrahuje kompletní sadu použitých barev — od textu a pozadí…
Okamžitě aplikujte tmavý režim na libovolnou webovou stránku
Vynucení tmavého režimu aplikuje tmavé barevné schéma na libovolnou webovou stránku, která ho nenabízí — nebo přepíše…
Okamžitě povolte nebo zakažte JavaScript pro každou záložku
Přepínač JavaScriptu deaktivuje nebo znovu aktivuje spouštění JavaScriptu pro aktuální záložku prohlížeče jediným kliknutím.
Zobrazujte, upravujte, přidávejte a mažte cookies pro libovolnou doménu
Editor cookies zobrazuje všechny cookies pro aktuální doménu v přehledné, seřaditelné tabulce.
Zobrazujte výstup konzole v plovoucím panelu — bez DevTools
Záznamník konzole zachytává veškerý výstup konzole (console.log, console.warn, console.error, console.info) a zobrazuje…
Sledujte všechny síťové požadavky v reálném čase
Síťový monitor zachytává a zobrazuje každý síťový požadavek aktuální stránky — volání XHR/Fetch API, načítání skriptů…
Zobrazujte, upravujte, přidávejte a mažte localStorage a sessionStorage
Editor lokálního úložiště poskytuje přehledné tabulkové rozhraní pro správu záznamů localStorage a sessionStorage pro…
Prohledejte každý odkaz na stránce a najděte nefunkční
Kontrola nefunkčních odkazů prohledá každý odkaz na aktuální stránce — href kotev, zdroje obrázků, zdroje skriptů a…
Okamžitý řídicí panel výkonu: Čas načítání, statistiky DOM a zdroje
Výkon stránky poskytuje okamžitý přehled výkonu libovolné webové stránky — metriky časování načítání (FCP…
Formátování, minifikace a validace JSON na jeden klik
JSON Formatter přehledně formátuje, minifikuje a validuje JSON přímo v prohlížeči.
Okamžité kódování řetězců do a z Base64
Base64 Encoder/Decoder převádí text do Base64 a Base64 zpět na text přímo v prohlížeči.
Kódování a dekódování URL řetězců na jeden klik
URL Encoder/Decoder převádí URL řetězce do jejich procentuálně kódované podoby a zpět.
Okamžité kódování a dekódování HTML entit
HTML Entity Encoder převádí speciální znaky (< > & " ') na jejich ekvivalenty v podobě HTML entit (< > &…
Escapování a unescapování řetězců pro kód
Backslash Escape/Unescape převádí řetězce do a z jejich escapované podoby (\n \t \r \" \' \\ a Unicode escape sekvence).
Převod obrázků do Base64 a zpět
Image ↔ Base64 převádí obrázkové soubory (PNG, JPG, SVG, WebP, GIF) na Base64 kódovaná data URI a zpět.
Okamžité dekódování JSON Web Tokenů
JWT Debugger dekóduje a analyzuje JSON Web Tokeny — rozebere hlavičku, payload i podpis, zobrazí claims a upozorní na stav expirace.
Hromadné generování identifikátorů UUID v4
Generátor UUID vytváří kryptograficky silné identifikátory UUID v4 pomocí crypto API prohlížeče.
Výpočet hashů MD5, SHA-1, SHA-256, SHA-384, SHA-512
Generátor hashů počítá kryptografické hashe (MD5, SHA-1, SHA-256, SHA-384, SHA-512) z libovolného textového vstupu.
Generování kryptograficky silných hesel
Generátor hesel vytváří silná, náhodná hesla pomocí kryptografického generátoru náhodných čísel prohlížeče.
Testujte regulární výrazy živě se zvýrazněním shod
Regex Tester vyhodnocuje regulární výrazy proti testovacímu textu v reálném čase.
Převádějte Unix, ISO a čitelná data
Timestamp Converter převádí mezi Unix časovými razítky (sekundy, milisekundy, mikrosekundy, nanosekundy), formátem ISO…
Porovnejte dva textové bloky řádek po řádku
Diff Tool porovná dva textové bloky a barevně zvýrazní přidané, odebrané a nezměněné řádky.
Zkontrolujte kontrastní poměr WCAG u libovolných dvou barev
Contrast Checker vypočítá kontrastní poměr WCAG 2.1 mezi dvěma barvami a ohodnotí ho podle prahů AA/AAA pro běžný i velký text.
Okamžitě převádějte HEX, RGB, HSL, HSV a OKLCH
Color Format Converter převádí libovolnou barvu mezi formáty HEX, RGB, HSL, HSV a OKLCH.
Získejte dominantní paletu barev z libovolného obrázku
Image Color Extractor analyzuje libovolný obrázek (přetáhněte, vložte nebo klikněte pro nahrání) a vrátí až 16…
Získejte CSS selektory a XPath pro libovolný prvek
DOM Path Finder umožňuje najet myší na libovolný prvek stránky a zobrazit jeho unikátní CSS selektor, krátký selektor…
Otestujte cross-origin požadavky a prozkoumejte CORS hlavičky
CORS Checker ověří, zda by cross-origin požadavek z vašeho webu byl cílovým serverem povolen.
Zachytávejte WebSocket rámce v reálném čase
WebSocket Inspector zachytává každý WebSocket rámec — odeslaný i přijatý — napříč všemi spojeními na stránce.
Okamžitě prohledejte stránku pro nefunkční obrázky
Broken Image Finder prohledá každý <img> a CSS background-image na stránce, detekuje nefunkční načtení (404, chyby…
Automatické vyplňování formulářů realistickými testovacími daty
Form Filler vyplní každé viditelné pole formuláře na stránce realistickými testovacími daty – jméno, e-mail, telefon…
Převádějte mezi CSV a JSON v obou směrech
CSV ↔ JSON Converter zvládá kompletní obousměrný převod mezi dvěma nejběžnějšími tabulkovými formáty.
Formátujte, validujte a zobrazujte XML se zvýrazněním syntaxe
XML Formatter přehledně formátuje, minifikuje a validuje XML přímo v prohlížeči.
Zkrášlete a naformátujte SQL dotazy
SQL Formatter převádí minifikované nebo neuspořádané SQL na čitelné, odsazené dotazy.
Uložte webové stránky jako přehledná PDF
Convert to PDF uloží aktuální webovou stránku jako PDF přes dialog tisku prohlížeče, přičemž nejprve aplikuje styly…
Vyberte si nejlepší plán pro svůj pracovní postup. Začněte zdarma, upgrade proveďte kdykoli.
Běžné dotazy týkající se funkcí a používání rozšíření DevSuite Pro. Máte-li dotaz, odpověď může být níže.
Navštivte Chrome Web Store, vyhledejte "DevSuite Pro", klikněte na "Přidat do Chromu" a potvrďte výběrem "Přidat rozšíření". Po instalaci se v panelu nástrojů prohlížeče zobrazí ikona rozšíření. Kliknutím na ni získáte okamžitý přístup k více než 64 vývojářským nástrojům.
Bezplatné nástroje (43+) jsou dostupné všem bez licence. Pro nástroje mají zlatý odznak PRO a k jejich použití je vyžadována aktivní licence Pro. Ve vyskakovacím okně uvidíte, které nástroje jsou zdarma nebo Pro – bezplatné nástroje nebudou mít ikonu zámku, zatímco Pro nástroje budou vypadat mírně zašedlé, dokud neaktivujete licenci.
Některé webové stránky mají přísné zásady zabezpečení obsahu (CSP), které blokují určité akce rozšíření prohlížeče. To je běžné zejména u bankovních a vládních webů. Interní stránky prohlížeče Chrome (chrome://) navíc neumožňují rozšířením spouštět skripty obsahu.
Ne. Všechny změny provedené nástroji jako Přesunout prvek, Editor textu naživo, Odstranit/Skrýt prvek a CSS Inspector jsou dočasné. Ovlivňují pouze to, co právě vidíte ve svém prohlížeči. Obnovení stránky vše vrátí do původního stavu.
Otevřete vyskakovací okno DevSuite Pro, klikněte na ikonu nastavení v pravém horním rohu. Přejděte dolů do sekce licence, vložte licenční klíč do vstupního pole a klikněte na Aktivovat. Pokud je klíč platný, odznak se změní z FREE na PRO a všechny Pro nástroje se okamžitě odemknou.
Panel můžete přesunout v Nastavení výběrem jiné pozice postranního panelu – Nahoře, Dole, Vlevo nebo Vpravo. Panel můžete také zcela skrýt vypnutím přepínače „Zobrazit panel na stránkách“ v Nastavení nebo stisknutím Ctrl+Shift+X.
Ne. DevSuite Pro neshromažďuje, nesleduje ani nepřenáší žádné vaše údaje o procházení. Veškeré nastavení je uloženo lokálně ve vašem prohlížeči. Jediný externí požadavek je odeslán během aktivace licenčního klíče k ověření vašeho klíče s naším serverem.
Ano! DevSuite Pro je k dispozici jak v Chrome Web Store, tak v doplňcích pro Firefox. Funguje v prohlížečích Chrome, Edge, Brave a dalších prohlížečích založených na Chromiu a také ve Firefoxu.