Paano Gamitin ang Mga Tool ng Mga Developer ng Web Browser

Bilang karagdagan sa karamihan sa mga gumagawa ng browser na nakatuon sa pang-araw-araw na gumagamit na naghahanap upang mag-surf sa Web, nagsisilbi rin ang mga ito sa mga web developer, designer at mga propesyonal sa kasiguruhan sa kalidad na tumutulong sa pagtatayo ng mga app at site na ina-access ng mga user sa pamamagitan ng pagsasama ng mga makapangyarihang tool papunta sa mga browser kanilang sarili.

Wala na ang mga araw kung saan ang tanging programming at mga tool sa pagsubok na natagpuan sa isang browser ay nagpapahintulot sa iyo na tingnan ang source code ng pahina at wala nang iba pa. Ang mga browser ngayong araw ay nagpapahintulot sa iyo na kumuha ng mas malalim na dive sa pamamagitan ng paggawa ng mga bagay tulad ng pagpapatupad at pag-debug ng mga snippet ng JavaScript, pag-inspeksyon at pag-edit ng mga elemento ng DOM, pagmamanman ng real-time na trapiko sa network habang nag-load ang iyong app o pahina upang makilala ang mga bottleneck, pag-aaral ng pagganap ng CSS, tiyakin na ang iyong code ay hindi gumagamit ng masyadong maraming memory o masyadong maraming cycle ng CPU, at marami pang iba. Mula sa isang perspektibo sa pagsubok, maaari mong kopyahin kung paano gagawa ang isang app o Web page sa iba't ibang mga browser pati na rin sa iba't ibang mga device at platform sa pamamagitan ng magic ng tumutugon na disenyo at mga built-in na simulator. Ang pinakamagandang bahagi ay maaari mong gawin ang lahat ng ito nang hindi na umalis sa iyong browser!

Ang mga tutorial sa ibaba ay nagtuturo sa iyo kung paano ma-access ang mga tool ng nag-develop sa ilang mga sikat na Web browser.

Google Chrome

Pinapayagan ka ng mga developer ng Chrome na i-edit at i-debug ang code, i-audit ang mga indibidwal na sangkap upang ilantad ang mga isyu sa pagganap, gayahin ang iba't ibang mga screen ng device kabilang ang mga tumatakbo sa Android o iOS, at magsagawa ng maraming iba pang kapaki-pakinabang na function.

