Ultimativni Razvojni set alata kao proširenje za web dizajn i razvoj

64+ moćnih alata za pregledavanje, mjerenje, snimanje, analizu i dizajn web stranica izravno u vašem pregledniku.

Sve Favoriti Pregled Snimanje Mjerenje index.popup_tab_analyse
CSS Inspector
Inspektor animacija
Kopiraj kao Tailwind
Način samo obrisi
Tailwind pomoćnik
Obrisi stranice
Detektor komponenti
Premjesti element
Izbriši/Sakrij element
Izvezi element
Kopiraj kompon..
Snimka zaslona
Izvuci slike
SVG Grabber
Zamjena slika
Generator QR kodova
Kako započeti

Počnite koristiti DevSuite Pro u samo nekoliko klikova

Početak je jednostavan. Instalirajte proširenje, otvorite bilo koju web stranicu i pristupite 64+ razvojnih alata iz skočnog prozora ili plutajućeg doka. Nije potrebna konfiguracija.

Dodajte proširenje u Chrome

  1. Otvorite Chrome Web Store i potražite proširenje "DevSuite Pro".
  2. Kliknite "Dodaj u Chrome" i zatim potvrdite klikom na "Dodaj proširenje" u skočnom prozoru.

Otvorite bilo koju web stranicu i pokrenite alat

  1. Navigirajte do bilo koje web stranice, zatim kliknite ikonu DevSuite Pro na alatnoj traci ili koristite plutajući dok na stranici.
  2. Odaberite bilo koji alat iz mreže. Alati poput CSS Inspector, Ravnala ili Birač boja aktiviraju se odmah na trenutnoj stranici.
Značajke proširenja

Ključne značajke DevSuite Pro

DevSuite Pro nudi 64+ razvojnih alata za pregledavanje, mjerenje, dizajn i analizu web stranica. Poboljšajte svoj radni tijek s moćnim značajkama ugrađenim izravno u vaš preglednik.

CSS Inspector

Zadržite pokazivač iznad bilo kojeg elementa kako biste odmah vidjeli i uredili njegove CSS stilove uživo, što olakšava otklanjanje pogrešaka i prilagodbu dizajna u stvarnom vremenu.

Saznajte više →

Inspektor elemenata

Kliknite na bilo koji element kako biste pregledali njegova svojstva, dimenzije, razmake, fontove i boje. Odmah razumijte strukturu stranice bez otvaranja DevTools preglednika.

Saznajte više →

Ravnala i vodilice

Mjerite udaljenosti, provjeravajte poravnanje i dodajte piksel-savršena ravnala i vodilice na bilo koju web stranicu kako biste osigurali da su vaši dizajni savršeno poravnati.

Saznajte više →

Birač boja

Odaberite boje s bilo kojeg elementa na stranici i kopirajte HEX, RGB ili HSL vrijednosti u međuspremnik jednim klikom.

Saznajte više →

Snimanje zaslona

Snimite cijelu stranicu ili vidljivo područje bilo koje web stranice i odmah je preuzmite — savršeno za dijeljenje dizajna i prijavu grešaka.

Saznajte više →

Tester responzivnosti

Pregledajte bilo koju web stranicu na različitim veličinama zaslona i rezolucijama uređaja kako biste testirali responzivni dizajn bez napuštanja preglednika.

Saznajte više →
Detaljnije istražite više alata:
CSS Inšpektor BESPLATNO

Pregledajte i uredite CSS stilove u stvarnom vremenu

CSS Inspector je moćan razvojni alat koji vam omogućuje pregled potpunih CSS svojstava bilo kojeg elementa jednostavnim…

Debugirajte i upravljajte CSS animacijama u stvarnom vremenu

Animation Inspector pruža potpunu kontrolu nad svakom CSS animacijom i transition efektom koji se izvodi na bilo kojoj web stranici.

Pretvorite CSS bilo kojeg elementa u Tailwind utility klase

Copy as Tailwind premošćuje jaz između vizualnog dizajna i Tailwind CSS koda.

Način obrisa BESPLATNO

Vizualizirajte Cjelokupnu Strukturu Izgleda Bilo Koje Stranice

Outline Only Mode dodaje obrube u boji svakom HTML elementu na web stranici, pružajući vam trenutni pregled strukturnog izgleda stranice.

Dohvatite Kategorizirane Tailwind Klase za Bilo Koji Element

