Paano Gamitin ang Mga Tool para sa Developer ng Web Browser

2024 May -akda: Abigail Brown | [email protected]. Huling binago: 2023-12-17 07:03

Bilang karagdagan sa karamihan ng mga gumagawa ng browser na tumutuon sa pang-araw-araw na user na naghahanap upang mag-surf sa web, nagsisilbi rin sila sa mga web developer, designer, at mga propesyonal sa pagtiyak ng kalidad na tumutulong sa pagbuo ng mga app at site na ina-access ng mga user na iyon sa pamamagitan ng pagsasama ng makapangyarihang mga tool sa mismong mga browser.

Wala na ang mga araw kung saan ang tanging mga tool sa programming at pagsubok na natagpuan sa loob ng isang browser ay nagbigay-daan sa iyong tingnan ang source code ng isang page at wala nang iba pa. Hinahayaan ka ng mga browser ngayon na gumawa ng mas malalim na pagsisid sa pamamagitan ng paggawa ng mga bagay tulad ng pag-execute at pag-debug ng mga snippet ng JavaScript, pag-inspeksyon at pag-edit ng mga elemento ng DOM, pagsubaybay sa real-time na trapiko sa network habang naglo-load ang iyong app o page upang matukoy ang mga bottleneck, pagsusuri sa pagganap ng CSS, pagtiyak na ang iyong code ay hindi gumagamit ng masyadong maraming memory o masyadong maraming mga cycle ng CPU, at marami pang iba.

Mula sa isang pagsubok na pananaw, maaari mong kopyahin kung paano magre-render ang isang app o web page sa iba't ibang browser gayundin sa iba't ibang device at platform sa pamamagitan ng mahika ng tumutugon na disenyo at mga built-in na simulator. Ang pinakamagandang bahagi ay magagawa mo ang lahat ng ito nang hindi kinakailangang umalis sa iyong browser!

Ang mga tutorial sa ibaba ay gagabay sa iyo kung paano i-access ang mga tool ng developer na ito sa ilang sikat na web browser.

Google Chrome

Ang mga tool ng developer ng Chrome ay nagbibigay-daan sa iyo na mag-edit at mag-debug ng code, mag-audit ng mga indibidwal na bahagi upang ilantad ang mga isyu sa performance, gayahin ang iba't ibang screen ng device kabilang ang mga gumagamit ng Android o iOS, at magsagawa ng ilang iba pang kapaki-pakinabang na function.

1. Piliin ang main menu ng Chrome, na minarkahan ng tatlong pahalang na linya at matatagpuan sa kanang sulok sa itaas ng browser.

2. Kapag lumabas ang drop-down na menu, i-hover ang iyong mouse cursor sa Higit pang mga tool na opsyon.

   

3. Ang isang sub-menu ay dapat na ngayong lumitaw. Piliin ang opsyong may label na Developer tools. Magagamit mo rin ang sumusunod na keyboard shortcut bilang kapalit ng menu item na ito: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Ang interface ng Chrome Developer Tools ay dapat na ngayong ipakita, tulad ng ipinapakita sa halimbawang screenshot na ito. Depende sa iyong bersyon ng Chrome, ang unang layout na nakikita mo ay maaaring bahagyang naiiba sa ipinakita dito. Ang pangunahing hub ng mga tool ng developer, na karaniwang matatagpuan sa alinman sa ibaba o kanang bahagi ng screen, ay naglalaman ng mga sumusunod na tab.

5. Bilang karagdagan sa mga seksyong ito, maa-access mo rin ang mga sumusunod na tool sa pamamagitan ng icon na >>, na matatagpuan sa kanan ng Performance tab.

   • Memory: Subaybayan at itala ang paggamit ng memory sa isang web page. Makikita mo kung gaano kabigat ang JavaScript sa iyong site.
   • Security: Itina-highlight ang mga problema sa certificate at iba pang isyu na nauugnay sa seguridad sa aktibong page o application.
   • Application: Siyasatin ang mga mapagkukunang ginagamit ng isang web application. Kumuha ng kumpletong detalye ng kung ano ang ginagamit.
   • Mga Pag-audit: Nag-aalok ng mga paraan para i-optimize ang oras ng pagkarga ng page o application at pangkalahatang pagganap.

   

