Ud over de fleste browser beslutningstagere med fokus på den daglige bruger, der ønsker at surfe på internettet, imødekommer de også webudviklere, designere og kvalitetssikringsfolk, der hjælper med at opbygge de apps og websteder, som disse brugere får adgang til ved at integrere kraftfulde værktøjer lige ind i browseren dem selv.
Borte er de dage, hvor de eneste programmerings- og testværktøjer, der findes i en browser, tillod dig at se en sides kildekode og intet mere. Dagens browsere giver dig mulighed for at tage et dybere dykke ved at gøre ting som at udføre og fejle JavaScript-uddrag, inspicere og redigere DOM-elementer, overvåge realtidsnetværkstrafik, når din app eller side indlæses for at identificere flaskehalse, analysere CSS-ydeevne og sikre, at din kode er bruger ikke for meget hukommelse eller for mange CPU-cyklusser og meget mere. Fra et testperspektiv kan du reproducere, hvordan en app eller webside vil gøre i forskellige browsere såvel som på forskellige enheder og platforme gennem magien af lydhør design og indbyggede simulatorer. Det bedste er, at du kan gøre alt dette uden at skulle forlade din browser!
Tutorialsne nedenfor viser dig hvordan du får adgang til disse udviklerværktøjer i flere populære webbrowsere.
Google Chrome
Chrome's udviklerværktøjer giver dig mulighed for at redigere og fejlsøge kode, revidere individuelle komponenter for at afsløre præstationsproblemer, simulere forskellige enhedsskærme, herunder dem, der kører Android eller iOS, og udføre flere andre nyttige funktioner.
- Klik på Kroms hovedmenuknap, markeret med tre vandrette linjer og placeret øverst til højre i browseren.
- Når rullemenuen vises, skal du holde musemarkøren hen over Flere værktøjer mulighed.
- En undermenu skal nu vises. Vælg indstillingen mærket Udvikler værktøjer . Du kan også bruge følgende tastaturgenvej i stedet for dette menupunkt: Chrome OS / Windows ( CTRL + SKIFT + I ), Mac OS X ( ALT (OPTION) + Kommando + I )
- Chrome-udviklerværktøjets grænseflade skal nu vises som vist i dette eksempel screenshot. Afhængigt af din version af Chrome kan det oprindelige layout, du ser, være lidt anderledes end det, der præsenteres her. Hovedværktøjet til udviklerværktøjerne, der typisk findes på enten nederste eller højre side af skærmen, indeholder følgende faner.elementer: Giver mulighed for at inspicere CSS og HTML-kode samt redigere CSS on-the-fly, hvor effekten af dine ændringer er i realtid.konsol: Chrome's JavaScript-konsol giver mulighed for direkte kommandoindtastning samt diagnostisk fejlsøgning.Kilder: Gør det muligt at debugere JavaScript-kode via en kraftfuld grafisk grænseflade.Netværk: Kategoriserer og viser detaljerede oplysninger om hver relateret operation på det aktive program eller den side, herunder komplette forespørgsels- og responsoverskrifter samt avancerede timingsmålinger.Tidslinje: Tillader en grundig analyse af alle aktiviteter, der finder sted i browseren, så snart en anmodning om side- eller applæsning er indledt.
- Ud over disse sektioner kan du også få adgang til følgende værktøjer via >> ikon, placeret til højre for Tidslinje fane.Profil: Brækket ned i CPU profiler og Heap profiler sektioner, giver omfattende hukommelsesforbrug og overordnet udførelsestid for det aktive program eller en side.Sikkerhed: Fremhæver certifikatproblemer og andre sikkerhedsrelaterede problemer med den aktive side eller applikation.Ressourcer: Her kan du inspicere cookies, lokal lagring, app cache og andre lokale datakilder, der bruges af den aktuelle webside eller applikation.Revision: Tilbyder måder at optimere en side eller programmets belastningstid og generelle præstationer på.
- Enhedsfunktion giver dig mulighed for at se den aktive side i en simulator, der gør det næsten nøjagtigt som det ville vises på en af mere end et dusin enheder, herunder flere kendte Android- og iOS-modeller som iPad, iPhone og Samsung Galaxy. Du får også mulighed for at efterligne brugerdefinerede skærmopløsninger, så de passer til dine specifikke udviklings- eller testbehov. At skifte Enhedsfunktion til og fra, vælg mobiltelefonikonet placeret direkte til venstre for elementer fane.
- Du kan også tilpasse udseendet af dine udviklerværktøjer ved først at klikke på menuknappen repræsenteret af tre lodret placerede prikker og placeret på den øverste højre side af de ovennævnte faner. Fra denne rullemenu kan du omplacere docken, vise eller skjule forskellige værktøjer samt lancere mere avancerede emner som en enhedsinspektør. Du vil opdage, at dev-værktøjerne selv er meget tilpasselige via de indstillinger, der findes i dette afsnit.
Mozilla Firefox
Firefox's Webudvikler-sektion indeholder værktøjer til designere, udviklere og testere, som f.eks. En stilredaktør og pixel-målretnings eyedropper.
Lifewire Anbefalet læsning:Top 25 Greasemonkey og Tampermonkey Bruger Scripts
- Klik på Firefox hovedmenuknap, repræsenteret af tre vandrette linjer og placeret i øverste højre hjørne af browservinduet.
- Når rullemenuen vises, skal du vælge ikonet mærket Udvikler . Det Web-udvikler menuen skal nu vises med følgende muligheder.Du vil bemærke, at de fleste menupunkter har tastaturgenveje der er forbundet med dem.Toggle Tools: Viser eller skjuler grænsefladen til udviklerværktøjer, som typisk er placeret nederst i browservinduet. Tastaturgenvej: Mac OS X ( ALT (OPTION) + Kommando + I ), Windows ( CTRL + SKIFT + I )Inspektør: Giver dig mulighed for at inspicere og / eller tilpasse CSS og HTML-kode på den aktive side samt på en bærbar enhed via fjernfejlfinding. Tastaturgenvej: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SKIFT + C )Webkonsol: Giver dig mulighed for at udføre JavaScript-udtryk inden for den aktive side samt gennemgå et mangfoldigt sæt af logget data, herunder sikkerhedsadvarsler, netværksanmodninger, CSS-meddelelser og meget mere. Tastaturgenvej: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )Debugger: Det JavaScript Debugger giver dig mulighed for at bestemme og rette fejl ved at indstille breakpoints, inspicere DOM nodes, black boxing eksterne kilder og meget mere. Som det er tilfældet med Inspektør Denne funktion understøtter 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 indarbejde dem med den aktive webside eller redigere eksisterende ark og teste hvordan dine ændringer gøres i en browser med et enkelt klik. Tastaturgenvej: Mac OS X, Windows ( SHIFT + F7 )Ydeevne: Giver en detaljeret oversigt over den aktive sides netværksydelse, frame rate data, JavaScript-eksekveringstid og tilstand, maling blinker og meget mere. Tastaturgenvej: Mac OS X, Windows ( SKIFT + F5 )Netværk: Viser hver netværksforespørgsel initieret af browseren sammen med den tilsvarende metode, oprindelsesdomæne, type, størrelse og tid der er gået. Tastaturgenvej: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Developer Toolbar: Åbner en interaktiv kommandolinjeprinter. Gå ind Hjælp ind i tolken for 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 Web apps via en faktisk enhed, der kører Firefox OS eller via Firefox OS Simulator. Tastaturgenvej: Mac OS X, Windows ( SKIFT + F8 )Browser Console: Giver den samme funktionalitet som Webkonsol (se ovenfor). Alle data, der returneres, er dog for hele Firefox-applikationen (inklusive udvidelser og browser-niveaufunktioner) i modsætning til kun den aktive webside. Tastaturgenvej: Mac OS X ( Skift + Kommando + J ), Windows ( CTRL + SHIFT + J )Responsive Design View: Giver dig mulighed for øjeblikkeligt at se en webside i forskellige opløsninger, layouter og skærmstørrelser for at efterligne flere enheder, herunder tabletter og smartphones. Tastaturgenvej: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Pipette: Viser hex farvekoden for individuelt valgte pixler.Scratchpad: Giver dig mulighed for at skrive, redigere, integrere og udføre uddrag af JavaScript-kode fra et pop-out Firefox-vindue. Tastaturgenvej: Mac OS X, Windows ( SHIFT + F4 )Side Kilde: Det oprindelige browserbaserede udviklerværktøj, denne indstilling viser simpelthen den tilgængelige kildekode for den aktive side. Tastaturgenvej: Mac OS X ( KOMMANDO + 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 Firebug og Greasemonkey.
Microsoft Edge / Internet Explorer
Ofte omtalt som F12 Developer Tools , en hyldest til tastaturgenvejen, der har startet grænsefladen siden tidligere versioner af Internet Explorer, dev værktøjssættet i IE11 og Microsoft Edge er kommet langt siden starten ved at tilbyde en meget praktisk gruppe af skærme, debuggere, emulatorer og på -flyvekompilatorer.
- Klik på flere handlinger menu, repræsenteret af tre prikker og placeret i øverste højre hjørne af browservinduet. Når rullemenuen vises, skal du vælge den markerede indstilling F12 Developer Tools . Som jeg allerede har nævnt, kan du også få adgang til værktøjerne via F12 tastaturgenvej.
- Udviklingsgrænsefladen skal nu vises, typisk nederst i browservinduet. Følgende værktøjer er tilgængelige, hver tilgængelige ved at klikke på deres respektive fanepost eller ved hjælp af den medfølgende tastaturgenvej.DOM Explorer: Giver dig mulighed for at redigere stylesheets og HTML på den aktive side, hvilket giver de ændrede resultater, som du går. Udnytter IntelliSense-funktionalitet til autofuldførelse af kode, hvor det er relevant. Tastaturgenvej: (CTRL + 1) konsol: Giver mulighed for at indsende fejlfindingsinformation, herunder tællere, timere, spor og tilpassede meddelelser via en integreret API. Lader dig også indsprøjte kode til en aktiv webside og ændre de værdier, der er tildelt individuelle variabler i realtid. Tastaturgenvej: (CTRL + 2) Debugger: Giver dig mulighed for at angive breakpoints og fejle din kode, mens den udføres, line for line, hvis det er nødvendigt. Tastaturgenvej: (CTRL + 3) Netværk: Viser hver netværksforespørgsel initieret af browseren under sideindlæsning og -udførelse, herunder protokoldetaljer, indholdstype, båndbreddeforbrug og meget mere. Tastaturgenvej: (CTRL + 4) Ydeevne: Detaljer rammefrekvenser, CPU udnyttelse og andre præstationsrelaterede målinger til at hjælpe dig med at fremskynde sideindlæsningstider og andre aktiviteter. Tastaturgenvej: (CTRL + 5) Hukommelse: Hjælper dig med at isolere og korrigere potentielle hukommelseslækager på den aktuelle webside ved at vise en hukommelsesbruger tidslinje sammen med snapshots fra forskellige tidsintervaller. Tastaturgenvej: (CTRL + 6) emulering: Viser dig, hvordan den aktive side ville gengives i forskellige opløsninger og skærmstørrelser, der emulerer smartphones, tablets og andre enheder. Giver også mulighed for at ændre brugeragent og sideorientering samt simulere forskellige geolokationer ved at indtaste en breddegrad og længdegrad. Tastaturgenvej: (CTRL + 7)
- For at vise konsol mens du i et af de andre værktøjer klikker på firkantetasten med et højre beslag inde i det, der er placeret i øverste højre hjørne af udviklingsværktøjets grænseflade.
- Hvis du vil afmontere, skal udviklerværktøjets grænseflade, så det bliver et separat vindue, klik på knappen repræsenteret af to cascading rektangler eller brug følgende tastaturgenvej: CTRL + P . Du kan placere værktøjerne tilbage i deres oprindelige placering ved at trykke på CTRL + P en anden gang.
Apple Safari (kun OS X)
Safari's forskellige dev-værktøjssæt afspejler det store udviklerfællesskab, der bruger en Mac til deres design og programmeringsbehov. Ud over en kraftig konsol og traditionelle log- og fejlsøgningsfunktioner, er der også en nem at bruge lydhør design og et værktøj til at oprette dine egne browserudvidelser.
- Klik på Safari i browsermenuen, placeret øverst på skærmen. Når rullemenuen vises, skal du vælge Indstillinger . Du kan også bruge følgende tastaturgenvej i stedet for dette menupunkt: KOMMANDO + COMMA (,)
- Safaris Indstillinger interface skal nu vises, overlejrer dit browservindue. Klik på Fremskreden ikonet, der ligger på den øverste højre side af overskriften.
- Det Fremskreden præferencer skal nu være synlige. Nederst på denne skærm er en mulighed markeret Vis udvikle menuen i menulinjen , ledsaget af et afkrydsningsfelt. Hvis der ikke er nogen markering vist i boksen, skal du klikke på den en gang for at placere en der.
- Luk Indstillinger interface ved at klikke på den røde 'x' fundet i øverste venstre hjørne.
- Du skal nu lægge mærke til en ny mulighed i browsermenuen ved navn Udvikle , placeret mellem bogmærker og Vindue . Klik på dette menupunkt. En rullemenu skal nu vises med følgende muligheder.Åbn side med: Giver dig mulighed for at åbne den aktive webside i en af de andre browsere, der for øjeblikket er installeret på din Mac.Brugeragent: 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 streng.Indtast Responsive Design Mode: Giver den aktuelle side som den ville fremkomme på forskellige enheder og ved forskellige skærmopløsninger.Vis web inspektør: Lancerer hovedgrænsefladen til Safari's dev-værktøjer, som typisk er placeret nederst på din browser-skærm og indeholder følgende afsnit: elementer , Netværk , Ressourcer , tidslinjer , Debugger , Opbevaring , konsol .Vis fejlkonsol: Lancerer også dev tools interface, direkte til konsol Fanen, der viser fejl, advarsler og andre søgbare logdata.Vis side Kilde: Åbner Ressourcer fanen, som viser kildekoden for den aktive side kategoriseret efter dokument.Vis side ressourcer: Udfører samme funktion som Vis side kilde mulighed.Vis uddragsredigering: Åbner et nyt vindue, hvor du kan indtaste CSS og HTML-kode og forhåndsvise dens output on-the-fly.Vis udvidelsesbygger: Giver mulighed for at oprette eller redigere Safari-udvidelser med CSS, HTML og JavaScript.Vis tidslinjeoptagelse: Åbner tidslinjer fanen og begynder at vise netværksanmodninger, layout og gengivelse af information samt JavaScript-udførelse i realtid.Tomme caches: Sletter hele cachen, der aktuelt er gemt på harddisken.Deaktiver Caches: Stopper Safari fra caching, så alt indhold hentes fra serveren ved hver side indlæses.Deaktiver billeder: Forhindrer billeder fra gengivelse på alle websider.Deaktiver stilarter: Ignorerer CSS-egenskaber, når en side er indlæst.Deaktiver JavaScript: Begrænser JavaScript-udførelse på alle sider.Deaktiver udvidelser: Forbyder alle installerede udvidelser i at køre i browseren.Deaktiver webstedsspecifikke hackere: Hvis Safari er blevet ændret for eksplicit at håndtere problem (er), der er specifikke for den aktive webside, vil denne indstilling blokere disse ændringer, så siden lastes som den ville have, før disse ændringer blev introduceret.Deaktiver lokale filrestriktioner: Tillader, at browseren har adgang til filer på dine lokale diske, en handling, der som standard er begrænset af sikkerhedsmæssige årsager.Deaktiver grænseoverskridende begrænsninger: Disse begrænsninger indføres som standard for at forhindre XSS og andre potentielle farer. Men de skal ofte være midlertidigt deaktiveret til udviklingsformål.Tillad JavaScript fra Smart Search Field: Når den er aktiveret, giver den mulighed for at indtaste webadresser med javascript: indarbejdet direkte i adresselinjen.Behandle SHA-1-certifikater som usikre: SSL-certifikater ved hjælp af SHA-1-algoritmen anses generelt for at være forældede og sårbare.