Tailwind Helper pregledava bilo koji element na web stranici i generira sveobuhvatan, kategoriziran pregled…

Vizualni HTML prikaz stabla kao prekrivač na bilo kojoj web stranici

Page Outliner prikazuje cjelokupnu DOM strukturu bilo koje web stranice kao vizualni prekrivač u obliku stabla…

Otkrijte React, Vue, Angular i Svelte komponente na bilo kojoj stranici

Component Detector automatski prepoznaje koji frontend framework web stranica koristi i otkriva njezino cjelokupno stablo komponenti.

Povlecite in spustite za premik kateregakoli elementa

Premakni element vam omogoča, da kliknete na katerikoli element in ga fizično povlečete na novo mesto.

Odstranite ali preklopite vidljivost kateregakoli elementa

Izbriši/Skrij element vam omogoča odstranitev ali začasno skritje kateregakoli elementa z enim klikom.

Izvezite Bilo Koji Element kao HTML, CSS ili JSON

Izvoz Elementa omogućuje vam da kliknete na bilo koji element na web stranici i izvezete njegovu potpunu strukturu u…

Generirajte React, Vue i Svelte Komponente iz Bilo Kojeg Elementa

Kopiranje Koda Komponente pretvara bilo koji element na web stranici u čistu, produkcijski spremnu datoteku komponente…

Zajem zaslona BESPLATNO

Snimite vidljivo područje ili cijelu stranicu