6. Binibigyang-daan ka ng

   Mode ng Device na tingnan ang aktibong page sa isang simulator na ginagawa itong halos eksakto kung paano ito lalabas sa isa sa mahigit isang dosenang device, kabilang ang ilang kilalang Android at mga modelo ng iOS gaya ng iPad, iPhone, at Samsung Galaxy. Binigyan ka rin ng kakayahang tularan ang mga custom na resolusyon ng screen upang umangkop sa iyong partikular na pangangailangan sa pag-unlad o pagsubok.

   Para i-toggle ang Device Mode on at off, piliin ang mobile phone icon na matatagpuan nang direkta sa kaliwa ng Elements tab.

   

7. Maaari mo ring i-customize ang hitsura at pakiramdam ng iyong mga tool ng developer sa pamamagitan ng pagpili muna sa button ng menu na kinakatawan ng tatlong tuldok na patayong inilagay at matatagpuan sa dulong kanang bahagi ng mga nabanggit na tab.

   Mula sa loob ng drop-down na menu na ito, maaari mong muling iposisyon ang dock, ipakita o itago ang iba't ibang tool pati na rin maglunsad ng mga mas advanced na item gaya ng device inspector. Malalaman mo na ang interface ng dev tools mismo ay lubos na nako-customize sa pamamagitan ng mga setting na makikita sa seksyong ito.

   

Mozilla Firefox

Ang seksyon ng web developer ng Firefox ay may kasamang mga tool para sa mga designer, developer, at tester gaya ng style editor at pixel-targeting eyedropper.

1. Piliin ang pangunahing menu ng Firefox, na kinakatawan ng tatlong pahalang na linya at matatagpuan sa kanang sulok sa itaas ng window ng browser.

2. Kapag lumabas ang drop-down na menu, piliin ang Web Developer.

   