1. Mag-click sa pindutan ng pangunahing menu ng Chrome, minarkahan ng tatlong pahalang na linya at matatagpuan sa kanang sulok sa kanan ng browser.
2. Kapag lumilitaw ang drop-down na menu, i-hover ang iyong mouse cursor sa ibabaw ng Higit pang mga tool pagpipilian.
3. Ang isang sub-menu ay dapat na lumitaw ngayon. Piliin ang opsyon na may label na Mga tool ng developer . Maaari mo ring gamitin ang sumusunod na shortcut sa keyboard sa lugar ng item na ito ng menu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Ang interface ng Chrome Developer Tools ay dapat na ipapakita na ngayon, tulad ng ipinapakita sa screenshot na ito halimbawa. Depende sa iyong bersyon ng Chrome, ang unang layout na iyong nakikita ay maaaring bahagyang naiiba mula sa ipinakita dito. Ang pangunahing sentro ng mga tool ng developer, karaniwang matatagpuan sa alinman sa ibaba o kanang bahagi ng screen, ay naglalaman ng mga sumusunod na mga tab.Mga elemento: Nagbibigay ng kakayahan upang siyasatin ang CSS at HTML code pati na rin ang pag-edit ng CSS on-the-fly, nakikita ang mga epekto ng iyong mga pagbabago sa real time.Console: Ang console ng Chrome ng Chrome ay nagbibigay-daan para sa direct command entry pati na rin ang diagnostic debugging.Pinagmulan: Pinapayagan kang i-debug ang JavaScript code sa pamamagitan ng isang malakas na graphical na interface.Network: Nakategorya at nagpapakita ng detalyadong impormasyon tungkol sa bawat kaugnay na operasyon sa aktibong application o pahina, kabilang ang kumpletong kahilingan at mga header ng tugon pati na rin ang mga advanced na sukatan ng timing.Timeline: Pinapayagan para sa malalim na pagtatasa ng bawat aktibidad na nagaganap sa loob ng browser sa lalong madaling pinasimulan ang kahilingan ng pahina o app load.
5. Bilang karagdagan sa mga seksyon na ito, maaari mo ring ma-access ang mga sumusunod na tool sa pamamagitan ng >> icon, na matatagpuan sa kanan ng Timeline tab.Profile: Nasira sa CPU profiler at Heap profiler mga seksyon, ay nagbibigay ng kumpletong paggamit ng memory at pangkalahatang oras ng pagpapatupad ng aktibong application o pahina.Seguridad: Itinatampok ang mga problema sa sertipiko at iba pang mga isyu na kaugnay sa seguridad sa aktibong pahina o application.Mga Mapagkukunan: Ito ay kung saan maaari mong siyasatin ang mga cookies, lokal na imbakan, cache ng app, at iba pang lokal na mapagkukunan ng data na ginagamit ng kasalukuyang pahina ng Web o application.Mga Pag-audit: Nagbibigay ng mga paraan upang ma-optimize ang isang pahina o oras ng pag-load ng application at pangkalahatang pagganap.
6. Mode ng Device ay nagbibigay-daan sa iyo upang tingnan ang aktibong pahina sa isang simulator na nagpapahiwatig nito halos eksakto kung paano ito lilitaw sa isa sa higit sa isang dosenang mga aparato, kabilang ang ilang mga kilalang modelo ng Android at iOS tulad ng iPad, iPhone, at Samsung Galaxy. Binigyan ka rin ng kakayahan upang tularan ang mga custom na resolution ng screen upang umangkop sa iyong partikular na mga pangangailangan sa pag-unlad o pagsubok. Magpalit Mode ng Device on at off, piliin ang icon ng mobile phone na matatagpuan diretso sa kaliwa ng Mga elemento tab.
7. Maaari mo ring ipasadya ang hitsura at pakiramdam ng iyong mga tool sa pag-develop sa pamamagitan ng unang pag-click sa pindutan ng menu na kinakatawan ng tatlong mga titik na nakatalaga sa patayo at matatagpuan sa malayong kanang bahagi ng mga nabanggit na mga tab. Mula sa loob ng drop-down na menu na ito, maaari mong muling iposisyon ang pantalan, ipakita o itago ang iba't ibang mga tool pati na rin ang paglulunsad ng mga mas advanced na item tulad ng inspector ng device. Makikita mo na ang interface ng mga tool dev mismo ay lubos na napapasadyang sa pamamagitan ng mga setting na matatagpuan sa seksyon na ito.

Mozilla Firefox

Kabilang sa seksyon ng Web Developer ng Firefox ang mga tool para sa mga designer, developer, at mga tagasubok na tulad ng isang estilo editor at pixed-targeting eyedropper.

Inirerekumendang Reading ng Lifewire:Ang Top 25 Greasemonkey at Tampermonkey User Script

