Integrated toolsets alang sa mga Web designer, developers ug testers
Dugang pa sa kadaghanan sa mga tiggamit sa browser nga nagtutok sa matag adlaw nga tiggamit nga nagtan-aw sa pag-surf sa Web, sila usab nagsangkap sa mga Web developers, mga tigdesinyo ug mga kalidad nga kasiguruhan nga mga propesyonal kinsa makatabang sa pagtukod sa mga apps ug mga site nga kadtong mga tiggamit nga ma-access pinaagi sa paghiusa sa gamhanan nga mga himan ngadto sa mga browser sa ilang mga kaugalingon.
Wala na ang mga adlaw diin ang bugtong programa ug mga himan sa pagsulay nga nakaplagan sulod sa usa ka browser nagtugot kanimo sa pagtan-aw sa source code sa panid ug wala nay lain. Ang mga browser karong adlawa naghimo kanimo sa pagkuha sa mas lawom nga pagsabwag pinaagi sa pagbuhat sa mga butang sama sa pagpatuman ug pag-debug sa mga snippet sa JavaScript, pag-inspeksyon ug pag-edit sa DOM nga mga elemento, pagsubay sa tinuod nga panahon nga trapiko sa network ingon nga imong app o pahina nga magamit sa pag-ila sa mga bottleneck, pag-analisar sa CSS performance, pagsiguro nga ang imong code dili paggamit sa daghan kaayong panumduman o sobra ka daghang mga siklo sa CPU , ug daghan pa. Gikan sa usa ka panglantaw sa pagsulay, makahimo ka paghuwad kon unsaon ang usa ka app o Web page maghatag sa lainlaing mga browser ingon man usab sa nagkalainlaing mga gamit ug mga plataporma pinaagi sa salamangka sa responsive design ug built-in simulators. Ang labing maayo nga bahin mao nga mahimo nimo kining tanan nga dili kinahanglan nga mobiya sa imong browser!
Ang mga tutorial sa ubos naglakaw kanimo kon unsaon pag-access niining mga tool sa pag-develop sa daghang popular nga mga Web browser.
Google Chrome
Ang mga tool sa developer sa Chrome nagtugot kanimo sa pag-edit ug pag-debug sa code, pag-audit sa mga indibidwal nga mga sangkap aron ibutyag ang mga isyu sa paghimo sa mga performance, magpaangay sa nagkalainlain nga mga screen sa device lakip niadtong naggamit sa Android o iOS , ug paghimo sa pipila ka laing mapuslanon nga mga function
- I-klik ang button sa main menu sa Chrome, gimarkahan sa tulo ka pinahigang mga linya ug nahimutang sa ibabaw nga tuo nga kilid sa browser.
- Sa diha nga makita ang drop-down menu, hover ang imong mouse cursor sa More options tool .
- Ang usa ka sub-menu kinahanglan nga makita karon. Pagpili sa opsyon nga gi-label nga mga tool sa Developer . Mahimo usab nimo gamiton ang mosunod nga keyboard shortcut sa dapit niining menu item: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Ang interface sa Chrome Developer Tools kinahanglan nga ipakita karon, ingon sa gipakita sa screenshot sa pananglitan. Depende sa imong bersyon sa Chrome, ang pasiuna nga layout nga imong nakita mahimong magkalahi gikan sa gipakita dinhi. Ang nag-unang hub sa mga himan sa pag-develop, kasagaran nga nahimutang sa ubos o sa tuo nga kilid sa screen, naglangkob sa mosunod nga mga tab.
Mga elemento: Naghatag sa abilidad sa pagsusi sa CSS ug HTML code ingon man usab sa pag-edit sa CSS on-the-fly, nga makita ang mga epekto sa imong mga pagbag-o sa tinuod nga panahon.
Console: Ang console nga JavaScript sa Chrome nagtugot sa direct command entry ingon man usab sa diagnostic debugging.
Mga Tinubdan: Makapahupay ka sa JavaScript code pinaagi sa usa ka gamhanan nga graphical interface.
Network: Categorizes ug nagpakita sa detalyado nga impormasyon mahitungod sa matag kalambigit nga operasyon sa aktibong aplikasyon o panid, lakip ang kompleto nga hangyo ug mga header sa pagtubag maingon man mga advanced meting timing.
Timeline: Nagtugot alang sa masinati nga pagsusi sa matag kalihokan nga nahitabo sa sulod sa browser sa diha nga ang usa ka pahina o app load nga hangyo gisugdan. - Gawas pa niini nga mga seksyon, mahimo usab nimo ma-access ang mosunod nga mga himan pinaagi sa >> icon, nga nahimutang sa tuo sa tab sa Timeline .
Kaagi sa Profile: Gibungkag ngadto sa CPU profiler ug Heap profiler nga mga seksyon, naghatag og komprehensibong paggamit sa panumduman ug sa kinatibuk-ang oras sa pagpatuman sa aktibong aplikasyon o panid.
Kasegurohan: Gipunting ang mga problema sa sertipiko ug uban pang isyu nga may kalabutan sa seguridad sa aktibong panid o aplikasyon.
Mga Kapanguhaan: Dinhi mahimo nimong tan-awon ang mga cookies, local storage, cache sa app, ug ubang mga tinubdan sa datos nga gigamit sa kasamtangan nga Web page o aplikasyon.
Mga Pag-audit: Nagtanyag og mga paagi aron ma-optimize ang usa ka pahina o oras sa load sa aplikasyon ug kinatibuk-ang performance. - Ang Mode sa Device nagtugot kanimo sa pagtan-aw sa aktibong panid sa usa ka simulator nga naghimo niini halos eksakto sama sa pagpakita sa usa sa kapin sa usa ka dosena nga mga device, lakip ang pipila ka mga inila nga Android ug iOS nga mga modelo sama sa iPad, iPhone, ug Samsung Galaxy. Gihatagan ka usab sa katakos nga sundon ang mga resolusyon sa pasundayag nga screen nga mohaum sa imong partikular nga kalamboan o pagsulay nga mga panginahanglan. Aron toggle ang Mode sa Device ug i-off, pilia ang icon sa mobile phone nga makita diretso sa wala sa Tab sa Mga Elemento .
- Mahimo usab nimo ipasibo ang hitsura ug gibati sa imong mga himan sa pag-develop pinaagi sa pag-una sa pag-klik sa button sa menu nga girepresentahan sa tulo ka vertically-gibutang nga mga tuldok ug nahimutang sa layo nga tuo nga bahin sa nahisgutang mga tab. Gikan sa sulod niining drop-down menu, mahimo nimo ibutang ang dock, ipakita o itago ang nagkalain-laing mga himan ingon man usab sa paglansad sa mas abante nga mga butang sama sa device inspector. Makit-an nimo nga ang mga dev tool interface mismo mismo napasibo pinaagi sa mga setting nga makita niini nga seksyon.
Mozilla Firefox
Ang seksyon sa Web Developer sa Firefox naglakip sa mga himan alang sa mga tigdesinyo, tig-ugmad, ug mga tester sama sa usa ka editor sa estilo ug ang mata nga nagtumong sa piksel.
Girekomendar nga Pagbasa: Ang Top 25 nga Greasemonkey ug Tampermonkey User Scripts
- I-klik ang button sa main menu sa Firefox, nga gisimbolohan sa tulo ka pinahigang mga linya ug nahimutang sa ibabaw nga tuo nga kilid sa browser window.
- Sa diha nga makita ang drop-down menu, pilia ang icon nga gimarkahan sa Developer . Ang menu sa Web Developer kinahanglan nga ipakita karon, nga adunay mga mosunod nga mga kapilian. Mamatikdan nimo nga kadaghanan sa mga butang sa menu adunay mga shortcut sa keyboard nga nakig-uban kanila.
Pagbag-o sa mga Himan: Nagpakita o nagtago sa interface sa mga himan sa developer, kasagaran gipahimutang sa ubos sa window sa browser. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspector: Nagtugot kanimo sa pagsusi ug / o pag-usab sa CSS ug HTML code sa aktibong panid maingon man sa usa ka portable device pinaagi sa remote debugging. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Console: Makahimo ka sa pagpatuman sa mga ekspresyon sa JavaScript sulod sa aktibong panid maingon man pagsubli sa nagkalainlaing hugpong sa mga datos nga na-log, lakip ang mga pasidaan sa seguridad, mga paghangyo sa network, mga mensahe sa CSS, ug daghan pa. Keyboard shortcut: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: Ang JavaScript Debugger nagtugot kanimo sa pag-ila ug pag-ayo sa mga depekto pinaagi sa pag-set breakpoints, pagsusi sa DOM nodes, black boxing external sources, ug daghan pa. Sama sa kaso sa Inspector , kini nga bahin usab nagsuporta sa remote debugging. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Editor sa Estilo: Nagtugot kanimo sa paghimo og bag-o nga mga estilo sa estilo ug ilakip kini sa aktibong Web page, o pag-edit sa kasamtangan nga mga panid ug susiha kon giunsa paghimo sa imong mga pagbag-o sa usa ka browser nga adunay usa ka click lamang. Keyboard shortcut: Mac OS X, Windows ( SHIFT + F7 )
Performance: Naghatag og detalyado nga pagkahugno sa performance sa network sa aktibong pahina, datos sa frame rate, oras sa paglihok sa JavaScript ug estado, pagpintal sa pintal, ug daghan pa. Keyboard shortcut: Mac OS X, Windows ( SHIFT + F5 )
Network: Naglista sa matag hangyo sa network nga gipasiugdahan sa browser uban sa katugbang nga paagi, gigikanan nga domain, type, gidak-on, ug oras nga milabay. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Developer Toolbar: Giablihan ang usa ka interactive interpreter nga command line. Pagsulod sa tabang ngadto sa maghuhubad alang sa usa ka lista sa tanan nga mga magamit nga mga sugo ug ang ilang husto nga salaysay. Keyboard shortcut: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Naghatag og abilidad sa paghimo ug pagpatuman sa mga Web apps pinaagi sa aktwal nga device nga nagpadagan sa Firefox OS o pinaagi sa Firefox OS Simulator. Keyboard shortcut: Mac OS X, Windows ( SHIFT + F8 )
Browser Console: Naghatag sa pareho nga gamit nga Web Console (tan-awa sa ibabaw). Bisan pa, ang tanan nga data nga gibalik alang sa tibuok nga paggamit sa Firefox (lakip ang mga extension ug mga pag-function sa browser-level) sukwahi sa aktibo nga Web page. Keyboard shortcut: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
View Responsive Design: Makahimo ka sa pagtan-aw dayon sa usa ka Web page sa lain-laing mga resolusyon, mga layout, ug mga gidak-on sa screen aron pagsundog sa daghang mga gamit lakip ang mga tablet ug mga smartphone. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Nagpakita sa kolor sa kolor sa hex sa tinagsa nga pinili nga mga pixel.
Scratchpad : Makapahimo ka sa pagsulat, pag-edit, pag-integrate ug pag-execute sa mga snippet sa JavaScript code gikan sa sulod sa usa ka pop-out nga window sa Firefox. Keyboard shortcut: Mac OS X, Windows ( SHIFT + F4 )
Ang tinubdan sa Pahina: Ang orihinal nga browser nga nakabase nga tool sa developer, kini nga kapilian nagpakita lamang sa anaa nga source code alang sa aktibong panid. Shortcut sa keyboard: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Pagkuha og Dugang nga mga himan: Gibuksan ang koleksyon sa Toolbox sa Web Developer sa opisyal nga site sa Mozilla, nga adunay mga dosenang popular nga extension sama sa Firebug ug Greasemonkey.
Microsoft Edge / Internet Explorer
Sa kasagaran gitawag nga F12 Developer Tools , usa ka pagtahud sa keyboard shortcut nga naglunsad sa interface sukad sa mga naunang bersyon sa Internet Explorer, ang dev toolset sa IE11 ug Microsoft Edge miabut sa usa ka taas nga paagi sukad sa pagsugod niini pinaagi sa paghalad sa usa ka handy nga grupo sa monitor, debuggers, emulators, ug on-the-fly compilers.
- I-klik ang More actions menu, nga girepresentahan sa tulo ka tuldok ug nahimutang sa ibabaw nga tuo nga kilid sa window sa browser. Sa diha nga makita ang drop-down menu, pilia ang opsyon nga gimarkahan nga F12 Developer Tools . Sumala sa nahisgutan na nako, ma-access mo usab ang mga gamit pinaagi sa F12 keyboard shortcut.
- Ang interface sa pag-uswag kinahanglan ipakita karon, kasagaran sa ubos sa window sa browser. Ang mga mosunod nga mga himan anaa, matag usa ma-access pinaagi sa pag-klik sa ilang tagsa nga tab heading o paggamit sa kauban nga shortcut sa keyboard.
DOM Explorer: Makahimo ka sa pag-edit sa mga estilo ug HTML diha sa aktibong panid, nga naghubad sa nausab nga mga resulta samtang ikaw moadto. Nagagamit ang IntelliSense functionality sa autocomplete code kung diin magamit. Shortcut sa keyboard: (CTRL + 1)
Console: Naghatag og abilidad sa pagsumiter sa impormasyon sa pag-debit lakip na ang mga counter, timers, mga timailhan, ug customized nga mga mensahe pinaagi sa integrated API. Dugang pa, mahimo nimong ipa-inject ang code ngadto sa usa ka aktibong Web page ug usbon ang mga bili nga gi-assign sa tagsa-tagsa nga mga baryable sa tinuod nga panahon. Shortcut sa keyboard: (CTRL + 2)
Debugger: Makapahimo ka nga mag-set breakpoints ug mag-debug sa imong code samtang kini ipatuman, pinaagi sa linya kon gikinahanglan. Shortcut sa keyboard: (CTRL + 3)
Network: Naglista sa matag hangyo sa network nga gipasiugdahan sa browser sa panahon sa pag-load sa pahina ug pagpatuman lakip ang mga detalye sa protocol, klase sa sulod, paggamit sa bandwidth, ug daghan pa. Shortcut sa keyboard: (CTRL + 4)
Performance: Detalye frame rate, paggamit sa CPU, ug uban pang metrics nga may kalabutan sa paghimo sa pagtabang kanimo sa pagpadali sa mga pahina sa load page ug uban pang mga kalihokan. Shortcut sa keyboard: (CTRL + 5)
Panumduman: Nagtabang kanimo sa paglain ug pagkorihir sa mga potensyal nga panumduman sa panumduman sa kasamtangan nga pahina sa Web pinaagi sa pagpakita sa timeline sa paggamit sa panumduman uban sa mga snapshot gikan sa lainlaing oras nga mga kal-ang. Shortcut sa keyboard: (CTRL + 6)
Pagsugyot: Ipakita nimo kung unsa ang mahimo sa aktibong panid sa nagkalainlain nga resolusyon ug mga gidak-on sa screen, pag-edukar sa mga smartphone, tablet, ug uban pang mga gamit. Nagahatag usab ang abilidad sa pag-usab sa user agent ug orientation sa panid, ingon man usab sa pag-ilog sa nagkalainlaing geolocation pinaagi sa pagsulod sa usa ka latitude ug longitude. Shortcut sa keyboard: (CTRL + 7) - Aron ipakita ang Console samtang anaa sa bisan asa sa uban nga mga gamit mag-klik sa square button nga may husto nga bracket sa sulod niini, nga nahimutang sa ibabaw nga tuo nga bahin sa interface sa mga gamit sa pag-uswag.
- Aron mabutyag, ang mga himan sa tig-usbaw mag-interface aron mahimong usa ka lahi nga bintana, i-klik ang button nga girepresentahan sa duha ka cascading rectangles o gamit ang mosunod nga keyboard shortcut: CTRL + P. Mahimo nimo ibutang ang mga gamit balik sa ilang orihinal nga lokasyon pinaagi sa pagputol sa CTRL + P sa ikaduha nga higayon.
Apple Safari (OS X lamang)
Ang nagkalainlain nga dev toolset sa Safari nagpakita sa dako nga komunidad nga tigpalambo nga naggamit sa usa ka Mac alang sa ilang mga kinahanglanon sa pagdesenyo ug mga programa. Gawas pa sa usa ka gamhanan nga console ug tradisyonal nga pag-logging ug debugging nga mga bahin, ang usa ka sayon nga gamiton nga responsive design mode ug usa ka himan sa pagmugna sa imong kaugalingong mga extension sa browser gihatag usab.
- I-klik ang Safari sa menu sa browser, nga anaa sa ibabaw sa imong screen. Sa diha nga makita ang drop-down menu, pagpili sa Preferences . Mahimo usab nimo gamiton ang mosunod nga keyboard shortcut sa dapit niining butang nga menu: COMMAND + COMMA (,)
- Ang interface sa Safari's Preferences kinahanglan nga ipakita karon, nga nag-overlay sa window sa imong browser. I-klik ang Advanced icon, nga nahimutang sa layo nga tuo nga bahin sa header.
- Ang Advanced nga mga gusto karon makita. Sa ubos niining screen mao ang opsyon nga gi-label nga Show Develop menu sa menu bar , inubanan sa check box. Kon wala'y marka sa tsek nga gipakita sa kahon, i-klik kini sa makausa aron ibutang ang usa didto.
- Isumpay ang interface nga Preferences pinaagi sa pag-klik sa pula nga 'x' nga makita sa ibabaw nga bahin sa wala.
- Kinahanglan nga imong namatikdan ang usa ka bag-ong kapilian sa menu sa browser nga ginganlan og Develop , nga nahimutang tali sa Bookmarks ug Window . I-klik ang item nga menu. Ang usa ka drop-down menu kinahanglan nga ipakita karon, nga adunay mga mosunod nga mga kapilian.
Bukas nga Pahina Uban sa: Nagtugot kanimo sa pag-abli sa aktibong Web page sa usa sa ubang mga browser nga bag-o nga na-install sa imong Mac.
User Agent: Makapili ka nga mopili gikan sa kapin sa usa ka dosena nga gipili sa mga tinugyanan sa user agent lakip ang daghang mga bersyon sa Chrome, Firefox ug Internet Explorer, ingon man usab sa paghatag sa imong kaugalingong custom string.
Pagsulod sa Mode sa Responsive Design : Ihatag ang kasamtangan nga panid ingon nga kini makita sa lain-laing mga device ug sa lain-laing mga resolusyon sa screen.
Ipakita ang Inspektor sa Web: Gipasiugdahan ang nag-unang interface alang sa mga tool sa dev Safari, kasagaran gibutang sa ubos sa screen sa imong browser ug adunay mga mosunod nga mga seksyon: Mga elemento , Network , Mga Kapanguhaan , Timeline , Debugger , Storage , Console .
Ipakita ang Error Console: Gilansad usab ang interface sa mga dev tool, direkta sa tab nga Console nga nagpakita sa mga sayup, pasidaan, ug uban pang datos nga pangitaon sa log.
Ipakita ang Tinubdan sa Pahina: Nagbukas sa tab sa Resources , nga nagpakita sa source code alang sa aktibong panid nga gi-categorize sa dokumento.
Ipakita ang Mga Gamit sa Pahina: Nagbuhat sa sama nga kalihokan sama sa Pagpakita sa Pagpakita sa Tinubdan sa Pahina .
Ipakita ang Snippet Editor: Magbukas sa usa ka bag-o nga bintana diin ikaw makasulod sa CSS ug HTML code, nga nag-preview sa iyang output on-the-fly.
Ipakita ang Builder sa Extension: Naghatag og abilidad sa paghimo o pag-edit sa mga extension sa Safari gamit ang CSS, HTML, ug JavaScript.
Ipakita ang Timeline Recording: Nagbukas sa tab sa Timeline ug nagsugod pagpakita sa mga hangyo sa network, layout ug paghatag impormasyon ingon man JavaScript execution sa tinuod nga panahon.
Gawas sa mga Cache: Gikuha ang tibuok nga cache nga sa pagkakaron gitipigan sa imong hard drive.
Paglikay sa mga Caches: Hunonga ang Safari gikan sa caching aron ang tanang sulod makuha gikan sa server sa matag pahina nga load.
Paglikay sa mga Imahen: Gipugngan ang mga hulagway gikan sa paghubad sa tanang mga panid sa Web.
Paglikay sa mga Estilo: Wala'y gibalewala ang mga kabtangan sa CSS sa diha nga ang usa ka pahina puno.
Paglikay sa JavaScript: Pagpugong sa pagpatuman sa JavaScript sa tanan nga mga panid.
Paglikay sa mga Extension: Gidili ang tanan nga gisulod nga mga extension gikan sa pagdagan sa sulod sa browser.
Paglikay sa Site-specific Hacks: Kon ang Safari giusab aron klaro nga pagdumala sa (mga) isyu nga espesipiko sa aktibong Web page, kini nga kapilian mag-ali sa mga pagbag-o aron ang pahina mag-load ingon nga kini sa wala pa kini nga mga pag-usab gipaila.
Paglikay sa Local Restrictions sa File: Nagtugot sa browser nga maka-access sa mga file sa imong mga lokal nga disk, usa ka aksyon nga gidili pinaagi sa default alang sa mga hinungdan sa seguridad.
Paglikay sa mga Pagbalibad sa Kasugtanan sa Kasugtanan: Ini nga mga pagdumili ginbutang sa lugar agud malikawan ang XSS kag iban pa nga posible nga mga katalagman. Bisan pa, sila sa kasagaran kinahanglan nga temporaryo nga pagkabaldado alang sa mga katuyoan sa pagpauswag.
Tugoti ang JavaScript gikan sa Smart Search Field: Kung mahimo, magahatag sa abilidad sa pagsulod sa mga URL gamit ang javascript: gilakip direkta ngadto sa address bar.
Pagtratar sa SHA-1 Certificates as Insecure: Ang mga sertipiko sa SSL gamit ang SHA-1 algorithm kaylap nga gikonsiderar nga dili pa dugay ug huyang.