Paano Gamitin ang Mga Tool ng Mga Developer ng Web Browser

Pinagsama toolets para sa Web designer, mga developer at tagasubok

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 opsyon sa tool .
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 Sangkap: Nagbibigay ng kakayahang suriin 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 sa diagnostic debugging.
   Pinagmumulan: Pinapayagan kang i-debug ang JavaScript code sa pamamagitan ng isang malakas na graphical na interface.
   Network: Categorizes 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 tiyempo.
   Timeline: Pinapayagan para sa malalim na pag-aaral 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 tab na Timeline .
   Profile: Nasira sa CPU profiler at Mga seksyon ng Heap profiler , nagbibigay ng komprehensibong 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 na may 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: Nag-aalok ng mga paraan upang ma-optimize ang isang pahina o oras ng pag-load ng application at pangkalahatang pagganap.
6. Binibigyang-daan ka ng Device Mode na tingnan ang aktibong pahina sa isang simulator na ginagawang 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. Upang i-on at i-off ang Mode ng Device , piliin ang icon ng mobile phone na matatagpuan diretso sa kaliwa ng tab na Mga Elemento .
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.

Inirekomendang Reading: 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 menu ng Web Developer ay dapat na ipapakita na ngayon, na naglalaman ng mga sumusunod na opsyon. 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 magsagawa ng mga expression ng 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: Pinapayagan ka ng JavaScript Debugger na matukoy mo at ayusin ang mga depekto sa pamamagitan ng pagtatakda ng mga breakpoint, pag-inspeksyon sa mga node ng DOM, mga panlabas na mapagkukunan ng itim na boxing, at marami pang iba. Tulad ng kaso sa Inspector , sinusuportahan din ng tampok na ito ang remote debugging. Shortcut sa keyboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Estilo ng Editor: Pinapayagan kang lumikha ng mga bagong estilo ng estilo at isama ang mga ito sa 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 isang 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 interactive interpreter ng command line. Magpasok ng tulong 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 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 )
   Nakikiramay Disenyo ng View: Pinapayagan kang agad na tingnan ang isang Web page sa iba't ibang mga resolution, layout, at mga laki ng screen upang gayahin ang maramihang mga 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 piniling pixel.
   Scratchpad : Hinahayaan kang magsulat, mag-edit, magsama at magsagawa ng mga snippet ng JavaScript code mula sa loob ng pop-out window ng Firefox. Shortcut sa keyboard: Mac OS X, Windows ( SHIFT + F4 )
   Pinagmulan ng Pahina: Ang orihinal na tool sa pag-develop ng browser batay, ipinapakita lamang ng pagpipiliang ito ang magagamit na source code para sa aktibong pahina. Shortcut sa keyboard: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Kumuha ng Higit pang Mga Tool: Binubuksan ang koleksyon ng Toolbox ng Developer ng Web sa opisyal na site ng add-on ng Mozilla, na nagtatampok ng 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 shortcut ng keyboard na inilunsad ang interface mula noong mas maaga na mga bersyon ng Internet Explorer, ang Dev toolset sa IE11 at Microsoft Edge ay dumating sa isang mahabang paraan simula sa pagsisimula nito sa pamamagitan ng pagbibigay ng isang madaling gamiting grupo ng monitor, debugger, emulator, at on-the-fly compiler.

