Integrierte Toolsets fir Webdesigner, Entwéckler a Tester
Zousätzlech zu de meescht Browser-Browser déi sech op de alldeegleche Benotzer konzentréiere wéi beim Surfen am Web surft, këmmeren se och un den Web-Entwéckler, Designers an Qualitéitsspezialisten, déi hëllefe fir Apps a Site déi dës accessibel eraussichen andeems en effiziente Tools direkt an de Browser navigéiert selwer.
Gele sinn déi Deeg wou déi eenzeg Programméier- an Testerinstrumente fonnt goufen an engem Browser erméiglecht Iech eng Quellcode vun enger Säit ze gesinn an näischt méi. Hautdesäiteg Browsers erlaaben Iech nach méi déif Taucher ze maachen, wéi Dir Saachen an Ausféierung vu JavaScript-Fuerderunge bréngt, d'Inspektioun an d'Editioun vun DOM-Elementen abruffen, d'Echtzäitverkéierungsverkéier als Är App oder Säit Léisungen beobachtet fir Engpässen ze identifizéieren, d'CSS-Performance ze analyséieren, fir datt Äre Code net mat vill Gedächtnis oder zevill CPU- Zyklen a vill méi. Vun enger Testerperspektive kënnt Dir reproduzéieren, wéi eng App oder Websäit an verschidden Browseren wéi och op verschiddene Geriichter a Plattformen duerch d'Magie vun der respektiven Design an de Buedembelag. Déi bescht Plaz ass datt Dir all dëst kann maachen ouni Dir Äre Browser ze léisen!
D'Tutorials ënnert Iech ënnert Iech ze kommen wéi Dir dës Entwéckler Tools u verschiddene populäer Webbrowseren zougängst.
Google Chrome
Chrome'gen Entwéckler-Tools erlaben et z'änneren an ze debugzéien, individuell Komponenten proklaméiere fir Performance-Froen z'exponéieren, verschidde Apparaterbilder ze simuléieren, wéi Android, iOS oder iOS auszeféieren an e puer aner nëtzlech Funktiounen ze maachen.
- Klickt op de Chrome Menu Main Taste, markéiert mat dräi horizontalen Linnen an an der oberer rechter Ecke vum Browser.
- Gitt d'Lëscht drop zeréck, drénken de Mauszee méi iwwer d'Option méi Tools .
- E Sub-Menü soll elo erschéngen. Wielt d'Optioun markéiert Developer Tools . Dir kënnt och d'folgend Tastaturkombinatioun benotze fir dësen Menüpunkt: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- D'Chrome-Developer Tools-Uewen interface soll elo angezeigt ginn, wéi an dësem Exempel Skript. Ofhängeg vun der Chrome-Versioun, ass den urspréngleche Layout, deen Dir gesitt, vläicht e bësse méi ënnerschiddlech wéi deen hei presentéiert. Den Haaptspeedpunkt vun den Entwéckler-Tools, déi normalerweis op der Säit oder der rietser Säit vum Écran sinn, sinn déi folgend Tabulden.
Elementer: Gitt d'Fähigkeit fir CSS an HTML Code ze kontrolléieren an och CSS on-the-fly ze veränneren, fir d'Effekter vun Äert Verännerungen an Echtzäit ze gesinn.
Konsole: Chrome's JavaScript Konsole erlaabt direkte Kommandozeechen wéi och Diagnos Debuggen.
Quellen: Léisst Dir Debug JavaScript-Code via eng kraftvoll graphesch Interface.
Netz: kategorizéiert a detailléiert Informatiounen iwwer jidder Zesummenhang an der aktiver Applikatioun oder Säit, wéi och komplette Verfaassung an Äntwert Header wéi och Avance Timing Metriken.
Timeline: Erlaubt eng detailléiert Analyse vun all Aktivitéit, déi am Browser stattfënnt, soubal eng Säit- oder Appléedestellung initiéiert gëtt. - Zousätzlech zu dëse Sektioune kënnt Dir och op d'folgend Tools ugewisen iwwer den >> Ikon, op der rietser Säit vun der Timeline Tab.
Profil: Broken down into CPU Profiler an Heap Profiler Deel, ass komplett iwwerdriwwen Gedächtnisverwendung an allgemeng Exekutioun Zäit vun der aktiver Applikatioun oder Säit.
Sécherheet: Highlights Zertifikatprobleemer an aner Sécherheetsproblemer mat der aktiver Säit oder der Applikatioun.
Ressourcen: Dëst ass wou Dir Cookies, lokal Lagerung, App Cache an aner lokal Datenquellen iwwerpréift, déi vun der aktueller Websäit oder der Applikatioun benotzt ginn.
Audit: Offers Weeër fir d'Dauer an enger Dauer oder enger Dauer vun der Applikatioun ze benotzen. - Device Modus erlaabt Iech déi aktive Säit an engem Simulator ze gesinn dee se genee wéi et an engem vun e puer Dutzend Apparater ze gesinn ass, dorënner verschidde bekannte Android- an iOS Modeller wéi den iPad, iPhone an Samsung Galaxy. Dir kënnt och d'Fäh hunn Empfeelunge fir virgeschloe Screen-Emulatioun unzehuelen fir Är speziell Entwécklung oder Testbedarf anzestellen. Fir den Device Modus op oder weg ze kippen, wielt d'Handy-Symbolik direkt un der lénkser Säit vun der Reiterelement.
- Dir kënnt och Äert Gesiicht an Är Feeler vun Ären Entwéckler Tools benotzen fir éischtklickt op de Menü Knopper representéiert vun dräi vertikal plazéierten Punkten an läit op der rietger Säit vun de sougenannten Tabs. Vun dësem Dropdown-Menü kënnt Dir d'Dock umellen, ze weisen oder verdeelen verschiddenen Tools wéi och méi Avancen wéi zum Beispill e Gerät Inspektor. Dir fannt, datt d'dev-Tools-Interface selwer héich gëtt iwwer d'Astellungen, déi an dësem Deel fonnt ginn, adaptéiert ginn.
Mozilla Firefox
De Firefox Entwéckler Rubrik Firefox enthält Tools fir Designers, Entwéckler a Tester wéi zB e Stil Editrice an Pixel-Target Eythropper.
Recommandéiert Liesen: Déi Top 25 Greasemonkey an Tampermonkey User Scripts
- Klickt op den Haaptmenü Button vun Firefox, representéiert duerch dräi horizontalen Linnen an an der oberer rechter Ecke vum Browserfenster.
- Gitt d'Lëscht drop zeréck, klickt d'Ikon mat Label Developer . Den Web Developer Menu soll elo gewisen ginn, mat den folgenden Optiounen. Dir kënnt feststellen datt déi meescht Menüe mat kléngen Tafelen ofkaafen, déi mat hinnen ass.
Toggle Tools: Affichéiert oder versteet déi Interface Tools vun der Entwéckler, déi normalerweis am Bottom vun der Browserfenou positionéiert ass. Keyboard Verknüpfung: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Enspekter: Erlaabt Iech fir d'aktive Säit en CSS- an HTML Code ze kontrolléieren an z'aktivéieren, souwuel op engem portable Gerät iwwer Fernsehdiskussioun. Klickt Tastatur: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Console: Erlaabt Iech JavaScript Ausdréck an der aktiver Säit auszeféieren an och e diversen Satz vu protokolléierten Donneschden, wéi Sécherheetswarnungen, Netzaufforderungen, CSS-Messagen a méi. Keyboard Verknüpfung: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: De JavaScript-Debugger léisst Iech Fehlzezeechen a Fixen festleeën andeems d'Breakpoints festleet, DOM Knäppchen, Black Boxing extern Quellen a vill méi. Wéi och am Fall vum Inspektor ënnerstëtzt dës Feature och e Fernsehdiskussioun. Keyboard Verknüpfung: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Stil Editor: Erlaabt Iech nei Stylesheets ze erstellen an se mat der aktiver Websäit ze verëffentlechen, oder existéierend Blieder a testen wéi Är Ännerungen an engem Browser just mat engem Klick sinn. Keyboard Verknüpfung: Mac OS X, Windows ( SHIFT + F7 )
Performance: Gitt eng detailléiert Ofschloss vun der Netzwierkleistung, der aktueller Säit vun der aktiver Säit, dem Framework-Daten-, dem JavaScript-Executiouns- a vum Status, dem Blëtz an de Faarwen a vill méi. Keyboard Verknüpfung: Mac OS X, Windows ( SHIFT + F5 )
Netz: Léisert all Netzwierkfuerderung, déi vum Browser initiéiert gëtt, zesumme mat der entspriechender Method, Urspréngung, Typ, Gréisst an Zäit verloselt. Keyboard Verknüpfung: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Developer Toolbar: Op enger enger interaktiver Kommandozeilenverbindung. Gitt Hëllef an den Iwwersetzer fir eng Lëscht vun all verfügbaren Kommandoen an hiren eegene Syntax. Keyboard Verknüpfung: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Gitt d'Fähigkeit fir Web Apps mat engem aktuellen Apparat auszeféieren an auszeféieren fir Firefox OS oder iwwer de Firefox OS-Simulator. Keyboard Verknüpfung: Mac OS X, Windows ( SHIFT + F8 )
Browser Konsole: Gitt déi selwecht Funktionalitéit wéi d' Web Console (kuckt hei uewen). Allerdéngs ass all d'Daten zeréckbezuele fir déi ganz Firefox Applikatioun (dorënner Extensiounen a Funktioune vu Browser-Niveau) am Géigesaz zu der aktiver Websäit. Keyboard Verknüpfung: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Responsive Design View: Erlaabt Iech elo eng Websäit an verschidden Resolutiounen, Layouten an Ausgabegrößen ze kucken fir verschidde Apparater mat Tabletten an Smartphones matzemaachen. Keyboard Verknüpfung: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Zeechnet den Hexcode fir individuell gewielte Pixel.
Scratchpad : Léisst Dir Schreiwe vum JavaScript Code aus engem Pop-Out Firefox -Fenster schreiwen, änneren, integréieren an aus a féieren. Keyboard Verknüpfung: Mac OS X, Windows ( SHIFT + F4 )
Page Source: Den originelle Browser-baséiert Developer-Tool, dës Optioun weist den verfügbaren Sourcecode fir déi aktive Säit an. Keyboard Verknüpfung: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Gitt méi Tools: Gitt d' Sammlung vun Toolboxen vum Web Developer op der offizieller Add-ons vun Mozilla, mat ongeféier engem Dutzend populäre Verlängerungen wéi Firebug a Greasemonkey.
Microsoft Edge / Internet Explorer
Allgemeng bezeechent d' F12 Developer Tools , eng Hommage un der Tastatur, déi d'Interface seit fréier Versiounen vum Internet Explorer gestart huet, ass den Dev-Toolset an IE11 an Microsoft Edge e wäit ewech zanter hirer Grënnung duerch eng ganz handlech Grupp vun Monitore, Debugger, Emulatoren an On-the-fly Compiler.
- Klickt op d'Menüen Méi Aktiounen , duerch dräi Punkten vertrëtt an an der oberer rechter Ecke vun der Browserfenêt. Gitt d'Lëscht drop op d'Optioun markéiert F12 Developer Tools . Wéi ech scho gesot hunn, kënnt Dir och iwwert d' F12 Tastatur ofgeschnidden zougänglech sinn.
- D'Entwécklungsoberfläche soll elo gewisen ginn, typesch am Ufang vun der Browserfenêt. Déi folgend Tools sinn zougänglech, jiddereen eräntbar andeems Dir op seng jeweileg Tabsüberschreitend klickt oder d'Begleetung vun der Tastatur benotzt.
DOM Explorer: Allerdengs kënnt Dir Stylesheets an HTML an der aktiver Säit änneren an d'geännert Resultater als Dir goën. Gitt IntelliSense-Funktionalitéit an autocomplete Code, wann et gülteg ass. Keyboard Verknüpfung: (Ctrl + 1)
Konsole: Gitt d'Fähegkeet fir Debuggen Informatiounen z'ënnerstëtzen inkludéieren Zäiten, Timer, Spure an personaliséiert Messagen iwwert eng integrierter API. Gitt Dir och Code an eng aktive Websäit anzeginn a änneren déi Wäerter zu verschiddenen Variablen an Echtzäit. Keyboard Verknüpfung: (CTRL + 2)
Debugger: Léisst Dir Breakpoints fest a Debugge vun Ärem Code während senger Ausféierung, Zeil duerch d'Linn wann néideg. Keyboard Verknüpfung: (CTRL + 3)
Netz: Léisert all Netzwierkapplikatioun, déi vum Browser initiéiert gëtt, während der Säit Laascht an der Ausféierung inklusive Protokolldetailer, Inhaltstyp, Bandbreedung, a vill méi. Keyboard Verknüpfung: (Ctrl + 4)
Performance: Details Framerate, CPU-Auslagerung an aner performant-bezogene Metriken fir Iech ze hëllefen d'Laaschtzeiten an aner Aktivitéiten ze beschleunigen. Keyboard Verknüpfung: (Ctrl + 5)
Gedächtnis: Dir hëlleft Isolatioun a korrigéiere virgeschloen Erënnerung leeden op der aktueller Websäit andeems Dir eng Zäitschrëft benotzt, mat Snapshots aus verschiddene Zeitintervallen. Keyboard Verknüpfung: (CTRL + 6)
Emulatioun: Weist Iech un wéi déi aktive Säit an verschiddene Resolutiounen an Écranen, Emulatioun vu Smartphones, Tafelen an aner Apparater. Suergt och de Fähig fir de Benotzerbetreiber an d'Orientéierung änneren, an och verschidde Geolocatioun simuléieren andeems en Breet a Längt ageholl gëtt. Keyboard Verknüpfung: (CTRL + 7) - Fir d' Konsole ze kucken während an engem vun den aneren Tools klickt op de Knäppchen Knäppchen mat enger rechter Halterung an der Géigend, déi an der oberer rechter Ecke vun der Interface vun der Entwécklungszesummenaarbecht läit.
- Fir ze schockelen, d'Interface Tools vum Entwéckler ze maachen, sou datt et e separate Fënster gëtt a klickt op de Knäppchen, repräsentéiert duerch zwee Kascading Rectangles oder benotze déi folgend Tastaturkombinatioun: CTRL + P. Dir kënnt d'Tools nees an hirer ursprénglecher Plaz setzen, andeem d' Stréck + P eng zweet Kéier dréckt.
Apple Safari (OS X nëmmen)
Safari's diverse Dev Toolset spigelt déi grouss Developer Community déi benotzt en Mac fir hir Gestioun an Programméierungsbedürfnisser. Zousätzlech zu enger kraftvoller Konsole an traditionell Protokolléierung an Debugging-Funktionalitéiten gëtt och e liichtfach ze benotzen Design respektéieren an e Tool fir Äert eegent Browser extensiounen ze kréien.
- Klickt op Safari am Menu vum Browser, deen am Uewerkäerjeng steet. Wann de Fënster opmaachen ersaat, wielt Preferences . Dir kënnt och déi folgend Tastaturkombination anhuelen an dës Menüskaart: COMMAND + COMMA (,)
- D'Safari's Preferences- Interface soll elo gewisen ginn, iwwerlafen Äre Browserfenster. Klickt op d' Advanced " Ikon", déi op der lénks lénks Säit vum Header läit.
- Déi erweidert Viraussetzungen sollen elo sichtbar sinn. Am Bottom vun dësem Écran ass eng Optioun markéiert Den Develop Develop Menu an der Menübar , accompagnéiert vun engem Checkbox. Wann et an der Këscht kee Kontrollkäschte gëtt, klickt op eemol mol eng Plaz.
- Klickt d' Preferenz- Interface un klickt op de roude "x" fonnt an der ieweschter lénkser Ecke.
- Dir sollt elo eng nei Optioun am Browsermenü " Develop Developer " bezeechnen tëschent Lieser an dem Fenster . Klickt op dës Kaart. E Dropdown-Menü sollt elo gewisen ginn, mat den folgenden Optiounen.
Opmaache mat der Säit: Erlaubt Dir d'aktive Websäit an engem vun den aneren Browser ze schécken, déi de Moment op Ärem Mac installéiert sinn.
Benotzer Agent: Léisst Dir wielen wéi iwwert e Dutzend vordefënt User Agent Wäerter, wéi och verschidde Versionen vu Chrome, Firefox an Internet Explorer, an och Äert eegene String definéieren.
Enter Responsive Design Mode : Rendez d'aktuelle Säit wéi et op verschiddene Geräter a bei verschiddene Screen Resolutions.
Show Web Inspector: Launchert d'Haaptinterface fir Safari's dev-Tools, déi normalerweis am Bottom vun Ärem Browser-Écran platzéiert sinn an déi folgend Rubriken: Elements , Network , Resources , Timelines , Debugger , Storage , Console .
Show Error Console: De Start Tool entwéckelt och direkt op der Tab " Console" déi Fehler, Warnungen a aner sichtbar Protokoll'en affichéiert.
Informatiounsquell uweisen: Opersäits de Ressourcen-Ressourcen , déi Quellcode fir déi aktive Säit affichéiert.
Ressourcen vun der Säit weisen: Fëllt déi selwecht Funktioun wéi d'Option " Page Source" .
Show Snippet Editor: Op enger neier Fënster kënnt dir CSS- an HTML Code eingeben, fir hir Output on-the-fly ze kucken.
Extension Builder weisen: Gitt d'Fäh, Erweiderunge fir Safari mat CSS, HTML an JavaScript z'änneren oder ze änneren.
Wann dësst Haische markéiert ass, fänkt d' Timelines- Tab op a fänkt u Reklammen vun Erausfuerderungen, Layout a Rendering-Informatioun an och JavaScript aus.
Eidel Cache: Löscht den ganzen Cache deen der momentan op der Festplack gespeichert gëtt.
Cache ausmaachen: Stoppt Safari aus dem Cache, sou datt all Inhalt vun der Server op all Säit Laden erausgeréckelt gëtt.
Engersäits Biller: Verhënnerert Biller vu Reseau op all Websäiten.
Disable Styles: ignoréiert CSS-Propéren, wann eng Säit luede gëtt.
Auswerfen vun JavaScript: Enregistréiert JavaScript Ausféierung op all Säiten.
Extremable ausmaachen: Verbueden all installéiert Bäihëllefen aus dem Laf am Browser.
De Site-spezifesche Hacks ausmaachen: Wann Safari geännert gouf fir explizit Problematik op d'aktive Websäit ze behandelen, dës Ännerung blockéiert dës Ännerungen, sou datt d'Säit lues esou wéi virun dësem Modifikatioun agefouert gouf.
Lokal Lokal Beschränktes z'aktivéieren: Gitt den Browser fir Zougang zu Dateien op Äre lokalen Festplazen ze hunn, eng Aktioun, déi vu Standarde vu Sécherheetsgrënn limitéiert ass.
Diskrete Keefegkeetsbeschränkungen aktivéieren: Dës Restriktioune ginn standardiséiert fir XSS an aner potenziell Gefore ze verhënneren. Allerdéngs mussen se oft fir temporär behënnert sinn fir Entwécklungsziler.
Gitt JavaScript aus Smart Search Field: Wann dës Säit aktivéiert ginn, gëtt d'Méiglechkeet fir URLs mam Javascript z'änneren: direkt an der Adressbar ze integrieren.
Gitt SHA-1 Zertifikaten als Onsécherheet: SSL-Zertifikaten déi den SHA-1 Algorithmus benotzen, sinn allgemeng als onofhängeg a vulnär.