Paras Kehittäjän työkalulaajennus verkkosivujen suunnitteluun ja kehitykseen

Yli 64 tehokasta työkalulaajennusta verkkosivujen tarkastamiseen, mittaamiseen, kaappaamiseen, analysointiin ja suunnitteluun suoraan selaimessasi.

Kaikki Suosikit Tarkasta Kaappaa Mittaa index.popup_tab_analyse
CSS Inspector
Animaation tarkastaja
Kopioi Tailwindina
Vain ääriviivat -tila
Tailwind-apuri
Sivun rakenne
Komponentin tunnistin
Siirrä elementtiä
Poista/piilota elementti
Vie elementti
Kopioi kompo..
Kuvakaappaus
Pura kuvat
SVG Grabber
Kuvanvaihtaja
QR-koodin generaattori
Näin pääset alkuun

Aloita DevSuite Pron käyttö muutamalla napsautuksella

Aloittaminen on helppoa. Asenna laajennus, avaa mikä tahansa verkkosivu ja käytä yli 64 kehittäjätyökalua ponnahdusikkunasta tai kelluvasta telakasta. Asetuksia ei tarvita.

Lisää laajennus Chromeen

  1. Ava Chrome Web Store ja etsi "DevSuite Pro" -laajennus.
  2. Napsauta "Lisää Chromeen" ja vahvista napsauttamalla "Lisää laajennus" ponnahdusikkunassa.

Avaa mikä tahansa verkkosivu ja käynnistä työkalu

  1. Siirry mille tahansa verkkosivustolle ja napsauta DevSuite Pro -kuvaketta työkalupalkissa tai käytä sivulla olevaa kelluvaa telakkaa.
  2. Valitse mikä tahansa työkalu ruudukosta. Työkalut kuten CSS Inspector, Rulers tai Color Picker aktivoituvat heti nykyisellä sivulla.
Laajennuksen ominaisuudet

DevSuite Pron keskeiset ominaisuudet

DevSuite Pro tarjoaa yli 64 kehittäjätyökalua verkkosivujen tarkastamiseen, mittaamiseen, suunnitteluun ja analysointiin. Tehosta työnkulkuasi tehokkailla ominaisuuksilla suoraan selaimessasi.

CSS Inspector

Vie hiiri minkä tahansa elementin päälle nähdäksesi ja muokataksesi sen CSS-tyylejä reaaliajassa, mikä helpottaa virheiden korjaamista ja suunnittelun hienosäätöä.

Lue lisää →

Elementti-tarkastaja

Napsauta mitä tahansa elementtiä tarkastaaksesi sen ominaisuudet, mitat, välit, fontit ja värit. Ymmärrä sivun rakenne välittömästi avaamatta selaimen kehittäjätyökaluja.

Lue lisää →

Viivaimet ja apuviivat

Mittaa etäisyyksiä, tarkista tasaus ja lisää pikselintarkkoja viivaimia ja apuviivoja mille tahansa verkkosivulle varmistaaksesi, että suunnitelmasi ovat täydellisesti linjassa.

Lue lisää →

Värivalitsin

Poimi värejä mistä tahansa sivun elementistä ja kopioi HEX-, RGB- tai HSL-arvot leikepöydällesi yhdellä napsautuksella.

Lue lisää →

Kuvakaappauksen otto

Kaappaa koko sivun tai näkyvän alueen kuvakaappauksia mistä tahansa verkkosivusta ja lataa ne välittömästi — täydellinen suunnitelmien jakamiseen ja virheiden raportointiin.

Lue lisää →

Responsiivisuuden testaus

Esikatsele mitä tahansa verkkosivua eri näyttöko'oilla ja laiteresoluutioilla testataksesi responsiivista suunnittelua poistumatta selaimestasi.

Lue lisää →
Tutustu muihin työkaluihin tarkemmin:
CSS Inspector ILMAINEN

Tarkasta ja muokkaa CSS-tyylejä reaaliajassa

CSS Inspector on tehokas kehittäjätyökalu, jonka avulla voit tarkastella minkä tahansa elementin täydellisiä…

