Yntegreare toolkes foar webûntwerper, ûntwikkelders en testers
Neist de measte browser makers op it tema fan 'e tillevyzjebeam dy't it websteeën besykje te kinnen, fertsjinje se ek oan de webûntwikkelders, ûntwerpers en kwaliteitssoarch professionals dy't de apps en siden oanbiede, dy't dizze brûkers tagong krije troch yntegrearje krêftige tools direkt yn' e browsers harsels.
Jo binne de dagen wêryn de iennige programmearjen en testfoarmsjes fûnen binnen in blêder jo hawwe om de boarne koade fan in side te besjen en neat mear. De hjoeddeisjele browsers kinne jo in folle djipper dûbel meitsje troch dingen te dwaan lykas útfieren en debuggen fan JavaScript-snippets, ynspeksje en bewurkjen fan DOM-eleminten, it kontrolearjen fan echte-tiid-netwurkferkear as jo app of pagelast om identiteiten te identifisearjen, analysearjen fan CSS-prestaasjes, soargje dat jo koade is Nettsjinsteande tefolle ûnthâld of tefolle CPU- sikes, en folle mear. Fanút in testperspektive kinne jo reprodusearje hoe't in app of webstee ferskine yn ferskate browsers as op ferskate apparaten en platfoarmen troch de magie fan responsive ûntwerp en ynboude simulators. It bêste diel is dat jo dit alles dwaan kinne sûnder jo blêdzjen te ferlitten!
De ûndersteande ûnderwerpen leverje jo troch hoe't jo tagong krije ta dizze ûntwikkelders yn ferskate populêre webblêders.
Google Chrome
Chrome's ûntwikkelders ark makket it mooglik om te bewurkjen en út te wiskjen fan koade, it bestjoeren fan yndividuele komponinten om prestaasjeproblemen te eksposearjen, ferskate ferskate apparaten yn 'e lofterhannels, lykas liedende Android en iOS , en ferskate oare nuttige funksjes.
- Klik op de haadmenu Chrome fan Chrome, markearre mei trije horizontale rigels en lizzend yn 'e boppeste hichte fan' e browser.
- As it dellûk menu ferskynt, ferpleatse jo mûsoanwizer oer de mear tools- opsje.
- In submenu moat no ferskine. Selektearje de opsje mei asjebleaft Developer-ark . Jo kinne ek de folgjende toetskombinaasje brûke ynstee fan dizze menu item: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- De ynterface foar Chrome Developer Tools moat no werjûn wurde, lykas yn dit foarbyld skermôfbylding werjûn. Ofhinklik fan jo ferzje fan Chrome, it earste lokaasje dat jo sjogge, kinne wat oars wêze fan 'e hjir presintearre. De haadnot fan 'e ûntwikkelders ark, dy't typysk op' e bottom of rjochtside fan it skerm lizzend is, befettet de folgjende ljepblêden.
Elements: Biedt de mooglikheid om CSS en HTML-koade te besjen en CSS op-de-fly te bewurkjen, sjoch de effekten fan jo feroaringen yn echt.
Konsole: Java's konsole fan Chrome jout tagong foar direkte kommando-ynfier as diagnostyk-debugging.
Boarnen: Jo kinne jo JavaSkript-koade debuggen troch in krêftige grafyske interface.
Netwurk: kategorisearret en detailt ynformaasje oer elke relatearre wurking op 'e aktive applikaasje of side, mei komplete oanfraach- en antwurden-headers en ek foar ferwidere timing-metrisy.
Tydskrift: Allows foar yndiaan analysearje fan alle aktiviteiten dy't binnen de browser plakfine, sa gau as in side-of app-laden-fersyk ynsteld wurdt. - Neist dizze seksjes kinne jo tagelyk tagonklik meitsje fan de folgjende tools troch it >> ikoan, lizzend oan 'e rjochterkant fan' e tabel tabel.
Profyl: Brutsen yn CPU-profyl en heap-profiler- paragrafen, biedt wiidweidige ûnthâld brûken en allinich útfieringstiid fan 'e aktive applikaasje of side.
Feiligens: Hichtepunten problemen problemen en oare feilige problemen mei de aktive side of applikaasje.
Ressourcen: Dit is wêr jo cookies kinne kontrolearje, lokale opslach, app-cache, en oare lokale gegevensboarnen brûke troch de aktuele webside of applikaasje.
Audysjes: Offere wizen om in side of oanmeitsjen fan 'e laden en algemiene prestaasjes te optimearjen. - Device Mode jout jo de aktive side yn in simulator te besjen dy't it sawat krekt as it ferskynt op ien fan mear as tsientallen apparaten, wêrûnder ferskate bekende Android- en iOS-models lykas de iPad, iPhone en Samsung Galaxy. Jo krije ek de mooglikheid om oanpaste oanpasteleminten te emulearjen om jo bepaalde ûntjouwing of testen te fieren. Om it Device Mode op en út te selektearjen, selektearje it mobyl tillefoan by it ljepblêd fan 'e eleminten .
- Jo kinne ek it look en gefoel fan jo ûntwikkelers ark oanpasse troch te klikken op it menu knop fertsjintwurdige troch trije vertike plakken en lizzende op 'e rjochter rjochts fan' e neamde ljepblêden. Fan binnen dit drop-down menu kinne jo it dock opnij oanmeitsje, ferskate arkbalken sjen litte of ferskine, lykas in apparaat-apparaat. Jo sille fine dat de dev-ynterface-ynterface sels tige oanpast is troch de ynstellingen dy't fûn binne yn dizze seksje.
Mozilla Firefox
Firefox's webside fan Firefox ûntwikkelet ark foar ûntwerpers, ûntwikkelders en testers lykas in stylredakteur en piksel-opsje-eypropper.
Oanbefellende lêzing: De top 25 Greasemonkey en Tampermonkey brûkersskripten
- Klik op 'e haadmenu fan Firefox, fertsjintwurdige troch trije horizontale rigels en lizzend yn' e boppeste rjochte hoeke fan it finster fan 'e blêder.
- As it dellûk menu ferskynt, selektearje it byldkaike label Developer . It Web Developer menu moat no werjûn wurde, mei de neikommende opsjes. Jo sjogge dat de measte menu items tastiene fluchtoetsen hawwe mei har ferbûn.
Gearwurkingsprogramma's: Toane of ferbynt de ûntwikkeldersynterface, dy't normaal op 'e boaiem fan it finster fan' e blêder pleatst. Tastokke fluchtoets: Mac OS X ( ALT (OPTION) + Kommando + I ), Windows ( CTRL + SHIFT + I )
Ynspekteur: Jo kinne jo CSS- en HTML-koade op 'e aktive side en op in portable apparaten fia ekstern debuggen ynsette en / of tweakje. Tastokke fluchtoets: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Webkonsole: Jo kinne jo Java-ekspresjes binnen de aktive side útfiere en ek in ferskaat oan komponearre data beoardielje, lykas feiligens warskôgingen, netwurkbefragen, CSS-berjochten, en mear. Tastokke fluchtoets: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: De JavaSkript-debugger lit jo definsjes opinefine en fêststelle troch opslachpunten te setten, DOM-knoppen yn te skeakeljen, swarte boksjes eksterne boarnen, en folle mear. As it gefal is mei de Ynspekteur , stipet dizze funksje ek ekstra debuggen. Tastokke fluchtoets: Mac OS X ( ALT (OPTIONEN + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Stylbewurker: Jo kinne nije stylblêden opnij meitsje en har opnimme mei de aktive webside, of jo besteande blêdwizers oanmeitsje en hoe't jo wizigingen yn in blêder mei in gewoan klikje. Tastokke fluchtoets: Mac OS X, Windows ( SHIFT + F7 )
Leistung: Biedt in detaillearre ferdieling fan de netwurkprestaasjes fan aktive side, frame rate data, JavaScript eksekúsje tiid en steat, ferfangen troch blêdzjen, en folle mear. Tastokke fluchtoets: Mac OS X, Windows ( SHIFT + F5 )
Netwurk: Lit elke netwurkfraach ynsteld troch de browser tegearre mei de oerienkommende metoade, oarsprongdomein, type, grutte, en tiid ferlern. Tastokke fluchtoets: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Untwikkelderbalke: iepenet in ynteraktive kommando-lyn-interpreter. Folje help yn 't ynterpret foar in list mei alle beskikbere kommando's en har eigen syntaksis. Tastokke fluchtoets: Mac OS X, Windows ( SHIFT + F2 )
Webide: Stelt de mooglikheid om web apps oan te meitsjen en út te fieren fia in echte apparaat dy't Firefox OS rint en fia de Firefox OS-simulator. Tastokke fluchtoets: Mac OS X, Windows ( SHIFT + F8 )
Blêder konsole: Stelt deselde funksjonaliteit as de webkonsole (sjoch hjirboppe). Alle weromgeande gegevens binne lykwols foar de folsleine Firefox-tapassing (ynklusyf ekstandsjes en funksjes fan browser's) as tsjinstelling op just de aktive webside. Tastokke fluchtoets: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Spesjale ûntwerp-werjefte: Jo kinne gewoan in webside besjen yn ferskate resolúsjes, layouts en skermgrutte om meardere apparaten mei tablets en smartphones te mimikjen. Tastokke fluchtoets: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Lit de heks kleurskoade werjaan foar selektearre piksels.
Scratchpad : Jo kinne skript , bewurkjen, yntegreare en útfiere snippets fan JavaScript-koade fan binnen in pop-up Firefox finster. Tastokke fluchtoets: Mac OS X, Windows ( SHIFT + F4 )
Side-boarne: De orizjinele blêder-basearre ûntwikkelder ark, dizze opsje lit allinich de beskikbere boarne koade foar de aktive side. Tastokke fluchtoets: Mac OS X ( Kommando + U ), Windows ( CTRL + U )
Get More Tools: Iepenet de Web Developer's Toolbox- kolleksje op Mozilla's offisjele tafoegings- side, mei sa'n sa'n tsien populêre útwreiding lykas Firebug en Greasemonkey.
Microsoft Edge / Internet Explorer
In gewoanwei neamd as de F12 Developer-ark , in húshâlding foar de toetseboerdskeksel dy't sûnt de eardere ferzjes fan Internet Explorer de interface ynsteld hat, hat de dev-toolset yn IE11 en Microsoft Edge in lange wei kaam sûnt har begjin makke troch in tige handige groep fan Monitors, debuggers, emulators, en on-the-fly compilers.
- Klikje op it mear aksje- menu, fertsjintwurdige troch trije punten en lizzend yn 'e boppeste rjochte hoeke fan it finster fan' e blêder. As it dellûk menu ferskynt, selektearje de opsje mei de label F12 Developer Tools . As ik al neamd bin, dan kinne jo ek de tagongsrjochten tagelyk fia de flugtoets fan de F12 toetsje.
- De ûntwikkelingske interface moat no werjûn wurde, typysk oan 'e boaiem fan it finster fan' e browser. De folgjende ark is beskikber, elk is berikber troch te klikken op har ûnderskate ljepblêdkant of gebrûk fan de befeiligjende toetsebining.
DOM Explorer: Hjirmei kinne jo stylstilen en HTML yn 'e aktive side wizigje, wizigje de wizige resultaten as jo gean. It brûken fan IntelliSense-funksjonaliteit nei autocomplete koade wêr mooglik. Tastokke tastân: (CTRL + 1)
Konsole: Stelt de mooglikheid om gegevens út te fieren, lykas tsjinners, timers, spoaren en oanpast berjochten fia in yntegreare API. Ek kinne jo koade ynfiere yn in aktive webside en it feroarjen fan de wearden dy 't oantsjutte binne foar yndividuele fariabelen yn echt tiid. Tastokkerke: (CTRL + 2)
Debugger: Lit jo breakpoints ynstelle en jo koade debugje, wylst it útfierd wurdt, line by line as nedich. Tastokke tastân: (CTRL + 3)
Netwurk: Lists eltse netwurkfraach ynsteld troch de blêder by side-laden en útfiering, ynklusyf protokol details, ynhâldtype, bandwidth gebrûk, en folle mear. Tastokke tastân: (CTRL + 4)
Performance: Details frame rates, CPU-utilisaasje, en oare prestaasjesbeheardige metriken om jo te helpen dat jo de ladezeiten en oare aktiviteiten ferbetterje. Tûkheakke: (Ctrl + 5)
Gedrach: Helps jo potensjele ûnthâld-leaks op 'e hjoeddeiske webside isolearje en korrigearje troch in timeline te ûnthâlden, mei snapshots út ferskillende tiidyntervallen. Tûkheakke: (Ctrl + 6)
Emoasje: te sjen hoe't de aktive side ferskille yn ferskate resolúsjes en skermgrutte, emulearje smartphones, tablets en oare apparaten. Ek jout de mooglikheid om de brûkers-agint en side-oriïntaasje te feroarjen, en ek ferskate geolokaasjes simulearje troch in breedte- en lingte yn te fieren. Tastokke knop: (Ctrl + 7) - Om de Konsole werjaan te litten, klik dan op 'e knop knop mei in rjochtholke binnen it, lizzend yn' e boppeste rjochte hoeke fan 'e ûntwikkeldersynterface.
- Om ûntskeakelje fan 'e ûntwikkelders ynterface sadat it in aparte finster wurdt, klikje op de knop ferparteare troch twa cascading rectangles of brûk de folgjende toetsebining: CTRL + P. Jo kinne de arkbalken opnij yn har oarspronklike lokaasje pleatse troch CTRL + P in twadde kear op drukke te litten.
Apple Safari (allinich OS X)
Safari's ferskate dev-toolset sprekt de grutte ûntwikkeldersmooglikheid dy't in Mac brûkt foar har ûntwerp en programmearders. Neist in krêftige konsole en tradisjonele logging- en debuggen-funksjes binne ek in ienfâldige te brûken ûntwerp ûntwerpmodus en in ark om jo eigen blêder-útwreiding te meitsjen.
- Klik op Safari yn it blêdermenu, boppe oan it skerm sitte. As it dellûk menu ferskynt, selektearje Preferences . Jo kinne ek de neikommende toetsebining ynstelle fan dizze menu item: COMMAND + COMMA (,)
- Safier's Preferences- ynterface moatte no werjûn wurde, it oersetten fan jo blêder finster. Klikje op it Avansearre ikoan, lizzend oan de fierrige kant fan 'e koptekst.
- De Avansearre foarkarren moatte no sichtber wêze. Oan 'e boaiem fan dit skerm is in opsje markearre Untwikkelmenu yn de menubalke , begelaat troch in checkbox. As der gjin gegevens markearre binne yn it fekje, klikje op ienris ien dêr.
- Slút de ynstellingsynterface troch te klikken op 'e reade' x 'fûn yn' e boppenhoeke boppe links.
- Jo moatte no in nije opsje ynskriuwe yn it blêdermenu Untwikkeld , lyts tusken Blêdwizers en finster . Klik op dizze menu item. In drop-down menu moat no werjûn wurde, mei de neikommende opsjes.
Iepen side mei: Jo kinne de aktive webside yn ien fan 'e oare browsers iepenje op' e hichte fan jo Mac.
Brûkersmaat: Jo kinne selektearje fan mear as in tsientallen foarsjogge brûkers-aginda-wearden wêrûnder ferskate ferzjes fan Chrome, Firefox en Internet Explorer, lykas jo eigen stipe oanfreegje.
Enter Responsive Design Mode : Rendert de aktuele side as it ferskynt op ferskate apparaten en op ferskate skerm-resolúsjes.
Web-ynspeks sjen litte: Laad de haadtafel foar Safari's tools yn, typysk oan 'e boaiem fan jo browser skerm pleatst en de neikommende sekonden befettet: Elements , Network , Resources , Timelines , Debugger , Storage , Console .
Flaterkonsole sjen litte: Begjint ek de dev-ynterface-ynterface, direkt nei de ljepblêd Console dy't ferkeard warskôget, warskôgings, en oare sykbere gegevensgegevens.
Side-side-boarne sjen litte: Iepenet de ljepblêd Ressourcen , wêrtroch boarne koade foar de aktive side wurdt troch dokumint kategorisearre.
Siden Page-boarnen: Dit makket itselde funksje as de opsje " Side-side-boarne ".
Toan Snippet Editor: iepenet in nij finster dêr't jo CSS en HTML-koade ynfiere kinne, de foarkar fan syn útfier op-de-fly.
Fierje ekstra bouwer: Jout de mooglikheid om Safari-útwreidingen te meitsjen of te bewurkjen mei CSS, HTML en JavaScript.
Toanstiden opnij sjen litte: iepenet de ljepblêd fan 'e Timelines en begjint werjefte fan netwurk-oanfragen, oanbiedings- en rendering-ynformaasje en JavaScript-útfier yn echt.
Lege leegers: Laet de folsleine cache op 'e nij opslein op jo hurde skiif.
Caches ynskeakelje: Stopet Safari fan 'e caching sadat alle ynhâld fan' e tsjinner op elke side laden is.
Ofbylding útskeakelje: Feroare ôfbyldings fan 'e rendering op alle websiden.
Stel útskeakelje: Ignorearret CSS-eigenskippen as in side lade.
Java-útskeakelje: beheart Java-eksekúsje op alle siden.
Untbrektingen útskeakelje: Ferbiedt alle ynstallearre taheaksels fan it útfieren fan 'e browser.
Side-spesifike hakken útskeakelje: As Safari is wizige om úteinlik útskeakelje (s) spesifyk foar de aktive webside, sil dizze opsje dizze wizigingen bewarje, sadat de side lade sa't it foardat dizze modifikaasjes ynfierd binne.
Lokaasjebalkeitsrjochtings útskeakelje: Foeget de blêder tagong ta triemmen op jo lokale disks, in aksje dy't standert beheind is foar feiligens redenen.
Diskriminaasjes fan Cross-Origin útskeakelje: Dizze beheinings wurde standert ynsteld om XSS en oare potinsjes te foarkommen. Wol moatte se faak foar tydlike beheinden foar ûntwikkelingsdoelen wêze.
JavaSkript wiskje fan Smart Searchfjild: As it ynskeakele is, jout de mooglikheid om URLs mei javascript te ynfoljen: direkt yn de adresbalke ynfierd.
Behannelje SHA-1 sertifikaten as ûnfeilich: SSL-sertifikaten mei it SHA-1-algoritme wurde algemien beskôge as ûntagonklik en kwetsber.