Parim Veebidisaini ja silumise tööristad arendajatele

64+ võimsat tööriista veebilehtede uurimiseks, mõõtmiseks, jäädvustamiseks, analüüsimiseks ja kujundamiseks otse teie brauseris.

Kõik Lemmikud Uurimine Jäädvustus Mõõtmine index.popup_tab_analyse
CSS Inspector
Animatsiooni inspektor
Kopeeri Tailwind'ina
Ainult piirjoonte režiim
Tailwind-abimees
Lehekülje piirjooned
Komponentide tuvastaja
Liiguta elementi
Kustuta/Peida element
Ekspordi element
Kopeeri komponen..
Ekraanipilt
Eralda pildid
SVG Grabber
Pildi asendaja
QR-koodi generaator
Kuidas alustada

Alusta DevSuite Pro kasutamist vaid mõne klikiga

Alustamine on lihtne. Paigalda laiendus, ava mis tahes veebileht ja pääse ligi 64+ arendustööriistale hüpikakna või ujuva doki kaudu. Seadistamist pole vaja.

Lisa laiendus Chrome'i

  1. Ava Chrome'i veebipood ja otsi "DevSuite Pro" laiendust.
  2. Klõpsa "Lisa Chrome'i" ja kinnita, klõpsates hüpikaknas "Lisa laiendus".

Ava mis tahes veebileht ja käivita tööriist

  1. Mine mis tahes webilehele, seejärel klõpsa DevSuite Pro ikooni tööriistaribal or kasuta ujuvat dokki lehel.
  2. Vali mis tahes tööriist ruudustikust. Tööriistad nagu CSS Inspector, Joonlauad või Värvivalija aktiveeruvad kohe praegusel lehel.
Laienduse funktsioonid

DevSuite Pro põhifunktsioonid

DevSuite Pro pakub 64+ arendustööriista veebilehtede uurimiseks, mõõtmiseks, kujundamiseks ja analüüsimiseks. Kiirendage oma töövoogu võimsate funktsioonidega, mis on otse teie brauserisse ehitatud.

CSS Inspector

Liigutage hiirekursor mis tahes elemendi kohale, et kohe vaadata ja muuta selle CSS-stiile reaalajas, muutes silumise ja disaini kohandamise lihtsaks.

Loe lähemalt →

Elemendi inspektor

Klõpsake mis tahes elementi, et uurida selle omadusi, mõõtmeid, vahedeid, fonte ja värve. Mõistke lehe struktuuri kohe ilma brauseri arendustööriistu avamata.

Loe lähemalt →

Joonlauad ja juhikud

Mõõtke vahemaid, kontrollige joondust ning lisage pikslitäpseid joonlaudu ja juhikuid mis tahes veebilehele, et tagada teie disainide täiuslik joondus.

Loe lähemalt →

Värvivalija

Valige värve mis tahes leheelemendist ja kopeerige HEX, RGB või HSL väärtused lõikelauale ühe klikiga.

Loe lähemalt →

Ekraanipildi jäädvustus

Jäädvustage terve lehe või nähtava ala ekraanipilte mis tahes veebilehest ja laadige need kohe alla — ideaalne disainide jagamiseks ja vigade raporteerimiseks.

Loe lähemalt →

Reageeriva disaini testija

Vaadake mis tahes webilehte erinevatel ekraanisuurustel ja seadme resolutsioonidel, et testida reageerivat disaini brauserist lahkumata.

Loe lähemalt →
Uurige rohkem tööriistu üksikasjalikult:
CSS Inspector TASUTA

Uurige ja redigeerige CSS-stiile reaalajas

CSS Inspector on võimas arendustööriist, mis võimaldab teil vaadata mis tahes elemendi täielikke CSS-omadusi…

Silu ja Juhi CSS Animatsioone Reaalajas

Animatsiooni Inspektor annab sulle täieliku kontrolli iga CSS animatsiooni ja ülemineku üle, mis töötab veebilehel.

Teisenda Mis Tahes Elemendi CSS Tailwind Utiliidiklassideks

Kopeeri kui Tailwind ületab lõhe visuaalse disaini ja Tailwind CSS koodi vahel.

Visualiseeri Mis Tahes Lehe Täielikku Paigutuse Struktuuri

Ainult Kontuuride Režiim lisab värvikoodiga ääriste kontuurid igale HTML elemendile veebilehel, andes sulle koheselt…

Hangi Kategoriseeritud Tailwind Klassid Mis Tahes Elemendi Jaoks

