Tässä ohjeessa opit, miten voit tehokkaasti käyttää Exception-Breakpointteja Chrome Developer Tools -ohjelmassa. Exception-Breakpointit mahdollistavat JavaScriptisi debuggaamisen pysäyttämällä ohjelman automaattisesti, kun poikkeama (exception) tapahtuu. Tämä on erityisen hyödyllistä, kun haluat seurata ja ymmärtää virheitä koodissasi sekä niiden syntymisen syitä. Breakpointtien käyttäminen on välttämätön taito jokaiselle kehittäjälle, joka haluaa varmistaa, että hänen koodi on virheetöntä. Sukella suoraan yksityiskohtiin!
Tärkeimmät oivallukset
- Exception-Breakpointit pysäyttävät ohjelman, kun poikkeama tapahtuu.
- Voit erottaa "Uncaught" ja "Caught" poikkeamat toisistaan.
- Debugger;-lauseen lisääminen mahdollistaa ohjelman pysäyttämisen tietyssä kohdassa.
- On tärkeää poistaa debugger;-lauseet debuggauksen valmistuttua pitääksesi tuotantokoodin siistinä.
Askel-askeleelta -ohjeet
1. Exception-Breakpointtien aktivointi
Aktivoidaksesi automaattisen pysähtymisen poikkeamien kohdalla avaa Chrome Developer Tools. Siirry "Sources" -valikkoon ja etsi "Breakpoints" -osio. Ruksaa kohdat "Pause on Exceptions" ja "Pause on Caught Exceptions".
Nyt ohjelma pysähtyy automaattisesti, kun poikkeama tapahtuu. Voit tehdä tämän käyttämällä seuraavaa koodia, joka aiheuttaa yksinkertaisen poikkeaman.
Kun nyt suoritat koodin, ohjelma pysähtyy kohtaan, missä poikkeama heitetään.
2. Käsitteleminen "Caught" ja "Uncaught" poikkeamat
Jos poistat asetuksen "Caught Exceptions", huomaat, että ohjelma ei pysähdy vangittuihin poikkeamiin.
Jos sinulla on kuitenkin poikkeama try-catch -lohkossa, poikkeama napataan Catch-lohkossa ja ohjelma jatkaa siitä.
Tässä näet, että poikkeama on napattu ja voit nähdä konsoliin tulostetun virheen, joka sisältyy poikkeamaan.
3. Sovellus useisiin Breakpointteihin
Kun sinulla on useita Breakpointteja eri tiedostoissa, tilanne voi pian muuttua epäselväksi. Voit kuitenkin helposti poistaa käytöstä kaikki Breakpointit napsauttamalla hiiren oikealla painikkeella Breakpointtia ja valitsemalla vaihtoehdon "Disable all Breakpoints".
Tämä poistaa käytöstä kaikki Breakpointit ja voit myöhemmin aktivoida ne tarvittaessa uudelleen.
4. debugger;-lauseen käyttö
Toinen hyödyllinen tekniikka debuggerauksessa on lisätä debugger;-lause koodiisi. Tämä pysäyttää ohjelman tässä kohdassa heti kun sivu ladataan uudelleen.
Kun käytät debugger;-lauseetta, muista poistaa se koodistasi ennen siirtymistä tuotantoympäristöön, koska siitä ei ole hyötyä live-sovelluksessa.
Kun lisäät debugger;-lauseen, ohjelma pysähtyy tässä tiettävässä kohdassa, mikä antaa sinulle mahdollisuuden tarkastella nykyisiä muuttujia ja ohjelman kulkua.
5. Varotoimet poikkeamien käsittelyssä
Kun työskentelet poikkeamien kanssa, on syytä olla varovainen, erityisesti jos käytät paljon kolmannen osapuolen kirjastoja. Ne voivat myös aiheuttaa poikkeamia, ja voi olla häiritsevää, jos koodisi pysähtyy jatkuvasti.
Kun tiedät, että sovelluksesi aiheuttaa poikkeuksia, voi olla hyödyllistä ottaa käyttöön asetus "Käsittelemättömät poikkeukset" tunnistaaksesi ne debuggausprosessin aikana.
Muista, että jokainen poikkeus ei välttämättä johda ongelmaan. Poikkeus voidaan yksinkertaisesti napata ja se ei näin ollen vaikuta negatiivisesti käyttäjäkokemukseen.
Yhteenveto
Tässä oppaassa olet oppinut käyttämään poikkeuskohtia Chrome Developer -työkaluissa virheiden löytämiseksi JavaScript-koodistasi. Olet nähnyt, kuinka voit ottaa nämä katkaisupisteet käyttöön ja käyttää niitä tehokkaasti varmistaaksesi, että sovelluksesi toimii saumattomasti. Näiden tekniikoiden ymmärtäminen ja käyttöönotto parantaa huomattavasti tehokkuuttasi debuggausprosessissa.
Usein kysytyt kysymykset
Miten aktivoimme poikkeuskohtia Chrome Developer -työkaluissa?Avaa Chrome Developer -työkalut, siirry kohtaan "Lähteet" ja ota käyttöön "Katkaise poikkeukset" ja "Katkaise napattavat poikkeukset".
Mikä on ero "Napatuilla" ja "Käsittelemättömillä" poikkeuksilla?"Napatut poikkeukset" ovat niitä, jotka käsitellään try-catch-lohkossa, kun taas "Käsittelemättömät poikkeukset" eivät ole kiinni ja välitetään suoraan virheenkäsittelijälle.
Miten poistan kaikki katkaisupisteeni käytöstä?Klikkaa hiiren oikealla painikkeella katkaisupistettä ja valitse "Poista kaikki katkaisupisteet" kontekstivalikosta.
Mikä on debugger;-lause ja miten sitä käytetään?debugger;-lause on JavaScript-komento, joka pysäyttää ohjelman tähän kohtaan. Sinun tulisi poistaa se koodistasi debuggauksen jälkeen.
Miksi minun pitäisi poistaa debugger;-lause ennen siirtymistä tuotantoon?Se voi johtaa siihen, että sovelluksesi pysähtyy kohtaan, johon et tarkoittanut, ja siten vaikuttaa negatiivisesti käyttäjäkokemukseen.
