Geriausias Kūrėjų įrankių rinkinys žiniatinklio dizainui ir kūrimui

64+ galingų įrankių elementų tikrinimui, matavimui, fiksavimui, analizei ir tinklalapių dizainui tiesiog jūsų naršyklėje.

Visi Mėgstami Tikrinimas Fiksavimas Matavimas index.popup_tab_analyse
CSS Inspector
Animacijų inspektorius
Kopijuoti kaip Tailwind
Tik kontūrų režimas
Tailwind padėjėjas
Puslapio kontūrai
Komponentų detektorius
Perkelti elementą
Ištrinti/Slėpti elementą
Eksportuoti elementą
Kopijuoti kompon..
Ekrano nuotrauka
Ištraukti vaizdus
SVG Grabber
Vaizdų keitiklis
QR kodų generatorius
Kaip pradėti

Pradėkite naudoti DevSuite Pro vos keliais paspaudimais

Pradėti paprasta. Įdiekite plėtinį, atidarykite bet kurį tinklalapį ir pasiekite 64+ kūrėjų įrankius iš iššokančio lango arba plaukiojančio doko. Konfigūracija nereikalinga.

Pridėkite plėtinį prie Chrome

  1. Atidarykite Chrome Web Store ir ieškokite plėtinio "DevSuite Pro".
  2. Spustelėkite "Pridėti prie Chrome" ir patvirtinkite paspausdami "Pridėti plėtinį" iššokančiame lange.

Atidarykite bet kurį tinklalapį ir paleiskite įrankį

  1. Eikite į bet kurią svetainę, tada spustelėkite DevSuite Pro piktogramą įrankių juostoje arba naudokite plaukiojantį doką puslapyje.
  2. Pasirinkite bet kurį įrankį iš tinklelio. Įrankiai kaip CSS Inspector, Liniuotės ar Spalvų rinkiklis aktyvuojami iš karto dabartiniame puslapyje.
Plėtinio funkcijos

Pagrindinės DevSuite Pro funkcijos

DevSuite Pro siūlo 64+ kūrėjų įrankius elementų tikrinimui, matavimui, dizainui ir tinklalapių analizei. Pagerinkite savo darbo eigą su galingomis funkcijomis, integruotomis tiesiai į jūsų naršyklę.

CSS Inspector

Užveskite pelę ant bet kurio elemento, kad iš karto peržiūrėtumėte ir redaguotumėte jo CSS stilius tiesiogiai, todėl lengva derinti ir koreguoti dizainą realiuoju laiku.

Sužinoti daugiau →

Elementų inspektorius

Spustelėkite bet kurį elementą, kad patikrintumėte jo savybes, matmenis, tarpus, šriftus ir spalvas. Iš karto suprasite puslapio struktūrą neatidarydami naršyklės DevTools.

Sužinoti daugiau →

Liniuotės ir kreipikliai

Matuokite atstumus, tikrinkite lygiavimą ir pridėkite pikselių tikslumu pasižyminčias liniuotes ir kreipiklius bet kuriame tinklalapyje, kad jūsų dizainai būtų tobulai sulygiuoti.

Sužinoti daugiau →

Spalvų rinkiklis

Pasirinkite spalvas iš bet kurio elemento puslapyje ir nukopijuokite HEX, RGB arba HSL reikšmes į iškarpinę vienu paspaudimu.

Sužinoti daugiau →

Ekrano nuotraukos fiksavimas

Užfiksuokite viso puslapio arba matomos srities ekrano nuotrauką bet kuriame tinklalapyje ir atsisiųskite ją iš karto — puikiai tinka dizainų dalijimuisi ir klaidų pranešimams.

Sužinoti daugiau →

Prisitaikymo testeris

Peržiūrėkite bet kurį tinklalapį skirtinguose ekrano dydžiuose ir įrenginių rezoliucijose, kad patikrintumėte prisitaikantį dizainą neišeidami iš naršyklės.