Alat Screenshot snima visokokvalitetne slike bilo koje web stranice u dva načina rada: vidljivo područje (točno ono što…

Izvleči slike BESPLATNO

Pregledajte, odaberite i preuzmite sve slike s bilo koje web stranice

Extract Images skenira bilo koju web stranicu i prikazuje svaku sliku u preglednoj galeriji.

Pronađite, pregledajte i preuzmite svaki SVG na bilo kojoj stranici

SVG Grabber otkriva svaki SVG na web stranici — inline SVG elemente, reference na vanjske .svg datoteke, SVG sprite-ove…

Zamijenite bilo koju sliku na stranici vlastitom

Image Replacer vam omogućuje da kliknete bilo koju sliku na web stranici i zamijenite je svojom — bilo učitavanjem…

Generator QR kod BESPLATNO

Generirajte QR kodove za bilo koji URL ili tekst trenutno

QR Code Generator automatski stvara skenirajući QR code za URL trenutne stranice — ili za bilo koji prilagođeni URL ili…

Ravnilo strani BESPLATNO

Pixel-precizni ravnali, vodilice i mjerenja na bilo kojoj stranici

Page Ruler dodaje ravnale u stilu Photoshopa i povlačive guide lines na bilo koju web-stranicu.

Pregledajte Više Viewport-ova Uređaja Istovremeno

Responsive Viewer prikazuje trenutnu web stranicu renderiranu u više veličina viewport-a uređaja jednu uz drugu — sve na jednom ekranu.

Izmeri razdaljo BESPLATNO

Izmjerite Točne Pixel Udaljenosti Između Bilo Koja Dva Elementa

Measure Distance omogućuje vam da kliknete bilo koja dva elementa na web stranici i odmah vidite točnu pixel udaljenost…

Vizualizirajte Svaki Stacking Context i Z-Index Sloj

Z-Index Inspector otkriva potpuni redoslijed slaganja svakog elementa na web stranici.

Pregledajte CSS Grid i Flexbox Rasporede s Vizualnim Prekrivačima

Grid/Flex Visualizer otkriva svaki CSS Grid i Flexbox kontejner na web stranici i prikazuje njihovu strukturu rasporeda…

Simulirajte žarišta korisničke pažnje na bilo kojoj stranici

Heatmap Simulator generira prediktivnu heatmap pažnje za bilo koju web stranicu na temelju utvrđenih UX istraživačkih…

Selektivno brisanje cachea, cookieja, localStorage-a i sessionStorage-a

Clear Browsing Data daje programerima brz i selektivan način brisanja određenih vrsta podataka pregledavanja za…

Otkrijte svaku tehnologiju iza bilo koje web stranice

Site Stack skenira bilo koju web stranicu i identificira njen cjeloviti tehnološki skup — frontend okviri (React, Vue…

SEO Inšpektor BESPLATNO

Celovita SEO revizija: Meta oznake, naslovi, OpenGraph in več

SEO Inšpektor zagotavlja takojšnjo, celovito SEO revizijo katerekoli spletne strani.

Automatska WCAG provjera: contrast ratio, alt text, ARIA i više

Inspektor pristupačnosti provodi automatske WCAG 2.1 Level AA provjere na bilo kojoj web stranici i generira…

Kliknite bilo koji tekst na bilo kojoj stranici i odmah ga uredite

Live Text Editor čini svaki tekstualni element na web stranici editabilnim jednim klikom.

Zamijenite Bilo Koji Font Globalno ili Po Elementu iz Google Fonts

Fonts Changer vam omogućuje zamjenu bilo kojeg fonta na web stranici s drugim iz biblioteke Google Fonts — globalno…

Seznam vseh pisav BESPLATNO

Otkrijte Svaki Font Korišten na Bilo Kojoj Web Stranici

List All Fonts skenira bilo koju web stranicu i prikazuje potpuni popis svake obitelji fontova u upotrebi — web fontovi…

Izbirnik barv BESPLATNO

Precizni Eyedropper za HEX, RGB i HSL Vrijednosti Boja

Color Picker pruža pixel-precizan eyedropper alat za odabir boja s bilo kojeg elementa na web stranici — teksta…

Barvna paleta BESPLATNO

Izvucite Kompletnu Paletu Boja s Bilo Koje Web Stranice

Color Palette skenira svaki element na web stranici i izvlači kompletan skup korištenih boja — od teksta i pozadina do…

Forsiraj Dark Mode BESPLATNO

Trenutno primijeni dark mode na bilo koju web stranicu

Force Dark Mode primjenjuje tamnu shemu boja na svaku web stranicu koja je nema — ili zamjenjuje svijetlu temu stranice.

Trenutno uključite ili isključite JavaScript po kartici

Toggle JavaScript onemogućuje ili ponovo omogućuje izvršavanje JavaScript koda za trenutnu karticu preglednika jednim klikom.

Pregledajte, Uredite, Dodajte i Brišite Cookies za Bilo Koju Domenu

Cookie Editor prikazuje sve cookies za trenutnu domenu u preglednoj, sortabilnoj tablici.

Beležnik konzole BESPLATNO

Pregledajte Izlaz Konzole u Plutajućem Panelu — Bez DevTools

Console Logger bilježi sve izlaze konzole (console.log, console.warn, console.error, console.info) i prikazuje ih u…

Pratite sve mrežne zahtjeve u stvarnom vremenu

Network Monitor bilježi i prikazuje svaki mrežni zahtjev koji stranica šalje — XHR/Fetch API pozive, učitavanja…

Pregledajte, uredite, dodajte i obrišite localStorage i sessionStorage

Local Storage Editor pruža čisto tablično sučelje za upravljanje unosima localStorage i sessionStorage za trenutnu stranicu.

Skenirajte sve poveznice na stranici i pronađite neispravne

Provjera neispravnih poveznica skenira svaku poveznicu na trenutnoj stranici — anchor hrefs, izvore slika, izvore…

Trenutačna nadzorna ploča performansi: Vrijeme učitavanja, DOM statistike i resursi

Performanse stranice pružaju trenutačni pregled performansi bilo koje web-stranice — vremenski pokazatelji učitavanja…

JSON Formatter BESPLATNO

Formatirajte, minificirajte i validirajte JSON jednim klikom

JSON Formatter uljepšava, minificira i validira JSON izravno u vašem pregledniku.

Trenutno kodirajte stringove u i iz Base64 formata

Base64 Encoder/Decoder pretvara tekst u Base64 i Base64 natrag u tekst izravno u vašem pregledniku.

Kodirajte i dekodirajte URL stringove jednim klikom

URL Encoder/Decoder pretvara URL stringove u njihov postotno kodirani oblik i natrag.

& HTML Entity Encoder BESPLATNO

Trenutno kodirajte i dekodirajte HTML entitete

HTML Entity Encoder pretvara posebne znakove (< > & " ') u njihove HTML entitete (&lt; &gt; &amp; &quot; &#39;) i natrag.

Escapeajte i unescapeajte stringove za kod

Backslash Escape/Unescape pretvara stringove u i iz njihovog escapiranog oblika (\n \t \r \" \' \\ i Unicode escape sekvence).

64 Slika &harr; Base64 BESPLATNO

Pretvorite slike u Base64 Data URI i natrag

Image ↔ Base64 pretvara slikovne datoteke (PNG, JPG, SVG, WebP, GIF) u Base64-kodirane data URI-je i natrag.

JWT Debugger BESPLATNO

Trenutno dekodirajte JSON Web tokene

JWT Debugger dekodira i pregledava JSON Web tokene — raščlanjuje zaglavlje, payload i potpis, prikazuje tvrdnje…

UUID generator BESPLATNO

Generirajte skupine UUID v4 identifikatora

UUID Generator generira kriptografski jake UUID v4 identifikatore koristeći crypto API preglednika.

Hash generator BESPLATNO

Izračunajte MD5, SHA-1, SHA-256, SHA-384, SHA-512 hasheve

Hash Generator izračunava kriptografske hasheve (MD5, SHA-1, SHA-256, SHA-384, SHA-512) bilo kojeg tekstualnog unosa.

Generator lozinki BESPLATNO

Generirajte kriptografski jake lozinke

Password Generator generira jake, nasumične lozinke koristeći kriptografski API slučajnosti preglednika.

Regex Tester BESPLATNO

Testirajte regularne izraze uživo uz isticanje podudaranja

Regex Tester procjenjuje regularne izraze nad testnim tekstom u stvarnom vremenu.

Pretvarajte Unix, ISO i čitljive datume

Timestamp Converter pretvara između Unix vremenskih oznaka (sekunde, milisekunde, mikrosekunde, nanosekunde), ISO 8601…

Diff Tool BESPLATNO

Usporedite dva bloka teksta redak po redak

Diff Tool uspoređuje dva bloka teksta i ističe dodane, uklonjene i nepromijenjene retke uz izlaz označen bojama.

Contrast Checker BESPLATNO

Provjerite WCAG omjer kontrasta bilo koje dvije boje

Contrast Checker izračunava WCAG 2.1 omjer kontrasta između dvije boje i ocjenjuje ih prema AA/AAA pragovima za normalan i velik tekst.

Trenutno pretvarajte HEX, RGB, HSL, HSV i OKLCH

Color Format Converter pretvara bilo koju boju između HEX, RGB, HSL, HSV i OKLCH formata.

Izdvojite dominantnu paletu boja iz bilo koje slike

Ekstraktor boja iz slike analizira bilo koju sliku (povucite, zalijepite ili kliknite za učitavanje) i vraća do 16…

Dobijte CSS selektore i XPath za bilo koji element

DOM Path Finder omogućuje vam da lebdenjem mišem preko bilo kojeg elementa na stranici otkrijete njegov jedinstveni CSS…

CORS provjera BESPLATNO

Testirajte zahtjeve različitog podrijetla i pregledajte CORS zaglavlja

CORS provjera testira hoće li ciljani server dopustiti zahtjev različitog podrijetla (cross-origin) s vaše stranice.

Snimajte WebSocket okvire u stvarnom vremenu

WebSocket Inspector snima svaki WebSocket okvir — poslani i primljeni — na svim vezama na stranici.

Trenutačno pretražite stranicu za oštećenim slikama

Pronalazač oštećenih slika pretražuje svaki <img> element i CSS background-image na stranici, otkriva neuspjela…

Automatski Ispunite Obrasce Realističnim Testnim Podacima

Form Filler popunjava svako vidljivo polje obrasca na stranici realističnim testnim podacima — ime, e-pošta, telefon…

Pretvarajte Između CSV i JSON u Oba Smjera

CSV ↔ JSON Pretvarač obavlja potpunu dvosmjernu konverziju između dva najčešća tabelarna formata.

XML Formatter BESPLATNO

Formatirajte, Validirajte i Pregledajte XML sa Sintaksnim Isticanjem

XML Formatter uljepšava, minificira i validira XML izravno u pregledniku.

SQL Formatter BESPLATNO

Uljepšajte i Formatirajte SQL Upite

SQL Formatter pretvara minificiran ili nepregledan SQL u čitljive, uvučene upite.

Convert to PDF BESPLATNO

Spremite Web Stranice Kao Čiste PDF-ove

Convert to PDF sprema trenutnu web stranicu kao PDF putem dijaloga za ispis preglednika, uz prethodnu primjenu stilova prilagođenih ispisu.

Cijene i planovi

Jednostavna i transparentna cijena

Odaberite plan koji odgovara vašem radnom tijeku. Započnite besplatno, nadogradite bilo kada.

Osnovni

Savršeno za isprobavanje DevSuite Pro. Kreditna kartica nije potrebna.

$0

Besplatno zauvijek
Započnite besplatno
  • 43 besplatnih razvojnih alata
  • CSS Inspector i Birač boja
  • Snimanje zaslona
  • Sučelje plutajućeg doka
  • Sva buduća ažuriranja besplatna

Mjesečno Najpopularnije

Potpuni pristup svim 64+ profesionalnim alatima. Mjesečna naplata.

$2.99

mjesečno
Započnite mjesečni plan
  • Svi 64+ razvojni alati
  • Potpuni pristup Pro alatima
  • Do 3 uređaja
  • Prioritetna podrška
  • Otkažite bilo kada

Jednokratno Najbolja vrijednost

Platite jednom, koristite zauvijek. Puni pristup svim 64+ pro alatima bez ponavljajućih naknada.

$29.99

jednokratno plaćanje
Kupite jednom, koristite zauvijek
  • Svi 64+ razvojni alati
  • Potpuni pristup Pro alatima
  • Do 3 uređaja
  • Prioritetna podrška
  • Bez ponavljajućih naknada
DevSuite Pro FAQ section background
Česta pitanja

Često postavljana pitanja korisnika DevSuite Pro

Uobičajena pitanja o značajkama i korištenju proširenja DevSuite Pro. Ako imate pitanje, odgovor se možda već nalazi u nastavku.

Kako instalirati DevSuite Pro?

Posjetite Chrome Web Store, potražite "DevSuite Pro", kliknju "Dodaj u Chrome" i potvrdite odabirom "Dodaj proširenje". Nakon instalacije, ikona proširenja pojavit će se na alatnoj traci vašeg preglednika. Kliknite na nju za trenutni pristup 64+ razvojnih alata.

Koja je razlika između besplatnih i Pro alata?

Besplatni alati (43+) dostupni su svima bez potrebe za licencom. Pro alati označeni su zlatnom PRO značkom i zahtijevaju aktivnu Pro licencu za korištenje. Iz skočnog prozora možete vidjeti koji su alati besplatni, a koji pro — besplatni alati nemaju ikonu zaključavanja, dok su pro alati malo zatamnjeni dok ne aktivirate svoju licencu.

Zašto neki alat ne radi na nekim web stranicama?

Neke web stranice imaju stroge politike sigurnosti sadržaja (CSP) koje blokiraju određene radnje proširenja preglednika. To je posebno uobičajeno na bankovnim i državnim stranicama. Također, interne Chrome stranice (chrome://) ne dopuštaju proširenjima pokretanje skripti sadržaja.

Jesu li moje promjene na stranici trajne?

Ne. Sve promjene napravljene alatima poput Premjesti element, Uređivač teksta uživo, Izbriši/Sakrij element i CSS Inspector su privremene. Utječu samo na ono što vidite u svom pregledniku upravo sada. Ponovno učitavanje stranice vratit će sve u izvorno stanje.

Kako aktivirati svoju Pro licencu?

Otvorite skočni prozor DevSuite Pro, kliknite ikonu Postavki u gornjem desnom kutu. Pomaknite se do odjeljka Licenca, zalijepite svoj licencni ključ u polje za unos i kliknite Aktiviraj. Ako je ključ valjan, značka će se promijeniti iz FREE u PRO i svi pro alati odmah će se otključati.

Kako premjestiti ili sakriti plutajući dok?

Dok možete premjestiti odlaskom u Postavke i odabirom drugog položaja bočne trake — Gore, Dolje, Lijevo ili Desno. Dok također možete potpuno sakriti isključivanjem "Prikaži dok na stranicama" u Postavkama ili pritiskom Ctrl+Shift+X u bilo kojem trenutku.

Prikuplja li DevSuite Pro podatke o pregledavanju?

Ne. DevSuite Pro ne prikuplja, ne prati niti ne prenosi vaše podatke o pregledavanju. Sve postavke pohranjuju se lokalno u vašem pregledniku. Jedini vanjski zahtjev upućuje se tijekom aktivacije licencnog ključa za provjeru vašeg ključa na našem poslužitelju.

Mogu li koristiti DevSuite Pro u Firefoxu?

Da! DevSuite Pro dostupan je i u Chrome Web Store i u Firefox Add-ons. Radi u Chrome, Edge, Brave i drugim preglednicima temeljenima na Chromiumu, kao i u Firefoxu.