Debuggaa ja hallitse CSS-animaatioita reaaliajassa

Animaatiotarkastin antaa sinulle täydellisen hallinnan jokaiseen verkkosivulla suoritettavaan CSS-animaatioon ja siirtymään.

Muunna minkä tahansa elementin CSS Tailwind-apuluokiksi

Kopioi Tailwindina silloittaa visuaalisen suunnittelun ja Tailwind CSS -koodin välisen kuilun.

Visualisoi minkä tahansa sivun täydellinen layoutrakenne

Vain ääriviivat -tila lisää värikoodatut reunaviivat jokaiseen verkkosivun HTML-elementtiin, antaen sinulle välittömän…

Hae kategorisoidut Tailwind-luokat mille tahansa elementille

Tailwind Helper tarkastaa minkä tahansa verkkosivun elementin ja generoi kattavan, kategorisoidun erittelyn vastaavista…

Visuaalinen HTML-puunäkymä overlay millä tahansa verkkosivulla

Sivun jäsentäjä renderöi minkä tahansa verkkosivun täydellisen DOM-rakenteen visuaalisena puuna suoraan sivulle.

Tunnista React-, Vue-, Angular- ja Svelte-komponentit millä tahansa sivulla

Komponenttitunnistin tunnistaa automaattisesti, mitä frontend-frameworkia verkkosivusto käyttää ja paljastaa sen…

Vedä ja pudota minkä tahansa elementin uuteen sijaintiin sivulla

Siirrä elementti antaa sinulle mahdollisuuden napsauttaa mitä tahansa verkkosivun elementtiä ja vetää sen fyysisesti uuteen sijaintiin.

Poista tai piilota minkä tahansa elementin näkyvyys

Poista/Piilota elementti antaa sinulle mahdollisuuden poistaa tai piilottaa tilapäisesti minkä tahansa verkkosivun…

Vie mikä tahansa elementti HTML:nä, CSS:nä tai JSON:na

Vie elementti antaa sinulle mahdollisuuden napsauttaa mitä tahansa verkkosivun elementtiä ja viedä sen täydellinen…

Generoi React-, Vue- ja Svelte-komponentit mistä tahansa elementistä

Kopioi komponenttikoodi muuntaa minkä tahansa verkkosivun elementin siistiksi, tuotantovalmiiksi komponenttitiedostoksi…

Kuvakaappaus ILMAINEN

Kaappaa näkyvä alue tai koko sivu kuvakaappauksena

Kuvakaappaustyökalu tallentaa korkealaatuisia kuvia mistä tahansa verkkosivusta kahdessa tilassa: näkyvä alue…

Kuvien poiminta ILMAINEN

Selaa, valitse ja lataa kaikki kuvat miltä tahansa verkkosivulta

Kuvien poiminta skannaa verkkosivun ja esittää kaikki löydetyt kuvat selattavassa galleriassa.

Etsi, esikatsele ja lataa kaikki SVG-kuvat miltä tahansa sivulta

SVG Grabber löytää kaikki SVG-kuvat verkkosivulta — upotetuista SVG-elementeistä, ulkoisista…

Vaihda mikä tahansa sivun kuva omaksesi

Kuvien vaihtotyökalun avulla voit napsauttaa mitä tahansa verkkosivun kuvaa ja korvata sen omallasi — joko lataamalla…

QR-koodien luoja ILMAINEN

Luo QR-koodeja mistä tahansa URL-osoitteesta tai tekstistä hetkessä

QR-koodien luoja muodostaa automaattisesti skannattavan QR-koodin nykyisen sivun URL-osoitteesta — tai mistä tahansa…

Lehe Joonlaud ILMAINEN

Pikselintarkat viivaimet, apuviivat ja mitat millä tahansa sivulla

Page Ruler lisää Photoshop-tyylisiä viivaimia ja vedettäviä apuviivoja mille tahansa verkkosivulle.

Esikatsele useita laiteikkunoita samanaikaisesti

Responsive Viewer näyttää nykyisen verkkosivun renderöitynä useassa eri laiteikkunakoossa rinnakkain — kaikki yhdellä näytöllä.

