“Hemmeligheden” bag DevTools til udviklere af mobile webapplikationer

Adil Aliyev

Follow

29. nov, 2018 – 3 min read

Et særligt gæsteindlæg fra Samsung Internet engineering group team member, Adil!

Der er mange webudvikleres konstante følgesvend, når det gælder udviklingsværktøjer, som leveres af browsere. Vi kan bruge dem til at inspicere vores kode, fortælle os om fejl og køre forskellige revisioner. DevTools i Chrome kan også give dig mulighed for at justere din skærmstørrelse, så den passer til din mobilenhed. Denne funktion bruges ofte af mange udviklere. Et af de nyttige punkter ved denne funktion er, at du kan vælge mellem populære mobilenheder, og DevTools vil justere skærmstørrelsen til nøjagtig den samme som den pågældende enhed. På den måde kan vi teste og fejlfinde websider med størrelsen på mobilenheden.

Chrome DevTools i mobil enhedstilstand

Chrome DevTools er ikke kun til at inspicere DOM-elementer og CSS-attributter. Vi kan også bruge det til undersøgelse af netværksforespørgsler og adgang til lagringsrelaterede parametre. Desuden kan du køre JavaScript-kode direkte og se beskederne fra konsollen. Er det ikke fantastisk?

Så antag nu, at du har en mobiltelefon i hånden, og der opstår specifikke problemer, især på denne enhed, og du er ikke i stand til at reproducere problemet ved hjælp af DevTools og den ovenfor illustrerede metode. Eller forestil dig en situation, hvor din mobilbrowser har specifikke API’er, og du ønsker at debugge dem. I dette tilfælde har du brug for DevTools på din mobiltelefon.

Det, du måske ikke er klar over, er, at du også kan bruge desktop DevTools til fejlfinding af Blink-baserede browsere (f.eks. Samsung Internet) på dine Android-enheder.

For at gøre det skal du først aktivere “USB Debugging” på din Android-enhed og tilslutte den til din computer.

Nu kommer vi til den spændende del. Gå til URL-adressen “chrome://inspect”, og klik derefter på “Devices” (enheder). Hurra! Du får vist listen over aktive browsersessioner fra din mobilenhed.

Klik på “Inspect”, og du får vist browservisningen på din computer. Nu kan du foretage alle manipulationer ved hjælp af DevTools.

Du kan også få adgang til listen over mobile enheder ved hjælp af Remote Devices fra menuen DevTools.

Håbenligt vil du nyde at bruge denne teknik til at gøre debugging på din mobil enklere!