Sådan bruger du webbrowserudviklerværktøjer

2024 Forfatter: Abigail Brown | [email protected]. Sidst ændret: 2024-01-07 19:01

Ud over at de fleste browserproducenter fokuserer på den almindelige bruger, der ønsker at surfe på nettet, henvender de sig også til webudviklere, designere og kvalitetssikringsprofessionelle, som hjælper med at bygge de apps og websteder, som disse brugere får adgang til ved at integrere kraftfulde værktøjer lige ind i selve browserne.

De dage er forbi, hvor de eneste programmerings- og testværktøjer, der findes i en browser, tillod dig at se en sides kildekode og intet mere. Nutidens browsere giver dig mulighed for at tage et meget dybere dyk ved at gøre ting som at udføre og fejlfinde JavaScript-uddrag, inspicere og redigere DOM-elementer, overvåge netværkstrafik i re altid, mens din app eller side indlæses for at identificere flaskehalse, analysere CSS-ydeevne og sikre, at din kode er ikke bruger for meget hukommelse eller for mange CPU-cyklusser og meget mere.

Fra et testperspektiv kan du gengive, hvordan en app eller webside gengives i forskellige browsere såvel som på forskellige enheder og platforme gennem magien ved responsivt design og indbyggede simulatorer. Det bedste er, at du kan gøre alt dette uden at skulle forlade din browser!

Selvstudierne nedenfor guider dig gennem, hvordan du får adgang til disse udviklerværktøjer i flere populære webbrowsere.

Google Chrome

Chrome-udviklerværktøjerne giver dig mulighed for at redigere og fejlrette kode, revidere individuelle komponenter for at afsløre ydeevneproblemer, simulere forskellige enhedsskærme, inklusive dem, der kører Android eller iOS, og udføre adskillige andre nyttige funktioner.

1. Vælg Chromes hovedmenu, markeret med tre vandrette linjer og placeret i øverste højre hjørne af browseren.

2. Når rullemenuen vises, skal du holde musemarkøren over Flere værktøjer valgmulighed.

   

3. En undermenu skulle nu vises. Vælg indstillingen mærket Udviklerværktøjer. Du kan også bruge følgende tastaturgenvej i stedet for dette menupunkt: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +KOMMANDO+I)

   

4. Chrome Developer Tools-grænsefladen skulle nu blive vist, som vist i dette eksempel på skærmbillede. Afhængigt af din version af Chrome kan det oprindelige layout, du ser, være lidt anderledes end det, der præsenteres her. Hovedhubben i udviklerværktøjerne, typisk placeret enten nederst eller til højre på skærmen, indeholder følgende faner.

5. Ud over disse sektioner kan du også få adgang til følgende værktøjer via >>-ikonet, placeret til højre for Performance fane.

   • Memory: Overvåg og optag hukommelsesforbrug på en webside. Du kan se, hvor tungt JavaScript på dit websted er.
   • Security: Fremhæver certifikatproblemer og andre sikkerhedsrelaterede problemer med den aktive side eller applikation.
   • Application: Undersøg de ressourcer, der bruges af en webapplikation. Få en komplet oversigt over, hvad der bliver brugt.
   • Audits: Tilbyder måder at optimere en side eller applikations indlæsningstid og generelle ydeevne på.

   

6. Device Mode giver dig mulighed for at se den aktive side i en simulator, som gengiver den næsten nøjagtigt, som den ville se ud på en af over et dusin enheder, inklusive flere velkendte Android og iOS-modeller såsom iPad, iPhone og Samsung Galaxy. Du får også muligheden for at efterligne brugerdefinerede skærmopløsninger, der passer til dine særlige udviklings- eller testbehov.

   For at slå Enhedstilstand til og fra skal du vælge mobiltelefonikonet, der er placeret direkte til venstre for Elements fane.

   

7. Du kan også tilpasse udseendet og følelsen af dine udviklerværktøjer ved først at vælge menuknappen repræsenteret af tre lodret placerede prikker og placeret yderst til højre på de førnævnte faner.

   Fra denne rullemenu kan du flytte docken, vise eller skjule forskellige værktøjer samt starte mere avancerede elementer såsom en enhedsinspektør. Du vil opdage, at selve interfacet til udviklerværktøjerne kan tilpasses i høj grad via indstillingerne i dette afsnit.

   