Mittaa etäisyys ILMAINEN

Mittaa tarkka pikselietäisyys minkä tahansa kahden elementin välillä

Mittaa etäisyys -työkalu antaa sinun napsauttaa mitä tahansa kahta elementtiä verkkosivulla ja nähdä välittömästi…

Visualisoi jokainen pinontakonteksti ja z-index-kerros

Z-Index Inspector paljastaa verkkosivun jokaisen elementin täydellisen pinontajärjestyksen.

Tarkastele CSS Grid- ja Flexbox-asetteluja visuaalisilla päällekkäiskerroksilla

Grid/Flex Visualizer havaitsee kaikki CSS Grid- ja Flexbox-kontainerit verkkosivulta ja renderöi niiden…

Simuloi käyttäjän huomion kohdepisteet millä tahansa sivulla

Heatmap Simulator luo ennustetun huomiolämpökartan mille tahansa verkkosivulle perustuen vakiintuneisiin…

Tyhjennä välimuisti, evästeet, localStorage ja sessionStorage valikoivasti

Tyhjennä selaustiedot tarjoaa kehittäjille nopean ja valikoivan tavan poistaa tiettyjä selaustietojen tyyppejä…

Tunnista jokainen teknologia minkä tahansa verkkosivuston takana

Site Stack skannaa minkä tahansa verkkosivuston ja tunnistaa sen täydellisen teknologiapinon — frontend-kehykset…

SEO Inspektor ILMAINEN

Kattava SEO-tarkistus: meta-tagit, otsikot, OpenGraph ja paljon muuta

SEO Inspector tarjoaa välittömän ja kattavan SEO-tarkistuksen mille tahansa verkkosivulle.

Automatisoitu WCAG-tarkastus: Kontrasti, Alt-teksti, ARIA ja paljon muuta

Accessibility Inspector suorittaa automaattisia WCAG 2.1 Level AA -tarkistuksia mille tahansa verkkosivulle ja tuottaa…

Napsauta mitä tahansa tekstiä millä tahansa sivulla ja muokkaa sitä välittömästi

Live Text Editor tekee jokaisesta tekstielementistä verkkosivulla muokattavan yhdellä napsautuksella.

Vaihda mikä tahansa fontti koko sivulle tai elementtikohtaisesti Google Fontsista

Fonts Changer antaa sinun vaihtaa minkä tahansa verkkosivun fontin toiseen Google Fonts -kirjaston fontilla — joko koko…

Löydä kaikki verkkosivulla käytetyt fontit

List All Fonts skannaa minkä tahansa verkkosivun ja esittää täydellisen luettelon kaikista käytössä olevista…

Värvivalija ILMAINEN

Tarkka pipetti HEX-, RGB- ja HSL-väriarvoille

Color Picker tarjoaa pikselintarkan pipettityökalun värien poimimiseen mistä tahansa verkkosivun elementistä…

Värviplett ILMAINEN

Poimi täydellinen väripaletti miltä tahansa verkkosivulta

Color Palette skannaa jokaisen elementin verkkosivulla ja poimii kaikki käytetyt värit — tekstistä ja taustoista…

Ota tumma tila käyttöön millä tahansa verkkosivulla välittömästi

Force Dark Mode soveltaa tummaa värimaailmaa mihin tahansa verkkosivuun, joka ei tarjoa sitä itse — tai korvaa sivuston vaalean teeman.

Ota JavaScript käyttöön tai poista se käytöstä välilehdittäin hetkessä

Toggle JavaScript poistaa JavaScript-suorituksen käytöstä tai ottaa sen uudelleen käyttöön nykyisellä…

Selaa, muokkaa, lisää ja poista evästeitä miltä tahansa verkkotunnukselta

Cookie Editor näyttää kaikki nykyisen verkkotunnuksen evästeet selkeässä, lajiteltavassa taulukossa.

Konsooli Logija ILMAINEN

Tarkastele konsolitulosteita kelluvassa paneelissa — ilman DevToolsia

Console Logger tallentaa kaikki konsoliviestit (console.log, console.warn, console.error, console.info) ja näyttää ne…

