Integritaj iloj por TTT-desegnistoj, programistoj kaj testistoj
Krom la plej multaj retumiloj, kiuj koncentras al la ĉiutaga uzanto, kiuj serĉas surflui la Retejon, ili ankaŭ servas al la programistoj de la retejo, diseñadores kaj profesiaj certigiloj, kiuj helpas konstrui la programojn kaj ejojn, kiujn tiuj uzantoj aliĝas integrante potencajn ilojn en la retumilojn ili mem.
Finitaj estas la tagoj, kie la sola programado kaj testado de iloj trovitaj ene de retumilo ebligis al vi vidi fontkodon kaj nenion pli. La retumiloj de hodiaŭ permesas al vi preni multe pli profundecon per farado de aferoj kiel ekzekuti kaj elpurigi JavaScript-fragmentojn, inspektadon kaj redaktadon de DOM-elementoj, viglado de reala tempo retpoŝta trafiko kiel via programo aŭ paĝo ŝarĝas por identigi botelojn, analizante CSS-rendimenton, certigante, ke via kodo estas ne utiligante tro da memoro aŭ tro multajn CPU- ciklojn, kaj multe pli. De sperta perspektivo, vi povas reprodukti kiel aplikaĵejo aŭ retpaĝaro repagas en malsamaj retumiloj, kaj ankaŭ sur malsamaj aparatoj kaj platformoj tra la magio de respondema dezajno kaj enkonstruitaj simuladoj. La plej bona parto estas, ke vi povas fari ĉion ĉi sen forgesi vian retumilon!
La sekvaj seminarioj trairas vin kiel kiel aliri ĉi tiujn programilojn en pluraj popularaj retumiloj.
Google Chrome
La iloj de desarrolladores de Chrome ebligas redakti kaj debugi la kodon, aŭskulti individuajn komponantojn por elmontri agadon, simuli malsamajn aparatajn ekranojn, inkluzive tiujn, kiuj funkcias Android aŭ iOS , kaj plenumas multajn aliajn utilajn funkciojn.
- Alklaku la ĉefan butonon de Chrome, markita per tri horizontalaj linioj kaj situas en la supra dekstra angulo de la retumilo.
- Kiam la malpleniga menuo aperas, ŝvebu vian muskursoron super la Pli iloj- opcio.
- Sub-menuo nun aperos. Elektu la opcion etikeditajn Programojn . Vi povas ankaŭ uzi la sekvan klavaron en ĉi tiu menuo: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- La interfaco de Chrome-Programilo Iloj nun estu montrata, kiel montriĝas en ĉi tiu ekzemplo ekrankopio. Depende de via versio de Chrome, la komenca aranĝo, kiun vi vidas, povas esti iomete malsama al la prezentita ĉi tie. La ĉefa centro de la programiloj, tipe situanta ĉe la fundo aŭ dekstra flanko de la ekrano, enhavas la jenajn pestaĵojn.
Elementoj: Provizas la kapablon inspekti CSS kaj HTML-kodon tiel kiel redakti CSS-on-the-fly, vidante la efikojn de viaj ŝanĝoj en reala tempo.
Konzolo: la JavaScript-konzolo de Chrome ebligas rektan komandan eniron kaj diagnozajn elpurigadon.
Fontoj: Lasu vin elpurigi JavaScript-kodon per potenca grafika interfaco.
Reto: kategorizas kaj montras detalajn informojn pri ĉiu rilata operacio en la aktiva aplikaĵo aŭ paĝo, inkluzive de kompletaj petoj kaj respondaj titoloj kaj ankaŭ progresintaj tempoj metrikoj.
Kronologio: Permesas profundan analizon de ĉiu agado, kiu okazas ene de la retumilo tuj kiam paĝo aŭ aplikaĵo pri ŝarĝo estas komencita. - Aldone al ĉi tiuj sekcioj, vi povas ankaŭ aliri la jenajn ilojn per la ikono, situanta dekstre de la langeto-paĝeto.
Profilo: Rompita en CPU-prilaborilo kaj Heap-profiler- sekcioj, provizas ampleksan memor-uzadon kaj ĝeneralan ekzekutan tempon de la aktiva apliko aŭ paĝo.
Sekureco: Elstaras atestajn problemojn kaj aliajn sekurecajn aferojn kun la aktiva paĝo aŭ aplikaĵo.
Rimedoj: Jen kie vi povas inspekti kuketojn, lokan stokadon, aplikaĵon, kaj aliajn lokajn datumojn, uzitajn de la aktuala retejo aŭ aplikaĵo.
Aŭditorioj: Proponas manierojn optimigi paĝon aŭ ŝarĝan tempon kaj ĝeneralan agadon. - Device Mode ebligas al vi vidi la aktivan paĝon en simulilo, kiu pruvas ĝin preskaŭ kiel ĝuste en unu el pli ol dekduo da aparatoj, inkluzive de multaj konataj Android kaj iOS-modeloj kiel ekzemple la iPad, iPhone kaj Samsung Galaksio. Vi ankaŭ donas la kapablon emular kutimajn ekranajn rezoluciojn por persvadi viajn apartajn disvolviĝojn aŭ provojn. Alŝalti Device Mode ekstere kaj ekstere, elektu la poŝtelefonon situantan rekte maldekstre de la pestaña Elementoj .
- Vi povas ankaŭ agordi la aspekton kaj senton de via programilo-iloj per unua klako sur la butono de la menuo reprezentita de tri vertikalaj punktoj kaj situanta sur la malproksima dekstra flanko de la menciitaj pestañas. De ene de ĉi tiu malsupren-menuo, vi povas anstataŭigi la dokon, montri aŭ kaŝi diversajn ilojn, kaj ankaŭ lanĉi pli progresintajn elementojn kiel ekzemple inspektilo de aparato. Vi trovos, ke la interfaco de iloj mem estas tre agordebla per la agordoj trovitaj en ĉi tiu sekcio.
Mozilla Firefox
La sekcio de Reteja Ellaboranto de Firefox inkluzivas ilojn por desegnistoj, programistoj kaj testistoj kiel ekzemple redaktilo de stilo kaj piksel-orientiĝanta okulo.
Rekomendita Legado: La Supro 25 Greasemonkey kaj Tampermonkey Uzaj Skriptoj
- Alklaku la ĉefan butonon de Firefox, reprezentita de tri horizontalaj linioj kaj situanta en la supra dekstra angulo de la retumilo.
- Kiam la malpleniga menuo aperas, elektu la ikonon etikedita Ellaboranto . La TTT-programilo- menuo nun devas esti montrata, enhavanta la jenajn eblojn. Vi rimarkos, ke la plej multaj menuoj havas klavŝlavojn asociitajn kun ili.
Ŝalti Ilojn: Montras aŭ kaŝas la interfacan ilon de la programisto, tipe posicionata ĉe la malsupro de la retumilo. Ŝparvojo de klavaro: Mac VIN 10a ( ALT (OPTION) + COMMAND + I ), Vindozo ( CTRL + SHIFT + Mi )
Inspektisto: Permesas vin inspekti kaj / aŭ tweak CSS kaj HTML-kodon en la aktiva paĝo same kiel en portebla aparato per remota elpurigado. Ŝparvojo de klavaro: Mac OS X ( ALT (OPTION) + COMMAND + C ), Vindozo ( CTRL + SHIFT + C )
Retejo-konzolo: Permesas al vi ekzekuti JavaScript-esprimojn ene de la aktiva paĝo, kaj ankaŭ revizii diversan serion de ensalutintaj datumoj inkluzive de sekurecaj avizoj, retoj, mesaĝoj de CSS kaj pli. Ŝparvojo de klavaro: Mac OS X ( ALT (OPTION) + COMMAND + K ), Vindozo ( CTRL + SHIFT + K )
Depuugilo: La JavaScript Debugger ebligas punkti kaj korekti difektojn per fiksado de punktoj, inspektante DOM-nodojn, nigrajn boksajn eksterajn fontojn kaj multe pli. Kiel estas la kazo de la Inspektisto , ĉi tiu funkcio ankaŭ subtenas malproksiman elpurigon. Ŝparvojo de klavaro: Mac OS X ( ALT (OPTION) + COMMAND + S ), Vindozo ( CTRL + SHIFT + S)
Stilo-redaktilo: Permesas al vi krei novajn stilojn kaj korpigi ilin per la aktiva retejo, aŭ redakti ekzistantajn foliojn kaj provu, kiel viaj ŝanĝoj repagas en retumilo kun nur unu klako. Ŝparvojo de klavaro: Mac VIN 10a, Vindozo ( SHIFT + F7 )
Elfaro: Provizas detalajn rompojn de la reto de la aktiva paĝo, kadro-datumoj, tempo kaj ŝtato de ekzekuto de Javascript, pentri ekbriligadon kaj multe pli. Ŝparvojo de klavaro: Mac VIN 10a, Vindozo ( SHIFT + F5 )
Reto: Listigas ĉiun reton-peton komencitan de la retumilo kune kun la responda metodo, devenaj domajno, tipo, grandeco kaj tempo plu. Klavoplanko: Mac VIN X ( ALT (OPCIO) + COMMAND + Q ), Vindozo ( CTRL + SHIFT + Q )
Programisto Ilobreto: Malfermas interaga komandlinia interpretilo. Enmetu helpon al la interpretisto por listo de ĉiuj haveblaj komandoj kaj ĝia konvena sintakso. Ŝparvojo de klavaro: Mac VIN 10a, Vindozo ( SHIFT + F2 )
WebIDE: Provizas la kapablon krei kaj ekzekuti TTT- ejojn per reala aparato kiu funkcias Firefox-OS aŭ per Firefox OS Simulator. Ŝparvojo de klavaro: Mac VIN 10a, Vindozo ( SHIFT + F8 )
Foliumilo-konzolo: Provizas la saman funkciojn kiel la TTT-konzolo (vidu supre). Tamen, ĉiuj datumoj revenitaj estas por la tuta Firefox-apliko (inkluzive de etendoj kaj retumilaj niveloj) kontraŭe al nur la aktiva retejo. Ŝparvojo de klavaro: Mac VIN 10a ( SHIFT + COMMAND + J ), Vindozo ( CTRL + SHIFT + J )
Respondema Desegna Vido: Permesas al vi tuj rigardi Retpaĝon en malsamaj rezolucioj, planoj kaj ekranaj grandecoj por imiti multoblajn aparatojn inkluzive de tablojdoj kaj inteligentaj telefonoj. Ŝparvojo de klavaro: Mac VIN 10a ( ALT (OPTION) + COMMAND + M ), Vindozo ( CTRL + SHIFT + M )
Eyedropper: Montras la heksan kolorkodon por individue elektitaj pikseloj.
Scratchpad : Permesu skribi, redakti, integri kaj ekzekuti fragmentojn de JavaScript-kodo de ene de popo-ekstere fenestro de Firefox. Ŝparvojo de klavaro: Mac VIN 10a, Vindozo ( SHIFT + F4 )
Paĝo Fonto: La originala programilo bazita en la retumilo, ĉi tiu opcio simple montras la haveblan fontkodon por la aktiva paĝo. Ŝparvojo de klavaro: Mac VIN 10a ( COMMAND + U ), Vindozo ( CTRL + U )
Akiri pliajn ilojn: Malfermas la kolekton de Toolbox de Reteja Programisto en la oficiala oficiala retejo de Mozilla, kiu enhavas ĉirkaŭ dekduon de popularaj etendoj kiel Firebug kaj Greasemonkey.
Microsoft Edge / Interreta Esploristo
Komune nomata F12 Developer Tools , omaĝo al la klavara ŝparvojo, kiu lanĉis la interfacon de antaŭaj versioj de Interreto Esploristo, la dev-ŝlosilo en IE11 kaj Microsoft Edge venis longan vojon ekde ĝia komenco per ofertado de tre oportuna grupo de monitoroj, diskutiloj, emuladistoj, kaj sur-la-muŝaj kompililoj.
- Alklaku la menuon Pli agoj , reprezentita de tri punktoj kaj situanta en la supra dekstra angulo de la retumilo. Kiam la falmenuo aperas, elektu la opcion etikedita F12 Developer Tools . Kiel mi jam menciis, vi ankaŭ povas aliri la ilojn per la klavaro F12- klavaro.
- La disvolviĝo interfaco nun devas esti montrata, ĝenerale ĉe la fundo de la retumilo. La jenaj iloj estas haveblaj, ĉiu alireblaj per alklako sur ilia respektiva pestaña aŭ uzante la akompanatan klavaron.
DOM-esplorilo: Permesas redakti stilojn kaj HTML en la aktiva paĝo, prezentante la modifitajn rezultojn, kiel vi iras. Ĝi uzas la funcionalidad de IntelliSense al la autocompleta kodo kie estas aplikebla. Ŝparvojo de klavaro: (CTRL + 1)
Konzolo: Provizas la kapablecon submeti informojn pri elpurigado inkluzive de kalkuliloj, temporiziloj, spuroj, kaj personecigitaj mesaĝoj per integra API. Ankaŭ, vi permesas injekti kodon en aktivan TTT-paĝon kaj modifi la valorojn atribuitajn al individuaj variabloj en reala tempo. Ŝparvojo de klavaro: (CTRL + 2)
Depurador: ĝi permesas al vi agordi rompojn kaj elpurigi vian kodon dum ĝi ekzekutas, linio laŭ linio, se necese. Ŝparvojo de klavaro: (CTRL + 3)
Reto: Listigas ĉiun reton-peton komencitan de la retumilo dum paĝo-ŝarĝo kaj ekzekuto, inkluzive de protokolaj detaloj, enhavo, larĝa uzado kaj multe pli. Ŝparvojo de klavaro: (CTRL + 4)
Elfaro: Detaloj de kadraj indicoj, CPU-uzado kaj aliaj agrikulturaj metrikoj por helpi vin akceli paĝojn kaj aliajn agadojn. Ŝparvojo de klavaro: (CTRL + 5)
Memoro: ĝi helpas al vi izoli kaj korekti eblajn memorojn pri la aktuala TTT-paĝo, montrante tempon de uzado de memoro kune kun instantáneos de malsamaj intervaloj. Ŝparvojo de klavaro: (CTRL + 6)
Emulado: Montras al vi kiel la aktiva paĝo repagus en diversaj rezolucioj kaj ekranecimoj, emurante smartphones, tablojdojn kaj aliajn aparatojn. Ĝi ankaŭ havigas la kapablon modifi la agenton de uzanto kaj paĝ-orientiĝo, kaj ankaŭ simuli malsamajn geolokadojn enirante latitudon kaj longitudon. Ŝparvojo de klavaro: (CTRL + 7) - Por montri la Konzolon dum iu ajn el la aliaj iloj, klaku sur la kvadrata butono kun dekstra krampo ene de ĝi, lokita en la supra dekstra angulo de la evoluiga ilo-interfaco.
- Por malhelpi, la interfacila ilo de la programisto do iĝas aparta fenestro, alklaku la butonon reprezentitan per du akvofalaj rektanguloj aŭ uzu la sekvan klavaron: CTRL + P. Vi povas anstataŭigi iliajn ilojn en sia originala loko premante CTRL + P.
Apple Safaro (VIN X nur)
La diversa servilo de Safaro reflektas la grandan komunumon de la programistoj, kiuj uzas Mac por sia dezajno kaj programado. Aldone al potenca konzolo kaj tradiciaj ensalutado kaj elpurigado, facileca respondema dezajno kaj ilo por krei viajn proprajn retumilojn ankaŭ provizas.
- Alklaku sur Safaro en la retumilo, lokita ĉe la supro de via ekrano. Kiam la falmenuo aperas, elektu Preferojn . Vi ankaŭ povas uzi la sekvan klavaron en ĉi tiu menuo: COMMAND + COMMA (,)
- La interfaco de Safaro's Preferences nun devus esti montrata, transmetante vian retumilon. Klako sur la Altnivela ikono, lokita sur la malproksima dekstra flanko de la kaplinio.
- La Altnivelaj preferoj nun estu videblaj. Ĉe la malsupro de ĉi tiu ekrano estas opcio etikedita ĉe menuo Show Develop en menuo , akompanata de ĉeko. Se ne ekzistas markilo en la skatolo, klaku sur ĝi unufoje por meti unu tie.
- Fermu la Interfacon de Agordoj klakante sur la ruĝa 'x' trovita en la supra maldekstra angulo.
- Vi nun rimarku novan eblon en la retumila menuo nomata Evoluado , lokita inter Legosignoj kaj Fenestro . Alklaku ĉi tiun menuon. Malplena menuo nun devas esti montrata, enhavanta la jenajn eblojn.
Malferma Paĝo Kun: Permesas al vi malfermi la aktivan Retpaĝon en unu el la aliaj retumiloj nun instalitaj en via Mac.
Uzanto-Agento: Permesu al vi elekti el pli ol dekduo de difinitaj agentoj de uzanto antaŭdifinitaj, inkluzive plurajn versiojn de Chrome, Firefox kaj Interreta Esploristo, kaj ankaŭ difini vian propran ŝnuron.
Enmetu Respondema Dezajno : Redonas la nunan paĝon, kiel ĝi aperus en diversaj aparatoj kaj ĉe malsamaj ekranaj rezolucioj.
Montru TTT-inspektiston: lanĉas la ĉefan interfacon por la devaj aparatoj de Safaro, kutime metitaj ĉe la malsupro de via retumilo kaj enhavas la sekvajn sekciojn: Elementoj , Reto , Rimedoj , Templinoj , Depurador , Stokado , Konsolo .
Montri eraron-konzolon: Ankaŭ lanĉas la interfaco de iloj de dev, rekte al la pestaña Konzolo, kiu montras erarojn, avertojn kaj aliajn serĉeblajn datumojn.
Montri paĝan fonton: malfermas la rimedojn , kiu montras fontkodon por la aktiva paĝo kategoriita per dokumento.
Montru paĝajn rimedojn: plenumas la saman funkcion kiel la Montriĝo Paĝo Fonto opcion.
Montri fragmenton de redaktilo: malfermas novan fenestron, kie vi povas eniri CSS kaj HTML-kodon, antaŭrigardante ĝian elsendon.
Montri Etendaĵon-Konstruisto: Provizas la kapablon krei aŭ redakti Safari-etendojn per CSS, HTML kaj JavaScript.
Montri Kronikon Registrado: Malfermas la Timelines- langeton kaj komencas montri retajn petojn, aranĝojn kaj bildojn de informo tiel kiel ekzekuto de JavaScript en reala tempo.
Malplenaj Kokoj: Forigas la tutan kaŝmemoron nuntempe konservitan en via malmola disko.
Malebligu Cachojn: Ĉesu Safaron el kokado por ke ĉiu enhavo ricevu de la servilo sur ĉiu paĝo ŝarĝo.
Malebligi Bildojn: Malhelpas bildojn el bildoj en ĉiuj TTT-paĝoj.
Malŝalti Stilojn: Ignoru CSS-proprietojn kiam paĝo ŝarĝiĝas.
Malŝalti JavaScript: Restriktas JavaScript ekzekuto en ĉiuj paĝoj.
Malebligi etendojn: Malhelpas ĉiujn instalitajn etendojn de kurado ene de la retumilo.
Malebligu la specifajn Hacks-ejon: se Safaro estis modifita por eksplicite manipuli temojn specifajn al la aktiva Retpaĝo, ĉi tiu opcio blokos tiujn ŝanĝojn por ke la paĝo ŝarĝiĝu kiel ĝi estus antaŭ ol ĉi tiuj modifoj estas enkondukitaj.
Malebligu lokajn dosierajn restriktojn: Permesas al la retumilo havi aliron al dosieroj en viaj lokaj diskoj, ago, kiu estas restriktita defaŭlte pro sekurecaj kialoj.
Malebligi Kruc-Originajn Restriktojn: Ĉi tiuj limigoj estas metitaj defaŭlte por eviti XSS kaj aliajn eblajn danĝerojn. Tamen, ili ofte bezonas esti senaktive provizataj por evoluaj celoj.
Permesu JavaScript de Smart Search Field: Kiam ebligita, ebligas eniri URLojn kun Javaskripto: korpigita rekte en la adreson.
Trakti SHA-1 Atestojn kiel Sekurecaj: SSL-atestiloj uzantaj la algoritmon de SHA-1 estas vaste konsiderataj kiel nekonataj kaj vundeblaj.