1. Mag-click sa menu na Higit pang mga pagkilos , na kinakatawan ng tatlong tuldok at matatagpuan sa kanang sulok sa kanan ng window ng browser. Kapag lumilitaw ang drop-down na menu, piliin ang opsyon na may label na F12 Developer Tools . Bilang nabanggit na ko, maaari mo ring ma-access ang mga tool sa pamamagitan ng shortcut sa keyboard ng F12 .
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 ng 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 kabilang ang mga counter, timer, mga bakas, at na-customize na mga mensahe sa pamamagitan ng isang 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, linya ayon sa linya kung kinakailangan. Shortcut sa keyboard: (CTRL + 3)
   Network: Naglilista ng bawat kahilingan sa network na sinimulan 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 rate ng frame ng detalye, paggamit ng CPU, at iba pang mga sukatan na may kinalaman sa pagganap upang tulungan kang mapabilis 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 memory 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)
   Pagbubulay-bulay: Ipinapakita sa iyo kung paano magre-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 alinman sa iba pang mga tool mag-click sa square button 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, mag-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 sa CTRL + P sa 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 Mga Kagustuhan . Maaari mo ring gamitin ang sumusunod na shortcut sa keyboard sa lugar ng item na ito ng menu: COMMAND + COMMA (,)
2. Ang interface ng Mga Pagpipilian sa Safari ay dapat na ngayong maipakita, overlaying ang iyong browser window. Mag-click sa icon na Advanced , na matatagpuan sa kanang bahagi ng header.
3. Ang mga Advanced na kagustuhan ay dapat na makita ngayon. Sa ibaba ng screen na ito ay isang opsyon na may label na Ipakita Ipakita ang 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 interface ng Mga Kagustuhan sa pamamagitan ng pag-click sa pulang 'x' na matatagpuan sa kanang sulok sa kaliwa.
5. Dapat mo na ngayong mapansin ang isang bagong pagpipilian sa menu ng browser na pinangalanang, na matatagpuan sa pagitan ng 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 Sa: Nagbibigay-daan sa iyo upang buksan ang aktibong pahina ng Web sa isa sa iba pang mga browser na kasalukuyang naka-install sa iyong Mac.
   User Agent: Hinahayaan kang pumili mula sa higit sa isang dosenang natukoy na mga halaga ng user agent kabilang ang maraming mga bersyon ng Chrome, Firefox at Internet Explorer, pati na rin tukuyin ang iyong sariling custom na string.
   Magpasok ng Mode na tumutugon sa Disenyo : I- render ang kasalukuyang pahina na lilitaw sa iba't ibang mga device at sa iba't ibang mga resolution ng screen.
   Ipakita ang Inspektor ng 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: Ilulunsad din ang interface ng mga tool dev, nang direkta sa tab na Console na nagpapakita ng mga error, mga babala, at iba pang data na nahahanapang log.
   Ipakita ang Pinagmulang Pahina: Binubuksan ang tab na Mga Resources , na nagpapakita ng source code para sa aktibong pahina na nakategorya sa pamamagitan ng dokumento.
   Ipakita ang Mga Mapagkukunan ng Pahina: Nagsasagawa ng parehong pag-andar tulad ng pagpipiliang Ipakita ng Pahina ng Pahina .
   Ipakita ang Snippet Editor: Binubuksan ang 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 tab ng Mga Timeline 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: Itigil 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: Binabale-wala 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 Hacks na tukoy sa Site: Kung ang Safari ay binago upang tahasang mahigpit na hawakan ang (mga) isyu na partikular sa aktibong pahina ng Web, pipigilin ng pagpipiliang ito ang mga pagbabagong iyon upang ang pahina ay naglo-load tulad ng bago ang mga pagbabago na ipinakilala.
   Huwag paganahin ang Mga Paghihigpit sa Mga Limitasyon sa File: Pinapayagan ang browser na magkaroon ng access sa mga file sa iyong mga lokal na disk, isang aksyon na pinaghihigpitan bilang default para sa mga kadahilanang pang-seguridad.
   Huwag Paganahin ang Mga Paghihigpit sa Pag-cross-Pinagmulan: Ang mga paghihigpit 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 gamit ang javascript: isinasama nang direkta sa address bar.
   Tratuhin ang SHA-1 Certificate bilang Hindi Naniniwala: Ang mga SSL certificate na gumagamit ng algorithm ng SHA-1 ay malawak na itinuturing na hindi napapanahon at mahina.