Seuraa kaikkia verkkopyyntöjä reaaliajassa

Network Monitor sieppaa ja näyttää jokaisen nykyisen sivun tekemän verkkopyynnön — XHR/Fetch API -kutsut, skriptien…

Tarkastele, muokkaa, lisää ja poista localStorage- ja sessionStorage-tietoja

Local Storage Editor tarjoaa selkeän taulukkonäkymän nykyisen sivuston localStorage- ja sessionStorage-merkintöjen hallintaan.

Skannaa kaikki sivun linkit ja löydä rikkinäiset

Broken Link Checker skannaa kaikki nykyisen sivun linkit — ankkurien href-attribuutit, kuvien lähteet, skriptien…

Välitön suorituskykypaneeli: latausaika, DOM-tilastot ja resurssit

Sivun suorituskyky tarjoaa välittömän suorituskyvyn yleiskatsauksen mille tahansa verkkosivulle — latauksen…

JSON-muotoilija ILMAINEN

Muotoile, pienennä ja validoi JSON yhdellä napsautuksella

JSON-muotoilija tulostaa kauniisti, pienentää ja validoi JSON-tiedot suoraan selaimessasi.

Koodaa ja pura merkkijonoja Base64:ksi välittömästi

Base64-koodaaja/purkaja muuntaa tekstin Base64:ksi ja Base64:n takaisin tekstiksi suoraan selaimessasi.

Koodaa ja pura URL-merkkijonoja yhdellä napsautuksella

URL-koodaaja/purkaja muuntaa URL-merkkijonot prosenttikoodattuun muotoon ja takaisin.

Koodaa ja pura HTML-entiteettejä välittömästi