Sužinoti daugiau →
Išsamiau ištirkite kitus įrankius:
CSS Inspektorius NEMOKAMA

Tikrinkite ir redaguokite CSS stilius realiu laiku

CSS Inspektorius yra galingas, nemokamas kūrėjų įrankis leidžiantis užvesti pelę ant bet kurio elemento ir akimirksniu…

Derinkite ir valdykite CSS animacijas realiu laiku

Animacijų inspektorius suteikia visišką kontrolę kiekvienai CSS animacijai ir perėjimui bet kuriame tinklalapyje.

Konvertuokite bet kurio elemento CSS į Tailwind klases

Kopijuoti kaip Tailwind sujungia vizualinį dizainą su Tailwind CSS kodu.

Vizualizuokite visą puslapio išdėstymo struktūrą

Kontūro režimas prideda spalvomis koduotus kontūrus kiekvienam HTML elementui, suteikdamas akimirksninį rentgeno vaizdą.

Gaukite kategorizuotas Tailwind klases bet kuriam elementui

Tailwind pagalbininkas patikrina bet kurį elementą ir sugeneruoja visapusišką, kategorizuotą atitinkančių Tailwind CSS klasių suskirstymą.

Vizualinis HTML medžio rodinys bet kuriame puslapyje

Puslapio apžvalgininkas rodo pilną DOM struktūrą kaip vizualinį medžio perdangą tiesiai puslapyje.

Aptikite React, Vue, Angular ir Svelte komponentus

Komponentų detektorius automatiškai identifikuoja kokį frontend karkasą naudoja svetainė ir atskleidžia pilną komponentų medį.

Vilkite ir numeskite norėdami perkelti bet kurį elementą

Perkelti elementą leidžia spustelėti bet kurį elementą ir fiziškai jį nuvilkti į naują poziciją.

Pašalinkite arba perjunkite bet kurio elemento matomumą

Ištrinti/Slėpti elementą leidžia pašalinti arba laikinai paslėpti bet kurį elementą vienu paspaudimu.

Eksportuokite bet kurį elementą kaip HTML, CSS ar JSON

Eksportuoti elementą leidžia spustelėti bet kurį elementą ir eksportuoti jo pilną struktūrą trimis formatais.

Generuokite React, Vue ir Svelte komponentus iš bet kurio elemento

Kopijuoti komponento kodą paverčia bet kurį elementą švariu, gamybai paruoštu komponento failu.

Ekrano kopija NEMOKAMA

Užfiksuokite matomą sritį arba visą puslapį

Ekrano kopija fiksuoja aukštos kokybės vaizdus bet kurio tinklalapio dviem režimais — matoma sritis arba visas puslapis.

Peržiūrėkite, pasirinkite ir atsisiųskite visus paveikslus iš bet kurio puslapio

Ištraukti paveikslus skenuoja bet kurį puslapį ir pateikia kiekvieną paveikslą naršomoje galerijoje.

Raskite, peržiūrėkite ir atsisiųskite kiekvieną SVG bet kuriame puslapyje

SVG sugaudytojas aptinka kiekvieną SVG — eilutinius elementus, išorinius .svg failus, SVG sprite'us ir SVG duomenų URI.

Pakeiskite bet kurį paveikslą puslapyje savo

Paveikslų keitėjas leidžia spustelėti bet kurį paveikslą ir jį pakeisti — įkeliant failą arba įklijuojant URL.

Akimirksniu generuokite QR kodus bet kuriam URL ar tekstui

QR kodų generatorius sukuria nuskaitomą QR kodą dabartinio puslapio URL automatiškai arba bet kuriam pasirinktiniam tekstui.

Pikseliais tikslios liniuotės, kreipiancios ir matavimai bet kuriame puslapyje

Puslapio liniuotė prideda Photoshop stiliaus liniuotes ir tempiamas kreipimo linijas bet kuriam tinklalapiui.

Peržiūrėkite kelis įrenginius vienu metu

Atsakingojo dizaino peržiūra rodo dabartinį puslapį keliais viewport dydžiais greta.

