Web diseinatzaile, garatzaile eta probatzaileentzako tresna-osagarriak
Nabigatzaileen arduradunik gehienak eguneroko erabiltzaileek Webguneen bila dabiltzanez, Web arduradunek, diseinatzaileek eta kalitatezko aseguru profesionalek ere laguntza ematen diete erabiltzaile horiek sartzen ari diren aplikazioak eta guneak garatzen laguntzen duten tresna indartsuak integratzeko nabigatzaileetan. beraiek.
Gone arakatzailean aurkitutako programazio eta azterketa tresnek soilik baimentzen dute orri bat iturburu-kodea ikusi eta ezer gehiago ikusteko. Gaur egungo arakatzaileek Murgilketa sakonago bat egitea ahalbidetzen dute, adibidez, JavaScript-eko mozkinak exekutatzea eta ezabatzea, DOM elementu ikuskatzea eta editatzea, denbora errealean sareko trafikoa kontrolatzea, aplikazioa edo orrialdeak kargen-blokeoak identifikatzea, CSS errendimendua aztertzea, zure kodea ziurtatzea Memoria gehiegi edo gehiegi CPU zikloak ez erabiltzea, eta askoz gehiago. Prozesuen ikuspegitik, aplikazio edo web orri bat nabigatzaile desberdinetan eta gailu eta plataformetan nola egiten den erreproduzitu ahal izango duzu diseinu sentikorren eta eraikitako simuladoreen magiaren bidez. Zati onena da hori guztia egin dezakezu zure arakatzailea utzi beharrik gabe!
Beheko tutoretzak azpiegitura popularretako zenbait tresna garatzaileei nola sartuko zaizkizue.
Google Chrome
Chrome-ren garatzaileentzako tresnak editatzeko eta arazteko kodea aukera ematen du, banakako osagaiak ikuskatzeko gaiak erakusteko, gailuko pantailetan simulatzeko, Android edo iOS exekutatzen dituztenak barne, eta beste hainbat funtzio erabilgarri.
- Egin klik Chrome menuko menu nagusian, hiru lerro horizontalekin markatuta eta arakatzailearen goiko eskuinaldean kokatuta.
- Goitibeherako menuan agertzen denean, sagua kurtsorea mugitu Tresna gehiago aukeran.
- Azpimenu bat agertu behar da orain. Aukeratu Garatzailea tresna gisa markatutako aukera. Laster-tekla hau ere erabil dezakezu menu-elementu honen ordez: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Chrome Garatzaileen tresnak interfazea bistaratu behar da, adibideen adibide gisa. Chrome-ren bertsioaren arabera, ikusten duzun hasierako diseinua pixka bat desberdina izan daiteke hemen aurkezten denetik. Garatzaileen tresna nagusiak, pantailaren beheko edo eskuineko aldean kokatzen direnak, honako fitxak dituzte.
Elementuak: CSS eta HTML kodea ikuskatzeko eta CSS editatzeko gaitasuna ematen du, zure aldaketak denbora errealean ikusiz.
Kontsola: Chrome-ren JavaScript kontsola zuzeneko komandoen sarrera eta diagnostiko arazteko aukera ematen du.
Iturriak: JavaScript kodea arazteko aukera ematen dizu interfaze grafiko indartsuaren bidez.
Sarea: Aplikazio aktiboan edo orrialdetan erlazionatutako eragiketa bakoitzari buruzko informazio zehatza sailkatzen eta erakusten du, eskaera osatua eta erantzunen goiburuak eta denborazko metodo aurreratuak barne.
Denbora-lerroa: Arakatzailean gertatzen den jarduera bakoitzaren azterketa sakona egitea ahalbidetzen du orri edo aplikazio karga eskaera hasteko. - Atal horiez gain, tresna hauek ere sar ditzakezu: >> ikonoa, Timeline fitxan dagoen eskuinaldean.
Profila: PUZaren profilerako eta Heap profilerako ataletan banatuta, aplikazio aktibo edo orriaren memoria orokorra eta exekuzio denbora orokorra eskaintzen ditu.
Segurtasuna: Ziurtagirien arazoak eta segurtasuneko beste arazo batzuk nabarmentzen dira orri aktiboan edo aplikazioan.
Baliabideak: Hemen dago cookieak, tokiko biltegiratzea, aplikazioen cachea eta uneko web orrialdean erabilitako tokiko datu-iturriak.
Egiaztapenak: orrialde edo aplikazio baten karga-denbora eta errendimendu orokorra optimizatzeko moduak eskaintzen ditu. - Gailu moduak aukera ematen du simulazio batean orri aktiboa ikusteko, dozena gailu baino gehiagotan agertuko den bezala, besteak beste, Android eta iOS modelo ezagunak, hala nola, iPad, iPhone eta Samsung Galaxia. Pantaila ebazpen pertsonalizatuak pertsonalizatzeko gaitasuna ematen zaizu zure garapen edo probako beharretara egokitzeko. Gailu modua aktibatzeko edo desaktibatzeko, hautatu Elementu mugikorraren ezkerreko zuzenean dagoen telefono mugikorraren ikonoa.
- Gainera, zure garatzaileen tresnen itxura eta sentimendua pertsonalizatu ahal izango dituzu, bertatik bertikalki kokatutako hiru puntutatik irudikatutako menu-botoian klikatuz eta aipatutako tabuladen eskuinaldean kokatuta. Goitibeherako menuan, atrakalea berrezarri, erakutsi edo ezkutatu tresna ezberdinak eta elementu aurreratuagoak abiarazi ditzakezu, adibidez, gailuen ikuskatzailea. Dev interfazearen interfazea oso pertsonalizagarria dela ikusiko duzu atal honetan ezarritako ezarpenen bidez.
Mozilla Firefox
Firefoxen Web Developer atalak diseinatzaileentzako, garatzaileentzako eta probako tresnak ditu, hala nola estilo-editorea eta pixel-targeting eyedropper.
Gomendatutako irakurketa: The Top 25 Greasemonkey eta Tampermonkey User Scripts
- Egin klik Firefoxen menu nagusiko botoiarekin, hiru lerro horizontalek irudikatuta eta nabigatzailearen leihoaren goiko eskuinaldean kokatuta.
- Goitibeherako menuan agertzen denean, hautatu Garatzailea . Web Developer menua bistaratu behar da, aukera hauei dagozkienak. Menuko elementu gehienek haiekin loturiko laster-teklak dituzte.
Toggle Tools: Garatzaileen tresnen interfazea bistaratzen edo ezkutatzen du, normalean arakatzailearen leihoaren behealdeko aldean. Teklatu lasterbidea: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Ikuskatzaile: CSS eta HTML kodearen ikonoa eta / edo orrialde aktiboan eta gailu eramangarrian urruneko arazketa baten bidez ikuskatu eta / edo aldatzeko aukera ematen du. Teklatu lasterbidea: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web kontsolan: Orri aktiboan JavaScript esamoldeak exekutatzeko eta saioen datu multzo desberdinak berrikusteko aukera ematen du, besteak beste, segurtasun-abisuak, sareko eskaerak, CSS mezuak eta askoz gehiago. Teklatu lasterbidea: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript Debugger-ek aukera ematen dizu akatsak zehazteko eta konpontzeko, puntu-puntuak ezarriz, DOM nodoak ikuskatuz, boxeoa kanpoko iturri beltza eta askoz gehiago. Inspektorearekin gertatzen den bezala, funtzio honek urruneko arazketa ere onartzen du. Teklatu lasterbidea: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Estilo-editorea: Estilo-orri berriak sortzeko eta web orri aktiboarekin sartzeko aukera ematen du, edo lehendik dauden orriak editatu eta probatu zure aldaketak arakatzailean nola egin klik bakarrean. Teklatuko lasterbidea: Mac OS X, Windows ( SHIFT + F7 )
Errendimendua: orri aktiboaren sareko errendimendua, fotograma-datuen datuak, JavaScript exekuzio-denbora eta egoera, margotzeko keinukaria eta askoz gehiago xehetasun zehatza eskaintzen du. Teklatuko lasterbidea: Mac OS X, Windows ( SHIFT + F5 )
Sarea: arakatzaileak abiarazitako eskaera bakoitzeko zerrendak zerrendatzen ditu, dagokion metodoa, jatorria duen domeinua, mota, tamaina eta denbora igaroz. Teklatu lasterbidea: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Garatzailea tresna-barra: komando lerro interaktibo interaktiboa irekitzen du. Sartu laguntza interpretean eskura dauden komandoen zerrenda eta beren sintaxi egokia. Teklatu lasterbidea: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Webguneak sortzeko eta exekutatzeko gaitasuna eskaintzen du, Firefox OS edo Firefox OS simulator erabiliz benetako gailu baten bidez. Teklatu lasterbidea: Mac OS X, Windows ( SHIFT + F8 )
Arakatzailearen kontsola: web kontsolaren funtzionaltasun bera ematen du (ikus goian). Hala ere, datu guztiak itzuli dira Firefox aplikazio osoa ( luzapenak eta arakatzailearen mailako funtzioak barne), Web orri aktiboaren aurka. Teklatu lasterbidea: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Diseinu sentikorren erantzuna: web orrialde bat berehala ebazpen, diseinu eta pantailaren tamainetan ikusteko gailu anitzek gailuak eta telefono mugikorrak imitatzeko aukera ematen die. Teklatuko lasterbideak: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: hautatutako pixelen hex koloreen kodea bistaratzen du.
Scratchpad : aukera ematen du JavaScript kodeen zatiak idatzi, editatu, osatu eta exekutatu pop-out Firefox leiho baten barruan. Teklatuko lasterbideak: Mac OS X, Windows ( SHIFT + F4 )
Orriaren iturburua: jatorrizko arakatzailean oinarritutako garatzaileen tresna, aukera hau orrialde aktiboaren iturburu-kodea bakarrik bistaratzen du. Teklatu lasterbidea: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Talde gehiago tresnak: Mozilla-ren gehigarrien webgune ofizialeko Web Developer-en Toolbox bildumak irekitzen du, adibidez, Firebug eta Greasemonkey dozena.
Microsoft Edge / Internet Explorer
Normalean F12 Developer Tools izenekoak , Internet Explorer-en lehen bertsioetatik abiatutako laster- teklariaren omenez egindako aipamenak, IE11 eta Microsoft Edge-ren dev toolsetek bide luzea egin dute hasieratik, oso erabilgarriak izan baitira. monitoreak, araztegiak, emuladoreak eta on-the-fly konpilatzaileak.
- Egin klik Ekintza menuen menuan, hiru puntutan irudikatuta eta arakatzailearen leihoaren goiko eskuinaldean kokatuta. Goitibeherako menuan agertzen denean, hautatu F12 Developer Tools izeneko aukera. Aipatu dudan bezala, F12 teklatuko lasterbideen bidez ere sar zaitezke.
- Garapen interfazea bistaratu behar da, normalean nabigatzailearen leihoaren behealdean. Tresna hauek daude erabilgarri, bakoitza bere fitxan dagoen edozein tituluetan klikatuz edo teklatu lasterbidearekin batera.
DOM Explorer: estilo-orriak eta HTML orri aktiboetan editatzeko aukera ematen du, aldaketa-emaitzak bukatzen ari zaren bitartean. IntelliSense funtzionalitatea erabiltzen du, dagokion kodea automatikoki osatzeko. Teklatuaren lasterbidea: (CTRL + 1)
Kontsola: arazketa-informazioa bidaltzeko gaitasuna ematen du, kontagailuak, denborontziak, aztarnak eta pertsonalizatutako mezuak, integratutako API baten bidez. Gainera, web orri aktibo batean sartu dezakezu eta aldatu denbora errealean banakako aldagaiei esleitutako balioak. Teklatuko lasterbidea: (CTRL + 2)
Debugger: etenaldiak zehazten eta zure kodea arazten du exekutatzen ari den bitartean, lerroa lerroan beharrezkoa izanez gero. Teklatuko lasterbideak: (CTRL + 3)
Sarea: Arakatzaile bakoitzaren eskaera-orriaren eta exekuzioaren exekuzioan zehar exekutatutako eskaera bakoitzeko zerrendak zerrendatzen ditu protokoloaren xehetasunak, eduki mota, banda-zabalera erabilera eta askoz gehiago barne. Teklatuko lasterbidea: (CTRL + 4)
Errendimendua: xehetasunen fotograma-tasak, CPU erabilpena eta beste errendimendu-metrorekin erlazionatuta, orrialde kargen orduak eta bestelako jarduerak azkartzeko. Teklatuko lasterbideak: (CTRL + 5)
Memoria: Uneko web orrian memoria potentzialen isurketak isolatzeko eta zuzentzeko lagunduko dizu memoriako erabileraren denbora-lerroa erakustea, denbora-tarte ezberdinetako argazkiekin batera. Teklatuaren lasterbidea: (CTRL + 6)
Emulazioa: Orri aktiboak ebazpen desberdinetan eta pantailako tamainetan nola eragingo duen erakusten du, smartphoneak, pilulak eta bestelako gailuak emulatzen. Erabiltzaile agente eta orrialde orientazioa aldatzeko gaitasuna ere eskaintzen du, baita geolokalizazio desberdinak simula ditzakezun latitude eta longitudean sartuz. Teklatu lasterbidea: (CTRL + 7) - Kontsola bistaratzeko, beste tresna batzuen artean, egin klik eskuineko kutxa barruan eskuineko adarkaduna, garapen tresnen interfazearen goiko eskuinaldean.
- Desblokeatzeko, garatzaileentzako tresnak interfazea bihurtzen da, beste leihoa bihurtzen da, bi korronte laukizuzen bidez irudikatzen den botoia sakatu edo lasterbide hau erabili: CTRL + P. Tresnak berriro jartzen dira jatorrizko kokapenean CTRL + P sakatuz bigarren aldiz.
Apple Safari (OS X bakarrik)
Safari-ren dev toolset-ek Mac-ek garatzen duen komunitate-garatzaile handia islatzen du bere diseinu eta programazio beharretara. Kontsola ahaltsu eta ohiko biltegiratze eta arazketa funtzioez gain, diseinu sentikorreko modu erraz bat eta zure nabigatzailearen luzapenak sortzeko tresna ere eskaintzen dira.
- Egin klik Safari pantailaren goialdean dagoen arakatzailearen menuan. Goitibeherako menuan agertzen denean, hautatu Preferencias . Teklatuko lasterbide hau ere erabil dezakezu menu-elementu honen lekuan: COMMAND + COMMA (,)
- Safari-ren Hobespenen interfazea bistaratu behar da orain, zure arakatzailearen leihoaren gainjartzea. Egin klik ikono aurreratuan , goiburuaren eskuinean dagoen lekuan.
- Hobespen aurreratuak orain ikusgai egon behar dira. Pantaila honen behealdean, Erakutsi Garatu menua izeneko menuko menu-barran , kontrol-laukia. Kutxa honetan agertzen den kontrol-laukirik ez badago, egin klik gainean bertan.
- Itxi Hobespenak interfazea goian ezkerreko izkinan dagoen 'x' gorriaren gainean klikatuz.
- Aukera berri bat nabarituko duzu Garatu izeneko nabigazio menuan, Laster - markak eta Leihoen artean kokatuta. Egin klik menu-elementu honetan. Goitibeherako menua bistaratu behar da, aukera hauei jarraituz.
Ireki orria honekin: Mac zerbitzuan instalatutako beste nabigatzaileetako batean web orri aktiboa irekitzeko aukera ematen du.
Erabiltzaile-agentea: Doako aurrez definitutako hamar bat erabiltzaileren agenteen balioak aukeratzea aukera dezakezu, Chrome, Firefox eta Internet Explorer-en hainbat bertsio barne, baita zure kate pertsonalizatua definitzeko ere.
Idatzi sentikorren diseinu modua : Uneko orria aurkezten du gailu desberdinetan eta pantailako ebazpen ezberdinetan ager dadin.
Erakutsi web ikuskatzailea: Safariren dev tresnentzako interfaze nagusia abiarazten du, normalean zure nabigatzailearen pantailaren behealdeko aldean eta atal hauek dituena: Elementuak , Sarea , Baliabideak , Timelines , Debugger , Biltegiratzea , Kontsola .
Erakutsi errore-kontsola: Era berean, dev tools interfazea abiarazten du, kontsola- fitxan zuzenean, akatsak, oharrak eta bestelako bilaketa-erregistroen datuak erakusten ditu.
Erakutsi orrialdearen iturria: Baliabideen fitxa irekitzen du, dokumentuaren arabera sailkatutako orri aktiboaren iturburu-kodea bistaratzen duena.
Erakutsi orrialdearen baliabideak: Show Page Source aukera bezala funtzionatzen du.
Erakutsi snippet editorea: leiho berri bat irekitzen du CSS eta HTML kodean sartu ahal izateko, bere irteera aurrez aurre egotean.
Erakutsi luzapena eraikitzailea: Safari luzapenak sortu edo editatu CSS, HTML eta JavaScript erabiliz.
Erakutsi Timeline Grabaketa: Timelines fitxa irekitzen du eta sareko eskaerak, diseinua eta errendatze informazioa bistaratzen ditu eta JavaScript exekuzioa denbora errealean erakusten da.
Kapsulatze hutsak: diska gogorrean gordetzen ari den cache osoa ezabatzen du.
Desgaitu kadak: Safari gelditzen da cachean, beraz, edukia guztiak berreskuratzen dira zerbitzariaren orrialdeko karga bakoitzean.
Irudi desgaitu: web orrialde guztietan errendatze irudiak saihesten ditu.
Desgaitu estiloak: orriak orri bat kargatzean CSS propietateak ezikusi egiten ditu.
Desgaitu JavaScript: JavaScript exekuzioa murrizten du orrialde guztietan.
Desgaitu luzapenak: arakatzailean exekutatzen ari ez diren instalatutako luzapenak guztiak debekatzen ditu.
Ezgaitu guneko berariazko hackak: Safari aldatu egin da web orri aktiboaren berariazko arazoei aurre egin ezkero, aukera hori aldaketak blokeatuko ditu, orrialdeak aldaketak egin aurretik aurretik kargatuko lituzkeenak.
Desgaitu fitxategi lokalen murriztapenak: arakatzaileari zure disko lokaleko fitxategiak atzitzeko baimena ematen dio, segurtasun arrazoiengatik mugatuta dagoen ekintza bat dela eta.
Desgaitu Jatorri gurutzatuen murriztapenak: murriztapen hauek lehenetsitakoak dira XSS eta beste arrisku potentzialak saihesteko. Hala ere, sarritan desgaituta egon behar dute garapenean.
Onartu JavaScript bilaketa-eremu adimendunetik: Gaituta badago, URLak javascript- ekin sartzeko gaitasuna ematen du : helbide-barran zuzenean sartu.
Tratatu SHA-1 Ziurtagiriak segurua ez den bezala: SSL ziurtagiriak SHA-1 algoritmoa erabiliz oso zaharkituta daude eta zaurgarriak dira.