Chrome DevTools: Dit Værktøj til Mobil Webudvikling

At teste en mobil webapp kan være en udfordring, især når der opstår problemer med obfuskeret HTML/CSS/JavaScript-kode, forkert implementeret HTTPS, browser-uoverensstemmelser, langsom sideindlæsning og meget mere. Desuden kan visse opgaver være utroligt frustrerende, når man forsøger at understøtte et bredt udvalg af mobile enheder. Hvordan overvinder man disse udfordringer? Ved at bruge Web Developer Tools eller debugging-udvidelser, der gør fejlfinding af din webapplikation lettere. Her vil vi tale om den mest populære – de open source Google Chrome Developer Tools.

Google Chrome Developer Tools er et integreret miljø bygget ind i Google Chrome-browseren. Det bruges til webforfatning, fejlfinding, overvågning, optimering og forståelse af webapplikationer eller websteder. Her er nogle af de vigtigste funktioner i Chrome DevTools:

• Inspicer og rediger DOM'en og CSS'en på dit websted i realtid
• Kør kodestykker fra enhver side
• Debug Obfuskeret kode
• Indstil avancerede breakpoints og debug JavaScript ved hjælp af grafisk debugger
• Fejlfind sikkerhedsproblemer
• Analyser køre- og sideydelse for at forbedre hastigheden på din app
• Spor reflows og repaints, mens din app indlæses

Chrome DevTools leverer næsten alt det nødvendige udstyr til at inspicere, debugge og overvåge ydeevnen af en webapp/mobilweb. Det tilbyder også yderligere funktioner til at simulere mobile enheder til at teste og bygge mobilførst, responsive websteder. Du kan endda debugge webindhold på en rigtig Android-enhed fra en udviklingsmaskine. Men er det nok at teste din webapp på kun en eller to enheder?

Fjernfejlfinding med Chrome DevTools og pCloudy's Mobile Device Lab

Enhedfragmentering er et meget reelt problem, når man tester webapps på rigtige enheder, især til UI- og funktionelle tests. Antallet af enheder med unikke specifikationer og proprietære build-variationer er steget. På et avanceret niveau, for fuldt ud at teste din webapps responsivitet og ydeevne på rigtige enheder, bliver du nødt til at eksperimentere med dit websted på tværs af forskellige platforme og enhedsformfaktorer. pCloudy's Mobile Device Lab tilbyder komplet integration med Chrome DevTools til at teste dine apps på rigtige enheder. Denne integration giver dig mulighed for at teste webapps på et utal af Android-enheder med forskellige størrelser og konfigurationer.

Sådan tester de fleste app-udviklere deres webapps

Inspicer og rediger live dit websteds design og indhold

Test og rediger dit websted i live-tilstand ved at inspicere al HTML og CSS på din side. I panelet Elements kan du redigere en DOM-node live ved blot at dobbeltklikke på et valgt element og foretage ændringer. Du kan endda redigere stilattributnavne og -værdier live i Styles-panelet. Undersøg og rediger boksmodelparametre. Det er også muligt at redigere den aktuelle elements boksmodelparametre ved at foretage ændringer i top-, bund-, venstre-, højre-værdier for den aktuelle elements polstring, kant og margen-egenskaber ved hjælp af panelet Computed.

Fjernfejlfinding på rigtige enheder for at rette fejl i koden

Debugging af Obfuskeret Kode: Gør din kode læsbar og let at debugge, selv efter du har kombineret, minificeret eller kompileret den. Du kan nemt ændre formateringen af din minificerede kode ved at klikke på { }. Dette er især nyttigt, når du arbejder med minificeret JavaScript, som ofte er svært at læse og forstå.

Test og optimer ydeevnen af webappen

Netværkspanel

Netværkspanelet giver dig mulighed for at se, hvordan din side gengives, og hvor lang tid det tager at gengive fra start til slut. For at gøre dette skal du klikke ind i "Network"-panelet, klikke på kameraikonet og genindlæse siden på enheden. Dette giver dig et dybdegående overblik over alle netværksanmodninger, der foretages under sideindlæsning, herunder filstørrelser, indlæsningstider og anmodningsheaders.

Tidslinjepanel

Tidslinjepanelet hjælper dig med at optage og analysere alle aktiviteter i din applikation, mens den kører. Det er det bedste sted at starte med at undersøge opfattede ydeevneproblemer i din applikation. For at lave en optagelse af en sideindlæsning skal du åbne tidslinjepanelet, åbne den side, du vil optage, og derefter genindlæse siden. Tidslinjepanelet optager automatisk sidegenindlæsningen. Du kan også optage sideinteraktioner på siden og se ydeevnedetaljer gennem den optagede tidslinje.

Her er nogle flere detaljer, du kan se ved hjælp af Record Timeline:

• Optag tidslinjen for at analysere hver begivenhed, der opstod efter en sideindlæsning eller en brugerinteraktion
• Se FPS, CPU og netværksanmodninger i Overview-panelet
• Klik på en begivenhed i Flame Chart for at se detaljer om den
• Zoom ind på et afsnit af en optagelse for at gøre analysen lettere

Ofte Stillede Spørgsmål

Kan jeg bruge DevTools på en mobil enhed?

Ja, du kan bruge Chrome DevTools til at debugge på en mobil enhed. Du kan enten bruge den indbyggede emulator i DevTools til at simulere forskellige mobile enheder eller forbinde din fysiske mobile enhed til din computer for fjernfejlfinding.

Hvad er Chrome DevTools?

Chrome Developer Tools er en samling af fejlfindings- og udviklingsværktøjer, der er indbygget i Google Chrome-browseren. De giver udviklere mulighed for at inspicere, debugge og optimere websteder og webapplikationer direkte fra browseren.

Hvordan forbinder jeg min Android-enhed til Chrome DevTools?

For at forbinde din Android-enhed til Chrome DevTools skal du først aktivere USB-fejlfinding på din enhed. Derefter forbinder du din enhed til din computer via USB. Åbn Chrome på din computer, gå til chrome://inspect/#devices, og din enhed bør vises, hvis den er korrekt tilsluttet og USB-fejlfinding er aktiveret.

Hvilke typer problemer kan jeg løse med Chrome DevTools?

Du kan løse en bred vifte af problemer, herunder HTML/CSS-strukturproblemer, JavaScript-fejl, ydeevneflaskehalse, netværksproblemer, sikkerhedsproblemer og problemer med responsivt design på tværs af forskellige enheder.

Konklusion

“At bruge de rigtige værktøjer til det rigtige job” er et gammelt ordsprog, der gælder for alle domæner, herunder softwareudvikling. Som vi har set, har Chrome Developer Tools flere funktioner, der hjælper dig med at udvikle bedre, debugge hurtigere og effektivt måle ydeevnen af dit websted eller din applikation. De funktioner, der er diskuteret her, er nogle af de mest almindelige, der bruges af udviklere, designere og testere til at skrive, debugge, overvåge og optimere websteder og webapps. Brug af disse funktioner i integration med Mobile Device Labs som pCloudy kan forvandle hele processen med at oprette, teste og lancere websteder og webapps.

Hvis du vil læse andre artikler, der ligner Chrome DevTools: Dit Værktøj til Mobil Webudvikling, kan du besøge kategorien Teknologi.