DevTools

Sisäänrakennettu Browser antaa sinulle pääsyn täydelliseen Chrome DevToolsiin — samaan tarkastimeen, konsoliin ja verkkomonitoriin, joita käytät tavallisessa Chrome-ikkunassa. Käytä sitä debugataksesi mitä AI Agent rakensi, tarkistaaksesi JavaScript-virheitä tai tutkiaksesi miten pyyntö muodostetaan.

DevToolsin avaaminen

Napsauta DevTools-painiketta (🔧) Browser-paneelin otsikossa. Chrome DevTools avautuu erillisessä ikkunassa työtilasi rinnalle. Voit sijoittaa tämän ikkunan mihin tahansa sopivaan paikkaan — useimmat kehittäjät laittavat sen toiselle näytölle tai telakoivat sen Browser-paneelin alapuolelle.

Voit myös avata DevToolsin kuten tekisit Chromessa: napsauta hiiren oikealla painikkeella missä tahansa Browser-paneelin sivulla ja valitse Tarkasta. DevTools avautuu Elements-välilehti kohdistettuna elementtiin, jota napsautit.

Mitä on saatavilla

Täydellinen DevTools-työkaluvalikoima on saatavilla:

• Elements — tarkasta ja muokkaa minkä tahansa sivun elementin HTML:ää ja CSS:ää. Napsauta elementtiä puussa korostaaksesi sen Browserissa, tai napsauta elementtiä sivulla löytääksesi sen puusta. Muokkaa tyylejä suoraan yrittääksesi muutoksia koskematta lähdetiedostoihin.
• Console — katso console.log-tulosteet, JavaScript-virheet ja varoitukset. Suorita JavaScript-lausekkeita suoraan konsolissa testataksesi asioita ilman tiedostojen muokkaamista.
• Network — seuraa kaikkia HTTP-pyyntöjä, joita sovelluksesi tekee. Näe pyyntöotsikot, vastaustiedot, ajoitus ja tilakoodi. Hyödyllinen tarkistamaan, että API-kutsut lähetetään oikein ja vastaukset näyttävät oikeilta.
• Sources — kulkee JavaScript-koodin läpi keskeytyspisteiden avulla. Aseta keskeytyspiste, laukaise toiminto Browserissa ja suoritus pysähtyy, jotta voit tarkastaa muuttujien arvot.
• Application — tarkasta local storage, session storage, cookies ja IndexedDB. Hyödyllinen autentikointitilan tai Browseriin tallennetun tiedon debugaamiseen.

Yleisiä debugausskenaarioita

AI Agentin rakentaman tarkistaminen: Avaa Elements-paneeli ja tutki HTML-rakennetta. Tämä kertoo, onko Agent kytkenyt asiat oikein — oikeat luokkanimet, asianmukainen sisäkkäisyys ja oikeat attribuutit.

JavaScript-virheiden löytäminen: Avaa Console ennen sivun lataamista. Kaikki kiinniottamattomat virheet näkyvät täällä tiedostonimellä ja rivinumerolla. Jaa virheilmoitus AI Agentillesi, jotta se voi korjata perussyyn.

API-kutsujen debugaaminen: Avaa Network-välilehti ja napsauta sovelluksessasi toimintoa, joka laukaisee pyynnön (kuten kirjautumispainikkeen napsauttaminen). Pyyntö ilmestyy listaan. Napsauta sitä nähdäksesi täydellinen pyyntö ja vastaus — hyödyllinen autentikointiongelmien tai väärin muodostettujen pyyntörunkojen diagnosoimiseen.

Vinkki: Pidä Console-välilehti auki kun AI Agent tekee muutoksia. Virheet ilmestyvät täällä ennen kuin ne näkyvät sivulla, antaen sinulle aikaisempaa palautetta siitä, mitä pitää korjata.