Autorilt: console.log võib teile teie rakenduse kohta palju öelda, kuid see ei võimalda teil koodi tõeliselt siluda. Uus JS-i silur Firefoxis aitab teil koodi kiiremini ja ilma vigadeta kirjutada. Artikkel selle siluri tööpõhimõtte kohta.

Selles näites avame väga lihtsa rakenduse, millega seda on lihtne teha JavaScripti silumine. Rakendus ise töötab põhisüsteemis avatud lähtekoodiga JS raamistikud. Ava see sisse Uusim versioon Firefox Developer Edition ja käivitage kombinatsiooni kasutades debugger.html Valikute klahvid+ Cmd + S Macis või Shift + Ctrl + S Windowsis. Siluja on jagatud kolmeks paneeliks: faililoendi paneel, koodipaneel ja tööriistariba.

Tööriistariba on jagatud tööriistaribaks, jälgimisavaldisteks, katkestuspunktideks, kõnede pinudeks ja aladeks.

Lõpetage console.log kasutamine

Soovime koodi silumiseks kasutada faili console.log. Me lihtsalt lisame koodile kõne, et teada saada muutuja väärtus, ja ongi kõik, eks? See lähenemisviis töötab, kuid see on tülikas ja aeganõudev. Selles näites astume muutuja väärtuse leidmiseks läbi rakenduse debugger.html.

Debugger.html abil saate oma koodi sügavamale sukelduda, lisades lihtsalt reale katkestuspunkti. Katkestuspunktid peatavad siluri, et saaksite koodi vaadata. Selles näites lisame faili app.js reale 13 katkestuspunkti.

Nüüd lisage ülesanne loendisse. Kood peatub funktsiooni addTodo juures ja saame vaadata koodis oleva välja väärtust. Hõljutage kursorit muutuja kohal, et näha selle väärtust jne. Nii näete ankruid, aplette, lapselemendid jne.:

Sama teabe leiate paneelilt Valdkonnad.

Kui skript on peatatud, saate selle ridu tööriistariba kasutades samm-sammult käivitada. Nupud Jätka/Paus teevad täpselt seda, mida nad ütlevad. Nupp Step over toimib praegune rida kood, Enter – läheb funktsiooni sisse, Exit – käivitab praegune funktsioon enne kõne lahkumist.

Jälgige monomuutuja väärtust ka jälgimisavaldiste abil. Lihtsalt sisestage avaldis väljale Vaadeldavad avaldised ja silur jälgib seda teie koodi käitamise ajal. Ülaltoodud näites saate lisada pealkirja- ja ülesandeavaldisi ning silur jaotab väärtused, kui need on saadaval. Eriti kasulik, kui:

Astute koodi läbi ja jälgite, kuidas väärtus muutub;

Silutakse sama koodi mitu korda ja soovite näha ühiseid väärtusi;

Sa üritad aru saada, miks see neetud nupp ei tööta.

Reacti/Reduxi rakendusi saate ka siluda kasutades debugger.html. Kuidas see töötab:

Liikuge komponendini, mida soovite siluda.

Vaata vasakul olevat komponentide diagrammi (funktsioonid klassis).

Lisage sobivatele funktsioonidele katkestuspunkte.

Vajutage pausi ja jälgige komponendi omadusi ja olekuid.

Kõnede pinu on lihtsustatud, nii et näete rakenduse koodi segatuna raamistikuga.

Debugger.html võimaldab teil vaadata segadust tekitavat või minimeeritud koodi, mis võib põhjustada vigu. Eriti kasulik, kui töötate tavaliste raamistikega nagu React/Redux. Siluja teab komponendist, mille peatasite, ja kuvab lihtsustatud kõnede pinu, komponendi diagrammi ja atribuute. Allpool selgitab arendaja Amit Zur, kuidas ta JS Kongressil Firefoxi koodi silurit kasutab:

Kui soovite uut debugger.html-i lähemalt vaadata, vaadake Mozilla Developer Playgroundi. Oleme loonud rea õpetusi, mis aitavad arendajatel õppida, kuidas tööriista koodi silumiseks tõhusalt kasutada.

Avatud lähtekoodiga arendaja tööriistad

Projekt debugger.html käivitati umbes 2 aastat tagasi koos Firefoxi DevToolsi täieliku uuendamisega. Tahtsime DevToolsi teisaldada kaasaegsed tehnoloogiad, avage need arendajatele üle kogu maailma. Ja kuna tehnoloogia on avatud, võib see vabalt kasvada millekski, mida Mozilla väike grupp poleks osanud ette kujutada.