3. Ang menu ng Web Developer ay dapat na ngayong ipakita, na naglalaman ng mga sumusunod na opsyon. Mapapansin mo na karamihan sa mga item sa menu ay may mga keyboard shortcut na nauugnay sa kanila.

   • Toggle Tools: Ipinapakita o itinatago ang interface ng mga tool ng developer, karaniwang nakaposisyon sa ibaba ng window ng browser. Shortcut sa keyboard: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Nagbibigay-daan sa iyong suriin at/o i-tweak ang CSS at HTML code sa aktibong page pati na rin sa isang portable na device sa pamamagitan ng malayuang pag-debug. Shortcut sa keyboard: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Binibigyang-daan kang magsagawa ng mga expression ng JavaScript sa loob ng aktibong page pati na rin suriin ang magkakaibang hanay ng mga naka-log na data kabilang ang mga babala sa seguridad, mga kahilingan sa network, mga mensahe ng CSS, at higit pa. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Hinahayaan ka ng JavaScript Debugger na matukoy at ayusin ang mga depekto sa pamamagitan ng pagtatakda ng mga breakpoint, pag-inspeksyon ng mga DOM node, black boxing na panlabas na pinagmumulan, at marami pa. Tulad ng kaso sa Inspector, sinusuportahan din ng feature na ito ang malayuang pag-debug. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Editor ng Estilo: Binibigyang-daan kang lumikha ng mga bagong stylesheet at isama ang mga ito sa aktibong web page, o i-edit ang mga umiiral nang sheet at subukan kung paano na-render ang iyong mga pagbabago sa isang browser sa isang click lang. Shortcut sa keyboard: Mac OS X, Windows (SHIFT+F7)
   • Performance: Nagbibigay ng detalyadong breakdown ng pagganap ng network ng aktibong page, data ng frame rate, oras at estado ng pagpapatupad ng JavaScript, paint flashing, at marami pa. Shortcut sa keyboard: Mac OS X, Windows (SHIFT+F5)
   • Network: Inililista ang bawat kahilingan sa network na pinasimulan ng browser kasama ang kaukulang pamamaraan, domain ng pinagmulan, uri, laki, at oras na lumipas. Shortcut sa keyboard: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Tingnan ang cache at cookies na iniimbak ng isang website. Keyboard shortcut: (SHIFT+F9)
   • Developer Toolbar: Nagbubukas ng interactive na command line interpreter. Ilagay ang help sa interpreter para sa isang listahan ng lahat ng available na command at ang kanilang wastong syntax. Shortcut sa keyboard: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Nagbibigay ng kakayahang gumawa at magsagawa ng mga web app sa pamamagitan ng aktwal na device na nagpapatakbo ng Firefox OS o sa pamamagitan ng Firefox OS Simulator. Keyboard shortcut: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: Nagbibigay ng parehong functionality gaya ng Web Console (tingnan sa itaas). Gayunpaman, ang lahat ng data na ibinalik ay para sa buong Firefox application (kabilang ang mga extension at browser-level function) kumpara sa aktibong web page lamang. Shortcut sa keyboard: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Tumugon na View ng Disenyo: Nagbibigay-daan sa iyong agarang tingnan ang isang web page sa iba't ibang resolution, layout, at 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: Ipinapakita ang hex color code para sa mga indibidwal na piniling pixel.
   • Scratchpad: Hinahayaan ka ng Scratchpad na magsulat, mag-edit, magsama at magsagawa ng mga snippet ng JavaScript code mula sa loob ng pop-out na Firefox window. Magbukas ng interactive na dokumento ng JavaScript na nagbibigay-daan sa iyong magsulat sa code at subukan ito laban sa isang website. Keyboard shortcut: (SHIFT+F4)
   • Mga Serbisyong Manggagawa: I-debug ng mga manggagawa sa serbisyo ang iyong web application. Kumuha ng detalyadong impormasyon sa kanilang performance at mga error.
   • Page Source: Ang orihinal na tool ng developer na nakabatay sa browser, ipinapakita lang ng opsyong ito ang available na source code para sa aktibong page. Keyboard shortcut: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Kumuha ng Higit pang Mga Tool: Binubuksan ang na koleksyon ng Toolbox ng Web Developer sa opisyal na add-on na site ng Mozilla, na nagtatampok ng humigit-kumulang isang dosenang sikat na extension tulad ng bilang Firebug at Greasemonkey.

   

Microsoft Edge/Internet Explorer

Karaniwang tinutukoy bilang F12 Developer Tools, isang pagpupugay sa keyboard shortcut na naglunsad ng interface mula noong mga naunang bersyon ng Internet Explorer, ang dev toolset sa IE11 at Microsoft Edge Malayo na ang narating mula nang mabuo ito sa pamamagitan ng pag-aalok ng napakahusay na pangkat ng mga monitor, debugger, emulator, at on-the-fly compiler.

Hindi na sinusuportahan ng Microsoft ang Internet Explorer at inirerekomenda na mag-update ka sa mas bagong Edge browser. Pumunta sa kanilang site para i-download ang pinakabagong bersyon.

1. Piliin ang Higit pang pagkilos, na kinakatawan ng three dots at matatagpuan sa kanang sulok sa itaas ng browser window.

   

2. Kapag lumabas ang drop-down na menu, piliin ang opsyong may label na Developer Tools.

   

