Dokonalá Sada nástrojů pro vývojáře pro webový design a vývoj

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.

Vše Oblíbené Kontrola Snímek Měření index.popup_tab_analyse
CSS Inspector
Inspektor animací
Kopírovat jako Tailwind
Režim pouze obrysů
Pomocník Tailwind
Obrysy stránky
Detektor komponent
Přesunout prvek
Odstranit/Skrýt prvek
Exportovat prvek
Kopírovat komponentu
Snímek obrazovky
Extrahovat obrázky
SVG Grabber
Nahradit obrázek
Generátor QR kódů
Jak začít

Začněte používat DevSuite Pro několika kliknutími

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.

Přidejte rozšíření do Chromu

  1. Otevřete Chrome Web Store a vyhledejte rozšíření "DevSuite Pro".
  2. Klikněte na "Přidat do Chromu" a poté potvrďte kliknutím na "Přidat rozšíření" ve vyskakovacím okně.

Otevřete webovou stránku a spusťte nástroj

  1. Přejděte na libovolnou webovou stránku, poté klikněte na ikonu DevSuite Pro na panelu nástrojů nebo použijte plovoucí panel na stránce.
  2. Vyberte libovolný nástroj z mřížky. Nástroje jako CSS Inspector, Pravítka nebo Kapátko se na aktuální stránce okamžitě aktivují.
Funkce rozšíření

Klíčové funkce DevSuite Pro

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.

CSS Inspector

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 →

Inspektor prvků

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 →

Pravítka a vodítka

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 →

Kapátko barev (Color Picker)

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řízení snímku obrazovky

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 →

Tester responzivity

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 →
Prozkoumejte další nástroje podrobně:
CSS Inspector ZDARMA

Ž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…

SEO inspektor ZDARMA

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 (&lt; &gt; &amp…

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.

JWT Debugger ZDARMA

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.

Regex Tester ZDARMA

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…

Diff Tool ZDARMA

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…

CORS Checker ZDARMA

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.

XML Formatter ZDARMA

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.

SQL Formatter ZDARMA

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…

Ceny a plány

Jednoduché a transparentní ceny

Vyberte si nejlepší plán pro svůj pracovní postup. Začněte zdarma, upgrade proveďte kdykoli.

Základní

Ideální pro vyzkoušení DevSuite Pro. Není vyžadována kreditní karta.

$0

Navždy zdarma
Začněte zdarma
  • 43 bezplatných vývojářských nástrojů
  • CSS Inspector a Kapátko barev
  • Pořízení snímku obrazovky
  • Rozhraní plovoucího panelu
  • Všechny budoucí bezplatné aktualizace

Měsíční Nejoblíbenější

Plný přístup ke všem 64+ profesionálním nástrojům. Fakturováno měsíčně.

$2.99

za měsíc
Spustit měsíční plán
  • Všechny 64+ vývojářské nástroje
  • Plný přístup k Pro nástrojům
  • Až 3 zařízení
  • Prioritní podpora
  • Kdykoli zrušte

Jednorázově Nejvýhodnější

Zaplaťte jednou, používejte navždy. Plný přístup ke všem 64+ Pro nástrojům bez jakýchkoli poplatků za předplatné.

$29.99

jednorázová platba
Koupit jednou, používat navždy
  • Všechny 64+ vývojářské nástroje
  • Plný přístup k Pro nástrojům
  • Až 3 zařízení
  • Prioritní podpora
  • Žádné poplatky za předplatné
DevSuite Pro FAQ section background
Časté dotazy

Často kladené dotazy uživatelů DevSuite Pro

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.

Jak nainstaluji DevSuite Pro?

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.

Jaký je rozdíl mezi bezplatnými a Pro nástroji?

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.

Proč nástroj na některých webech nefunguje?

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.

Jsou změny, které na stránce provedu, trvalé?

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.

Jak aktivuji svou licenci Pro?

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.

Jak mohu přesunout nebo skrýt plovoucí panel?

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.

Shromažďuje DevSuite Pro údaje o procházení?

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.

Mohu používat DevSuite Pro ve Firefoxu?

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.