1. Mag-click sa pindutan ng pangunahing menu ng Firefox, na kinakatawan ng tatlong pahalang na linya at matatagpuan sa itaas na kanang sulok ng window ng browser.
2. Kapag lumilitaw ang drop-down na menu, piliin ang icon na may label na Developer . Ang Web Developer dapat na ipakita ang menu na ngayon, na naglalaman ng mga sumusunod na pagpipilian.Mapapansin mo na ang karamihan sa mga item sa menu ay may mga shortcut sa keyboard na nauugnay sa kanila.I-toggle ang Mga Tool: Nagpapakita o nagtatago sa interface ng mga tool ng developer, karaniwang nakaposisyon sa ilalim ng window ng browser. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Inspektor: Nagbibigay-daan sa iyo upang siyasatin at / o mag-tweak CSS at HTML code sa aktibong pahina pati na rin sa isang portable na aparato sa pamamagitan ng remote debugging. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )Web Console: Pinapayagan kang isagawa ang mga expression sa JavaScript sa loob ng aktibong pahina pati na rin suriin ang magkakaibang hanay ng naka-log na data kabilang ang mga babala sa seguridad, mga kahilingan sa network, mga mensahe sa CSS, at higit pa. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )Debugger: Ang JavaScript Debugger hinahayaan mong ituro at ayusin ang mga depekto sa pamamagitan ng pagtatakda ng mga breakpoint, pag-inspeksyon sa mga node ng DOM, mga itim na boxing panlabas na mapagkukunan, at marami pang iba. Tulad ng kaso sa Inspektor , sinusuportahan din ng tampok na ito ang remote na pag-debug. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Editor ng Estilo: Pinapayagan kang lumikha ng mga bagong estilo ng estilo at isama ang mga ito gamit ang aktibong pahina ng Web, o i-edit ang mga umiiral na sheet at subukan kung paano nag-render ang iyong mga pagbabago sa isang browser na may isang click lamang. Shortcut sa keyboard: Mac OS X, Windows ( SHIFT + F7 )Pagganap: Nagbibigay ng detalyadong breakdown ng pagganap ng network ng aktibong pahina, data ng rate ng frame, oras ng pagpapatupad ng JavaScript at estado, flashing ng pintura, at marami pang iba. Shortcut sa keyboard: Mac OS X, Windows ( SHIFT + F5 )Network: Naglilista ang bawat kahilingan sa network na pinasimulan ng browser kasama ang kaukulang pamamaraan, pinagmulan ng domain, uri, laki, at oras na lumipas. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Toolbar ng Developer: Binubuksan ang isang interactive na interpreter ng command line. Ipasok tulungan sa interpreter para sa isang listahan ng lahat ng magagamit na mga utos at ang kanilang wastong syntax. Shortcut sa keyboard: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Nagbibigay ng kakayahang lumikha at magsagawa ng mga apps sa Web sa pamamagitan ng isang aktwal na aparato na tumatakbo sa Firefox OS o sa pamamagitan ng Firefox OS Simulator. Shortcut sa keyboard: Mac OS X, Windows ( SHIFT + F8 )Console ng Browser: Nagbibigay ng parehong pag-andar tulad ng Web Console (tingnan sa itaas). Gayunpaman, ang lahat ng data na ibinalik ay para sa buong application ng Firefox (kabilang ang mga extension at pag-andar sa antas ng browser) na taliwas sa aktibong Web page. Shortcut sa keyboard: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )View Responsive Design: Pinapayagan kang agad na tingnan ang isang Web page sa iba't ibang mga resolution, layout, at mga laki ng screen upang gayahin ang maraming device kabilang ang mga tablet at smartphone. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Eyedropper: Nagpapakita ng hex color code para sa mga indibidwal na napiling mga pixel.Scratchpad: Pinapayagan kang magsulat, mag-edit, magsama at magsagawa ng mga snippet ng JavaScript code mula sa loob ng pop-out na window ng Firefox. Shortcut sa keyboard: Mac OS X, Windows ( SHIFT + F4 )Pinagmulan ng Pahina: Ang orihinal na tool ng nag-develop ng browser, ang pagpipiliang ito ay nagpapakita lamang ng magagamit na source code para sa aktibong pahina. Shortcut sa keyboard: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Kumuha ng Iba Pang Mga Tool: Binubuksan ang Tool ng Web Developer's Tool koleksyon sa opisyal na site ng add-on ng Mozilla, na nagtatampok tungkol sa isang dosenang mga sikat na extension tulad ng Firebug at Greasemonkey.

Microsoft Edge / Internet Explorer

Karaniwang tinutukoy bilang Mga Tool ng Developer ng F12 , isang pagtugon sa keyboard shortcut na inilunsad ang interface mula noong mas maagang bersyon ng Internet Explorer, ang dev toolset sa IE11 at Microsoft Edge ay dumating sa isang mahabang paraan mula noong ito ay mabuo sa pamamagitan ng pag-aalok ng isang napaka-madaling-gamiting grupo ng mga monitor, debuggers, emulators, at -ang-fly compiler.

