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

39+ 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 Helper
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 39+ 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 39+ 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.

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.

Spalvų rinkiklis

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

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.

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.

Išsamiau ištirkite kitus įrankius:
CSS Inspektorius NEMOKAMA

Tikrinkite ir redaguokite CSS stilius realiu laiku

Derinkite ir valdykite CSS animacijas realiu laiku

Konvertuokite bet kurio elemento CSS į Tailwind klases

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

Gaukite kategorizuotas Tailwind klases bet kuriam elementui

Vizualinis HTML medžio rodinys bet kuriame puslapyje

Aptikite React, Vue, Angular ir Svelte komponentus

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

Pašalinkite arba perjunkite bet kurio elemento matomumą

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

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

Ekrano kopija NEMOKAMA

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

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

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

Pakeiskite bet kurį paveikslą puslapyje savo

Akimirksniu generuokite QR kodus bet kuriam URL ar tekstui

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

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

Matuoti atstumą NEMOKAMA

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

Vizualizuokite krovimo kontekstus ir z-index sluoksnius

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

Simuliuokite vartotojų dėmesio karštas zonas

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

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

SEO inspektorius NEMOKAMA

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

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

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

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

Atraskite kiekvieną šriftą naudojamą bet kuriame puslapyje

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

Spalvų paletė NEMOKAMA

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

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

Akimirksniu įjunkite arba išjunkite JavaScript dabartinei kortelei

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

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

Stebėkite visas tinklo užklausas realiu laiku

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

Skenuokite kiekvieną nuorodą puslapyje ir raskite sugedusias

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

JSON Formatter NEMOKAMA

Format, Minify & Validate JSON in a Click

Encode Strings To & From Base64 Instantly

Encode & Decode URL Strings in One Click

& HTML Entity Encoder NEMOKAMA

Encode & Decode HTML Entities Instantly

Escape & Unescape Strings for Code

64 Image ↔ Base64 NEMOKAMA

Convert Images To & From Base64 Data URIs

JWT Debugger NEMOKAMA

Decode JSON Web Tokens Instantly

UUID Generator NEMOKAMA

Generate Bulk UUID v4 Identifiers

Hash Generator NEMOKAMA

Compute MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes

Generate Cryptographically Strong Passwords

Regex Tester NEMOKAMA

Test Regular Expressions Live With Match Highlighting

Convert Unix, ISO, and Human-Readable Dates

Diff Tool NEMOKAMA

Compare Two Text Blocks Line By Line

Contrast Checker NEMOKAMA

Check WCAG Contrast Ratio of Any Two Colors

Convert HEX, RGB, HSL, HSV & OKLCH Instantly

Extract The Dominant Palette From Any Image

Get CSS Selectors & XPath For Any Element

CORS Checker NEMOKAMA

Test Cross-Origin Requests & Inspect CORS Headers

Capture WebSocket Frames in Real Time

Scan The Page For Broken Images Instantly

Auto-Fill Forms With Realistic Test Data

Convert Between CSV and JSON in Either Direction

XML Formatter NEMOKAMA

Format, Validate & View XML With Syntax Highlighting

SQL Formatter NEMOKAMA

Beautify & Format SQL Queries

Convert to PDF NEMOKAMA

Save Web Pages As Clean PDFs

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
  • 20 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ų 39+ profesionalių įrankių. Sąskaitos pateikiamos kas mėnesį.

$2.99

per mėnesį
Pradėti mėnesio planą
  • Visi 39+ 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ų 39+ pro įrankių be pasikartojančių mokesčių.

$29.99

vienkartinis mokėjimas
Pirkite vieną kartą, naudokite amžinai
  • Visi 39+ 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 39+ kūrėjų įrankius.

Kuo skiriasi nemokami ir Pro įrankiai?

Nemokami įrankiai (20+) 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.