A tökéletes Fejlesztői eszköztár bővítmény webtervezéshez és fejlesztéshez

64+ hatékony eszköz weboldalak vizsgálatához, méréséhez, rögzítéséhez, elemzéséhez és tervezéséhez közvetlenül a böngészőjében.

Összes Kedvencek Vizsgálat Rögzítés Mérés index.popup_tab_analyse
CSS Inspector
Animáció-vizsgáló
Másolás Tailwind-ként
Csak körvonal mód
Tailwind segéd
Oldal vázlata
Komponens-felismerő
Elem áthelyezése
Elem törlése/elrejtése
Elem exportálása
Komponens más..
Screenshot
Képek kinyerése
SVG Grabber
Képcserélő
QR-kód generátor
Hogyan kezdje el

Kezdje el a DevSuite Pro használatát néhány kattintással

Az indulás egyszerű. Telepítse a bővítményt, nyisson meg bármilyen weboldalt, és érjen el 64+ fejlesztői eszközt a felugró ablakból vagy a lebegő dokkból. Nincs szükség konfigurációra.

Adja hozzá a bővítményt a Chrome-hoz

  1. Nyissa meg a Chrome Webáruházat, és keressen rá a "DevSuite Pro" bővítményere.
  2. Kattintson a "Hozzáadás a Chrome-hoz" gombra, majd erősítse meg a "Bővítmény hozzáadása" gombra kattintva a felugró ablakban.

Nyisson meg bármilyen weboldalt, és indítson el egy eszközt

  1. Lépjen bármely weboldalra, majd kattintson a DevSuite Pro ikonra az eszköztárban, vagy használja az oldalon lévő lebegő dokkot.
  2. Válasszon bármilyen eszközt a rácsból. Az olyan eszközök, mint a CSS Inspector, Rulers vagy Color Picker, azonnal aktiválódnak az aktuális oldalon.
A bővítmény funkciói

A DevSuite Pro legfontosabb funkciói

A DevSuite Pro 64+ fejlesztői eszközt kínál weboldalak vizsgálatához, méréséhez, tervezéséhez és elemzéséhez. Növelje munkafolyamatának hatékonyságát a böngészőjébe épített hatékony funkciókkal.

CSS Inspector

Vigye az egeret bármely elem fölé, hogy azonnal megtekinthesse és szerkeszthesse CSS-stílusait valós időben, megkönnyítve a hibakeresést és a tervek finomhangolását.

Tudjon meg többet →

Elemvizsgáló

Kattintson bármely elemre a tulajdonságainak, méreteinek, térközeinek, betűtípusainak és színeinek vizsgálatához. Azonnal értse meg az oldal szerkezetét a böngésző DevTools megnyitása nélkül.

Tudjon meg többet →

Vonalzók és segédvonalak

Mérjen távolságokat, ellenőrizze az igazítást, és adjon hozzá pixelpontos vonalzókat és segédvonalakat bármely weboldalhoz, hogy biztosítsa a tervei tökéletes illeszkedését.

Tudjon meg többet →

Színválasztó

Válasszon színeket az oldal bármely eleméről, és másolja a HEX, RGB vagy HSL értékeket a vágólapjára egyetlen kattintással.

Tudjon meg többet →

Képernyőkép készítése

Készítsen teljes oldalas vagy látható területre vonatkozó képernyőképeket bármely weboldalról, és töltse le azokat azonnal — tökéletes tervek megosztásához és hibák jelentéséhez.

Tudjon meg többet →

Reszponzív teszter

Tekintsen meg bármilyen weboldalt különböző képernyőméreteken és eszközfelbontásokon, hogy tesztelje a reszponzív tervezést anélkül, hogy elhagyná a böngészőjét.

Tudjon meg többet →
Fedezzen fel további eszközöket részletesen:
CSS Inspector INGYENES

Vizsgálja és szerkessze a CSS-stílusokat valós időben

A CSS Inspector egy hatékony fejlesztői eszköz, amely lehetővé teszi, hogy megtekintse bármely elem teljes…

CSS animációk hibakeresése és vezérlése valós időben

Az Animáció-vizsgáló teljes körű irányítást biztosít bármely weboldalon futó minden CSS animáció és átmenet felett.

Konvertáljon bármely webes elemet azonnal Tailwind CSS osztályokká

A Másolás Tailwind-ként funkció a leggyorsabb módja annak, hogy stílusokat emeljen át bármely weboldalról a saját projektjébe.