1. Mag-click sa Higit pang mga aksyon menu, na kinakatawan ng tatlong tuldok at matatagpuan sa itaas na kanang sulok ng window ng browser. Kapag lumilitaw ang drop-down na menu, piliin ang opsyon na may label na Mga Tool ng Developer ng F12 . Tulad ng nabanggit ko na, maaari mo ring ma-access ang mga tool sa pamamagitan ng F12 shortcut sa keyboard.
2. Ang interface ng pag-unlad ay dapat na ipapakita na ngayon, karaniwang sa ilalim ng window ng browser. Ang mga sumusunod na tool ay magagamit, ang bawat mapupuntahan sa pamamagitan ng pag-click sa kani-kanilang mga tab heading o gamit ang kasamang keyboard shortcut.DOM Explorer: Pinapayagan kang i-edit ang mga estilo at HTML sa aktibong pahina, na isinasalin ang binagong mga resulta habang ikaw ay pupunta. Ginagamit ang pag-andar ng IntelliSense sa autocomplete code kung saan naaangkop. Shortcut sa keyboard: (CTRL + 1) Console: Nagbibigay ng kakayahang magsumite ng impormasyon sa pag-debug kasama na ang mga counter, timer, bakas, at na-customize na mga mensahe sa pamamagitan ng pinagsama-samang API. Gayundin, hinahayaan kang mag-inject ng code sa isang aktibong pahina ng Web at baguhin ang mga halaga na nakatalaga sa mga indibidwal na variable sa real time. Shortcut sa keyboard: (CTRL + 2) Debugger: Hinahayaan kang magtakda ng mga breakpoint at i-debug ang iyong code habang ginagawa ito, ayon sa linya kung kinakailangan. Shortcut sa keyboard: (CTRL + 3) Network: Naglilista ang bawat kahilingan sa network na pinasimulan ng browser sa panahon ng pagkarga at pagpapatupad ng pahina kasama ang mga detalye ng protocol, uri ng nilalaman, paggamit ng bandwidth, at marami pang iba. Shortcut sa keyboard: (CTRL + 4) Pagganap: Mga detalye ng mga rate ng frame, paggamit ng CPU, at iba pang sukatan na may kinalaman sa pagganap upang tulungan kang pabilisin ang mga oras ng pagkarga ng pahina at iba pang mga aktibidad. Shortcut sa keyboard: (CTRL + 5) Memory: Tumutulong sa iyo na ihiwalay at itama ang mga potensyal na paglabas ng memorya sa kasalukuyang pahina ng Web sa pamamagitan ng pagpapakita ng timeline ng paggamit ng memory kasama ang mga snapshot mula sa iba't ibang mga agwat ng oras. Shortcut sa keyboard: (CTRL + 6) Emulation: Ipinapakita sa iyo kung paano i-render ang aktibong pahina sa iba't ibang mga resolution at laki ng screen, panggagaya ng mga smartphone, tablet, at iba pang mga device. Nagbibigay din ang kakayahang baguhin ang ahente ng gumagamit at oryentasyon ng pahina, gayundin gayahin ang iba't ibang mga geolocation sa pamamagitan ng pagpasok ng isang latitude at longitude. Shortcut sa keyboard: (CTRL + 7)
3. Upang ipakita ang Console habang nasa loob ng alinman sa iba pang mga tool mag-click sa pindutan ng parisukat na may tamang bracket sa loob nito, na matatagpuan sa kanang sulok sa kanan ng interface ng mga tool sa pag-unlad.
4. Upang i-undo, ang interface ng mga tool ng developer upang maging isang hiwalay na window, mag-click sa pindutan na kinakatawan ng dalawang cascading na mga parihaba o gamitin ang sumusunod na shortcut sa keyboard: CTRL + P . Maaari mong ilagay ang mga tool pabalik sa kanilang orihinal na lokasyon sa pamamagitan ng pagpindot CTRL + P isang pangalawang pagkakataon.

Apple Safari (OS X lamang)

Ang magkakaibang dev toolset ng Safari ay sumasalamin sa malaking komunidad ng developer na gumagamit ng Mac para sa kanilang mga pangangailangan sa disenyo at programming. Bilang karagdagan sa isang malakas na console at tradisyonal na pag-log at mga tampok sa pag-debug, isang madaling-gamitin na tumutugon mode ng disenyo at isang tool upang lumikha ng iyong sariling mga extension ng browser ay ibinigay din.