Mozilla Firefox

Firefox's webudviklersektion indeholder værktøjer til både designere, udviklere og testere, såsom en stileditor og pixelmålrettet pipette.

1. Vælg Firefox's hovedmenu, repræsenteret ved tre vandrette linjer og placeret i øverste højre hjørne af browservinduet.

2. Når rullemenuen vises, skal du vælge Web Developer.

   

3. webudviklermenuen skulle nu blive vist med følgende muligheder. Du vil bemærke, at de fleste menupunkter har tastaturgenveje tilknyttet.

   • Toggle Tools: Viser eller skjuler udviklerværktøjets grænseflade, typisk placeret i bunden af browservinduet. Tastaturgenvej: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Giver dig mulighed for at inspicere og/eller justere CSS- og HTML-kode på den aktive side såvel som på en bærbar enhed via fjernfejlfinding. Tastaturgenvej: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Giver dig mulighed for at eksekvere JavaScript-udtryk på den aktive side samt gennemgå et forskelligartet sæt af loggede data, herunder sikkerhedsadvarsler, netværksanmodninger, CSS-meddelelser og mere. Tastaturgenvej: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger giver dig mulighed for at lokalisere og rette defekter ved at indstille breakpoints, inspicere DOM-noder, black boxing eksterne kilder og meget mere. Som det er tilfældet med Inspector, understøtter denne funktion også fjernfejlfinding. Tastaturgenvej: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Giver dig mulighed for at oprette nye stylesheets og inkorporere dem med den aktive webside, eller redigere eksisterende ark og teste, hvordan dine ændringer gengives i en browser med et enkelt klik. Tastaturgenvej: Mac OS X, Windows (SHIFT+F7)
   • Performance: Giver en detaljeret oversigt over den aktive sides netværksydelse, billedhastighedsdata, JavaScript-udførelsestid og tilstand, farveblink og meget mere. Tastaturgenvej: Mac OS X, Windows (SHIFT+F5)
   • Network: Viser hver netværksanmodning initieret af browseren sammen med den tilsvarende metode, oprindelsesdomæne, type, størrelse og forløbet tid. Tastaturgenvej: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Tag et kig på cachen og cookies, der gemmes af et websted. Tastaturgenvej: (SHIFT+F9)
   • Udviklerværktøjslinje: Åbner en interaktiv kommandolinjefortolker. Indtast help i tolken for at få en liste over alle tilgængelige kommandoer og deres korrekte syntaks. Tastaturgenvej: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Giver mulighed for at oprette og udføre webapps gennem en faktisk enhed, der kører Firefox OS eller via Firefox OS Simulator. Tastaturgenvej: Mac OS X, Windows (SHIFT+F8)
   • Browserkonsol: Giver samme funktionalitet som webkonsollen (se ovenfor). Alle data, der returneres, er dog for hele Firefox-applikationen (inklusive udvidelser og funktioner på browserniveau) i modsætning til kun den aktive webside. Tastaturgenvej: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsiv designvisning: Giver dig mulighed for øjeblikkeligt at se en webside i forskellige opløsninger, layouter og skærmstørrelser for at efterligne flere enheder inklusive tablets og smartphones. Tastaturgenvej: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Viser hex-farvekoden for individuelt valgte pixels.
   • Scratchpad: Scratchpad lader dig skrive, redigere, integrere og udføre uddrag af JavaScript-kode fra et pop-out Firefox-vindue. Åbn et interaktivt JavaScript-dokument, der lader dig skrive kode og teste det mod et websted. Tastaturgenvej: (SHIFT+F4)
   • Service Workers: Fejlfinding af servicemedarbejdere i din webapplikation. Få detaljerede oplysninger om deres ydeevne og fejl.
   • Sidekilde: Det originale browserbaserede udviklerværktøj, denne mulighed viser blot den tilgængelige kildekode for den aktive side. Tastaturgenvej: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Få flere værktøjer: Åbner webudviklerens værktøjskasse samling på Mozillas officielle tilføjelseswebsted, med omkring et dusin populære udvidelser som f.eks. som Firebug og Greasemonkey.

   

