Det ”hemliga” med DevTools för utvecklare av mobila webbsidor

Adil Aliyev

Follow

29 nov, 2018 – 3 min read

Ett speciellt gästinlägg från Adil, medlem av Samsung Internet Engineering Group!

Browserverktyg för utvecklare är en ständig följeslagare för många webbutvecklare. Vi kan använda dem för att inspektera vår kod, berätta om fel och köra olika granskningar. DevTools i Chrome kan också ge dig ett sätt att anpassa visningsstorleken till din mobila enhet. Den här funktionen används ofta av många utvecklare. En av de användbara punkterna med den här funktionen är att du kan välja bland populära mobila enheter, och DevTools kommer att justera skärmstorleken till exakt samma som den enheten. På så sätt kan vi testa och felsöka webbsidor med mobilenhetens storlek.

Chrome DevTools i läget för mobila enheter

Chrome DevTools är inte bara till för att inspektera DOM-element och CSS-attribut. Vi kan också använda det för granskning av nätverksförfrågningar och åtkomstlagringsrelaterade parametrar. Dessutom kan du köra JavaScript-kod direkt och se meddelandena från konsolen. Är det inte fantastiskt?

Antag nu att du har en mobiltelefon i handen och att specifika problem uppstår, särskilt på denna enhet, och att du inte kan reproducera problemet med hjälp av DevTools och den metod som illustreras ovan. Eller tänk dig en situation där din mobila webbläsare har specifika API:er och du vill felsöka dem. I det här fallet behöver du DevTools på din mobiltelefon.

Vad du kanske inte vet är att du kan använda desktop DevTools för att felsöka Blink-baserade webbläsare (t.ex. Samsung Internet) även på dina Android-enheter.

För att göra detta aktiverar du först ”USB Debugging” på din Android-enhet och ansluter den till datorn.

Nu kommer den spännande delen. Gå till webbadressen ”chrome://inspect” och klicka sedan på ”Devices”. Hurra! Du kommer att se en lista över aktiva webbläsarsessioner från din mobila enhet.

Klicka på ”Inspect” och du kommer att se webbläsarvisningen på din dator. Nu kan du göra alla manipulationer med hjälp av DevTools.

Du kan få tillgång till listan över mobila enheter även med hjälp av Fjärrstyrda enheter från menyn DevTools.

Förhoppningsvis kommer du att ha glädje av att använda den här tekniken för att förenkla felsökning på din mobil!