Oled märganud, et kopeerid üha sama JavaScripti DevToolsi konsooli? Silumisjupp, andmete lehelt väljavõtmine, kiire DOM-i muutmine, ja iga kord pead selle käsitsi sisse trükkima või märkmikust kleepima.

Chrome DevToolsil on juba mitu aastat Sources vahekaardil olnud sisseehitatud juppide redaktor. Kirjutad skripti ühe korra, annad sellele nime ja käivitad selle ühe klõpsu või kiirklahviga ükskõik millisel lehel. See töötab kiiremini kui järjehoidja-applett ega vaja ühtegi laiendust.

Käime kogu tsükli samm-sammult läbi: alates Juppide paneeli avamisest kuni valmis kasutatavate töötavate näideteni, mida saad endale võtta.

💡 Kiire ülevaade:

• Ava Juppide paneel Sources vahekaardi või käsumenüü kaudu
• Loo uus jupp ja anna sellele tähenduslik nimi
• Kirjuta koodiredaktoris JavaScripti ja salvesta klahviga Ctrl+S
• Käivita jupp Run-nupu või käsumenüü kaudu, kasutades !
• Tutvu praktiliste näidetega: lehe tühjendamine, andmete kogumine, stiilide muutmine

Mis on jupid ja miks neid vaja on

Jupp on JavaScripti fragment, mis salvestatakse otse Chrome DevToolsi. Erinevalt konsoolis olevast koodist ei kao see lehe värskendamisel või brauseri sulgemisel; see asub Sources vahekaardil ja ootab käivitamist.

Peamine eelis konsooli ees: jupp käivitatakse praeguse lehe kontekstis ja sellel on täielik juurdepääs lehe DOM-ile, muutujatele ja API-dele. Saad kirjutada skripti, et koguda andmeid ükskõik milliselt saidilt, muuta paigutust või automatiseerida rutiinseid ülesandeid ja käivitada seda millal iganes soovid, ilma et peaksid seda uuesti trükkima.

Alternatiivne lähenemine on järjehoidja-apletid (järjehoidjad, mille URL-is on javascript:), kuid need on piiratud URL-i pikkusega ja ebamugavad mitmerealise koodi jaoks. Firefoxis oli vasteks Scratchpad, kuid see eemaldati brauserist alates versioonist 70 ja asendati mitmerealise konsooliredaktoriga.

Vaata seda lühikest videoõpetust juppide kohta; see on inglise keeles, kuid kõik toimingud on ekraanil näidatud ja vastavad täielikult allpool kirjeldatud sammudele.

Siin on tüüpiline jupi töövoog: ekraanipildil on vasakul algne leht ja paremal kood redaktoris.

Selle näite lähtekood teeb kolme asja: logib konsooli teate, tühjendab document.body ja lisab uue lõigu:

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);

Pärast käivitamist muutub leht täielikult: konsooli ilmub Hello, Snippets! ja keha sisu asendatakse üheainsa lõiguga.

Kuidas juppide paneeli avada

Juppide paneel asub Sources vahekaardil. Sinna jõudmiseks on kaks võimalust: hiirega ja käsumenüü kaudu.

Esimene meetod: hiirega

Ava DevTools (F12 või Ctrl+Shift+I) ja mine vahekaardile Sources (Allikad). Vasakul näed paneeli Page (Leht) koos lehe failipuuga; see on vaikimisi avatud.

Klõpsa samas vasakus veerus vahekaardil Snippets (Katkendid). Kui vahekaart pole nähtav, klõpsa noolel More tabs (>>); see avab rippmenüü peidetud vahekaartidega, sealhulgas Snippets.

Teine meetod: käsumenüü

Käsumenüü on kiireim viis DevToolsis navigeerimiseks, kui klahvikombinatsioon meeles on.

• Aseta fookus ükskõik kuhu DevToolsi sees.
• Vajuta Ctrl+Shift+P (Windows/Linux) või Cmd+Shift+P (Mac), et avada käsumenüü.
• Hakka trükkima snippets ja vali Show Snippets (Näita katkendeid), seejärel vajuta Enter.

Uue katkendi loomine

Snippets-paneel on avatud; nüüd lisame esimese skripti.

Sources-paneeli kaudu

Klõpsa Snippets-paneelil nuppu New snippet (Uus katkend). Sisesta katkendi nimi ja vajuta Enter; see ilmub vasakul olevasse loendisse.

Nimi peaks olema tähendusrikas; kuu aja pärast sa ei mäleta, mida snippet-3 teeb. Kirjuta „clear-page-and-log", „extract-product-prices" või „toggle-dark-mode".

Käsumenüü kaudu

Sama klahvikombinatsioon Ctrl+Shift+P / Cmd+Shift+P, kuid nüüd trüki snippet ja vali Create new snippet (Loo uus katkend), seejärel Enter.

Uus katkend luuakse vaikenimega; nimeta see ümber, tehes paremklõpsu ja valides Rename (Nimeta ümber).

Katkendi koodi redigeerimine

Klõpsa vasakpoolsel paneelil katkendi nimel; paremal avaneb koodiredaktor. See on täisfunktsionaalne redaktor süntaksi esiletõstmise, reanumbrite ja JavaScripti automaatlõpetamisega.

Kirjuta koodi nagu igas teises redaktoris. Kõik standardsed brauseri API-d on saadaval: document ja window objektid, fetch ja console funktsioonid, localStorage salvestusruum. Kogu komplekt sellest, mida leht näeb.

Kui kood ei ole salvestatud, ilmub katkendi nime kõrvale tärn. Salvestamine: Ctrl+S (Windows/Linux) või Cmd+S (Mac).

Kasuta tagasivõtmiseks Ctrl+Z / Cmd+Z; muudatuste ajalugu töötab redigeerimisseansi vältel.