Matuoti atstumą NEMOKAMA

Išmatuokite tikslų pikselių atstumą tarp bet kurių dviejų elementų

Matuoti atstumą leidžia spustelėti du elementus ir akimirksniu pamatyti tikslų atstumą tarp jų.

Vizualizuokite krovimo kontekstus ir z-index sluoksnius

Z-Index inspektorius atskleidžia pilną kiekvieno elemento krovimo tvarką puslapyje.

Tikrinkite CSS Grid ir Flexbox išdėstymus su vizualinėmis perdangomis

Grid/Flex vizualizatorius aptinka kiekvieną CSS Grid ir Flexbox konteinerį ir rodo jų struktūrą kaip spalvotas perdangas.

Simuliuokite vartotojų dėmesio karštas zonas

Šilumos žemėlapio simuliatorius generuoja prognozuojamą dėmesio šilumos žemėlapį bet kuriam puslapiui pagal UX tyrimų modelius.

Selektyviai išvalykite talpyklą, slapukus, localStorage ir sessionStorage

Greitai ir selektyviai išvalykite konkrečius naršymo duomenų tipus dabartinei svetainei.

Aptikite kiekvieną technologiją už bet kurios svetainės

Technologijų šūsnis skenuoja bet kurią svetainę ir identifikuoja jos pilną technologijų šūsnį.

SEO inspektorius NEMOKAMA

Visapusis SEO auditas: Meta žymos, antraštės, OpenGraph ir daugiau

SEO inspektorius teikia akimirksninį, visapusį SEO auditą bet kuriam tinklalapiui.

Automatizuotas WCAG auditas: Kontrastas, Alt tekstas, ARIA ir daugiau

Prieinamumo inspektorius atlieka automatizuotas WCAG 2.1 Level AA patikras bet kuriame puslapyje.

Spustelėkite bet kurį tekstą puslapyje norėdami akimirksniu redaguoti

Tiesioginis teksto redaktorius padaro kiekvieną teksto elementą puslapyje redaguojamą vienu paspaudimu.

Pakeiskite bet kurį šriftą globaliai arba konkrečiam elementui

Šriftų keitėjas leidžia pakeisti bet kurį šriftą puslapyje kitu iš Google Fonts bibliotekos.

Atraskite kiekvieną šriftą naudojamą bet kuriame puslapyje

Visų šriftų sąrašas skenuoja puslapį ir pateikia pilną kiekvienos naudojamos šriftų šeimos inventorių.

Tikslus lašintuvo įrankis HEX, RGB ir HSL reikšmėms

Spalvų parinkėjas teikia pikseliais tikslų lašintuvo įrankį spalvoms parinkti iš bet kurio elemento.

Spalvų paletė NEMOKAMA

Ištraukite pilną spalvų paletę iš bet kurio puslapio

Spalvų paletė skenuoja kiekvieną elementą ir ištraukia pilną naudojamų spalvų rinkinį surūšiuotą pagal dažnumą.

Akimirksniu pritaikykite tamsų režimą bet kurioje svetainėje

Priverstinis tamsus režimas pritaiko tamsią spalvų schemą bet kuriai svetainei kuri jos nesiūlo.

Akimirksniu įjunkite arba išjunkite JavaScript dabartinei kortelei

Perjungti JavaScript deaktyvuoja arba reaktyvuoja JavaScript vykdymą dabartinei kortelei vienu paspaudimu.

Peržiūrėkite, redaguokite, pridėkite ir ištrinkite slapukus

Slapukų redaktorius rodo visus dabartinio domeno slapukus švaroje, rūšiuojamoje lentelėje.

Peržiūrėkite konsolės išvestį plaukiojančiame skydelyje — be DevTools

Konsolės registratorius fiksuoja visą konsolės išvestį ir rodo ją plaukiojančiame skydelyje tiesiai puslapyje.

Stebėkite visas tinklo užklausas realiu laiku

Tinklo monitorius fiksuoja ir rodo kiekvieną dabartinio puslapio tinklo užklausą realiu laiku.