Microsoft Edge/Internet Explorer

Almindeligvis omt alt som F12 Developer Tools, en hyldest til tastaturgenvejen, der har lanceret grænsefladen siden tidligere versioner af Internet Explorer, udviklerværktøjssættet i IE11 og Microsoft Edge er nået langt siden starten ved at tilbyde en meget praktisk gruppe af skærme, debuggere, emulatorer og on-the-fly compilere.

Microsoft understøtter ikke længere Internet Explorer og anbefaler, at du opdaterer til den nyere Edge-browser. Gå til deres websted for at downloade den nyeste version.

1. Vælg Flere handlinger, repræsenteret ved tre prikker og placeret i øverste højre hjørne af browservinduet.

   

2. Når rullemenuen vises, skal du vælge indstillingen mærket Udviklerværktøjer.

   

3. Udviklingsgrænsefladen skulle nu blive vist, typisk nederst i browservinduet. Følgende værktøjer er tilgængelige, hver enkelt tilgængelig ved at klikke på deres respektive faneoverskrift eller bruge den medfølgende tastaturgenvej.

   

   • DOM Explorer: Giver dig mulighed for at redigere stylesheets og HTML på den aktive side og gengive de ændrede resultater, mens du går. Bruger IntelliSense-funktionalitet til autofuldførelse af kode, hvor det er relevant. Tastaturgenvej: (CTRL+1)
   • Console: Giver mulighed for at indsende fejlfindingsoplysninger, herunder tællere, timere, spor og tilpassede meddelelser via en integreret API. Giver dig også mulighed for at indsprøjte kode i en aktiv webside og ændre de værdier, der er tildelt individuelle variabler i re altid. Tastaturgenvej: (CTRL+2)
   • Debugger: Lader dig indstille breakpoints og fejlsøge din kode, mens den udføres, linje for linje, hvis det er nødvendigt. Tastaturgenvej: (CTRL+3)
   • Network: Viser hver netværksanmodning, der initieres af browseren under sideindlæsning og udførelse, inklusive protokoldetaljer, indholdstype, båndbreddeforbrug og meget mere. Tastaturgenvej: (CTRL+4)
   • Performance: Oplyser billedhastigheder, CPU-udnyttelse og andre præstationsrelaterede metrics for at hjælpe dig med at fremskynde sideindlæsningstider og andre aktiviteter. Tastaturgenvej: (CTRL+5)
   • Memory: Hjælper dig med at isolere og rette potentielle hukommelseslækager på den aktuelle webside ved at vise en tidslinje for hukommelsesbrug sammen med snapshots fra forskellige tidsintervaller. Tastaturgenvej: (CTRL+6)
   • Emulation: Viser dig, hvordan den aktive side gengives i forskellige opløsninger og skærmstørrelser, og emulerer smartphones, tablets og andre enheder. Det giver også mulighed for at ændre brugeragenten og sideretningen, samt simulere forskellige geolokationer ved at indtaste en bredde- og længdegrad. Tastaturgenvej: (CTRL+7)

4. For at vise Console, mens du er i et af de andre værktøjer, skal du trykke på firkantet knap med en højre parentes indeni, placeret i det øverste højre hjørne af grænsefladen til udviklingsværktøjer.

   

5. For at frigøre grænsefladen til udviklerværktøjer, så det bliver et separat vindue, skal du vælge to cascading rektangler eller bruge følgende tastaturgenvej: CTRL+P. Du kan placere værktøjerne tilbage på deres oprindelige placering ved at trykke på CTRL+P en anden gang.

   

Apple Safari (kun Mac)

Safaris mangfoldige udviklerværktøjssæt afspejler det store udviklerfællesskab, der bruger en Mac til deres design- og programmeringsbehov. Ud over en kraftfuld konsol og traditionelle log- og fejlfindingsfunktioner tilbydes der også en letanvendelig responsiv designtilstand og et værktøj til at oprette dine egne browserudvidelser.

1. Vælg Safari i browsermenuen, der er placeret øverst på din skærm. Når rullemenuen vises, skal du vælge Preferences. Du kan også bruge følgende tastaturgenvej i stedet for dette menupunkt: COMMAND+COMMA(,)

   