3. Ang development interface ay dapat na ngayong ipakita, karaniwang nasa ibaba ng window ng browser. Available ang mga sumusunod na tool, bawat isa ay maa-access sa pamamagitan ng pag-click sa kani-kanilang heading ng tab o gamit ang kasamang keyboard shortcut.

   

   • DOM Explorer: Binibigyang-daan kang mag-edit ng mga stylesheet at HTML sa aktibong page, na nagre-render ng mga binagong resulta habang nagpapatuloy ka. Gumagamit ng IntelliSense functionality para i-autocomplete ang code kung saan naaangkop. Keyboard shortcut: (CTRL+1)
   • Console: Nagbibigay ng kakayahang magsumite ng impormasyon sa pag-debug kabilang ang mga counter, timer, trace, at customized na mensahe sa pamamagitan ng pinagsamang API. Gayundin, hinahayaan kang mag-inject ng code sa isang aktibong web page at baguhin ang mga value na itinalaga sa mga indibidwal na variable sa real-time. Keyboard shortcut: (CTRL+2)
   • Debugger: Nagbibigay-daan sa iyong magtakda ng mga breakpoint at i-debug ang iyong code habang isinasagawa ito, bawat linya kung kinakailangan. Keyboard shortcut: (CTRL+3)
   • Network: Inililista ang bawat kahilingan sa network na sinimulan ng browser sa panahon ng pag-load at pagpapatupad ng page kasama ang mga detalye ng protocol, uri ng content, paggamit ng bandwidth, at marami pa. Keyboard shortcut: (CTRL+4)
   • Performance: Mga detalye ng frame rate, paggamit ng CPU, at iba pang sukatan na nauugnay sa performance upang matulungan kang mapabilis ang mga oras ng pag-load ng page at iba pang aktibidad. Keyboard shortcut: (CTRL+5)
   • Memory: Tumutulong sa iyong ihiwalay at itama ang mga potensyal na pagtagas ng memory sa kasalukuyang web page sa pamamagitan ng pagpapakita ng timeline ng paggamit ng memory kasama ng mga snapshot mula sa iba't ibang agwat ng oras. Keyboard shortcut: (CTRL+6)
   • Emulation: Ipinapakita sa iyo kung paano magre-render ang aktibong page sa iba't ibang resolution at laki ng screen, na tumutulad sa mga smartphone, tablet, at iba pang device. Nagbibigay din ito ng kakayahang baguhin ang user agent at oryentasyon ng page, pati na rin gayahin ang iba't ibang geolocation sa pamamagitan ng pagpasok ng latitude at longitude. Keyboard shortcut: (CTRL+7)

4. Upang ipakita ang Console habang nasa loob ng alinman sa iba pang mga tool pindutin ang square button na may kanang bracket sa loob nito, na matatagpuan sa ang kanang sulok sa itaas ng interface ng development tools.

   

5. Para i-undock ang interface ng developer tools para maging hiwalay itong window, piliin ang two cascading rectangles o gamitin ang sumusunod na keyboard shortcut: CTRL+P. Maaari mong ibalik ang mga tool sa kanilang orihinal na lokasyon sa pamamagitan ng pagpindot sa CTRL+P sa pangalawang pagkakataon.

   

Apple Safari (Mac Lang)

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 mahusay na console at tradisyonal na pag-log at pag-debug na mga tampok, isang madaling gamitin na responsive na mode ng disenyo at isang tool upang lumikha ng iyong sariling mga extension ng browser ay ibinibigay din.

1. Piliin ang Safari sa menu ng browser, na matatagpuan sa itaas ng iyong screen. Kapag lumabas ang drop-down na menu, piliin ang Preferences. Maaari mo ring gamitin ang sumusunod na keyboard shortcut bilang kapalit ng menu item na ito: COMMAND+COMMA(,)

   

2. Ang

   Preferences interface ng Safari ay dapat na ngayong ipakita, na naka-overlay sa window ng iyong browser. Piliin ang Advanced na icon, na matatagpuan sa dulong kanang bahagi ng header.

   

3. Ang Advanced na mga kagustuhan ay makikita na ngayon. Sa ibaba ng screen na ito ay isang opsyon na may label na Show Develop menu sa menu bar, na may kasamang checkbox. Kung walang checkmark na ipinapakita sa kahon, i-click ito nang isang beses upang ilagay ang isa doon.

   

4. Isara ang Preferences interface.