Tailwind Abimees inspekteerib mis tahes elementi veebilehel ja genereerib põhjaliku, kategoriseeritud jaotuse…

Visuaalne HTML Puuvaade Mis Tahes Veebilehel

Lehe Skemaator renderdab mis tahes veebilehe täieliku DOM struktuuri visuaalse puu kihistusena — otse lehel endal.

Tuvasta React, Vue, Angular ja Svelte Komponendid Mis Tahes Saidil

Komponentide Detektor tuvastab automaatselt, millist frontend raamistikku veebileht kasutab, ja paljastab selle täieliku komponentide puu.

Lohista ja Pillu, et Repositsioneerida Mis Tahes Element Lehel

Liiguta Elementi laseb sul klõpsata mis tahes elemendil veebilehel ja seda füüsiliselt uude positsiooni lohistada.

Eemalda või Lülita Mis Tahes Elemendi Nähtavus

Kustuta/Peida Element laseb sul eemaldada või ajutiselt peita mis tahes elemendi veebilehel ühe klõpsuga.

Ekspordi Mis Tahes Element HTML, CSS või JSON Vormingus

Ekspordi Element laseb sul klõpsata mis tahes elemendil veebilehel ja eksportida selle täielik struktuur kolmes…

Genereeri React, Vue ja Svelte Komponendid Mis Tahes Elemendist

Kopeeri Komponendi Kood teisendab mis tahes elemendi veebilehel puhtaks, tootmiseks valmis komponendifailiks sinu valitud raamistiku jaoks.

Ekraanipilt TASUTA

Tee Nähtava Ala või Täislehe Ekraanipilte

