Oletko huomannut, että kopioit samaa JavaScriptiä DevToolsin konsoliin yhä uudelleen? Debuggauspätkä, datan poimiminen sivulta, nopea DOM-muokkaus, ja joka kerta joudut kirjoittamaan sen käsin tai liittämään muistiosta.

Chrome DevToolsissa on ollut sisäänrakennettu pätkäeditori suoraan Sources-välilehdellä jo usean vuoden ajan. Kirjoitat skriptin kerran, annat sille nimen ja ajat sen millä tahansa sivulla yhdellä klikkauksella tai pikakomennolla. Se toimii nopeammin kuin bookmarklet, eikä vaadi mitään laajennuksia.

Käymme läpi koko syklin vaihe vaiheelta: Snippets-paneelin avaamisesta valmiisiin, käyttökelpoisiin työesimerkkeihin, jotka voit ottaa itsellesi.

💡 Pikaopas:

• Avaa Snippets-paneeli Sources-välilehden tai komentovalikon kautta
• Luo uusi pätkä ja anna sille kuvaava nimi
• Kirjoita JavaScriptiä koodieditoriin ja tallenna Ctrl+S-komennolla
• Aja pätkä Run-painikkeella tai komentovalikon kautta !-merkillä
• Käy läpi käytännön esimerkkejä: sivun tyhjennys, datan kerääminen, tyylien muokkaus

Mitä pätkät ovat ja miksi tarvitset niitä

Pätkä on JavaScript-fragmentti, joka tallennetaan suoraan Chrome DevToolsiin. Toisin kuin konsolissa oleva koodi, se ei katoa, kun lataat sivun uudelleen tai suljet selaimen; se odottaa Sources-välilehdellä ajamista.

Suurin etu konsoliin verrattuna: pätkä suoritetaan nykyisen sivun kontekstissa, ja sillä on täysi pääsy sen DOMiin, muuttujiin ja rajapintoihin. Voit kirjoittaa skriptin, joka poimii dataa miltä tahansa sivustolta, muokkaa asettelua tai automatisoi rutiinitehtäviä, ja ajaa sen milloin haluat ilman uudelleenkirjoittamista.

Vaihtoehtoinen lähestymistapa on bookmarkletit (kirjanmerkit, joiden URL-osoitteessa on javascript:), mutta niitä rajoittaa URL-osoitteen pituus ja ne ovat hankalia moniriviselle koodille. Firefoxissa vastine oli Scratchpad, mutta se poistettiin selaimesta versiosta 70 alkaen ja korvattiin monirivisellä konsolieditorilla.

Katso tämä lyhyt video-opas pätkistä; se on englanniksi, mutta kaikki toiminnot näkyvät ruudulla ja vastaavat täysin alla kuvattuja vaiheita.

Tältä tyypillinen pätkätyönkulku näyttää: kuvakaappauksessa näkyy vasemmalla alkuperäinen sivu ja oikealla koodi editorissa.

Tämän esimerkin lähdekoodi tekee kolme asiaa: kirjaa viestin konsoliin, tyhjentää document.body-elementin ja lisää uuden kappaleen:

1
console.log('Hello, Snippets!');
2
document.body.innerHTML = '';
3
var p = document.createElement('p');
4
p.textContent = 'Hello, Snippets!';
5
document.body.appendChild(p);

Ajamisen jälkeen sivu muuttuu täysin: konsoliin ilmestyy Hello, Snippets!, ja bodyn sisältö korvataan yhdellä kappaleella.

Miten Snippets-paneeli avataan

Snippets-paneeli sijaitsee Sources-välilehden sisällä. Sinne pääsee kahdella tavalla: hiirellä ja komentovalikon kautta.

Tapa yksi: hiirellä

Avaa DevTools (F12 tai Ctrl+Shift+I) ja siirry Sources-välilehdelle. Vasemmalla näet Page-paneelin, jossa on sivun tiedostopuu; se on oletuksena auki.

Klikkaa samassa vasemmassa sarakkeessa Snippets-välilehteä. Jos välilehti ei ole näkyvissä, klikkaa More tabs -nuolta (>>); se avaa pudotusvalikon, jossa on piilotetut välilehdet, mukaan lukien Snippets.

Tapa kaksi: komentovalikko

Komentovalikko on nopein tapa navigoida DevToolsissa, jos muistat pikanäppäimen.