1. Mag-click sa Safari sa menu ng browser, na matatagpuan sa tuktok ng iyong screen. Kapag lumilitaw ang drop-down na menu, piliin ang Kagustuhan . Maaari mo ring gamitin ang sumusunod na shortcut sa keyboard sa lugar ng item na ito ng menu: COMMAND + COMMA (,)
2. Safari's Kagustuhan dapat na ipakita na ngayon ang interface, overlaying iyong window ng browser. Mag-click sa Advanced icon, na matatagpuan sa malayong kanang bahagi ng header.
3. Ang Advanced dapat na makita ngayon ang mga kagustuhan. Sa ilalim ng screen na ito ay isang opsyon na may label na Ipakita ang Bumuo ng menu sa menu bar , sinamahan ng isang check box. Kung walang check mark na ipinapakita sa kahon, i-click ito nang isang beses upang ilagay ang isa doon.
4. Isara ang Kagustuhan interface sa pamamagitan ng pag-click sa red 'x' na natagpuan sa itaas na sulok sa kaliwa.
5. Dapat mo na ngayong mapansin ang isang bagong opsyon sa menu ng browser na pinangalanan Paunlarin , na matatagpuan sa pagitan Mga bookmark at Window . Mag-click sa item na ito ng menu. Ang isang drop-down na menu ay dapat na ipapakita na ngayon, na naglalaman ng mga sumusunod na opsyon.Buksan ang Pahina Gamit ang: Pinapayagan kang buksan ang aktibong pahina sa Web sa isa sa iba pang mga browser na kasalukuyang naka-install sa iyong Mac.Agent ng User: Hinahayaan kang pumili mula sa higit sa isang dosenang natukoy na mga halaga ng user agent kabilang ang ilang mga bersyon ng Chrome, Firefox at Internet Explorer, pati na rin ang iyong sariling pasadyang string.Ipasok ang Mode na tumutugon sa Disenyo: Nagbibigay ng kasalukuyang pahina na lilitaw sa iba't ibang mga device at sa iba't ibang mga resolution ng screen.Ipakita ang Inspektor sa Web: Ilulunsad ang pangunahing interface para sa mga tool ng dev ng Safari, karaniwang inilalagay sa ilalim ng screen ng iyong browser at naglalaman ng mga sumusunod na seksyon: Mga elemento , Network , Mga Mapagkukunan , Mga Timeline , Debugger , Imbakan , Console .Ipakita ang Error Console: Inilunsad din ang interface ng dev tools, nang direkta sa Console tab na nagpapakita ng mga error, mga babala, at iba pang data na nahahanapang log.Ipakita ang Pinagmulang Pahina: Binubuksan ang Mga Mapagkukunan tab, na nagpapakita ng source code para sa aktibong pahina na nakategorya sa pamamagitan ng dokumento.Ipakita ang Mga Mapagkukunan ng Pahina: Gumaganap ng parehong function bilang Ipakita ang Pinagmulang Pahina pagpipilian.Ipakita ang Snippet Editor: Nagbubukas ng isang bagong window kung saan maaari kang maglagay ng CSS at HTML code, i-preview ang output nito sa on-the-fly.Ipakita ang Tagabuo ng Extension: Nagbibigay ng kakayahang lumikha o mag-edit ng mga extension ng Safari gamit ang CSS, HTML, at JavaScript.Ipakita ang Pag-record ng Timeline: Binubuksan ang Mga Timeline tab at nagsisimula sa pagpapakita ng mga kahilingan sa network, layout at pag-render ng impormasyon pati na rin ang pagpapatupad ng JavaScript sa real time.Mga Empty Cache: Tinatanggal ang buong cache na kasalukuyang naka-imbak sa iyong hard drive.Huwag Paganahin ang Mga Cache: Hinihinto ang Safari mula sa pag-cache upang ang lahat ng nilalaman ay makuha mula sa server sa bawat pag-load ng pahina.Huwag Paganahin ang Mga Larawan: Pinipigilan ang mga imahe mula sa pag-render sa lahat ng mga pahina sa Web.Huwag Paganahin ang Mga Estilo: Binabalewala ang mga katangian ng CSS kapag ang isang pahina ay na-load.Huwag paganahin ang JavaScript: Pinipigilan ang pagpapatupad ng JavaScript sa lahat ng mga pahina.Huwag paganahin ang Mga Extension: Ipinagbabawal ang lahat ng mga naka-install na extension mula sa pagpapatakbo sa loob ng browser.Huwag paganahin ang Site-specific na Hacks: Kung ang Safari ay binago upang malinaw na mahawakan ang (mga) isyu na tiyak sa aktibong pahina ng Web, ang pagpipiliang ito ay hahadlang sa mga pagbabagong iyon upang ang pahina ay naglo-load tulad ng bago ang mga pagbabago na ipinakilala.Huwag paganahin ang Mga Paghihigpit sa Mga Hinihiling sa File: Pinapayagan ang browser na magkaroon ng access sa mga file sa iyong mga lokal na disk, isang pagkilos na pinaghihigpitan bilang default para sa mga kadahilanang pang-seguridad.Huwag Paganahin ang Mga Paghihigpit sa Pag-alis ng Pinagmulan Ang mga paghihigpit na ito ay inilalagay sa pamamagitan ng default upang maiwasan ang XSS at iba pang mga potensyal na panganib. Gayunpaman, sila ay madalas na kailangang pansamantalang kapansanan para sa mga layunin ng pag-unlad.Pahintulutan ang JavaScript mula sa Smart Search Field: Kapag pinagana, nagbibigay ng kakayahang magpasok ng mga URL javascript: Isinama nang direkta sa address bar.Tratuhin ang SHA-1 Certificate bilang Hindi Naniniwala: Ang mga sertipiko ng SSL gamit ang algorithm ng SHA-1 ay malawak na itinuturing na hindi napapanahon at mahina.