JS on kõigi täiustatud veebirakenduste alus, nii et võimas silur oli tööriistakomplekti põhiosa. Tahtsime luua midagi kiiret, hõlpsasti kasutatavat ja kohandatavat – mis suudab siluda mis tahes uut JS-i raamistikku. Otsustasime kasutada populaarseid veebitehnoloogiaid, kuna tahtsime kogukonnale lähemale töötada. See lähenemisviis parandaks silurit ennast – kui võtaksime kasutusele Webpacki ja hakkaksime sisemiselt kasutama ehitustööriista ja lähtekaarte, sooviksime parandada allikate ja allikate vahelist vastendamist. kuum saabas.

debugger.html on kirjutatud Reactis, Reduxis ja Babelis. Reacti komponendid on kerged, testitavad ja hõlpsasti kujundatavad. Kiire kasutajaliidese prototüüpide loomiseks ja dokumenteerimiseks ühised komponendid kasutame React Storybooki. See muudab erinevate JS-i raamistikega (nt React) töötamise lihtsamaks. Babeli kasutajaliides võimaldab teil teha selliseid toiminguid nagu komponentide klassi ja selle funktsioonide kuvamine vasakul külgribal. Samuti saame määrata funktsioonidele katkestuspunkte ja need ei liigu, kui muudate koodi.

Reduxi toimingud on puhas kasutajaliidese API. Neid saab aga kasutada ka iseseisva JS-i siluri CLI loomiseks. Reduxi hoidlal on päringu jaoks valijad praegune olek silumine Meie üksuse testid käitavad Reduxi toiminguid ja simuleerivad brauseri vastuseid. Integratsioonitestid panevad brauseri tööle Reduxi siluritoimingutega. Tema ise funktsionaalne arhitektuur mõeldud testimiseks.

Oleme igal sammul toetunud Mozilla arendajate kogukonnale. Projekt avaldati GitHubis ja meie meeskond võttis ühendust arendajatega üle maailma ning nad vastasid. Alguses olid automatiseeritud testid kogukonna jaoks üliolulised. Testid viisid läbi regressiooni ja dokumenteerisid käitumist, mida võis kergesti tähelepanuta jätta. Sellepärast oli üks esimesi samme Reduxi poe jaoks Reduxi toimingute ja vootüüpide ühikutestide kirjutamine. Tegelikult tagas kogukond, et Flow ja Jest leviala aitas tagada, et iga fail kirjutati ja testiti.

Arendajatena usume, et tööriistad on seda tugevamad, mida rohkem arendajaid on kaasatud. Meie tuumikmeeskond on alati olnud väike (2 inimest), kuid keskmiselt oli abilisi nädalas 15. Kogukond andis meile erinevad punktid nägemus, mis aitas meil väljakutseid ennetada ja kirjutada funktsioone, mida me ei kujutanud ettegi. Vormindame praegu 24 teegi kõnevirnasid. Paljudest me isegi ei teadnud. Samuti näitame lähtepuus Webpack ja Angular kaarte.

Plaanime viia kõik Firefoxi DevTools'id GitHubisse, et rohkem inimesi saaks neid kasutada ja täiustada. Võtame teie abi hea meelega vastu. Võite minna GitHubi projekti lehele debugger.html. Oleme kirjutanud terve nimekirja juhistest siluri käivitamiseks teie masinas, kus saate muuta mida iganes soovite. Kasutage seda JS-koodi silumiseks kõige jaoks – brauserite, terminalide, serverite, telefonide, robotite jaoks. Kui näete midagi, mida saaks parandada, kirjutage meile GitHubis.

Avaldatud: 26. märts 2013

Chrome'i arendaja tööriistad – minu arvates kõige rohkem käepärane tööriist Veebiarendus. See sisaldab kõiki vajalikke funktsioone täisväärtuslike veebirakenduste loomiseks ja silumiseks. Kuid nagu iga teise tööriistaga, peate õppima ka sellega töötama. Alustame põhitõdedest.

Konsool mängib interaktiivse JavaScripti tõlgi rolli. See kuvab ka tõrked, mis ilmnevad veebirakenduse töötamise ajal. Lisaks eraldi vahekaardile on konsool saadaval ka kõigil teistel vahekaartidel, vajutades Esc või konsooli ikooni ekraani vasakus alanurgas.

