Hoe om webblaaier-ontwikkelaarnutsgoed te gebruik

2024 Outeur: Abigail Brown | [email protected]. Laas verander: 2023-12-17 06:37

Benewens die meeste blaaiervervaardigers wat fokus op die alledaagse gebruiker wat op die web wil blaai, maak hulle ook voorsiening vir die webontwikkelaars, ontwerpers en geh alteversekeringspersoneel wat help om die toepassings en werwe te bou waartoe daardie gebruikers toegang kry deur kragtige integrasie van gereedskap direk in die blaaiers self.

Die dae is verby waar die enigste programmeer- en toetsinstrumente wat in 'n blaaier gevind is, jou toegelaat het om 'n bladsy se bronkode te bekyk en niks meer nie. Vandag se blaaiers laat jou 'n baie dieper duik neem deur dinge te doen soos om JavaScript-brokkies uit te voer en te ontfout, DOM-elemente te inspekteer en te redigeer, intydse netwerkverkeer te monitor soos jou program of bladsy laai om knelpunte te identifiseer, CSS-werkverrigting te ontleed, om te verseker dat jou kode nie te veel geheue of te veel SVE-siklusse gebruik nie, en nog baie meer.

Uit 'n toetsperspektief kan jy weergee hoe 'n toepassing of webblad in verskillende blaaiers sowel as op verskillende toestelle en platforms sal vertoon deur die magie van responsiewe ontwerp en ingeboude simulators. Die beste deel is dat jy dit alles kan doen sonder om jou blaaier te verlaat!

Die tutoriale hieronder lei jou deur hoe om toegang tot hierdie ontwikkelaarnutsgoed in verskeie gewilde webblaaiers te kry.

Google Chrome

Die Chrome-ontwikkelaarnutsgoed laat jou toe om kode te wysig en te ontfout, individuele komponente te oudit om werkverrigtingkwessies bloot te stel, verskillende toestelskerms te simuleer, insluitend dié wat Android of iOS gebruik, en verskeie ander nuttige funksies uit te voer.

1. Kies Chrome se hoofkieslys, gemerk met drie horisontale lyne en geleë in die regter boonste hoek van die blaaier.

2. Wanneer die aftrekkieslys verskyn, beweeg jou muiswyser oor die More tools opsie.

   

3. 'n Sub-kieslys behoort nou te verskyn. Kies die opsie gemerk Ontwikkelaarnutsgoed. Jy kan ook die volgende sleutelbordkortpad in die plek van hierdie kieslys-item gebruik: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPSIE) +OPDRAG+I)

   

4. Die Chrome-ontwikkelaarnutsgoed-koppelvlak moet nou vertoon word, soos in hierdie voorbeeldskermkiekie gewys word. Afhangende van jou weergawe van Chrome, kan die aanvanklike uitleg wat jy sien effens verskil van die een wat hier aangebied word. Die hoofmiddelpunt van die ontwikkelaarnutsgoed, tipies aan die onderkant of regterkant van die skerm geleë, bevat die volgende oortjies.

5. Benewens hierdie afdelings, kan jy ook toegang tot die volgende nutsgoed kry via die >>-ikoon, geleë aan die regterkant van die Performance oortjie.

   • Geheue: Monitor en teken geheuegebruik op 'n webblad aan. Jy kan sien hoe swaar die JavaScript op jou werf is.
   • Security: Lig sertifikaatprobleme en ander sekuriteitverwante kwessies uit met die aktiewe bladsy of toepassing.
   • Application: Inspekteer die hulpbronne wat deur 'n webtoepassing gebruik word. Kry 'n volledige uiteensetting van wat gebruik word.
   • Oudits: Bied maniere om 'n bladsy of toepassing se laaityd en algemene werkverrigting te optimaliseer.

   