Vizualizálja bármely oldal teljes elrendezési struktúráját

A Csak körvonal mód színkódolt körvonalakat rajzol az oldal minden HTML elemére, így azonnal áttekintheti az…

Kategorizált Tailwind osztályok bármely elemhez

A Tailwind Segéd megvizsgálja az oldal bármely elemét, és átfogó, kategorizált áttekintést készít az illeszkedő…

Vizuális HTML fastruktúra-megjelenítő bármely weboldalon

Az Oldal Vázlatkészítő az összes DOM-struktúrát vizuális faként jeleníti meg közvetlenül az oldalon.

React, Vue, Angular és Svelte komponensek felismerése bármely oldalon

A Komponens Érzékelő automatikusan azonosítja, melyik frontend keretrendszert használja egy weboldal, és feltárja a…

Húzza és ejtse bármely elemet az oldalon új helyre

Az Elem áthelyezése eszközzel bármely webes elemre kattintva fizikailag új helyre húzhatja azt.

Távolítson el vagy váltson láthatóságot bármely elemen

Az Elem törlése/elrejtése eszközzel egyetlen kattintással eltávolíthat vagy ideiglenesen elrejthet bármely elemet egy weboldalon.

Bármely elem exportálása HTML, CSS vagy JSON formátumban

Az Elem exportálása eszközzel bármely weboldal-elemre kattintva exportálhatod annak teljes szerkezetét három…

React, Vue és Svelte komponensek generálása bármely elemből

A Komponens kód másolása eszköz bármely weboldal-elemet tiszta, éles felhasználásra kész komponensfájllá alakít a…

Készítsen, szerkesszen és osszon meg tökéletes webes képernyőképeket

A Képernyőkép és rögzítés eszköz túlmutat az egyszerű képmetszésen.

Tekintse meg, válassza ki és töltse le bármely weboldal összes képét

A Képek kinyerése eszköz átvizsgál bármely weboldalt, és minden képet böngészhető galériában jelenít meg.

Találja meg, tekintse meg előnézetben és töltse le bármely oldal összes SVG-jét

Az SVG Grabber felfedez minden SVG-t egy weboldalon — beágyazott SVG elemeket, külső .svg fájlhivatkozásokat, SVG…

Cserélje le az oldal bármely képét a sajátjára

Az Image Replacer lehetővé teszi, hogy rákattintson egy weboldal bármely képére, és felváltsa azt a sajátjával — akár…

Generáljon azonnal QR-kódot bármely URL-hez vagy szöveghez

A QR Code Generator automatikusan létrehoz egy beolvasható QR-kódot az aktuális oldal URL-jéhez — vagy bármely egyéni…

Page Ruler INGYENES

Pixel-pontos vonalzók, segédvonalak és mérések bármely oldalon

A Page Ruler Photoshop-stílusú vonalzókat és húzható segédvonalakat ad hozzá bármely weboldalhoz.

Több eszköz nézőablakának egyidejű előnézete

A Responsive Viewer az aktuális weboldalt egyszerre több eszköz-nézőablak méretben jeleníti meg egymás mellett…

Mérje meg a pontos pixeltávolságot bármely két elem között

A Távolságmérés eszközzel bármely két elemre kattintva azonnal láthatja a köztük lévő pontos pixeltávolságot…

Jelenítsen meg minden verem-kontextust és Z-Index réteget

A Z-Index Inspector feltárja egy weboldal összes elemének teljes rétegződési sorrendjét.

CSS Grid és Flexbox Elrendezések Vizuális Megjelenítése

A Grid/Flex Vizualizáló felismeri az összes CSS Grid és Flexbox konténert egy weboldalon, és vizuális fedőrétegként…

Felhasználói Figyelmi Pontok Szimulálása Bármely Oldalon

A Heatmap Szimulátor bármely weboldalhoz előrejelzett figyelmi heatmapet generál, bevált UX kutatási minták alapján…

Válogatva törölje a gyorsítótárat, sütiket, localStorage-t és sessionStorage-t

A Böngészési adatok törlése eszköz gyors, szelektív módot ad a fejlesztőknek az aktuális oldal bizonyos adattípusainak…

Fedezze fel bármely weboldal mögötti technológiákat

A Site Stack átvizsgál bármely weboldalt, és azonosítja a teljes technológiai stackjét – frontend keretrendszerek…

SEO Inspector INGYENES

Átfogó SEO-audit: meta-tagek, címsorok, OpenGraph és több