Katkendi käivitamine

Run-nupuga Sources-paneelil

Ava soovitud katkend redaktoris. Klõpsa paneeli allosas nuppu Run (Käivita) (Esitamise ikoon):

Või vajuta Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Katkend käivitatakse hetkel avatud lehe kontekstis.

Käsumenüü kaudu hüüumärgiga

Ava käsumenüü (Ctrl+Shift+P / Cmd+Shift+P), kustuta > sümbol, trüki ! ja hakka sisestama katkendi nime. DevTools näitab sobivaid valikuid:

Vali see, mida vajad, ja vajuta Enter. See meetod on mugav, kui sa ei soovi Sources-vahekaardile ümber lülituda.

Ümbernimetamine ja kustutamine

Mõlemad toimingud tehakse Snippets-paneelil, tehes katkendi nimel paremklõpsu:

• Rename (Nimeta ümber): määra uus nimi,
• Remove (Eemalda): kustuta katkend jäädavalt.

Kustutamine ei küsi kinnitust, seega ole ettevaatlik. Enne keeruka skripti kustutamist kopeeri kood tekstifaili.

Praktilised katkendite näited

Oleme teooria läbi võtnud; nüüd on siin mõned valmisskriptid, mida saad kopeerida, katkendina salvestada ja kohe kasutada.

Lehe tühjendamine ekraanipildi jaoks

Eemaldab kogu sisu ja lisab puhta valge tausta, kasulik portfoolio või dokumentatsiooni jaoks ekraanipilte tehes:

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

Kõigi linkide kogumine lehelt

Väljastab kõik URL-id ja kuvab need konsoolis loendina. Kasulik lehe auditeerimiseks või andmete kogumiseks:

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}`);

Tume režiim igal saidil

Rakendab kogu lehele inversiooni, töötab ka seal, kus sisseehitatud tumedat teemat pole:

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)');

Kõigi nuppude esiletõstmine lehel

Joonistab iga <button> ja input[type="submit"] elemendi ümber punase äärise, mugav paigutuse kontrollimiseks:

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

Kõiki neid juppe saab kombineerida ja oma ülesannete jaoks edasi arendada. Salvesta üks kord, kasuta aastaid.

⁉️🤔 Korduma kippuvad küsimused

Kus Chrome DevToolsi katkendid füüsiliselt asuvad?

Katkendid salvestatakse Chrome'i profiilis asuvasse Preferences faili (JSON) aadressil %LocalAppData%\Google\Chrome\User Data\Default\Preferences Windowsis või ~/Library/Application Support/Google/Chrome/Default/Preferences Macis. Neid EI sünkroniseerita Google'i konto kaudu; kui vahetad arvutit või installid brauseri uuesti, lähevad katkendid kaotsi. Käsitsi ülekandmiseks kopeeri suletud brauseri korral devtools.preferences.snippets sektsioon ühest Preferences failist teise.

Mille poolest erineb katkend järjehoidja skriptist (bookmarklet)?

Järjehoidja skript on järjehoidja, mille URL algab sõnaga javascript:, seda piirab URL-i pikkus (umbes 2000 tähemärki) ja seda on ebamugav muuta. Katkend on DevToolsi sisene täisväärtuslik redaktor, millel pole pikkusepiirangut, on süntaksi esiletõst ja püsivus seansside vahel. Katkendit saab käivitada ka klahvikombinatsiooniga Ctrl+Enter, ilma et peaksid käsi klaviatuurilt ära tõstma.

Kas katkendit saab automaatselt käivitada lehe laadimisel?

Otseselt mitte. Katkend nõuab alati käsitsi käivitamist. Kui vajad automaatikat lehe laadimisel, kasuta Chrome'i laiendust (sisuskripti) või Tampermonkey/Violentmonkey kasutajaskripte; need käivituvad lehe laadimise sündmuse pealt ega vaja käsitsi sekkumist.

Kuidas teha oma katkenditest varukoopia enne Chrome'i uuesti installimist?

Ava DevTools, mine Sources → Snippets, tee igal katkendil paremklõps ja vali Save as; see salvestab .js faili kettale. Teise võimalusena ava chrome://version/, leia profiili asukoht, sulge Chrome ja kopeeri Preferences failist JSON-i sektsioon devtools.preferences.snippets.

Miks mu katkend ei näe konsooli muutujaid?

Katkend käivitatakse oma skoobis; sellel pole juurdepääsu muutujatele, mis on konsoolis globaalses skoobis var/let/const abil deklareeritud. Andmete edastamiseks määra väärtus otse window objektile: konsoolis window.myData = {...}, seejärel loe katkendis window.myData. Või vastupidi: katkend saab määrata andmeid window objektile ja konsool saab neid lugeda.

Kas katkendeid tasub 2026. aastal õppida?

Katkendid on üks neist tööriistadest, mis aastaid ei muutu, kuid kiirendavad radikaalselt rutiinset tööd, kui sa neid ei unusta. Viis minutit, mis kulub linkide kogumise või lehe puhastamise skripti loomisele, säästab iga kuu kümneid käsitsi tehtavaid toiminguid.

Alusta kolme lihtsa katkendiga: andmete kogumine lehel olevatest tabelitest, kiire DOM-i puhastamine ekraanipiltide jaoks ja elemendi esiletõstmine selektori järgi. Salvesta need ja järgmine kord, kui pead kolmanda osapoole saidilt andmeid eraldama või kujundust kontrollima, saad sellega hakkama sekunditega, selle asemel et veeta pool tundi kopeerides ja kleepides.

Pea ainult meeles varundada: katkendeid ei sünkroniseerita seadmete vahel ja ilma Preferences faili koopiata kaovad need süsteemi uuesti installimisel.