Lisää laajennus Chromeen
- Ava Chrome Web Store ja etsi "DevSuite Pro" -laajennus.
- Napsauta "Lisää Chromeen" ja vahvista napsauttamalla "Lisää laajennus" ponnahdusikkunassa.
Yli 64 tehokasta työkalulaajennusta verkkosivujen tarkastamiseen, mittaamiseen, kaappaamiseen, analysointiin ja suunnitteluun suoraan selaimessasi.
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.
DevSuite Pro tarjoaa yli 64 kehittäjätyökalua verkkosivujen tarkastamiseen, mittaamiseen, suunnitteluun ja analysointiin. Tehosta työnkulkuasi tehokkailla ominaisuuksilla suoraan selaimessasi.
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ää →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ää →Mittaa etäisyyksiä, tarkista tasaus ja lisää pikselintarkkoja viivaimia ja apuviivoja mille tahansa verkkosivulle varmistaaksesi, että suunnitelmasi ovat täydellisesti linjassa.
Lue lisää →Poimi värejä mistä tahansa sivun elementistä ja kopioi HEX-, RGB- tai HSL-arvot leikepöydällesi yhdellä napsautuksella.
Lue lisää →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ää →Esikatsele mitä tahansa verkkosivua eri näyttöko'oilla ja laiteresoluutioilla testataksesi responsiivista suunnittelua poistumatta selaimestasi.
Lue lisää →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…
Kaappaa näkyvä alue tai koko sivu kuvakaappauksena
Kuvakaappaustyökalu tallentaa korkealaatuisia kuvia mistä tahansa verkkosivusta kahdessa tilassa: näkyvä alue…
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…
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…
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 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…
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…
Tarkka pipetti HEX-, RGB- ja HSL-väriarvoille
Color Picker tarjoaa pikselintarkan pipettityökalun värien poimimiseen mistä tahansa verkkosivun elementistä…
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.
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…
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 (< > & " ') 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).
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.
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…
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ä.
Muotoile, validoi ja tarkastele XML:ää syntaksikorostuksella
XML-muotoilija (XML Formatter) snyggaa (pretty-prints), tiivistää (minifies) ja validoi XML-koodia selaimessa.
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…
Valitse työnkulkuusi sopiva suunnitelma. Aloita ilmaiseksi, päivitä milloin tahansa.
Yleisiä kysymyksiä DevSuite Pro -laajennuksen ominaisuuksista ja käytöstä. Jos sinulla on kysymys, vastaus saattaa löytyä alta.
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.
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.
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 viranomaissivustoilla. Lisäksi Chromen sisäiset sivut (chrome://) eivät salli laajennusten sisältöskriptien suorittamista.
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.
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.
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.
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.
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.