Konsool annab arendajale juurdepääsu mitmele mugavale ja kasulikud funktsioonid. Vaatleme peamisi:

console.log() , console.error() , console.warn() ja console.debug()

Põhilised konsooli väljundfunktsioonid võimaldavad teil konsooli väljastada kohandatud sõnumid. Need erinevad väljundsõnumite klassifikatsiooni poolest: error() märgib teated vigadena, warn() märgib teated hoiatustena, debug() märgib teated silumiseks.

Need funktsioonid aktsepteerivad piiramatut arvu parameetreid, mis võimaldab teil kuvada mitu muutujat järjest ja isegi liimida need terveteks lauseteks:

Console.log("Logiaeg:", 1121102802);

Samuti on olemas vormindamise tugi:

Console.log("Logistamisaeg: %d", 1121102802);

Toetatud vormingu indikaatorid:

// %s — string console.log("%s", "Tere"); // %d, %i — integer console.log("%d", 1337 / 42); // %f on ujukomanumber console.log("%f", 1337 / 42); // %o on DOM-i element console.log("%o", document.body); // kas konsool.dirxml(document.body); // %O on JavaScripti element console.log("%O", document.body); // kas konsool.kataloog(document.body); // %c — väljund CSS-stiilide seadistusega console.log("%chello %cworld", "color: red", "color: blue");

console.trace()

Prindib kõnevirna koodi punktist, kus meetod kutsuti. Kõnede virn sisaldab failinimesid ja ridade numbreid ning samast punktist meetodi trace() kõnede arvu.

console.assert()

Assert-funktsioon kontrollib esimese parameetrina edastatud avaldist ja kui avaldis on väär, kirjutab koos kõnepinuga konsooli veateate:

Var kaks = 3; var kolm = 2; console.assert(kaks< three, "два меньше трех");

console.group() , console.groupCollapsed() ja console.groupEnd()

Funktsioonid väljundi rühmitamiseks. Funktsioon group() avab sõnumite rühma, võtab parameetrina rühma nime (vormindamine on toetatud, nagu failis console.log()) ja funktsioon groupEnd() sulgeb viimase avatud grupp. Funktsioon groupCollapsed() on sarnane funktsiooniga group(), kuid grupp loomisel sõnumid on vaikimisi ahendatud.

console.time() ja console.timeEnd()

Funktsioonid koodi täitmise aja arvutamiseks. Funktsioon time() käivitab taimeri ja timeEnd() funktsioon peatab taimeri ja prindib selle väärtuse. Mõlemad funktsioonid aktsepteerivad taimeri nime nõutava parameetrina.

Sõnumifilter

Konsooli vahekaardi paremas alanurgas on sõnumifilter tüübi järgi. Kõik vastab kõigile teadetele, Errors - vead ja funktsiooni console.error() väljund, Hoiatused - hoiatused ja funktsiooni console.warn() väljund, Logid - funktsiooni console.log() väljund, Silumine - konsooli väljund.debug() , konsooli funktsioonid .timeEnd() ja muu teave.

Suhtlemine teiste vahekaartidega

silur;

Kui brauser jõuab siluri reale; mis tahes koodis peatab see automaatselt skripti täitmise ja läheb vahekaardile Skriptid (allikad).

$() , $$() ja $x()

Funktsioonid, mis hõlbustavad elementide valimist, töötavad ainult konsoolis. Funktsioon $() tagastab esimese valitud valijale vastava elemendi. Teist parameetrit saab kasutada otsingukonteksti edastamiseks:

$("head") // tagastab peaelemendi $("head", document.body) // tagastab nulli, kuna keha ei sisalda peaelemente

Funktsioon $$() sarnaneb funktsiooniga $() , kuid tagastab kõik leitud elemendid:

$$("script") // tagastab kõik skriptielemendid $$("script", document.body) // tagastab kõik kehas sisalduvad skriptielemendid

Funktsioon $x() tagastab kõik XPathi avaldisele vastavad elemendid. Teist parameetrit saab kasutada konteksti edastamiseks:

$x("//script") // tagastab kõik skripti elemendid $x("script", document.body); // tagastab kõik otse kehas sisalduvad skriptielemendid

Paljud JavaScripti raamistikud määratlevad oma $() funktsiooni ja seetõttu muutub ka funktsioonide tähendus konsoolis.

$0 — $4