Peržiūrėkite ir redaguokite localStorage ir sessionStorage

Vietinės saugyklos redaktorius teikia švarią lentelės sąsają localStorage ir sessionStorage valdymui.

Skenuokite kiekvieną nuorodą puslapyje ir raskite sugedusias

Sugedusių nuorodų tikrintojas skenuoja kiekvieną nuorodą puslapyje ir identifikuoja sugedusias (404, skirtasis laikas, klaidos).

Akimirksnė našumo informacijos suvestinė: įkėlimo laikas, DOM statistika ir ištekliai

Puslapio našumas teikia akimirksninę bet kurio tinklalapio našumo apžvalgą.

Formatuokite, suspauskite ir tikrinkite JSON vienu paspaudimu

JSON Formatuoklė gražiai suformatuoja, suspaudžia ir patikrina JSON tiesiai jūsų naršyklėje.

Akimirksniu koduokite eilutes į Base64 ir atgal

Base64 kodavimo/dekodavimo įrankis konvertuoja tekstą į Base64 ir Base64 atgal į tekstą tiesiai jūsų naršyklėje.

Užkoduokite ir dekoduokite URL eilutes vienu paspaudimu

URL kodavimo/dekodavimo įrankis konvertuoja URL eilutes į procentais koduotą formą ir atgal.

Akimirksniu koduokite ir dekoduokite HTML esybes