HTML-entiteettikoodaaja muuntaa erikoismerkit (< > & " ') niiden HTML-entiteettivastaavuuksiksi (&lt; &gt; &amp; &quot; &#39;) ja takaisin.

Pako- ja purkumerkkijonot koodia varten

Kenoviiva-pako/purku (Backslash Escape/Unescape) muuntaa merkkijonot niiden pakomuotoon ja takaisin (\n \t \r \" \' \\ ja Unicode-paot).

64 Kuva &harr; Base64 ILMAINEN

Muunna kuvia Base64 data -URI:eiksi ja takaisin

Kuva ↔ Base64 muuntaa kuvatiedostot (PNG, JPG, SVG, WebP, GIF) Base64-koodatuiksi data -URI:eiksi ja takaisin.

Pura JSON Web Tokenit välittömästi

JWT-virheenkorjaaja purkaa ja tarkastaa JSON Web Tokenit — jäsentää otsikon, hyötykuorman ja allekirjoituksen, näyttää…

Luo joukoittain UUID v4 -tunnisteita

UUID-generaattori tuottaa kryptografisesti vahvoja UUID v4 -tunnisteita selaimen krypto-API:n avulla.

Laske MD5-, SHA-1-, SHA-256-, SHA-384- ja SHA-512-tiivisteet

Tiiviste-generaattori (Hash Generator) laskee kryptografiset tiivisteet (MD5, SHA-1, SHA-256, SHA-384, SHA-512) mistä…

Luo kryptografisesti vahvoja salasanoja

Salasanageneraattori tuottaa vahvoja, satunnaisia salasanoja käyttäen selaimen kryptografista satunnaisuus-API:a.

Testaa säännöllisiä lausekkeita reaaliajassa osumien korostuksella

Säännöllisten lausekkeiden testaaja (Regex Tester) arvioi säännöllisiä lausekkeita testitekstiä vastaan reaaliajassa.

Aikaleimamuunnin ILMAINEN

Muunna Unix-, ISO- ja ihmisen luettavia päivämääriä

Aikaleimamuunnin kääntää Unix-aikaleimojen (sekunnit, millisekunnit, mikrosekunnit, nanosekunnit), ISO 8601:n, RFC…

Vertaile kahta tekstilohkoa rivi riviltä

Eroavaisuustyökalu (Diff Tool) vertailee kahta tekstilohkoa ja korostaa lisätyt, poistetut ja muuttumattomat rivit…

Tarkista minkä tahansa kahden värin WCAG-kontrastisuhde

Kontrastin tarkistaja (Contrast Checker) laskee WCAG 2.1 -kontrastisuhteen kahden värin välillä ja arvioi ne…

Muunna HEX, RGB, HSL, HSV ja OKLCH välittömästi

Värimuodon muunnin (Color Format Converter) kääntää minkä tahansa värin HEX-, RGB-, HSL-, HSV- ja OKLCH-muotojen välillä.

Pura hallitseva väripaletti mistä tahansa kuvasta

Kuvan värien erottaja (Image Color Extractor) analysoi minkä tahansa kuvatiedoston (pudota, liitä tai napsauta…

Hae CSS-valitsimet ja XPath mille tahansa elementille

DOM-polun etsijä (DOM Path Finder) antaa sinun viedä hiiren minkä tahansa elementin päälle sivulla paljastaaksesi sen…

CORS-tarkistaja ILMAINEN

Testaa alkuperät ylittäviä pyyntöjä ja tutki CORS-otsikoita

CORS-tarkistaja (CORS Checker) testaa, salliko kohdepalvelin sivustoltasi tulevan alkuperät ylittävän pyynnön.

Kaappaa WebSocket-kehyksiä reaaliajassa

WebSocket-tarkastaja (WebSocket Inspector) kaappaa jokaisen WebSocket-kehyksen — lähetetyn ja vastaanotetun — kaikissa…

Skannaa sivu rikkinäisten kuvien varalta välittömästi

Rikkinäisten kuvien etsijä (Broken Image Finder) skannaa jokaisen <img>-elementin ja CSS:n background-image-URL:n…

Täytä lomakkeet automaattisesti realistisella testidatalla

Lomakkeentäyttäjä (Form Filler) täyttää jokaisen näkyvän lomakekentän sivulla realistisella testidatalla — nimi…

Muunna CSV:n ja JSON:in välillä kumpaankin suuntaan

CSV ↔ JSON -muunnin (CSV ↔ JSON Converter) käsittelee täydellisen edestakaisen matkan kahden yleisimmän taulukkomuodon välillä.

XML-muotoilija ILMAINEN

Muotoile, validoi ja tarkastele XML:ää syntaksikorostuksella

XML-muotoilija (XML Formatter) snyggaa (pretty-prints), tiivistää (minifies) ja validoi XML-koodia selaimessa.

SQL-muotoilija ILMAINEN

Kaunista ja muotoile SQL-kyselyitä

SQL-muotoilija (SQL Formatter) muuntaa tiivistetyn tai sotkuisen SQL-koodin luettaviksi, sisennettyiksi kyselyiksi.

Tallenna verkkosivut siisteinä PDF-tiedostoina

Muunna PDF-muotoon (Convert to PDF) tallentaa nykyisen verkkosivun PDF-tiedostoksi selaimen tulostusikkunan kautta…

Hinnoittelu ja paketit

Yksinkertainen ja läpinäkyvä hinnoittelu

Valitse työnkulkuusi sopiva suunnitelma. Aloita ilmaiseksi, päivitä milloin tahansa.

Perus

Täydellinen DevSuite Pron kokeilemiseen. Luottokorttia ei tarvita.

$0

Ilmainen ikuisesti
Aloita ilmaiseksi
  • 43 ilmaista kehittäjätyökalua
  • CSS-tarkastaja ja värivalitsin
  • Kuvakaappauksen otto
  • Kelluva telakkaliittymä
  • Kaikki tulevat ilmaiset päivitykset

Kuukausittain Suosituin

Täysi pääsy kaikkiin 64+ ammattimaiseen työkaluun. Laskutus kuukausittain.

$2.99

kuukaudessa
Aloita kuukausipaketti
  • Kaikki 64+ kehittäjätyökalua
  • Täysi pääsy Pro-työkaluihin
  • Enintään 3 laitetta
  • Prioriteettituki
  • Peruuta milloin tahansa

Kertamaksu Paras arvo

Maksa kerran, käytä ikuisesti. Täysi pääsy kaikkiin 64+ pro-työkaluun ilman toistuvia maksuja.

$29.99

kertamaksu
Osta kerran, käytä ikuisesti
  • Kaikki 64+ kehittäjätyökalua
  • Täysi pääsy Pro-työkaluihin
  • Enintään 3 laitetta
  • Prioriteettituki
  • Ei toistuvia maksuja
DevSuite Pro FAQ section background
UKK

DevSuite Pro -käyttäjien usein kysytyt kysymykset

Yleisiä kysymyksiä DevSuite Pro -laajennuksen ominaisuuksista ja käytöstä. Jos sinulla on kysymys, vastaus saattaa löytyä alta.

Miten asennan DevSuite Pron?

Käy Chrome Web Storessa, etsi "DevSuite Pro", napsauta "Lisää Chromeen" ja vahvista valitsemalla "Lisää laajennus". Asennuksen jälkeen laajennuksen kuvake ilmestyy selaimen työkalupalkkiin. Napsauta sitä päästäksesi käsiksi yli 64 kehittäjätyökaluun välittömästi.

Mikä on ero ilmaisten ja Pro-työkalujen välillä?

Ilmaiset työkalut (yli 43) ovat kaikkien saatavilla ilman lisenssiä. Pro-työkalut on merkitty kultaisella PRO-merkillä ja vaativat aktiivisen Pro-lisenssin. Näet ponnahdusikkunasta, mitkä työkalut ovat ilmaisia ja mitkä pro — ilmaisilla työkaluilla ei ole lukkokuvaketta, kun taas pro-työkalut näkyvät himmennettyinä, kunnes aktivoit lisenssisi.

Miksi työkalu ei toimi joillakin verkkosivustoilla?

Joillakin verkkosivustoilla on tiukat sisältöturvallisuuskäytännöt (CSP), jotka estävät tiettyjä selainlaajennusten toimintoja. Tämä on erityisen yleistä pankki- ja viranomais­sivustoilla. Lisäksi Chromen sisäiset sivut (chrome://) eivät salli laajennusten sisältöskriptien suorittamista.

Ovatko sivulle tekemäni muutokset pysyviä?

Eivät. Kaikki työkaluilla kuten Move Element, Live Text Editor, Delete/Hide Element ja CSS Inspector tehdyt muutokset ovat väliaikaisia. Ne vaikuttavat vain siihen, mitä näet selaimessasi juuri nyt. Sivun uudelleenlataaminen palauttaa kaiken alkuperäiseen tilaan.

Miten aktivoin Pro-lisenssini?

Avaa DevSuite Pro -ponnahdusikkuna, napsauta Asetukset-kuvaketta oikeassa yläkulmassa. Vieritä alas Lisenssi-osioon, liitä lisenssiavaimesi syöttökenttään ja napsauta Aktivoi. Jos avain on kelvollinen, merkki vaihtuu FREE:stä PRO:hon ja kaikki pro-työkalut avautuvat välittömästi.

Miten siirrän tai piilotan kelluvan telakan?

Voit siirtää telakkaa menemällä Asetuksiin ja valitsemalla toisen sivupalkin sijainnin — Ylhäällä, Alhaalla, Vasemmalla tai Oikealla. Voit myös piilottaa telakan kokonaan kytkemällä pois "Näytä telakka sivuilla" Asetuksissa tai painamalla Ctrl+Shift+X milloin tahansa.

Kerääkö DevSuite Pro selailutietoja?

Ei. DevSuite Pro ne kerää, seuraa eikä lähetä selailutietojasi. Kaikki asetukset tallennetaan paikallisesti selaimeesi. Ainoa ulkoinen pyyntö tehdään lisenssiavaimen aktivoinnin yhteydessä avaimesi vahvistamiseksi palvelimellamme.

Voinko käyttää DevSuite Prota Firefoxissa?

Kyllä! DevSuite Pro on saatavilla sekä Chrome Web Storessa että Firefox Add-onsissa. Se toimii Chromessa, Edgessä, Bravessa ja muissa Chromium-pohjaisissa selaimissa sekä Firefoxissa.