• Aseta kohdistus mihin tahansa DevToolsin sisällä.
• Paina Ctrl+Shift+P (Windows/Linux) tai Cmd+Shift+P (Mac) avataksesi komentovalikon.
• Ala kirjoittaa snippets ja valitse Show Snippets, paina sitten Enter.

Uuden snippetin luominen

Snippets-paneeli on auki; lisätään nyt ensimmäinen skripti.

Sources-paneelin kautta

Klikkaa Snippets-paneelissa New snippet -painiketta. Anna snippetin nimi ja paina Enter; se ilmestyy vasemmalla olevaan listaan.

Nimen kannattaa olla kuvaava; kuukauden päästä et enää muista, mitä snippet-3 tekee. Kirjoita "clear-page-and-log", "extract-product-prices" tai "toggle-dark-mode".

Komentovalikon kautta

Sama pikanäppäin Ctrl+Shift+P / Cmd+Shift+P, mutta nyt kirjoita snippet ja valitse Create new snippet, sitten Enter.

Uusi snippet luodaan oletusnimellä; nimeä se uudelleen klikkaamalla hiiren kakkospainikkeella ja valitsemalla Rename.

Snippet-koodin muokkaaminen

Klikkaa snippetin nimeä vasemmassa paneelissa; koodieditori avautuu oikealle. Tämä on täysiverinen editori, jossa on syntaksin korostus, rivinumerot ja JavaScriptin automaattinen täydennys.

Kirjoita koodia kuten missä tahansa editorissa. Kaikki selaimen vakiorajapinnat ovat käytettävissä: document- ja window-oliot, fetch- ja console-funktiot, localStorage-tallennustila. Koko se valikoima, jonka sivu näkee.

Kun koodia ei ole tallennettu, snippetin nimen viereen ilmestyy tähti. Tallenna: Ctrl+S (Windows/Linux) tai Cmd+S (Mac).

Käytä Ctrl+Z / Cmd+Z kumotaksesi; muutoshistoria toimii muokkausistunnon ajan.

Snippetin ajaminen

Sources-paneelin Run-painikkeella

Avaa haluttu snippet editorissa. Klikkaa paneelin alareunassa olevaa Run-painiketta (Play-kuvake):

Tai paina Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Snippet suoritetaan parhaillaan avoinna olevan sivun kontekstissa.

Komentovalikon kautta huutomerkillä

Avaa komentovalikko (Ctrl+Shift+P / Cmd+Shift+P), poista >-symboli, kirjoita ! ja ala kirjoittaa snippetin nimeä. DevTools näyttää täsmäävät vaihtoehdot:

Valitse tarvitsemasi ja paina Enter. Tämä tapa on kätevä, kun et halua vaihtaa Sources-välilehdelle.

Uudelleennimeäminen ja poistaminen

Molemmat toimenpiteet tehdään Snippets-paneelissa klikkaamalla snippetin nimeä hiiren kakkospainikkeella:

• Rename: anna uusi nimi,
• Remove: poista snippet pysyvästi.

Poistaminen ei kysy vahvistusta, joten ole varovainen. Ennen monimutkaisen skriptin poistamista kopioi koodi tekstitiedostoon.

Käytännön snippet-esimerkkejä

Olemme käyneet läpi teorian; tässä on nyt muutama valmis skripti, jotka voit kopioida, tallentaa snippetinä ja ottaa heti käyttöön.

Sivun tyhjentäminen kuvakaappausta varten

Poistaa kaiken sisällön ja lisää puhtaan valkoisen taustan, mikä on hyödyllistä otettaessa kuvakaappauksia portfolioon tai dokumentaatioon:

1
document.body.innerHTML = '';
2
document.body.style.backgroundColor = '#fff';

Kaikkien linkkien kerääminen sivulta

Hakee kaikki URL-osoitteet ja tulostaa ne konsoliin listana. Hyödyllinen sivun tarkastamiseen tai datan keräämiseen:

1
const links = [...document.querySelectorAll('a[href]')];
2
links.forEach((a, i) => console.log(`${i + 1}. ${a.href} — "${a.textContent.trim()}"`));
3
console.log(`Всего ссылок: ${links.length}`);

Tumma tila mille tahansa sivustolle

Kääntää koko sivun värit, toimii silloinkin, kun sisäänrakennettua tummaa teemaa ei ole:

1
document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
2
const imgs = document.querySelectorAll('img, video');
3
imgs.forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');