Ekraanipilt teeb kõrge kvaliteediga pilte mis tahes veebilehest kahes režiimis: nähtav ala (täpselt see, mida sa…

Vaata, Vali ja Lae Alla Kõik Pildid Mis Tahes Veebilehelt

Ekstrakti Pildid skannib mis tahes veebilehe ja esitleb iga pildi sirvitavas galeriis.

Leia, Eelvaata ja Lae Alla Iga SVG Mis Tahes Lehel

SVG Haaraja avastab iga SVG veebilehel — inline SVG elemendid, välised .svg faili viited, SVG sprite'id (use/symbol…

Vaheta Mis Tahes Pilt Lehel Oma Omaga

Piltide Asendaja laseb sul klõpsata mis tahes pildil veebilehel ja asendada selle oma omaga — kas laadides üles…

Genereeri QR Koodid Mis Tahes URL-i või Teksti Jaoks Koheselt

QR Koodi Generaator loob skännitava QR koodi praeguse lehe URL-i jaoks automaatselt — või mis tahes kohandatud URL-i…

Lehe Joonlaud TASUTA

Pikslitäpsed Joonlauad, Juhised ja Mõõtmised Igal Lehel

Lehe Joonlaud lisab igale veebilehele Photoshop-stiilis joonlauad ja lohistatavad juhisjooned.

Eelvaata Mitut Seadme Vaateava Samaaegselt

Reageeriva Vaataja näitab praegust veebilehte renderdatuna mitmel seadme vaateava suurusel kõrvuti — kõik ühel ekraanil.

Mõõda Täpseid Pikslite Kaugusi Kahe Elemendi Vahel

Mõõda Kaugust laseb sul klõpsata mis tahes kahel elemendil veebilehel ja kohe näha täpset pikslite kaugust nende vahel…

Visualiseeri Iga Virnamiskontekst ja Z-Indeksi Kiht

Z-Indeksi Inspektor paljastab iga elemendi täieliku virnamise järjekorra veebilehel.

Inspekteeri CSS Grid ja Flexbox Paigutusi Visuaalsete Kihistustega

Grid/Flex Visualiseerija tuvastab iga CSS Grid ja Flexbox konteineri veebilehel ning renderdab nende paigutuse…

Simuleeri Kasutaja Tähelepanu Kuumapunkte Igal Lehel

Soojuskaardi Simulaator genereerib ennustava tähelepanu soojuskaardi mis tahes veebilehe jaoks, tuginedes…

Valikuliselt Kustuta Vahemälu, Küpsised, localStorage ja sessionStorage

Kustuta Sirvimisandmed annab arendajatele kiire ja valikulise viisi konkreetsete sirvimisandmete tüüpide kustutamiseks…

Tuvasta Iga Veebisaidi Taga Peiduv Tehnoloogia

Saidi Virn skannib mis tahes veebisaiti ja tuvastab selle täieliku tehnoloogiavirna — frontend raamistikud (React, Vue…

SEO Inspektor TASUTA

Põhjalik SEO Audit: Meta Sildid, Pealkirjad, OpenGraph ja Rohkem

SEO Inspektor pakub mis tahes veebilehe kohest, põhjalikku SEO auditit.

Automatiseeritud WCAG Audit: Kontrastsus, Alt Tekst, ARIA ja Rohkem

Juurdepääsetavuse Inspektor käivitab automaatseid WCAG 2.1 Level AA kontrolle mis tahes veebilehel ja toodab…

Klõpsa Mis Tahes Tekstil Mis Tahes Lehel, Et Seda Kohe Muuta

Muuda teksti reaalajas — originaalsed stiilid säilivad.

Vaheta Mis Tahes Font Globaalselt või Elemendi Kaupa Google Fontsist

Fontide Vahetaja laseb sul asendada mis tahes fondi veebilehel teisega Google Fontside teegist — kas globaalselt (kõik…

Avasta Iga Font, Mida Mis Tahes Veebilehel Kasutatakse

Loetele Kõik Fondid skannib mis tahes veebilehe ja esitab täieliku loetelu kõigist kasutatatest fondi perekondadest…

Värvivalija TASUTA

Täpne Silmatilguti HEX, RGB ja HSL Värviväärtustele

Värvivalija pakub pikslitäpset silmatilguti tööriista värvide valimiseks mis tahes elemendist veebilehel — tekst…

Värviplett TASUTA

Ekstraheeri Täielik Värviplett Mis Tahes Veebilehelt

Värviplett skannib iga elementi veebilehel ja ekstraheerib täieliku kasutatud värvide kogumi — tekstist ja taustadest…

Rakenda Tumedat Režiimi Mis Tahes Veebisaidile Koheselt

Sunni Tumeda Režiimi rakendab tumedat värvisheemat mis tahes veebisaidile, mis seda ei paku — või alistab saidi heleda teema.

Lülita JavaScript Koheselt Sisse või Välja Lehe Kaupa

Lülita JavaScript keelab või lubab uuesti JavaScripti täitmist praeguses brauseri lehel ühe klõpsuga.

Vaata, Muuda, Lisa ja Kustuta Küpsiseid Mis Tahes Domeeni Jaoks

Küpsiste Toimetaja kuvab kõik praeguse domeeni küpsised puhtas, sorteeritavas tabelis.

Vaata Konsooli Väljundit Ujuvas Paneelis — Ilma DevToolsita

Konsooli Logija jäädvustab kogu konsooli väljundi (console.log, console.warn, console.error, console.info) ja kuvab…

Jälgi Kõiki Võrgupäringuid Reaalajas

Võrgu Monitor jäädvustab ja kuvab iga võrgupäringu, mille praegune leht teeb — XHR/Fetch API kõned, skriptide…

Vaata, Muuda, Lisa ja Kustuta localStorage ja sessionStorage

Kohaliku Salvestuse Toimetaja pakub puhast tabeli liidest praeguse saidi localStorage ja sessionStorage kirjete haldamiseks.

Skanni Iga Link Lehel ja Leia Katkised

Katkiste Linkide Kontrollija skannib iga lingi praegusel lehel — ankru href-id, pildi allikad, skriptide allikad ja…

Lehe Jõudlus TASUTA

Kohene Jõudluse Armatuurlaud: Laadimisaeg, DOM Statistika ja Ressursid

Lehe Jõudlus pakub kohest jõudluse ülevaadet igast veebilehest — laadimisajastuse mõõdikud (FCP, DOMContentLoaded…

Vormindage, minifitseerige ja valideerige JSON-i ühe klõpsuga

JSON Formatter vormindab, minifitseerib ja valideerib JSON-i otse teie brauseris.

Kodeerige stringid kiirelt Base64 vormingusse ja tagasi

Base64 Encoder/Decoder teisendab teksti Base64 vormingusse ja Base64 tagasi tekstiks otse teie brauseris.

Kodeerige ja dekodeerige URL-stringid ühe klõpsuga

URL Encoder/Decoder teisendab URL-stringid nende protsentkodeeritud vormi ja tagasi.

Kodeerige ja dekodeerige HTML entiteedid koheselt

HTML Entity Encoder teisendab erimärgid (< > & " ') nende HTML entiteedi vasteteks (&lt; &gt; &amp; &quot; &#39;) ja tagasi.

Paokoodige ja tõlgendage stringid koodi jaoks

Backslash Escape/Unescape teisendab stringid nende paokoodiga vormi ja tagasi (\n \t \r \" \' \\ ning Unicode paokoodid).

Teisendage pilte Base64 andme-URI-desse ja tagasi

Image ↔ Base64 teisendab pildifailid (PNG, JPG, SVG, WebP, GIF) Base64-kodeeritud andme-URI-deks ja vastupidi.

JWT silur TASUTA

Dekodeerige JSON Web Tokenid koheselt

JWT silur dekodeerib ja inspekteerib JSON Web Tokeneid — parsib päise, sisu ja allkirja, kuvab õigused (claims) ja…

Genereerige hulgikaupa UUID v4 identifikaatoreid

UUID generaator loob krüptograafiliselt tugevaid UUID v4 identifikaatoreid, kasutades brauseri crypto API-t.

Arvutage MD5, SHA-1, SHA-256, SHA-384, SHA-512 räsid

Räsigeneraator arvutab suvalisest tekstisisendist krüptograafilised räsid (MD5, SHA-1, SHA-256, SHA-384, SHA-512).

Genereerige krüptograafiliselt tugevaid paroole

Paroolgeneraator loob tugevaid, juhuslikke paroole, kasutades brauseri krüptograafilist juhuslikkuse API-t.

Regex Tester TASUTA

Testige regulaaravaldisi reaalajas koos vastete esiletõstmisega

Regex Tester hindab regulaaravaldisi testteksti vastu reaalajas.

Teisendage Unix, ISO ja inimloetavaid kuupäevi

Timestamp Converter teisendab Unixi ajatemplite (sekundid, millisekundid, mikrosekundid, nanosekundid), ISO 8601, RFC…

Diff Tool TASUTA

Võrrelge kahte tekstiplokki rida rea haaval

Diff Tool võrdleb kahte tekstiplokki ja tõstab värvikoodiga esile lisatud, eemaldatud ja muutumata read.

Kontrollige mis tahes kahe värvi WCAG kontrastisuhet

Contrast Checker arvutab kahe värvi vahelise WCAG 2.1 kontrastisuhte ning hindab neid AA/AAA lävendite alusel nii…

Teisendage HEX, RGB, HSL, HSV ja OKLCH koheselt

Color Format Converter teisendab mis tahes värvi HEX, RGB, HSL, HSV ja OKLCH vahel.

Eralda Domineeriv Värvipalett Igast Pildist

Image Color Extractor analüüsib mistahes pildifaili (lohista, kleebi või klõpsa laadimiseks) ja tagastab kuni 16…

Hangi CSS Selektorid & XPath Igale Elemendile

DOM Path Finder võimaldab liikuda mistahes elemendi kohale, et paljastada selle unikaalne CSS-selektor, lühike…

CORS Checker TASUTA

Testi Päritoluüleseid Päringuid & Uuri CORS-päiseid

CORS Checker testib, kas päritoluülene päring sinu saidilt oleks sihtserveri poolt lubatud.

Jäädvusta WebSocket-kaadreid Reaalajas

WebSocket Inspector jäädvustab iga WebSocket-kaadri — saadetud ja vastuvõetud — kõigist lehel olevatest ühendustest.

Skaneeri Lehte Katkiste Piltide Leidmiseks Koheselt

Broken Image Finder skaneerib iga <img> ja CSS background-image lehel, tuvastab katkised laadimised (404-d, CORS-vead…

Täitke Vormid Automaatselt Realistlike Testandmetega

Vormide Täitja täidab kõik lehel nähtavad vormiväljad realistlike testandmetega — nimi, e-post, telefon, aadress, parool jne.

Teisendage CSV ja JSON Vahel Mõlemas Suunas

CSV ↔ JSON Konverter käsitleb täielikku edasi-tagasi teisendust kahe levinuima tabelivormingu vahel.

Vormindage, Valideerige ja Vaadake XML-i Süntaksi Esiletõstuga

XML Vormindaja vormindab, minimeerib ja valideerib XML-i brauseris.

Kaunista ja Vorminda SQL Päringuid

SQL Vormindaja teisendab minimeeritud või segased SQL-päringud loetavateks, trepitud päringuteks.

Salvestage Veebilehed Puhaste PDF-idena

PDF-iks Teisendaja salvestab praeguse veebilehe PDF-ina brauseri prindidialoogi kaudu, rakendades esmalt prindisõbralikke stiile.

Hinnakiri ja paketid

Lihtne ja läbipaistev hinnakiri

Valige pakett, mis sobib teie töövooga. Alustage tasuta, uuendage igal ajal.

Baas

Ideaalne DevSuite Pro proovimiseks. Krediitkaarti pole vaja.

$0

Tasuta igavesti
Alusta tasuta
  • 43 tasuta arendustööriista
  • CSS Inspector ja värvivalija
  • Ekraanipildi jäädvustus
  • Ujuv dokiliides
  • Kõik tulevased tasuta uuendused

Igakuine Kõige populaarsem

Täielik juurdepääs kõigile 64+ professionaalsele tööriistale. Arveldus igakuiselt.

$2.99

kuus
Alusta kuupaketti
  • Kõik 64+ arendustööriista
  • Täielik juurdepääs Pro tööriistadele
  • Kuni 3 seadet
  • Prioriteetne tugi
  • Tühistage igal ajal

Ühekordne Parim väärtus

Maksa korra, kasuta igavesti. Täielik juurdepääs kõigile 64+ pro tööriistadele ilma korduvate tasudeta.

$29.99

ühekordne makse
Osta korra, kasuta igavesti
  • Kõik 64+ arendustööriista
  • Täielik juurdepääs Pro tööriistadele
  • Kuni 3 seadet
  • Prioriteetne tugi
  • Ei korduvaid tasusid
DevSuite Pro FAQ section background
KKK

DevSuite Pro kasutajate korduma kippuvad küsimused

Levinumad küsimused DevSuite Pro laienduse funktsioonide ja kasutamise kohta. Kui teil on küsimus, võib see olla juba allpool vastatud.

Kuidas paigaldada DevSuite Pro?

Külastage Chrome'i veebipoodi, otsige "DevSuite Pro", klõpsake "Lisa Chrome'i" ja kinnitage, valides "Lisa laiendus". Pärast paigaldamist ilmub laienduse ikoon teie brauseri tööriistaribale. Klõpsake sellel, et pääseda kohe ligi 64+ arendustööriistale.

Mis vahe on tasuta ja Pro tööriistadel?

Tasuta tööriistad (43+) on kõigile kättesaadavad ilma litsentsita. Pro tööriistad on märgistatud kuldse PRO märgiga ja nõuavad aktiivset Pro litsentsi. Hüpikaknas näete, millised tööriistad on tasuta ja millised pro — tasuta tööriistadel pole lukuikooni, samas pro tööriistad kuvatakse veidi tuhmimalt, kuni aktiveerite oma litsentsi.

Miks ei tööta mõni tööriist teatud veebilehtedel?

Mõnedel veebilehtedel on ranged sisuturbepoliitikad (CSP), mis blokeerivad teatud brauserilaienduse toiminguid. See on eriti levinud panga- ja riigilehtedel. Lisaks ei luba Chrome'i siselehed (chrome://) laiendustel sisuskripte käivitada.

Kas minu muudatused lehele on püsivad?

Ei. Kõik tööriistadega nagu Liiguta elementi, Teksti reaalajas redigeerija, Kustuta/Peida element ja CSS Inspector tehtud muudatused on ajutised. Need mõjutavad ainult seda, mida praegu oma brauseris näete. Lehe uuesti laadimine taastab kõik algsesse olekusse.

Kuidas aktiveerida oma Pro litsentsi?

Avage DevSuite Pro hüpikaken, klõpsake paremas ülanurgas olevat seadete ikooni. Kerige alla litsentsi sektsiooni, kleepige oma litsentsivõti sisestusväljale ja klõpsake Aktiveeri. Kui võti on kehtiv, muutub märgis FREE-lt PRO-ks ja kõik pro tööriistad avatakse kohe.

Kuidas liigutada või peita ujuvat dokki?

Saate dokki liigutada, minnes seadetesse ja valides teise küljeriba asukoha — Ülemine, Alumine, Vasakul või Paremal. Saate doki ka täielikult peita, lülitades seadetes välja "Kuva dokk lehtedel" või vajutades igal ajal Ctrl+Shift+X.

Kas DevSuite Pro kogub sirvimisandmeid?

Ei. DevSuite Pro ne kogu, jälgi ega edasta teie sirvimisandmeid. Kõik seaded salvestatakse lokaalselt teie brauseris. Ainus väline päring tehakse litsentsivõtme aktiveerimisel teie võtme kontrollimiseks meie serveris.

Kas ma saan DevSuite Pro't kasutada Firefoxis?

Jah! DevSuite Pro on saadaval nii Chrome'i veebipoes kui ka Firefoxi lisandmoodulites. See töötab Chrome'is, Edge'is, Brave'is ja teistes Chromiumil põhinevates brauserites, samuti Firefoxis.