A SEO Inspector azonnali, átfogó SEO-auditot biztosít bármely weboldalról.

Automatizált WCAG-audit: kontraszt, alt szöveg, ARIA és több

Az Accessibility Inspector automatizált WCAG 2.1 AA szintű ellenőrzéseket futtat bármely weboldalon, és kategorizált…

Live Text Editor INGYENES

Kattintson bármely szövegre bármely oldalon, és szerkessze azonnal

A Live Text Editor egyetlen kattintással szerkeszthetővé tesz minden szövegelemet egy weboldalon.

Cseréljen le bármilyen betűtípust globálisan vagy elemenként a Google Fonts könyvtárból

A Fonts Changer lehetővé teszi, hogy bármely weboldali betűtípust lecseréljen egy másikra a Google Fonts könyvtárból…

List All Fonts INGYENES

Fedezze fel az összes betűtípust, amit egy weboldal használ

A List All Fonts átvizsgál egy weboldalt, és teljes leltárt készít minden használt betűtípuscsaládról — CDN-ekről…

Color Picker INGYENES

Precíz színpipetta HEX, RGB és HSL színértékekhez

A Color Picker pixelpontos színpipetta eszközt biztosít színek kiválasztásához egy weboldal bármely eleméről…

Color Palette INGYENES

Nyerje ki a teljes színpalettát bármely weboldalból

A Color Palette átvizsgál egy weboldal minden elemét, és kinyeri a használt színek teljes készletét — szövegtől és…

Alkalmazzon sötét módot azonnal bármelyik weboldalon

A Force Dark Mode sötét színsémát kényszerít ki minden olyan weboldalon, amely nem kínál ilyet – vagy felülírja az…

Azonnali JavaScript Engedélyezés vagy Letiltás laponként

A JavaScript Ki-/Bekapcsolás eszköz egyetlen kattintással letiltja vagy újra engedélyezi a JavaScript futtatását az…

Bármely Domain Cookie-jainak Megtekintése, Szerkesztése, Hozzáadása és Törlése

A Cookie Szerkesztő az aktuális domain összes cookie-ját tiszta, rendezhető táblázatban jeleníti meg.

Console Logger INGYENES

Tekintsd meg a console kimenetét lebegő panelen — DevTools nélkül

A Console Logger rögzít minden console kimenetet (console.log, console.warn, console.error, console.info), és egy…

Figyeld az összes hálózati kérést valós időben

A Network Monitor rögzít és megjelenít minden hálózati kérést, amelyet az aktuális oldal végez — XHR/Fetch API…

Tekintse meg, szerkessze, adjon hozzá és törölje a localStorage és sessionStorage bejegyzéseket

A Local Storage Editor egy áttekinthető táblázatos felületet biztosít az aktuális oldal localStorage és sessionStorage…

Vizsgálja át egy oldal összes hivatkozását, és találja meg a töröttet

A Broken Link Checker átvizsgálja az aktuális oldal minden hivatkozását – anchor href-eket, kép- és szkriptforrásokat…

Azonnali sebességmérés és alapvető webes mutatók

Az Oldalteljesítmény eszköz egyetlen gombnyomással átfogó képet ad weboldala sebességéről.

JSON formázó INGYENES

Formázzon, tömörítsen és validáljon JSON-t egy kattintással

A JSON Formatter szépen formázza, tömöríti és validálja a JSON-t közvetlenül a böngészőjében.

Kódoljon stringeket Base64-be és vissza azonnal

A Base64 Encoder/Decoder szöveget Base64-re, illetve Base64-et szövegre alakít közvetlenül a böngészőjében.

URL-sztringek kódolása és dekódolása egy kattintással

Az URL Encoder/Decoder az URL-sztringeket alakítja át százalékkódolt formába, és vissza.

& HTML Entity Encoder INGYENES

HTML entitások kódolása és dekódolása azonnal