6. Device Mode laat jou toe om die aktiewe bladsy in 'n simulator te bekyk wat dit amper presies weergee soos dit op een van meer as 'n dosyn toestelle sal verskyn, insluitend verskeie bekende Android en iOS-modelle soos die iPad, iPhone en Samsung Galaxy. Jy kry ook die vermoë om pasgemaakte skermresolusies na te boots om by jou spesifieke ontwikkelings- of toetsbehoeftes te pas.

   Om Toestelmodus aan en af te skakel, kies die selfoonikoon wat direk aan die linkerkant van die geleë is Elements oortjie.

   

7. Jy kan ook die voorkoms en gevoel van jou ontwikkelaarnutsgoed pasmaak deur eers die kieslysknoppie te kies, verteenwoordig deur drie vertikaal geplaasde kolletjies en geleë op die heel regterkant van die voorgenoemde oortjies.

   Vanaf hierdie aftrekkieslys kan jy die dok herposisioneer, verskillende nutsgoed wys of versteek, asook meer gevorderde items soos 'n toestelinspekteur begin. Jy sal vind dat die ontwikkelaarnutsgoed-koppelvlak self hoogs aanpasbaar is via die instellings wat in hierdie afdeling gevind word.

   

Mozilla Firefox

Firefox se webontwikkelaarafdeling sluit nutsgoed vir ontwerpers, ontwikkelaars en toetsers in, soos 'n stylredigeerder en pixel-teiken-pipet.

1. Kies Firefox se hoofkieslys, verteenwoordig deur drie horisontale lyne en geleë in die regter boonste hoek van die blaaiervenster.

2. Wanneer die aftrekkieslys verskyn, kies Webontwikkelaar.

   