Konsool salvestab mällu viited viimasele viiele vahekaardil Elemendid valitud elemendile. Nendele juurdepääsu saamiseks kasutatakse muutujaid $0, $1, $2, $3 ja $4. $0 salvestab lingi hetkel valitud elemendile, $1 eelmisele ja nii edasi.

$_

Muutuja $_ salvestab konsooli viimase käsu käivitamise tulemuse. See võimaldab ühe käsu tulemust kasutada teises käsus. Proovige neid käske ükshaaval:

1337 / 42; console.log("%d", $_);

kontrollima ()

Funktsioon inspect() avab läbitud objekti või elemendi vastaval vahekaardil:

Inspect($("head script")) // avab vahekaardi Elements ja tõstab esile esimese peas leiduva skriptimärgendi

Vigade põhjuse leidmisel võib tööriista tundmine midagi muuta võtmeroll. Kuigi JavaScriptil on maine, et seda on raske siluda, kulub vea põhjuse leidmiseks vähem aega, kui teate mõnda nippi.

Oleme koostanud 14 silumisnõuannete loendi, millest te ei pruugi teada, kuid mis aitavad teil JavaScripti koodi siluda.

Enamik neist näpunäidetest on mõeldud Chrome'i ja Firefoxi jaoks, kuigi enamik neist töötab teiste brauserite arendustööriistades.

1. 'siluja;'

Pärast console.log, ‘silur; Minu lemmik kiire ja määrdunud silumistööriist. Kui lisate selle oma koodile, peatab Chrome sellel hetkel automaatselt koodi täitmise. Võite selle isegi pakkida nii, et see süttib ainult siis, kui seda vajate.

Kui (thisThing) (siluja; )

2. Objektide kuvamine tabelitena

Mõnikord on teil keeruline objekte, mida soovite vaadata. sa võid kasutada console.log nende kuvamiseks ja seejärel sirvige läbi tohutu loendi või kasutage konsool.tabel. Nii on palju lihtsam mõista, millega tegu.

Varloomad = [ ( loom: "Hobune", nimi: "Henry", vanus: 43 ), ( loom: "Koer", nimi: "Fred", vanus: 13 ), ( loom: "Kass", nimi: " Frodo", vanus: 18 ) ]; konsool.tabel(loomad);

3. Proovige vaadata erinevate eraldusvõimetega

Oleks hämmastav, kui neid oleks mobiilseade reaalses maailmas pole see aga võimalik. Kuidas muuta vaateava suurust? Chrome pakub teile kõike, mida vajate. Avage Arendaja tööriistad ja seejärel klõpsake nuppu Vaheta seadme režiimi. Vaadake, kuidas teie meediaväljendid ärkavad ellu!

4. Otsige kiiresti DOM-i elemente

Valige tööriistakastis DOM-i element ja avage see konsoolis. Chrome'i arendustööriistad mäletavad viit viimast elementi: viimati valitud element $0, eelviimasena valitud element $1 jne.

Kui valisite järgmised elemendid järjekorras „üks-4”, „üks-3”, „üks-2”, „üks-1”, „üks-0”, pääsete DOM-i elementidele juurde, nagu on näidatud konsoolides:

5. Koodi täitmisaja mõõtmine console.time() ja console.timeEnd() abil

Võib olla väga kasulik teada, kui kaua koodijupi käivitamine aega võtab, eriti aeglaste silmuste silumisel. Saate määrata mitu nimega taimerit. Vaatame näidet:

Console.time("Taimer1"); var üksused = ; for(var i = 0; i< 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

See kood annab järgmise tulemuse:

6. Funktsiooni virnajälje saamine

Tõenäoliselt teate, et JavaScripti raamistikud sisaldavad palju koodi.

See kood renderdab liidese, käivitab sündmused, nii et lõpuks soovite teada, mis põhjustas funktsiooni kutsumise.

Kuna JavaScript ei ole väga struktureeritud keel, mõnikord on kasulik saada teavet selle kohta, mis ja millal juhtus. Sel hetkel tuleb ta lavale konsool.jälg.

Kujutage ette, et soovite näha funktsiooni kogu kõnepakki funcZ koopias auto liinil 33.

Var auto; var func1 = funktsioon() ( func2(); ) var func2 = funktsioon() ( func4(); ) var func3 = funktsioon() ( ) var func4 = funktsioon() ( auto = uus auto(); auto.funcX( ) var Auto = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this. .funcZ( ) this.funcZ = function() ( console.trace('trace car') ) func1(); var auto; var func1 = funktsioon() ( func2(); ) var func2 = funktsioon() ( func4(); ) var func3 = funktsioon() ( ) var func4 = funktsioon() ( auto = uus auto(); auto.funcX( ) var Auto = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this. .funcZ( ) this.funcZ = function() ( console.trace('trace car'); ) ) func1();

Nüüd me näeme seda func1 põhjused func2, mis põhjustab func4. Funktsioon4 loob eksemplari Auto ja seejärel kutsub funktsiooni välja auto.funcX, jne.

Isegi kui arvate, et tunnete programmi täitmisskripti hästi, võib see olla väga mugav. Oletame, et soovite oma koodi täiustada. Hankige virna jälg ja kõigi loend seotud funktsioonid, millest igaüks on vaatamiseks saadaval.

7. Minimeeritud koodi vormindamine

Mõnikord võib probleem ilmneda otse tootmises, kuid teie lähtekaardid pole serveris. See on korras. Chrome saab teie JavaScript-faile vormindada, et neid rohkem muuta loetav formaat. Loomulikult ei ole kood nii informatiivne kui allikas, aga edasi vähemalt, Saate aru, mis selles toimub. Klõpsake nuppu {} « Ilus print", mis asub inspektoris koodivaaturi all.

8. Funktsiooni kiire silumine

Oletame, et soovite lisada funktsioonile katkestuspunkti.

Selleks on kaks levinumat viisi:

1. Leidke inspektorist soovitud rida ja lisage katkestuspunkt
2. Lisage oma skriptile silur

Mõlemad lahendused nõuavad otsimist soovitud faili Ja soovitud rida, mida soovite siluda.

Konsooli kasutamine sel eesmärgil on ilmselt vähem levinud. Kasuta silumine(funcName) konsoolis ja skript peatub, kui see jõuab soovitud funktsioonini.

See on väga kiire tee see aga ei tööta privaatsete ja anonüümsete funktsioonide puhul. Kuid kui teie olukord on erinev, on see tõenäoliselt kiireim viis funktsiooni silumiseks. (Autori märkus: funktsioon on olemas console.debug, mida on vaja teise jaoks.)

Var func1 = funktsioon() ( func2(); ); var Auto = funktsioon() ( this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this.funcZ(); ) ) var car = new Car();

9. Skriptid, mis ei vaja silumist

10. Otsige üles olulised asjad täiustatud silumistehnikate abil

Keerulisemad silumisstsenaariumid võivad vajada mitut rida väljundit. Üks viis väljundandmete struktureerimiseks on kasutada erinevaid funktsioone konsool. Näiteks console.log, console.debug, console.warn, console.info, console.error jne. Seejärel saate need inspektoris filtreerida. Kuid mõnikord pole see just see, mida silumisel vajate. Nüüd saate avalduda loovus ja luua enda vormingud andmete väljastamine konsooli kasutades CSS-i.

Console.todo = function(msg) ( console.log(' % c % s % s % s', 'värv: kollane; taust - värv: must;', '–', msg, '–'); ) konsool .important = function(msg) ( console.log(' % c % s % s % s', 'värv: pruun; font - kaal: paks; tekst - kaunistus: allajoonitud;', '–', msg, '– '); console.important('See on oluline sõnum');

11. Funktsioonikutsete ja funktsioonide argumentide jälgimine.

Chrome'i konsoolis saate jälgida teatud funktsioone. Iga kord, kui funktsiooni kutsutakse, logitakse see koos sellele edastatud parameetritega.

Var func1 = funktsioon(x, y, z) ( //.... );

See suurepärane viis vaata, milliste argumentidega funktsiooni kutsutakse. Kuid ma pean ütlema, et oleks tore, kui konsool suudaks määrata, kui palju argumente oodata. Ülaltoodud näites func1 ootab kolme argumenti, kuid ainult kaks läbitakse. Kui seda koodis ei käsitleta, võib see põhjustada tõrke.

12. Kiire juurdepääs konsooli elementidele

Kiirem viis querySelectori kasutamiseks konsoolis on kasutada $. $('css-selector') tagastab esimese sobiva elemendi ja $$('css-selector') tagastab kõik sobivad elemendid. Kui kasutate elementi mitu korda, saate selle salvestada muutujasse.

13. Postimees on suurepärane (aga Firefox on kiirem)

Paljud arendajad kasutavad AJAX-i taotluste testimiseks Postmani.

Mõnikord on nendel eesmärkidel lihtsam kasutada brauserit.

Kui te ei muretse enam sisselogimisküpsiste pärast, kui töötate parooliga kaitstud lehel. Siin on, kuidas saate Firefoxis taotlusi redigeerida ja uuesti saata.

Avage inspektor ja minge vahekaardile Võrk. Klõpsake paremklõps klõpsake teid huvitaval päringul ja seejärel valige "Muuda" ja "Saada uuesti". Nüüd saate kõike muuta: parandada pealkirja, muuta parameetreid ja vajutada "Saada uuesti".

Allpool olen toonud näite päringu kohta, mis saadeti mitu korda erinevate parameetritega:

14. Katkestuspunkt DOM-i elemendi muutumisel

DOM võib olla naljakas. Mõnikord muutuvad selle elemendid teile teadmata põhjustel. Kui teil on vaja aga JavaScripti siluda, võimaldab Chrome teil DOM-i elemendi muutumisel koodi täitmise peatada. Paremklõpsake inspektoris huvipakkuval elemendil ja valige täitmise peatamiseks tingimus.

Tere! Teemat jätkates räägime brauseri abil skriptide silumisest. Näiteks võtame kõige rohkem parim brauser Maa peal – Chrome.

Põhimõtteliselt on sellised tööriistad saadaval igas brauseris ja kui arvestada, et enamik brausereid töötab Chrome'iga samal mootoril, siis põhimõtteliselt pole suurt vahet. Firefox on ka Firebugi tööriistaga väga hea.

Allikate paneeli üldvaade

Käivitage Chrome'i brauser.

Vajutage F12 ja arendaja tööriistad käivituvad.

Minge vahekaardile Allikas

Siin on 3 tsooni:

1. Piirkond lähtefailid. See sisaldab kõiki projektifaile
2. Tekstiala. See ala sisaldab faili teksti
3. Teabe- ja kontrolliala. Me räägime temast hiljem

Reeglina pole silumisel lähtefailide ala vaja, nii et saate selle nupuga peita.

Üldised juhtnupud

3 kõige sagedamini kasutatavat juhtnuppu:

Vorming See nupp võimaldab teil koodi vormindada. Teil võib seda vaja minna, kui soovite vormindada kellegi teise koodi. konsool Väga oluline nupp millel klõpsates konsool avaneb. Konsooli JavaScriptis saate sisestada erinevaid käske ja operaatoreid. Aken Suure koodilõigu korral võimaldab see avada koodi eraldi aknas.

Katkestuspunktid

Vaatame näiteks faili pow.js. Kui klõpsate selle faili mis tahes real, määratakse sellele reale katkestuspunkt.

See peaks välja nägema umbes selline:

Murdepunkti nimetatakse ka murdepunktiks, see on pigem kõnepruuk, mis on meie keelde assimileerunud ja tähendab sõna-sõnalt ka murdepunkti.

Koodis, kus lõite murdepunkti, saate igal etapil vaadata muutujate väärtusi, üldiselt jälgida seda igal võimalikul viisil.

Katkestuspunktide teave kuvatakse vahekaardil Katkestuspunktid.

Vahekaart Katkestuspunktid on väga kasulik, kui kood on väga suur, see võimaldab teil:

• Minge kiiresti koodis kohta, kus katkestuspunkt on määratud lihtsa klõpsuga sõnumit saatma.
• Keelake ajutiselt katkestuspunkt, klõpsates märkeruutu.
• Katkestuspunkti kiireks eemaldamiseks paremklõpsake tekstil ja valige Eemalda.

Mõned lisafunktsioonid

• Katkestuspunkti saab käivitada ka otse skriptist, kasutades silurikäsku: function pow(x, n) ( ... silur; //<-- отладчик остановится тут... }

• Paremklõps failis pow.js reanumbril võimaldab luua nn tingimusliku katkestuspunkti, st. määrake tingimus, mille korral katkestuspunkt käivitatakse.

Peatu ja vaata ringi

Kuna meie funktsioon töötab samaaegselt lehe laadimisega, on JavaScripti siluri aktiveerimiseks kõige lihtsam viis see uuesti laadida. Selleks vajutage F5. Ja samal ajal peatatakse skripti täitmine 6. real.

Pöörake tähelepanu teabevahekaartidele:

• Vaadake väljendeid– siin näete skriptis jälgitavate muutujate praegust väärtust.
• Helista Stackile– näitab kõnede pinu – need on kõik kõned, mis viisid sellele koodireale.
• Ulatusmuutujad– näitab muutujaid. Lisaks näitab see nii globaalseid kui ka kohalikke muutujaid.

Täitmise juhtimine

Nüüd käivitame skripti ja jälgime selle toimimist. Pöörake tähelepanu paneeli ülaosas on 6 nuppu, mille toimimist me kaalume.

– jätkake täitmist või vajutage klahvi F8. See nupp jätkab skripti täitmist. Nii saame oma skripti läbi astuda nii, nagu töötaks see brauseris. – astuge samm funktsioonidesse või klahvi F10 süvenemata.

Käivitage üks skripti samm ilma funktsiooni sisse minemata.

– astuge funktsiooni sisse, klahv F11. Käivitab ühe skripti sammu ja läheb samal ajal funktsiooni sisse. – käivitada kuni aktiivsest funktsioonist väljumiseni, klahv Shift+F11.

käivitab kogu funktsioonis sisalduva koodi.

– keelake/lubage kõik katkestuspunktid. See nupp lihtsalt keelab ja uuesti vajutamisel lubab kõik katkestuspunktid. – lubage/keelake automaatne seiskamine tõrke ilmnemisel. See nupp on väga kasulik silumisel ja võimaldab lubada või keelata automaatse peatamise tõrke ilmnemisel.

Silumisprotsess ise seisneb programmi samm-sammult läbimises ja muutujate väärtuste jälgimises.

Brauseri konsool

Skriptikoodi silumisel võib olla kasulik minna vahekaardile Console ja vaadata, kas seal on vigu. Teavet saab konsooli väljastada ka kasutades console.log().

Näiteks:

// tulemus on konsoolis nähtav (var i = 0; i< 6; i++) { console.log("значение", i); }

Konsool on saadaval igas brauseris

Konsooli vead

JavaScripti skripti vigu saab vaadata konsoolis.

Konsoolis näete:

Punane joon on tegelik veateade.

Kokku

Silur võimaldab teil:

• Peatuge märgitud punktis (murdepunktis) või siluri käsu juures.
• Käivita kood – silu programmi üks rida korraga või teatud punktini.
• Jälgige muutujaid, täitke konsoolis käske jne.

Arendaja tööriistades on ka muid vahekaarte, näiteks Elements võimaldab teil vaadata lehe HTML-koodi, ajaskaala näitab, kui palju faile brauser alla laadib ja kui palju aega see võtab. Kuid need vahelehed pole meile veel eriti huvitavad.

Aeg-ajalt teevad arendajad kodeerimisvigu. Programmi või skripti viga nimetatakse veaks.

Vigade otsimise ja parandamise protsessi nimetatakse silumiseks ja see on arendusprotsessi tavaline osa. Selles jaotises käsitletakse tööriistu ja tehnikaid, mis aitavad teil ülesandeid siluda.

IE veateated

Lihtsaim viis vigade jälgimiseks on lubada brauseris veateade. Vaikimisi kuvab Internet Explorer olekuribal veaikooni, kui lehel ilmneb tõrge.

Sellel ikoonil topeltklõpsamine viib teid dialoogiboksi, kus kuvatakse teave konkreetse vea kohta.

Kuna selle ikooni võib kergesti tähelepanuta jätta, pakub Internet Explorer teile võimaluse kuvada vea ilmnemisel automaatselt dialoogiboks Viga.

Selle valiku lubamiseks valige Tööriistad → Interneti-suvandid → vahekaart Täpsemalt. ja seejärel märkige lõpuks märkeruut "Kuva märguanne igas skriptis", nagu allpool näidatud -

Veateated Firefoxis või Mozillas

Teised brauserid, nagu Firefox, Netscape ja Mozilla, saadavad veateateid spetsiaalsesse aknasse, mida nimetatakse JavaScripti konsooliks või tõrkekonsooliks. Konsooli vaatamiseks valige Tools → Error Console või Web Development.

Kuna need brauserid ei anna vea ilmnemisel visuaalset teavet, peate paraku hoidma konsooli avatuna ja jälgima skripti käitamise ajal vigu.

Veateated

Konsoolis või Internet Exploreri dialoogiboksis kuvatavad veateated on nii süntaksi kui ka käitusaja vigade tagajärg. Need veateated sisaldavad rea numbrit, kus tõrge ilmnes.

Kui kasutate Firefoxi, võite klõpsata veakonsoolis saadaoleval veal, et minna skriptis veaga täpselt reale.

Kuidas skripti siluda

JavaScripti silumiseks on erinevaid viise – kasutage JavaScripti Validaatorit

Üks võimalus testida JavaScripti koodi kummaliste vigade suhtes on käivitada see programmi kaudu, mis kontrollib selle kehtivust ja järgib keele ametlikke süntaksireegleid. Neid programme nimetatakse parseriteks või lühidalt lihtsalt validaatoriteks ning sageli on nendega kaasas kaubanduslikud HTML- ja JavaScripti redaktorid.

Kõige mugavam JavaScripti validaator on Douglas Crockfordi JavaScript Lint, mis on tasuta saadaval Douglas Crockfordi JavaScript Lintis.

Lihtsalt külastage seda veebilehte, kleepige JavaScripti kood (ainult JavaScript) ettenähtud tekstialale ja klõpsake nuppu jslint. See programm analüüsib teie JavaScripti koodi, tagades, et kõik muutujate ja funktsioonide määratlused järgivad õiget süntaksit. Samuti kontrollib see JavaScripti avaldusi, näiteks kas ja kui kaua, veendumaks, et need on õiges vormingus

Lisage oma programmidele silumiskood

Koodi silumiseks saate oma programmis kasutada meetodeid alert() või document.write(). Näiteks võite kirjutada midagi sellist:

var silumine = true; var whichImage = "vidin"; if(silumine) alert("Kutsub välja swapImage() argumendiga: " + whichImage); var swapStatus = swapImage(whichImage); if(silumine) alert("Väljub swapImage()-st koos swapStatus=" + swapStatus);

Uurides alert() sisu ja järjekorda nende ilmumisel, saate hõlpsalt testida oma programmi funktsionaalsust.

Kuidas kasutada JavaScripti silurit

Siluja on rakendus, milles kõik skripti täitmise aspektid on programmeerija kontrolli all. Silujad pakuvad skripti oleku üle täpset juhtimist liidese kaudu, mis võimaldab teil kontrollida ja määrata väärtusi ning juhtida täitmise voogu.

Kui skript on silurisse laaditud, saab seda käivitada ühe rea kaupa või anda käsu peatuda teatud katkestuspunktides. Kui täitmine on peatatud, saab programmeerija kontrollida skripti ja selle muutujate olekut, et teha kindlaks, kas midagi on valesti. Saate vaadata ka muutujaid, et muuta nende väärtusi.

• Kasutage palju kommentaare. Kommentaarid võimaldavad teil selgitada, miks kirjutasite skripti nii, nagu te tegite, ja selgitada eriti keerulisi koodiosi.
• Kasutage alati taanet, et muuta kood hõlpsasti loetavaks. Treppimine hõlbustab ka algus- ja lõpumärgendite, lokkis sulgude ning muude HTML-i ja skriptielementide sobitamist.
• Kirjutage modulaarne kood. Kui vähegi võimalik, rühmitage oma väited funktsioonideks. Funktsioonid võimaldavad rühmitada seotud avaldusi ning testida ja taaskasutada koodiosi minimaalse pingutusega.
• Olge muutujate ja funktsioonide nimetamisel järjekindel. Proovige kasutada nimesid, mis on piisavalt pikad, et olla tähendusrikkad ja kirjeldavad muutuja sisu või funktsiooni eesmärki.
• Kasutage muutujate ja funktsioonide nimetamisel ühtset süntaksit. Teisisõnu, jätke need väike- või suurtähtedega; kui eelistate Camel-Backi tähistust, kasutage seda järjepidevalt.
• Kontrollige pikki skripte modulaarselt. Teisisõnu, ärge proovige kirjutada tervet skripti enne selle mõne osa testimist. Kirjutage osa ja käivitage see enne koodi järgmise osa lisamist.
• Kasutage muutujate ja funktsioonide jaoks kirjeldavaid nimesid ning vältige ühekohaliste nimede kasutamist.
• Jälgige tsitaate. Pidage meeles, et jutumärke kasutatakse paarides stringide ümber ja mõlemad jutumärgid peavad olema samas stiilis (üks või kaks).
• Jälgige oma võrdusmärke. Võrdluseks ei tohiks kasutada ühte =.
• Ma deklareerin muutujad selgesõnaliselt märksõna var abil.