2. Safari's Preferences-grænseflade skulle nu blive vist og overlejrer dit browservindue. Vælg Avanceret ikon, placeret yderst til højre i overskriften.

   

3. Advanced-præferencerne skulle nu være synlige. Nederst på denne skærm er en mulighed mærket Vis Udvikl-menu i menulinjen, ledsaget af et afkrydsningsfelt. Hvis der ikke er et flueben i boksen, skal du klikke på det én gang for at placere et der.

   

4. Luk Preferences-grænsefladen.

5. Du skulle nu bemærke en ny mulighed i browsermenuen ved navn Develop, placeret mellem Bogmærker og Window. Klik på dette menupunkt. En rullemenu skulle nu blive vist, der indeholder følgende muligheder.

   • Åbn side med: Giver dig mulighed for at åbne den aktive webside i en af de andre browsere, der i øjeblikket er installeret på din Mac.
   • User Agent: Giver dig mulighed for at vælge fra over et dusin foruddefinerede brugeragentværdier, herunder flere versioner af Chrome, Firefox og Internet Explorer, samt definere din egen brugerdefinerede værdi streng.
   • Enter Responsive Design Mode: Gengiver den aktuelle side, som den ville se ud på forskellige enheder og med forskellige skærmopløsninger.
   • Show Web Inspector: Starter hovedgrænsefladen til Safaris udviklerværktøjer, typisk placeret nederst på din browserskærm og indeholder følgende sektioner: Elementer, Netværk, Ressourcer, Tidslinjer, Debugger, Storage, Console.
   • Show Error Console: Starter også grænsefladen til udviklerværktøjer, direkte til Konsol-fanen, som viser fejl, advarsler og andre søgbare logdata.
   • Vis sidekilde: Åbner fanen Ressourcer, som viser kildekoden for den aktive side kategoriseret af dokumentet.
   • Vis sideressourcer: Udfører den samme funktion som indstillingen Vis sidekilde.
   • Show Snippet Editor: Åbner et nyt vindue, hvor du kan indtaste CSS- og HTML-kode og se en forhåndsvisning af dets output på farten.
   • Show Extension Builder: Giver mulighed for at oprette eller redigere Safari-udvidelser med CSS, HTML og JavaScript.
   • Vis tidslinjeoptagelse: Åbner fanen Tidslinjer og begynder at vise netværksanmodninger, layout og gengivelsesoplysninger samt JavaScript-udførelse i re altid.
   • Tøm caches: Sletter hele den cache, der i øjeblikket er gemt på din harddisk.
   • Deaktiver caches: Stopper Safari i at cache, så alt indhold hentes fra serveren ved hver sideindlæsning.
   • Deaktiver billeder: Forhindrer billeder i at blive gengivet på alle websider.
   • Deaktiver stilarter: Ignorerer CSS-egenskaber, når en side indlæses.
   • Deaktiver JavaScript: Begrænser JavaScript-udførelse på alle sider.
   • Deaktiver udvidelser: Forbyder alle installerede udvidelser i at køre i browseren.
   • Deaktiver webstedsspecifikke hacks: Hvis Safari er blevet ændret til eksplicit at håndtere problemer, der er specifikke for den aktive webside, vil denne mulighed blokere disse ændringer, så siden indlæses, som det ville have gjort, før disse ændringer blev indført.
   • Deaktiver lokale filbegrænsninger: Giver browseren adgang til filer på dine lokale diske, en handling, der som standard er begrænset af sikkerhedsmæssige årsager.
   • Deaktiver Cross-Origin Restrictions: Disse begrænsninger er som standard indført for at forhindre XSS og andre potentielle farer. De skal dog ofte deaktiveres midlertidigt til udviklingsformål.
   • Tillad JavaScript fra Smart Search Field: Når det er aktiveret, giver det mulighed for at indtaste URL'er med javascript: inkorporeret direkte i adresselinjen.
   • Behandle SHA-1-certifikater som usikre: SSL-certifikater, der bruger SHA-1-algoritmen, anses generelt for at være forældede og sårbare.