3. Die Webontwikkelaar-kieslys behoort nou vertoon te word, wat die volgende opsies bevat. Jy sal agterkom dat die meeste kieslys-items sleutelbordkortpaaie het wat daarmee geassosieer word.

   • Toggle Tools: Wys of versteek die ontwikkelaarnutsmiddel-koppelvlak, gewoonlik onderaan die blaaiervenster. Sleutelbordkortpad: Mac OS X (ALT(OPSIE)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Laat jou toe om CSS- en HTML-kode op die aktiewe bladsy sowel as op 'n draagbare toestel te inspekteer en/of aan te pas deur middel van afstandontfouting. Sleutelbordkortpad: Mac OS X (ALT(OPSIE)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Laat jou toe om JavaScript-uitdrukkings binne die aktiewe bladsy uit te voer, asook om 'n diverse stel aangetekende data te hersien, insluitend sekuriteitswaarskuwings, netwerkversoeke, CSS-boodskappe, en meer. Sleutelbordkortpad: Mac OS X (ALT(OPSIE)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Met die JavaScript-ontfouter kan jy defekte opspoor en regmaak deur breekpunte te stel, DOM-nodusse te inspekteer, eksterne bronne te swartboks, en nog baie meer. Soos die geval met die Inspekteur, ondersteun hierdie kenmerk ook afstandontfouting. Sleutelbordkortpad: Mac OS X (ALT(OPSIE)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stylredigeerder: Laat jou toe om nuwe stylblaaie te skep en dit by die aktiewe webbladsy in te sluit, of bestaande blaaie te redigeer en te toets hoe jou veranderinge in 'n blaaier vertoon word met net een klik. Sleutelbordkortpad: Mac OS X, Windows (SHIFT+F7)
   • Performance: Verskaf 'n gedetailleerde uiteensetting van die aktiewe bladsy se netwerkprestasie, raamtempo-data, JavaScript-uitvoeringstyd en -toestand, verfflits, en nog baie meer. Sleutelbordkortpad: Mac OS X, Windows (SHIFT+F5)
   • Network: Lys elke netwerkversoek wat deur die blaaier geïnisieer is, saam met die ooreenstemmende metode, oorsprongdomein, tipe, grootte en tyd wat verloop het. Sleutelbordkortpad: Mac OS X (ALT(OPSIE)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Kyk na die kas en koekies wat deur 'n webwerf gestoor word. Sleutelbordkortpad: (SHIFT+F9)
   • Ontwikkelaarnutsbalk: Maak 'n interaktiewe opdragreël-tolk oop. Tik help in die tolk vir 'n lys van alle beskikbare opdragte en hul regte sintaksis. Sleutelbordkortpad: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Verskaf die vermoë om webtoepassings te skep en uit te voer deur 'n werklike toestel wat Firefox OS of via die Firefox OS Simulator gebruik. Sleutelbordkortpad: Mac OS X, Windows (SHIFT+F8)
   • Blaaierkonsole: Verskaf dieselfde funksionaliteit as die Webkonsole (sien hierbo). Alle data wat teruggestuur word, is egter vir die hele Firefox-toepassing (insluitend uitbreidings en blaaiervlakfunksies) in teenstelling met net die aktiewe webblad. Sleutelbordkortpad: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Stel jou in staat om onmiddellik 'n webbladsy in verskillende resolusies, uitlegte en skermgroottes te bekyk om verskeie toestelle na te boots, insluitend tablette en slimfone. Sleutelbordkortpad: Mac OS X (ALT(OPSIE)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Vertoon die hekskleurkode vir individueel geselekteerde pieksels.
   • Scratchpad: Scratchpad laat jou toe om stukkies JavaScript-kode te skryf, te redigeer, te integreer en uit te voer vanuit 'n pop-out Firefox-venster. Maak 'n interaktiewe JavaScript-dokument oop waarmee jy in kode kan skryf en dit teen 'n webwerf kan toets. Sleutelbordkortpad: (SHIFT+F4)
   • Dienswerkers: Ontfout dienswerkers jou webtoepassing. Kry gedetailleerde inligting oor hul werkverrigting en foute.
   • Bladsybron: Die oorspronklike blaaier-gebaseerde ontwikkelaarnutsding, hierdie opsie vertoon eenvoudig die beskikbare bronkode vir die aktiewe bladsy. Sleutelbordkortpad: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Kry meer nutsgoed: Maak die Webontwikkelaar se Toolbox-versameling op Mozilla se amptelike byvoegingswerf oop, met ongeveer 'n dosyn gewilde uitbreidings soos as Firebug en Greasemonkey.

   

Microsoft Edge/Internet Explorer

Algemeen na verwys as die F12 Developer Tools, 'n eerbetoon aan die sleutelbordkortpad wat die koppelvlak sedert vroeëre weergawes van Internet Explorer, die ontwikkelaarnutsgoedstel in IE11 en Microsoft Edge bekendgestel het het 'n lang pad gestap sedert sy ontstaan deur 'n baie handige groep monitors, ontfouters, emulators en on-the-fly samestellers aan te bied.

Microsoft ondersteun nie meer Internet Explorer nie en beveel aan dat jy opdateer na die nuwer Edge-blaaier. Gaan na hul webwerf om die nuutste weergawe af te laai.

1. Kies Meer aksies, verteenwoordig deur three dots en geleë in die regter boonste hoek van die blaaiervenster.

   

2. Wanneer die aftrekkieslys verskyn, kies die opsie gemerk Ontwikkelaarnutsgoed.

   

3. Die ontwikkelingskoppelvlak behoort nou vertoon te word, gewoonlik onderaan die blaaiervenster. Die volgende nutsgoed is beskikbaar, elkeen toeganklik deur op hul onderskeie oortjieopskrif te klik of die meegaande sleutelbordkortpad te gebruik.

   

   • DOM Explorer: Laat jou toe om stylblaaie en HTML in die aktiewe bladsy te redigeer, en gee die gewysigde resultate soos jy gaan. Gebruik IntelliSense-funksionaliteit om kode te outovoltooi waar van toepassing. Sleutelbordkortpad: (CTRL+1)
   • Console: Bied die vermoë om ontfoutingsinligting in te dien, insluitend tellers, timers, spore en pasgemaakte boodskappe via 'n geïntegreerde API. Hiermee kan u ook kode in 'n aktiewe webblad inspuit en die waardes wat aan individuele veranderlikes toegeken is, intyds verander. Sleutelbordkortpad: (CTRL+2)
   • Debugger: Laat jou breekpunte stel en jou kode ontfout terwyl dit uitgevoer word, reël vir reël indien nodig. Sleutelbordkortpad: (CTRL+3)
   • Network: Lys elke netwerkversoek wat deur die blaaier geïnisieer is tydens bladsylaai en uitvoering, insluitend protokolbesonderhede, inhoudtipe, bandwydtegebruik en nog baie meer. Sleutelbordkortpad: (CTRL+4)
   • Performance: Besonderhede van raamkoerse, SVE-gebruik en ander prestasieverwante maatstawwe om jou te help om bladsylaaitye en ander aktiwiteite te versnel. Sleutelbordkortpad: (CTRL+5)
   • Memory: Help jou om potensiële geheuelekkasies op die huidige webblad te isoleer en reg te stel deur 'n geheuegebruiktydlyn saam met foto's van verskillende tydintervalle te vertoon. Sleutelbordkortpad: (CTRL+6)
   • Emulasie: Wys jou hoe die aktiewe bladsy in verskillende resolusies en skermgroottes sal vertoon, wat slimfone, tablette en ander toestelle naboots. Dit bied ook die vermoë om die gebruikeragent en bladsy-oriëntasie te verander, asook om verskillende geo-liggings te simuleer deur 'n breedte- en lengtegraad in te voer. Sleutelbordkortpad: (CTRL+7)

4. Om die Console te vertoon terwyl jy binne enige van die ander nutsgoed is, druk die vierkantige knoppie met 'n regterhakie binne-in dit, geleë in die boonste regterkantste hoek van die ontwikkelingshulpmiddel-koppelvlak.

   

5. Om die ontwikkelaarnutsmiddel-koppelvlak los te maak sodat dit 'n aparte venster word, kies die twee kaskade reghoeke of gebruik die volgende sleutelbordkortpad: CTRL+P. Jy kan die gereedskap op hul oorspronklike plek terug plaas deur CTRL+P 'n tweede keer te druk.

   

Apple Safari (slegs Mac)

Safari se diverse ontwikkelaarnutsgoedstel weerspieël die groot ontwikkelaargemeenskap wat 'n Mac vir hul ontwerp- en programmeringsbehoeftes gebruik. Benewens 'n kragtige konsole en tradisionele aanteken- en ontfoutingskenmerke, word 'n maklik-om-te-gebruik responsiewe ontwerpmodus en 'n hulpmiddel om jou eie blaaieruitbreidings te skep ook voorsien.

1. Kies Safari in die blaaierkieslys, bo-aan jou skerm. Wanneer die aftrekkieslys verskyn, kies Voorkeure. Jy kan ook die volgende sleutelbordkortpad in die plek van hierdie kieslys-item gebruik: COMMAND+COMMA(,)

   

2. Safari se Voorkeure-koppelvlak moet nou vertoon word, wat jou blaaiervenster oorlê. Kies die Advanced-ikoon, geleë aan die regterkant van die kopskrif.

   

3. Die Advanced voorkeure behoort nou sigbaar te wees. Aan die onderkant van hierdie skerm is 'n opsie gemerk Wys Ontwikkel-kieslys in die kieslysbalk, vergesel van 'n merkblokkie. As daar geen regmerkie in die blokkie vertoon word nie, klik een keer daarop om een daar te plaas.

   

4. Sluit die Voorkeure-koppelvlak.

5. Jy behoort nou 'n nuwe opsie in die blaaierkieslys met die naam Develop te sien, geleë tussen Boekmerke en Venster. Klik op hierdie menu-item. 'n Aftrekkieslys moet nou vertoon word wat die volgende opsies bevat.

   • Maak bladsy oop met: Laat jou toe om die aktiewe webblad oop te maak in een van die ander blaaiers wat tans op jou Mac geïnstalleer is.
   • Gebruikersagent: Laat jou kies uit meer as 'n dosyn vooraf gedefinieerde gebruikeragentwaardes, insluitend verskeie weergawes van Chrome, Firefox en Internet Explorer, sowel as jou eie pasgemaakte definieer string.
   • Enter Responsive Design Mode: Gee die huidige bladsy weer soos dit op verskeie toestelle en teen verskillende skermresolusies sal verskyn.
   • Show Web Inspector: Begin die hoofkoppelvlak vir Safari se ontwikkelaarnutsgoed, gewoonlik onderaan jou blaaierskerm geplaas en bevat die volgende afdelings: Elemente, Netwerk, Hulpbronne, Tydlyne, Ontfouter, Berging, Konsole.
   • Show Error Console: Begin ook die ontwikkelaarnutsgoed-koppelvlak, direk na die Console-oortjie wat foute, waarskuwings en ander soekbares vertoon logdata.
   • Wys bladsybron: Maak die Hulpbronne-oortjie oop, wat die bronkode vir die aktiewe bladsy wat deur die dokument gekategoriseer is, vertoon.
   • Wys bladsyhulpbronne: Voer dieselfde funksie uit as die Wys bladsybron-opsie.
   • Wys brokkie-redigeerder: Maak 'n nuwe venster oop waar jy CSS- en HTML-kode kan invoer, en die uitvoer daarvan onmiddellik voorbeskou.
   • Show Extension Builder: Verskaf die vermoë om Safari-uitbreidings met CSS, HTML en JavaScript te skep of te redigeer.
   • Wys tydlynopname: Maak die Tydlyne-oortjie oop en begin om netwerkversoeke, uitleg en lewering van inligting sowel as JavaScript-uitvoering intyds te vertoon.
   • Leë kas: Vee die hele kas uit wat tans op jou hardeskyf gestoor word.
   • Deaktiveer kasgeheue: Stop Safari om in die kas te kas sodat alle inhoud van die bediener af herwin word met elke bladsy wat gelaai word.
   • Deaktiveer prente: Verhoed dat prente op alle webblaaie weergegee word.
   • Deaktiveer style: Ignoreer CSS-eienskappe wanneer 'n bladsy gelaai word.
   • Deaktiveer JavaScript: Beperk JavaScript-uitvoering op alle bladsye.
   • Deaktiveer uitbreidings: Verbied alle geïnstalleerde uitbreidings om binne die blaaier te loop.
   • Deaktiveer werfspesifieke hacks: As Safari gewysig is om eksplisiet kwessie(s) spesifiek vir die aktiewe webblad te hanteer, sal hierdie opsie daardie veranderinge blokkeer sodat die bladsy laai soos dit sou wees voordat hierdie wysigings ingestel is.
   • Deaktiveer plaaslike lêerbeperkings: Laat die blaaier toegang hê tot lêers op jou plaaslike skywe, 'n handeling wat om sekuriteitsredes by verstek beperk is.
   • Deaktiveer kruisoorsprong-beperkings: Hierdie beperkings word by verstek ingestel om XSS en ander potensiële gevare te voorkom. Hulle moet egter dikwels tydelik gedeaktiveer word vir ontwikkelingsdoeleindes.
   • Laat JavaScript van Smart Search Field toe: Wanneer dit geaktiveer is, bied dit die vermoë om URL's met javascript in te voer: direk in die adresbalk ingesluit.
   • Behandel SHA-1-sertifikate as onseker: SSL-sertifikate wat die SHA-1-algoritme gebruik, word algemeen as verouderd en kwesbaar beskou.