A HTML Entity Encoder a speciális karaktereket (< > & " ') a megfelelő HTML entitásokra alakítja (&lt; &gt; &amp…

Sztringek escape-elése és unescape-elése kódhoz

A Backslash Escape/Unescape a sztringeket alakítja escape-elt formára és vissza (\n \t \r \" \' \\ és Unicode escape-ek).

64 Kép &harr; Base64 INGYENES

Képek konvertálása Base64 formátumba és vissza

A Kép ↔ Base64 a képfájlokat (PNG, JPG, SVG, WebP, GIF) Base64-kódolt adat-URI-kká alakítja és vissza.

JWT Debugger INGYENES

JSON Web Tokenek dekódolása azonnal

A JWT Debugger dekódolja és vizsgálja a JSON Web Tokeneket — elemzi a fejlécet, a hasznos terhet és az aláírást…

UUID Generátor INGYENES

Tömeges UUID v4 azonosítók generálása

Az UUID Generátor kriptográfiailag erős UUID v4 azonosítókat állít elő a böngésző crypto API-jának segítségével.

Hash Generátor INGYENES

MD5, SHA-1, SHA-256, SHA-384, SHA-512 hash-ek számítása

A Hash Generátor kriptográfiai hash-eket (MD5, SHA-1, SHA-256, SHA-384, SHA-512) számít bármilyen szöveges bemenetből.

Kriptográfiailag erős jelszavak generálása

A Jelszógenerátor erős, véletlenszerű jelszavakat állít elő a böngésző kriptográfiai véletlenszám-API-jának segítségével.

Regex Tesztelő INGYENES

Reguláris kifejezések élő tesztelése egyezés-kiemeléssel

A Regex Tesztelő valós időben értékeli ki a reguláris kifejezéseket a teszt szöveg alapján.

Unix, ISO és ember által olvasható dátumok átalakítása

Az Időbélyeg Konverter átalakít Unix időbélyegek (másodperc, ezredmásodperc, mikroszekundum, nanoszekundum), ISO 8601…

Diff Tool INGYENES

Két szövegblokk soronkénti összehasonlítása

A Diff Tool két szövegblokkot hasonlít össze, és színkódolt jelöléssel emeli ki a hozzáadott, eltávolított és…

Bármely két szín WCAG-kontrasztarányának ellenőrzése

A Kontrasztellenőrző kiszámítja két szín WCAG 2.1 kontrasztarányát, és minősíti azokat az AA/AAA küszöbértékek szerint…

HEX, RGB, HSL, HSV és OKLCH azonnali konvertálása

A Színformátum-konvertáló bármely színt átalakít HEX, RGB, HSL, HSV és OKLCH formátumok között.

A domináns paletta kinyerése bármely képből

A Kép színkinyerő elemez bármilyen képfájlt (húzza be, illessze be, vagy kattintson a betöltéshez), és akár 16 domináns…

CSS-szelektorok és XPath bármely elemhez

A DOM Path Finderrel az oldal bármely elem fölé húzott egérrel felfedheti annak egyedi CSS-szelektorát, rövid…

CORS Checker INGYENES

Cross-Origin kérések tesztelése és CORS fejlécek vizsgálata

A CORS Checker teszteli, hogy egy cross-origin kérés az Ön oldaláról engedélyezett lenne-e a célszerveren.

WebSocket keretek rögzítése valós időben

A WebSocket Inspector rögzít minden WebSocket keretet — küldött és fogadott — az oldal összes kapcsolatán keresztül.

Az oldal azonnali átvizsgálása törött képekért

A Broken Image Finder átvizsgál minden <img> elemet és CSS background-image-et az oldalon, felismeri a törött…

Űrlapok automatikus kitöltése valósághű teszt adatokkal

A Form Filler kitölti az oldal minden látható űrlapmezőjét valósághű teszt adatokkal — név, e-mail, telefonszám, cím…

Konvertálás CSV és JSON között, mindkét irányban

A CSV ↔ JSON Converter kezeli a teljes oda-vissza konverziót a két legelterjedtebb táblázatos formátum között.

XML formázó INGYENES

XML formázása, ellenőrzése és megjelenítése szintaxiskiemeléssel

Az XML formázó a böngészőben szépen formázza, kicsinyíti és validálja az XML-t.

SQL formázó INGYENES

SQL lekérdezések szépítése és formázása

Az SQL formázó a kicsinyített vagy rendezetlen SQL-t olvasható, behúzott lekérdezéssé alakítja.

Weboldalak mentése tiszta PDF-ként

A Konvertálás PDF-be az aktuális weboldalt a böngésző nyomtatási párbeszédpanelén keresztül menti PDF-ként, előtte…

Árazás és tervek

Egyszerű és átlátható árazás

Válassza ki a munkafolyamatához illő tervet. Kezdje ingyen, frissítsen bármikor.

Alap

Tökéletes a DevSuite Pro kipróbálásához. Hitelkártya nem szükséges.

$0

Örökké ingyenes
Kezdje ingyen
  • 43 ingyenes fejlesztői eszköz
  • CSS Inspector és Color Picker
  • Képernyőkép rögzítés
  • Lebegő dokk felület
  • Minden jövőbeli frissítés ingyenes

Havi Legnépszerűbb

Teljes hozzáférés mind a 64+ professzionális eszközhöz. Havi számlázás.

$2.99

havonta
Havi előfizetés indítása
  • Mind a 64+ fejlesztői eszköz
  • Teljes hozzáférés a Pro eszközökhöz
  • Akár 3 eszközön
  • Elsőbbségi támogatás
  • Bármikor lemondható

Egyszeri Legjobb ajánlat

Fizessen egyszer, használja örökre. Teljes hozzáférés az összes 64+ profi eszközhöz ismétlődő díjak nélkül.

$29.99

egyszeri fizetés
Vásároljon egyszer, használja örökre
  • Mind a 64+ fejlesztői eszköz
  • Teljes hozzáférés a Pro eszközökhöz
  • Akár 3 eszközön
  • Elsőbbségi támogatás
  • Nincs ismétlődő díj
DevSuite Pro FAQ section background
GYIK

A DevSuite Pro felhasználók gyakran ismételt kérdései

Gyakori kérdések a DevSuite Pro bővítmény funkcióival és használatával kapcsolatban. Ha kérdése van, a válasz valószínűleg már megtalálható lent.

Hogyan telepítem a DevSuite Pro-t?

Látogasson el a Chrome Webáruházba, keressen rá a "DevSuite Pro"-ra, kattintson a "Hozzáadás a Chrome-hoz" gombra, és erősítse meg a "Bővítmény hozzáadása" kiválasztásával. A telepítés után a bővítmény ikonja megjelenik a böngésző eszköztárán. Kattintson rá, hogy azonnal hozzáférjen a 64+ fejlesztői eszközhöz.

Mi a különbség az ingyenes és a Pro eszközök között?

Az ingyenes eszközök (43+) mindenki számára elérhetők licenc nélkül. A Pro eszközök arany PRO jelvénnyel vannak jelölve, és aktív Pro licenc szükséges hozzájuk. A felugró ablakban láthatja, mely eszközök ingyenesek és melyek pro — az ingyenes eszközöknél nincs lakat ikon, míg a pro eszközök kissé halványítva jelennek meg, amíg nem aktiválja a licencét.

Mi a különbség a "Move Element" és a "Delete/Hide Element" között?

A "Move Element" lehetővé teszi az elemek áthelyezését az oldalon belül, míg a "Delete/Hide Element" segít eltávolítani vagy ideiglenesen elrejteni a nem kívánt részeket.

Maradandóak az oldalon végzett módosításaim?

Nem. A Move Element, Live Text Editor, Delete/Hide Element és CSS Inspector eszközökkel végzett módosítások mind ideiglenesek. Csak azt befolyásolják, amit éppen a böngészőjében lát. Az oldal újratöltése mindent visszaállít az eredeti állapotába.

Hogyan aktiválom a Pro licencemet?

Nyissa meg a DevSuite Pro felugró ablakot, kattintson a Beállítások ikonra a jobb felső sarokban. Görgessen le a Licenc részhez, illessze be a licenckulcsát a beviteli mezőbe, és kattintson az Aktiválás gombra. Ha a kulcs érvényes, a jelvény FREE-ről PRO-ra változik, és az összes pro eszköz azonnal feloldásra kerül.

Hogyan mozgathatom vagy rejthetem el a lebegő dokkot?

A dokkot a Beállításokban mozgathatja, ahol másik oldalsáv-pozíciót választhat — Felül, Alul, Bal vagy Jobb. A dokkot teljesen el is rejtheti a "Dokk megjelenítése az oldalakon" kikapcsolásával a Beállításokban, vagy a Ctrl+Shift+X billentyűkombinációval bármikor.

Gyűjt a DevSuite Pro böngészési adatokat?

Nem. A DevSuite Pro nem gyűjti, nem követi és nem továbbítja az Ön böngészési adatait. Minden beállítás helyben, a böngészőjében kerül tárolásra. Az egyetlen külső kérés a licenckulcs aktiválásakor történik a kulcs ellenőrzéséhez a szerverünkön.

Használhatom a DevSuite Pro-t Firefoxon?

Igen! A DevSuite Pro elérhető a Chrome Webáruházban és a Firefox kiegészítők oldalán is. Működik Chrome-on, Edge-en, Brave-en és más Chromium-alapú böngészőkön, valamint Firefoxon.