Geïntegreerde gereedskap vir webontwerpers, ontwikkelaars en toetsers
Benewens die meeste blaaiermakers wat fokus op die alledaagse gebruiker wat op die web wil kyk, is dit ook die webontwikkelaars, ontwerpers en gehalteversekeringspersoneel wat help om die programme en webwerwe te bou wat daardie gebruikers toegang verkry deur die gebruik van kragtige instrumente reg in die blaaiers. hulself.
Weg is die dae waar die enigste programmerings- en toetsinstrumente wat in 'n blaaier gevind is, jou toegelaat het om 'n bronkode van 'n bladsy te sien en niks meer nie. Vandag se blaaiers laat jou 'n baie dieper duik neem deur dinge soos die uitvoering van en ontfouting van JavaScript-fragmente te gebruik, inspeksie en redigering van DOM-elemente, die monitering van real-time netwerkverkeer as jou app of bladsy laai knelpunte identifiseer, die CSS-prestasie ontleed en verseker dat jou kode is nie te veel geheue of te veel CPU siklusse gebruik nie, en nog baie meer. Uit 'n toetsperspektief kan jy weergee hoe 'n program of webblad in verskillende blaaiers sowel as op verskillende toestelle en platforms sal lewer 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!
In die tutoriale hieronder lees jy hoe om toegang tot hierdie ontwikkelaar gereedskap in verskeie gewilde webblaaiers.
Google Chrome
Chrome se ontwikkelaargereedskap laat jou toe om kode te wysig en ontfout, individuele komponente te oudit om prestasieprobleme te ontdek, verskillende toestelskerms te simuleer, insluitende dié wat Android of IOS gebruik , en verskeie ander nuttige funksies uit te voer.
- Klik op Chrome se hoofkieslys knoppie, gemerk met drie horisontale lyne en in die boonste regterhoek van die blaaier.
- As die aftrekkieslys verskyn, beweeg jou muiswyser oor die opsie Meer nutsprogramme .
- 'N Sub-kieslys moet nou verskyn. Kies die opsie gemerk Ontwikkelaargereedskap . U kan ook die volgende sleutelbordkortpaaie gebruik in plaas van hierdie kieslysitem: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTIE) + COMMAND + I )
- Die koppelvlak vir Chrome-ontwikkelaar-gereedskap moet nou vertoon word, soos in hierdie voorbeeld skermkiekie vertoon. Afhangende van jou weergawe van Chrome, kan die aanvanklike uitleg wat jy sien dalk effens verskil van die een wat hier aangebied word. Die hoofnaaf van die ontwikkelaar gereedskap, wat tipies aan die onderkant of regs van die skerm geleë is, bevat die volgende oortjies.
Elemente: Bied die vermoë om CSS en HTML-kode te inspekteer asook CSS on-the-fly te wysig, aangesien die effek van jou veranderinge in real-time is.
Konsole: Chrome se JavaScript-konsole maak voorsiening vir direkte opdraginskrywing sowel as diagnostiese ontfouting.
Bronne: kan jy JavaScript-kode ontfout via 'n kragtige grafiese koppelvlak.
Netwerk: Kategoriseer en vertoon gedetailleerde inligting oor elke verwante operasie op die aktiewe program of bladsy, insluitende volledige versoek- en antwoordopskrifte sowel as gevorderde tydmetings.
Tydlyn: Laat 'n grondige analise toe van elke aktiwiteit wat in die blaaier plaasvind sodra 'n versoek om 'n bladsy- of programlading aangevra word. - Benewens hierdie gedeeltes, kan u ook die volgende gereedskap verkry via die >> -ikoon, regs van die tydlyn- oortjie.
Profiel: Afbreek in CPU profiele en Heap profiler afdelings, bied omvattende geheue gebruik en algehele uitvoering tyd van die aktiewe aansoek of bladsy.
Sekuriteit: Beklemtoon sertifikaatprobleme en ander sekuriteitsverwante probleme met die aktiewe bladsy of toepassing.
Hulpbronne: Hier kan jy koekies, plaaslike berging, programkas en ander plaaslike databronne wat deur die huidige webblad of toepassing gebruik word, inspekteer.
Oudits: Bied maniere om 'n bladsy of program se laai tyd en algemene prestasie te optimaliseer. - Toestelmodus laat jou toe om die aktiewe bladsy in 'n simulator te sien, wat dit amper presies maak soos dit op een van meer as 'n dosyn toestelle verskyn, waaronder verskeie bekende Android- en iOS-modelle soos die iPad, iPhone en Samsung Galaxy. U kry ook die vermoë om persoonlike skermresoluties na te streef om by u spesifieke ontwikkelings- of toetsbehoeftes te pas. Om die toestel af te skakel en aan te skakel, kies die selfoon-ikoon direk aan die linkerkant van die elemente- oortjie.
- U kan ook die voorkoms en gevoel van u ontwikkelaar gereedskap aanpas deur eers te klik op die menuknoppie wat deur drie vertikaal geplaasde kolletjies voorgestel word en aan die regterkant van die voormelde tabs geleë is. Vanuit hierdie vervolg keuselys kan jy die dok hervestig, verskillende instrumente wys of verberg, asook meer gevorderde items soos 'n toestelinspekteur bekendstel. Jy sal vind dat die dev tools-koppelvlak self hoogs aanpasbaar is via die instellings wat in hierdie afdeling gevind word.
Mozilla Firefox
Firefox se Webontwikkelaar-afdeling bevat gereedskap vir ontwerpers, ontwikkelaars en testers, soos 'n stylredakteur en 'n pyltjie-doelgerigte oogdrupper.
Aanbevole leeswerk: Die Top 25 Greasemonkey- en Tampermonkey-gebruikersskrifte
- Klik op Firefox se hoofkieslys knoppie, verteenwoordig deur drie horisontale lyne en in die regter bovenhoek van die blaaier venster.
- Wanneer die aftrekkieslys verskyn, kies die ikoon benoemde Ontwikkelaar . Die Webontwikkelaarspyskaart moet nou vertoon word, met die volgende opsies. Jy sal sien dat die meeste spyskaart items sleutelbordkortpaaie met hulle bevat.
Toggle Tools: Wys of verberg die ontwikkelaar gereedskap koppelvlak, gewoonlik geplaas onder in die blaaier venster. Sleutelbordkortpaaie: Mac OS X ( ALT (OPSIE) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspekteur: Laat jou toe om CSS en HTML-kode op die aktiewe bladsy sowel as op 'n draagbare toestel via eksterne ontfouting te inspekteer en / of aan te pas. Sleutelbordkortpaaie: Mac OS X ( ALT (OPTIE) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Webkonsole: Laat jou toe om JavaScript-uitdrukkings op die aktiewe bladsy uit te voer, asook om 'n verskeidenheid gegeende data, insluitende sekuriteitswaarskuwings, netwerkversoeke, CSS-boodskappe, en meer, te hersien. Sleutelbordkortpaaie: Mac OS X ( ALT (OPTIE) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: Met die JavaScript Debugger kan u foute identifiseer en regmaak deur breekpunte te stel, DOM nodes te inspekteer, swart boks eksterne bronne, en nog baie meer. Soos met die Inspekteur , ondersteun hierdie funksie ook afgeleë ontfouting. Sleutelbordkortpaaie: Mac OS X ( ALT (OPTIE) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Stylredakteur: Hiermee kan jy nuwe style sheets maak en dit met die aktiewe webbladsy inkorporeer, of bestaande velle wysig en toets hoe jou veranderinge met net een klik in 'n blaaier vertoon. Sleutelbordkortpaaie: Mac OS X, Windows ( SHIFT + F7 )
Prestasie: Gee 'n gedetailleerde uiteensetting van die aktiewe bladsy se netwerkprestasie, raamkoersdata, JavaScript-uitvoeringstyd en -status, verf flikker, en nog baie meer. Sleutelbordkortpaaie: Mac OS X, Windows ( SHIFT + F5 )
Netwerk: Lys elke netwerk versoek wat deur die leser geïnisieer word, tesame met die ooreenstemmende metode, oorsprong domein, tipe, grootte en tyd wat verloop het. Sleutelbordkortpaaie: Mac OS X ( ALT (OPSIE) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Ontwikkelaar nutsbalk: Maak 'n interaktiewe opdraglyn tolk oop. Gee hulp in die tolk vir 'n lys van alle beskikbare opdragte en hul korrekte sintaksis. Sleutelbordkortpaaie: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Verskaf die vermoë om webprogramme te skep en uit te voer deur middel van 'n werklike toestel wat Firefox-bedryfstelsel of via die Firefox-OS Simulator uitvoer. Sleutelbordkortpaaie: Mac OS X, Windows ( SHIFT + F8 )
Browser Console: Verskaf dieselfde funksionaliteit as die Web Console (sien hierbo). Alle data wat terugbesorg word, is egter vir die hele Firefox-aansoek (insluitend uitbreidings en blaaiervlakfunksies) in teenstelling met net die aktiewe webblad. Sleutelbordkortpaaie: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Responsiewe ontwerp vertoning: Laat jou toe om direk 'n webblad in verskillende resolusies, uitlegte en skermgroottes te sien, om verskeie toestelle soos tablette en slimfone te naboots. Sleutelbordkortpaaie: Mac OS X ( ALT (OPTIE) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Wys die hex kleur kode vir individueel geselekteerde pixels.
Scratchpad : Hiermee kan u snitte van JavaScript-kode skryf, wysig, integreer en uitvoer vanuit 'n pop-out Firefox-venster. Sleutelbordkortpaaie: Mac OS X, Windows ( SHIFT + F4 )
Bladsy Bron: Die oorspronklike browser-gebaseerde ontwikkelaar instrument, hierdie opsie vertoon net die beskikbare bronkode vir die aktiewe bladsy. Sleutelbordkortpaaie: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Kry Meer Gereedskap: Maak die Web Developer se Toolbox- versameling op Mozilla se amptelike byvoegingsite , met ongeveer 'n dosyn gewilde uitbreidings soos Firebug en Greasemonkey.
Microsoft Edge / Internet Explorer
Gewoonlik na verwys as die F12 ontwikkelaar gereedskap , 'n eerbetoon aan die sleutelbordkortpaaie wat die koppelvlak sedert die vroeëre weergawes van Internet Explorer begin het, het die dev toolset in IE11 en Microsoft Edge 'n lang pad gekom sedert sy ontstaan deur 'n baie handige groep van monitors, debuggers, emulators, en on-the-fly samestellers.
- Klik op die Meer aksies kieslys, verteenwoordig deur drie kolletjies en in die regter bovenhoek van die blaaier venster. Wanneer die aftrekkieslys verskyn, kies die opsie gemerk F12 ontwikkelaar gereedskap . Soos ek reeds genoem het, kan u ook die gereedskap gebruik via die F12- sleutelbordkortpad.
- Die ontwikkelingskoppelvlak moet nou vertoon word, gewoonlik onderaan die blaaier. Die volgende gereedskap is beskikbaar, elkeen is toeganklik deur op hul onderskeie bladopskrif te klik of die gepaardgaande sleutelbordkortpaaie te gebruik.
DOM Explorer: Laat jou toe om style sheets en HTML in die aktiewe bladsy te wysig, en wys die gewysigde resultate soos jy wil. Gebruik die IntelliSense-funksionaliteit om die kode outomaties in te vul. Sleutelbordkortpad: (CTRL + 1)
Konsole: Verskaf die vermoë om debugging-inligting in te dien, insluitend tellers, timers, spore en aangepaste boodskappe via 'n geïntegreerde API. Ook, kan jy die kode in 'n aktiewe webblad inspring en die waardes wat in reële tyd aan individuele veranderlikes toegewys is, verander. Sleutelbordkortpad: (CTRL + 2)
Debugger: Hiermee kan jy breekpunte stel en jou kode ontfout terwyl dit uitgevoer word, lyn vir lyn indien nodig. Sleutelbordkortpaaie: (CTRL + 3)
Netwerk: Lys elke netwerk versoek wat deur die blaaier geïnisieer word tydens die laai en uitvoering van die bladsy, insluitend protokolbesonderhede, inhoudstipe, bandwydteverbruik, en nog baie meer. Sleutelbordkortpad: (CTRL + 4)
Prestasie: Besonderhede raamtariewe, CPU-benutting en ander prestasie-verwante statistieke om u te help om blaaiye en ander aktiwiteite te versnel. Sleutelbordkortpaaie: (CTRL + 5)
Geheue: help om die potensiële geheue lekkasies op die huidige webblad te kanoleer en reg te stel deur 'n tydlyn vir geheueverbruik te vertoon, tesame met foto's van verskillende tydsintervalle. Sleutelbordkortpad: (CTRL + 6)
Emulasie: Wys jou hoe die aktiewe bladsy in verskeie resolusies en skermgroottes sal vertoon, wat slimfone, tablette en ander toestelle sal emulgeer. Ook bied die vermoë om die gebruiker agent en bladsy oriëntasie te verander, sowel as verskillende geolocations te simuleer deur 'n breedtegraad en lengtegraad in te voer. Sleutelbordkortpaaie: (CTRL + 7) - Om die konsole te vertoon terwyl jy in enige van die ander gereedskap is, klik op die vierkantige knoppie met 'n regterbeugel daarin, in die boonste regterkantse hoek van die ontwikkelingswerktuigkoppelvlak.
- Om te ontdoen, die ontwikkelaar gereedskap koppelvlak sodat dit 'n aparte venster word, klik op die knoppie verteenwoordig deur twee reghoeke wat cascading is of gebruik die volgende sleutelbordkortpaaie: CTRL + P. U kan die gereedskap terug in hul oorspronklike plek plaas deur CTRL + P ' n tweede keer te druk.
Apple Safari (net OS X)
Safari se uiteenlopende dev toolset weerspieël die groot ontwikkelaars gemeenskap wat gebruik maak van 'n Mac vir hul ontwerp en programmering behoeftes. Benewens 'n kragtige konsole en tradisionele aanmeld- en ontfoutfunksies, word ook 'n maklike reaksie ontwerpmodus en 'n instrument om jou eie blaaieruitbreidings te skep, verskaf.
- Klik op Safari in die blaaier-kieslys, boaan jou skerm. Wanneer die aftrekkieslys verskyn, kies Voorkeure . U kan ook die volgende sleutelbordkortpaaie gebruik in plaas van hierdie kieslysitem: COMMAND + COMMA (,)
- Safari se voorkeure koppelvlak moet nou vertoon word, met die oorlaai van jou blaaier venster. Klik op die Gevorderde ikoon, aan die regterkant van die kop.
- Die gevorderde voorkeure moet nou sigbaar wees. Aan die onderkant van hierdie skerm is 'n opsie gemerk Wys ontwikkel-kieslys in die menubalk , vergesel deur 'n boks. As daar nie 'n vinkje is wat in die blokkie vertoon word nie, klik een keer daarop om een daar te plaas.
- Maak die voorkeure- koppelvlak toe deur op die rooi 'x' in die linker boonste hoek te klik.
- U moet nou 'n nuwe opsie sien in die blaaier-kieslys genaamd Ontwikkel , geleë tussen Boekmerke en Venster . Klik op hierdie kieslysitem. 'N Aftrekkieslys moet nou vertoon word, met die volgende opsies.
Oop bladsy met: Hiermee kan u die aktiewe webblad oopmaak in een van die ander blaaiers wat tans op u Mac geïnstalleer is.
Gebruikersagent: Hiermee kan u kies uit meer as 'n dosyn vooraf gedefinieerde gebruikersagentwaardes, insluitende verskeie weergawes van Chrome, Firefox en Internet Explorer, sowel as om u eie pasgemaakte tou te definieer.
Voer die verantwoordelike ontwerpmodus in : Maak die huidige bladsy soos dit op verskillende toestelle en by verskillende skermresolusies voorkom.
Web-inspekteur wys: Begin die hoofkoppelvlak vir Safari se dev-gereedskap, gewoonlik onderaan jou blaaierskerm, en bevat die volgende afdelings: Elemente , Netwerk , Hulpbronne , Tydlyne , Debugger , berging , konsole .
Wys Fout Console: Begin ook die dev tools koppelvlak, direk na die Console oortjie wat foute, waarskuwings en ander soekbare log data vertoon.
Wys Bladsy Bron: Maak die tabblad Hulpbronne oop, wat bronkode vir die aktiewe bladsy wat volgens dokument gekategoriseer word, vertoon.
Wys bladsyhulpbronne: Voer dieselfde funksie uit as die Wys bladsybron- opsie.
Wys Snippet Editor: Maak 'n nuwe venster oop waar jy CSS en HTML-kode kan inskryf, wat sy uitvoer op die vliegtuig voorskou.
Wys Uitbreidingsbouer: Voorsien die vermoë om Safari-uitbreidings met CSS, HTML en JavaScript te skep of te wysig.
Wys tydlynopname: Maak die Tydlyne- oortjie oop en begin met die vertoon van netwerkversoeke, uitleg en lewering van inligting asook JavaScript-uitvoering in reële tyd.
Leë Caches: Skrap die hele kas wat tans op u hardeskyf gestoor word.
Skakel Caches uit: Staak Safari vanaf kas sodat alle inhoud van die bediener op elke bladsy gelaai word.
Deaktiveer prente: verhoed dat prente op alle webblaaie vertoon word.
Deaktiveer Styles: ignoreer CSS-eienskappe wanneer 'n bladsy gelaai word.
Deaktiveer JavaScript: Beperk JavaScript-uitvoering op alle bladsye.
Deaktiveer uitbreidings: Verbode alle geïnstalleerde uitbreidings om binne die blaaier te hardloop.
Deaktiveer site-spesifieke hackers: As Safari gewysig is om ekspressiewe kwessies wat spesifiek vir die aktiewe webblad is, te hanteer, sal hierdie opsie die veranderinge blokkeer sodat die bladsy laai soos dit sou hê voordat hierdie wysigings ingestel word.
Deaktiveer plaaslike lêerbeperkings: Laat die blaaier toegang tot lêers op jou plaaslike skywe, 'n aksie wat as gevolg van sekuriteitsredes beperk is.
Skakel kruis-oorsprong beperkinge uit: Hierdie beperkings word standaard ingestel om XSS en ander potensiële gevare te voorkom. Hulle moet egter tydelik vir ontwikkelingsdoeleindes afgeskakel word.
Laat JavaScript toe vanaf Smart Search Field: As dit geaktiveer is, bied u die geleentheid om URL's met javascript in te voer: direk in die adresbalk ingevoeg.
Behandel SHA-1-sertifikate as onseker: SSL-sertifikate wat die SHA-1-algoritme gebruik, word algemeen beskou as out-date en kwesbaar.