HTML esybių koderis konvertuoja specialius simbolius (< > & " ') į jų HTML esybių atitikmenis (&lt; &gt; &amp; &quot; &#39;) ir atgal.

Apsaugokite (escape) ir nuimkite apsaugą (unescape) eilutėms kode

Pasvirojo brūkšnio apsaugos įrankis konvertuoja eilutes į apsaugotą formą ir atgal (\n \t \r \" \' \\ bei Unikodo apsaugos simboliai).

64 Image &harr; Base64 NEMOKAMA

Konvertuokite vaizdus į Base64 duomenų URI ir atgal

Image ↔ Base64 konvertuoja vaizdų failus (PNG, JPG, SVG, WebP, GIF) į Base64 koduotus duomenų URI ir atgal.

JWT derintuvas NEMOKAMA

Akimirksniu dekoduokite JSON Web Token

JWT derintuvas dekoduoja ir tikrina JSON Web Token — analizuoja antraštę, naudingąją apkrovą ir parašą, atvaizduoja…

Generuokite masinius UUID v4 identifikatorius

UUID generatorius sukuria kriptografiškai stiprius UUID v4 identifikatorius naudodamas naršyklės crypto API.

Apskaičiuokite MD5, SHA-1, SHA-256, SHA-384, SHA-512 maišos reikšmes

Hash generatorius apskaičiuoja kriptografines maišos (hash) reikšmes (MD5, SHA-1, SHA-256, SHA-384, SHA-512) bet kokiam teksto įvedimui.

Generuokite kriptografiškai stiprius slaptažodžius

Slaptažodžių generatorius sukuria stiprius, atsitiktinius slaptažodžius naudodamas naršyklės kriptografinio atsitiktinumo API.

Regex Testeris NEMOKAMA

Testuokite Reguliariąsias Išraiškas Realiu Laiku Su Atitikmenų Paryškinimu

Regex Testeris realiu laiku tikrina reguliariąsias išraiškas pagal testinį tekstą.

Konvertuokite Unix, ISO ir Žmogui Suprantamas Datas

Laiko Žymų Konverteris verčia tarp Unix laiko žymų (sekundės, milisekundės, mikrosekundės, nanosekundės), ISO 8601, RFC…

Diff Įrankis NEMOKAMA

Palyginkite Du Teksto Blokus Eilutė Po Eilutės

Diff Įrankis lygina du teksto blokus ir spalvomis paryškina pridėtas, pašalintas ir nepakitusias eilutes.

Patikrinkite WCAG Kontrasto Santykį Tarp Bet Kurių Dviejų Spalvų

Kontrasto Tikrintuvas apskaičiuoja WCAG 2.1 kontrasto santykį tarp dviejų spalvų ir įvertina jas pagal AA/AAA…

Akimirksniu Konvertuokite HEX, RGB, HSL, HSV ir OKLCH

Spalvų Formatų Konverteris verčia bet kurią spalvą tarp HEX, RGB, HSL, HSV ir OKLCH.

Ištraukite dominuojančią paletę iš bet kurio vaizdo

Vaizdo spalvų ekstraktorius (Image Color Extractor) išanalizuoja bet kokį vaizdo failą (nuvilkite, įklijuokite arba…

Gaukite CSS selektorius ir XPath bet kuriam elementui

DOM Path Finder leidžia užvesti pelę ant bet kurio puslapio elemento ir pamatyti jo unikalų CSS selektorių, trumpąjį…

CORS tikrintuvas NEMOKAMA

Testuokite kelių domenų (cross-origin) užklausas ir tikrinkite CORS antraštes

CORS Checker patikrina, ar kelių domenų (cross-origin) užklausa iš jūsų svetainės būtų leidžiama tikslinio serverio.

Fiksuokite WebSocket kadrus realiuoju laiku

WebSocket Inspector fiksuoja kiekvieną WebSocket kadrą – siųstą ir gautą – visuose puslapio ryšiuose.

Akimirksniu nuskaitykite puslapį dėl sugadintų vaizdų

Broken Image Finder nuskaito kiekvieną <img> ir CSS background-image puslapyje, aptinka sugadintus vaizdus (404…

Automatiškai Užpildykite Formas Realistiškais Testiniais Duomenimis

Form Filler užpildo kiekvieną matomą formos lauką puslapyje realistiškais testiniais duomenimis — vardu, el.

Konvertuokite Tarp CSV ir JSON Bet Kuria Kryptimi

CSV ↔ JSON Converter atlieka pilną konversiją tarp dviejų dažniausiai naudojamų lentelinių formatų abiem kryptimis.

XML Formatuoklė NEMOKAMA

Formatuokite, Validuokite ir Peržiūrėkite XML su Sintaksės Paryškinimu

XML Formatter gražiai suformatuoja, sumažina ir validuoja XML tiesiogiai naršyklėje.

SQL Formatuoklė NEMOKAMA

Sutvarkykite ir Suformatuokite SQL Užklausas

SQL Formatter paverčia sumažintą ar netvarkingą SQL skaitomomis, įtrauktomis užklausomis.

Išsaugokite Tinklalapius Kaip Švarius PDF Failus

Convert to PDF išsaugo dabartinį tinklalapį kaip PDF per naršyklės spausdinimo dialogo langą, pirmiausia pritaikant…

Kainos ir planai

Paprasta ir skaidri kainodara

Pasirinkite planą, atitinkantį jūsų darbo eigą. Pradėkite nemokamai, atnaujinkite bet kada.

Bazinis

Puikiai tinka išbandyti „DevSuite Pro“. Kredito kortelė nereikalinga.

$0

Nemokamai visam laikui
Pradėti nemokamai
  • 43 nemokamų kūrėjų įrankių
  • CSS Inspector ir spalvų rinkiklis
  • Ekrano nuotraukų fiksavimas
  • Plaukiojančio doko sąsaja
  • Visi būsimi nemokami atnaujinimai

Mėnesinis Populiariausias

Visiška prieiga prie visų 64+ profesionalių įrankių. Sąskaitos pateikiamos kas mėnesį.

$2.99

per mėnesį
Pradėti mėnesio planą
  • Visi 64+ kūrėjų įrankiai
  • Visa prieiga prie Pro įrankių
  • Iki 3 įrenginių
  • Prioritetinis palaikymas
  • Atšaukite bet kada

Vienkartinis Geriausia vertė

Mokėkite vieną kartą, naudokite amžinai. Pilna prieiga prie visų 64+ pro įrankių be pasikartojančių mokesčių.

$29.99

vienkartinis mokėjimas
Pirkite vieną kartą, naudokite amžinai
  • Visi 64+ kūrėjų įrankiai
  • Visa prieiga prie Pro įrankių
  • Iki 3 įrenginių
  • Prioritetinis palaikymas
  • Jokių pasikartojančių mokesčių
DevSuite Pro FAQ section background
DUK

Dažnai DevSuite Pro naudotojų užduodami klausimai

Dažni klausimai apie DevSuite Pro plėtinio funkcijas ir naudojimą. Jei turite klausimą, atsakymas galbūt jau pateiktas žemiau.

Kaip įdiegti DevSuite Pro?

Apsilankykite Chrome Web Store, ieškokite "DevSuite Pro", spustelėkite "Pridėti prie Chrome" ir patvirtinkite pasirinkdami "Pridėti plėtinį". Įdiegus plėtinio piktograma atsiras jūsų naršyklės įrankių juostoje. Spustelėkite ją, kad iš karto pasiektumėte 64+ kūrėjų įrankius.

Kuo skiriasi nemokami ir Pro įrankiai?

Nemokami įrankiai (43+) prieinami visiems be licencijos. Pro įrankiai pažymėti auksiniu PRO ženkleliu ir reikalauja aktyvios Pro licencijos. Iš iššokančio lango galite matyti, kurie įrankiai nemokami, o kurie pro — nemokami įrankiai neturi užrakto piktogramos, o pro įrankiai atrodo šiek tiek pritemdyti, kol neaktyvinsite licencijos.

Kodėl kai kurie įrankiai neveikia kai kuriose svetainėse?

Kai kurios svetainės turi griežtas turinio saugumo politikas (CSP), kurios blokuoja tam tikrus naršyklės plėtinių veiksmus. Tai ypač dažna bankų ir vyriausybinėse svetainėse. Be to, vidiniai Chrome puslapiai (chrome://) neleidžia plėtiniams vykdyti turinio scenarijų.

Ar mano pakeitimai puslapyje yra nuolatiniai?

Ne. Visi pakeitimai, atlikti tokiais įrankiais kaip Perkelti elementą, Teksto redaktorius tiesiogiai, Ištrinti/Slėpti elementą ir CSS Inspector, yra laikini. Jie veikia tik tai, ką matote savo naršyklėje dabar. Puslapio perkrovimas viską grąžins į pradinę būseną.

Kaip aktyvinti Pro licenciją?

Atidarykite DevSuite Pro iššokantį langą, spustelėkite Nustatymų piktogramą viršutiniame dešiniajame kampe. Slinkite žemyn iki Licencijos skyriaus, įklijuokite savo licencijos raktą į įvesties lauką ir spustelėkite Aktyvinti. Jei raktas galioja, ženklelis pasikeis iš FREE į PRO ir visi pro įrankiai bus iš karto atrakinti.

Kaip perkelti arba paslėpti plaukiojantį doką?

Doką galite perkelti eidami į Nustatymus ir pasirinkdami kitą šoninės juostos padėtį — Viršuje, Apačioje, Kairėje arba Dešinėje. Doką taip pat galite visiškai paslėpti išjungdami "Rodyti doką puslapiuose" Nustatymuose arba bet kada paspausdami Ctrl+Shift+X.

Ar DevSuite Pro renka naršymo duomenis?

Ne. DevSuite Pro nerenka, neseka ir neperduoda jūsų naršymo duomenų. Visi nustatymai saugomi vietoje jūsų naršyklėje. Vienintelė išorinė užklausa atliekama licencijos rakto aktyvavimo metu, siekiant patikrinti jūsų raktą mūsų serveryje.

Ar galiu naudoti DevSuite Pro Firefox naršyklėje?

Taip! DevSuite Pro prieinamas tiek Chrome Web Store, tiek Firefox Add-ons. Veikia Chrome, Edge, Brave ir kitose Chromium pagrįstose naršyklėse, taip pat Firefox.