5. Dapat mapansin mo na ngayon ang isang bagong opsyon sa menu ng browser na pinangalanang Develop, na matatagpuan sa pagitan ng Bookmarks at Window. Mag-click sa item na ito sa menu. Dapat na ngayong ipakita ang isang drop-down na menu, na naglalaman ng mga sumusunod na opsyon.

   • Open Page With: Binibigyang-daan kang buksan ang aktibong web page sa isa sa iba pang mga browser na kasalukuyang naka-install sa iyong Mac.
   • User Agent: Hinahayaan kang pumili mula sa mahigit isang dosenang paunang natukoy na halaga ng user agent kabilang ang ilang bersyon ng Chrome, Firefox, at Internet Explorer, pati na rin tukuyin ang sarili mong custom string.
   • Ipasok ang Responsive Design Mode: Nire-render ang kasalukuyang page kung paano ito lalabas sa iba't ibang device at sa iba't ibang resolution ng screen.
   • Show Web Inspector: Inilunsad ang pangunahing interface para sa mga dev tool ng Safari, karaniwang inilalagay sa ibaba ng screen ng iyong browser at naglalaman ng mga sumusunod na seksyon: Elements, Network, Resources, Timelines, Debugger, Storage, Console.
   • Ipakita ang Error Console: Inilunsad din ang interface ng dev tools, direkta sa tab na Console na nagpapakita ng mga error, babala, at iba pang nahahanap data ng log.
   • Show Page Source: Binubuksan ang Resources tab, na nagpapakita ng source code para sa aktibong page na nakategorya ng dokumento.
   • Ipakita ang Mga Mapagkukunan ng Pahina: Nagsasagawa ng parehong function bilang opsyon na Ipakita ang Pinagmulan ng Pahina.
   • Show Snippet Editor: Nagbubukas ng bagong window kung saan maaari kang maglagay ng CSS at HTML code, na i-preview ang output nito on-the-fly.
   • Show Extension Builder: Nagbibigay ng kakayahang gumawa o mag-edit ng mga extension ng Safari gamit ang CSS, HTML, at JavaScript.
   • Ipakita ang Pagre-record ng Timeline: Binubuksan ang tab na Mga Timeline at magsisimulang magpakita ng mga kahilingan sa network, layout, at pag-render ng impormasyon pati na rin ang pagpapatupad ng JavaScript sa real-time.
   • Empty Caches: Tinatanggal ang buong cache na kasalukuyang naka-store sa iyong hard drive.
   • I-disable ang Mga Cache: Pinipigilan ang Safari sa pag-cache upang ang lahat ng content ay makuha mula sa server sa bawat pag-load ng page.
   • I-disable ang Mga Larawan: Pinipigilan ang pag-render ng mga larawan sa lahat ng web page.
   • I-disable ang Mga Estilo: Binabalewala ang mga katangian ng CSS kapag na-load ang isang page.
   • I-disable ang JavaScript: Pinaghihigpitan ang pagpapatupad ng JavaScript sa lahat ng page.
   • I-disable ang Mga Extension: Ipinagbabawal na tumakbo ang lahat ng naka-install na extension sa loob ng browser.
   • I-disable ang Mga Hack na Partikular sa Site: Kung binago ang Safari upang tahasang pangasiwaan ang (mga) isyu na partikular sa aktibong web page, haharangin ng opsyong ito ang mga pagbabagong iyon upang ang page naglo-load gaya ng mangyayari bago ang mga pagbabagong ito na ipinakilala.
   • I-disable ang Local File Restrictions: Nagbibigay-daan sa browser na magkaroon ng access sa mga file sa iyong mga lokal na disk, isang pagkilos na pinaghihigpitan bilang default para sa mga kadahilanang panseguridad.
   • Disable Cross-Origin Restrictions: Ang mga paghihigpit na ito ay inilalagay bilang default upang maiwasan ang XSS at iba pang potensyal na panganib. Gayunpaman, kadalasan ay kailangan nilang pansamantalang i-disable para sa mga layunin ng pag-unlad.
   • Pahintulutan ang JavaScript mula sa Smart Search Field: Kapag pinagana, nagbibigay ito ng kakayahang magpasok ng mga URL na may javascript: na direktang isinama sa address bar.
   • Treat SHA-1 Certificates as Insecure: Ang mga SSL certificate na gumagamit ng SHA-1 algorithm ay malawak na itinuturing na luma na at madaling maapektuhan.