Vianetsintä: Browser

Korjaa yleisiä sisäänrakennetun Browser-paneelin ongelmia.

Paikallinen sovellus ei lataudu

Oire: siirryt osoitteeseen http://localhost:3000 Browser-paneelissa mutta näet yhteysvirheen tai tyhjän sivun.

Korjaukset:

  • Varmista, että kehityspalvelimesi on todella käynnissä. Tarkista Terminal — etsi käynnistysviesti (esimerkiksi ready on http://localhost:3000 Next.js:stä tai Local: http://localhost:5173/ Vitestä). Jos palvelin ei käy, käynnistä se tavanomaisella komennollasi (npm run dev, yarn dev jne.).
  • Kokeile 127.0.0.1:tä localhosten sijaan. Jotkut järjestelmät selvittävät localhost-osoitteen eri tavalla kuin odotettiin. Korvaa localhost osoitteella 127.0.0.1 URL-palkissa — esimerkiksi http://127.0.0.1:3000.
  • Content-Security-Policy-otsikot. Jos sovelluksesi asettaa tiukat CSP-otsikot, jotka estävät upottamisen webview-näkymään, Browser-paneeli kieltäytyy näyttämästä sitä. Kehitystilassa voit löyhentää näitä otsikoita. Esimerkiksi Next.js:ssä voit poistaa tai löyhentää frame-ancestors-direktiivin next.config.js-tiedostossasi vain paikallisessa kehityksessä.

Browser-paneelin korkeus kutistuu

Oire: Browser-paneeli kutistuu ohueksi nauhaksi etkä näe sovellustasi.

Korjaus: vedä paneelin jakajaa (ohut palkki Browser-paneelin ja sen ylä- tai alapuolella olevan paneelin välissä) muuttaaksesi Browserin kokoa. Napsauta ja vedä sitä ylöspäin antaaksesi Browserille enemmän pystysuuntaista tilaa.

Jos haluat Browserin vievän mahdollisimman paljon tilaa, käytä koko ruudun tilaa: paina Cmd+Shift+F (tai Ctrl+Shift+F Windows/Linuxilla) laajentaaksesi Browser-paneelin täyttämään ikkunan. Paina samaa pikanäppäintä palataksesi normaaliin asetteluun.

Video tai ääni ei toimi

Sisäänrakennettu Browser-paneeli ei tue kaikkia mediakoodekkeja. Tietyt videoformaatit tai äänivirrat saattavat epäonnistua paneelin sisällä.

Korjaus: napsauta hiiren oikealla painikkeella missä tahansa Browser-paneelissa ja valitse Avaa ulkoisessa Browserissa. Tämä avaa nykyisen URL-osoitteen järjestelmäsi oletusselaimessa (Safari, Chrome, Firefox jne.), jolla on täysi koodekki-tuki. Käytä tätä mediapainotteisille sivuille, videotoistimille tai mihin tahansa, joka vaatii selainliitännäisiä.

Sivu näyttää tyhjän / valkoisen näytön

Tyhjä valkoinen näyttö tarkoittaa yleensä, että sivu latautui mutta JavaScriptissä meni jokin pieleen ennen kuin mitään sisältöä pystyttiin näyttämään.

Korjaus:

  1. Napsauta Browser-paneelin työkalupalkissa olevaa DevTools-painiketta (jakoavain tai </> -kuvake).
  2. Avaa Console-välilehti.
  3. Etsi punaisia virheilmoituksia.

Yleisin syy paikallisessa kehityksessä on CORS-virhe — frontend tekee pyyntöä paikalliselle API:lle ja API hylkää sen, koska pyyntö tulee webview-alkuperästä localhost-alkuperän sijaan. Korjataksesi tämän kehityksessä, määritä API-palvelimesi sallimaan kaikki alkuperät:

  • Express / Node: lisää app.use(cors()) cors-paketin kanssa.
  • FastAPI: lisää CORSMiddleware jossa allow_origins=["*"] kehitykseen.
  • Next.js API routes: lisää Access-Control-Allow-Origin: * vastausotsikkoihin reittikäsittelijässäsi.

Muista rajoittaa alkuperät uudelleen ennen tuotantoon vientiä.