Kaikkien painikkeiden korostaminen sivulla

Piirtää punaisen reunuksen jokaisen <button>- ja input[type="submit"]-elementin ympärille, kätevä asettelun tarkistamiseen:

1
document.querySelectorAll('button, input[type="submit"], [role="button"]').forEach(el => {
2
  el.style.outline = '3px solid red';
3
});

Kaikkia näitä pätkiä voi yhdistellä ja laajentaa omiin tehtäviin. Tallenna kerran, käytä vuosia.

⁉️🤔 Usein kysytyt kysymykset

Missä Chrome DevToolsin snippettejä säilytetään fyysisesti?

Snippetit tallennetaan Chrome-profiilin Preferences-tiedostoon (JSON) polussa %LocalAppData%\Google\Chrome\User Data\Default\Preferences Windowsissa tai ~/Library/Application Support/Google/Chrome/Default/Preferences Macissa. Niitä EI synkronoida Google-tilin kautta; kun vaihdat tietokonetta tai asennat selaimen uudelleen, snippetit katoavat. Siirtääksesi ne manuaalisesti kopioi devtools.preferences.snippets-osio Preferences-tiedostosta toiseen selaimen ollessa suljettuna.

Miten snippetti eroaa bookmarkletista?

Bookmarklet on kirjanmerkki, jonka URL alkaa javascript:-alkuisella osoitteella, ja sitä rajoittaa URL:n koko (noin 2000 merkkiä) ja sen muokkaaminen on hankalaa. Snippetti on täysiverinen editori DevToolsin sisällä ilman pituusrajoituksia, ja siinä on syntaksin korostus ja pysyvyys istuntojen välillä. Snippetin voi myös ajaa Ctrl+Enter-pikanäppäimellä nostamatta käsiä näppäimistöltä.

Voiko snippetin ajaa automaattisesti sivun latauksen yhteydessä?

Ei suoraan. Snippetti vaatii aina manuaalisen suorituksen. Jos tarvitset automaatiota latauksen yhteydessä, käytä Chrome-laajennusta (content script) tai Tampermonkeyta/Violentmonkeyta käyttäjäskriptien kanssa; ne laukeavat sivun lataustapahtumasta eivätkä vaadi manuaalista toimenpidettä.

Miten varmuuskopioin snippetit ennen Chromen uudelleenasennusta?

Avaa DevTools, siirry Sources → Snippets, napsauta kutakin snippettiä hiiren kakkospainikkeella ja valitse Save as; tämä tallentaa .js-tiedoston levylle. Vaihtoehtoisesti avaa chrome://version/, etsi profiilipolku, sulje Chrome ja kopioi JSON-osio devtools.preferences.snippets Preferences-tiedostosta.

Miksi snippettini ei näe konsolin muuttujia?

Snippetti suoritetaan omassa näkyvyysalueessaan; sillä ei ole pääsyä muuttujiin, jotka on määritelty konsolissa var/let/const-määreillä globaalissa näkyvyysalueessa. Välittääksesi dataa aseta arvo suoraan window-objektiin: window.myData = {...} konsolissa ja lue sitten window.myData snippetissä. Tai toisin päin: snippetti voi asettaa dataa window-objektiin, ja konsoli voi lukea sen.

Kannattaako snippetit opetella vuonna 2026?

Snippetit ovat yksi niistä työkaluista, jotka eivät muutu vuosiin mutta nopeuttavat radikaalisti rutiinityötä, jos et unohda niitä. Viisi minuuttia linkkien keräämiseen tai sivun tyhjentämiseen tarkoitetun skriptin luomiseen säästää kymmeniä manuaalisia toimenpiteitä joka kuukausi.

Aloita kolmella yksinkertaisella snippetillä: datan kerääminen sivun taulukoista, nopea DOM:n tyhjennys kuvakaappauksia varten ja elementin korostaminen valitsimen perusteella. Tallenna ne, ja seuraavan kerran kun tarvitset datan poimimista kolmannen osapuolen sivustolta tai asettelun tarkistamista, saat sen valmiiksi sekunneissa sen sijaan, että käyttäisit puoli tuntia kopioimiseen ja liittämiseen.

Muista vain varmuuskopioida: snippetit eivät synkronoidu laitteiden välillä, ja ilman kopiota Preferences-tiedostosta ne katoavat, kun asennat järjestelmän uudelleen.