Para saan ang Chrome DevTools?

Ang Chrome DevTools ay isang hanay ng mga tool sa paglikha ng website at pag-debug na naka-built sa Google Chrome. Siyempre, maaari din nating magamit ang mga ito sa bukas na bersyon ng mapagkukunan nito; Chromium.

Posibleng i-access ang mga tool ng Chrome para sa mga developer sa pamamagitan ng pagpindot sa key na kombinasyon na Ctrl + Shift + I, din sa pamamagitan ng pag-hover sa isang elemento at pag-right click sa Inspect.

Piraso

Kapag binuksan namin ang Chrome DevTools nakikita namin na lilitaw kan panel sa kanan ng pahina na aming nai-browse. Para sa bahagi nito, ang panel na ito eIto ay nahahati sa mga tab na naaayon sa bawat isa sa mga tool. Kaugnay nito, ang mga tool ay nahahati sa mga seksyon.
Ang mga seksyon ay:

• Mga Elemento: Ipinapakita ang iba't ibang mga bahagi ng pahina.
• Console: Pinapayagan kang magpatakbo ng mga diagnostic sa panahon ng pagbuo o makipag-ugnay sa Javascript code tulad ng gagawin mo sa terminal ng Linux.
• Mga Pinagmulan: Ginagawang madali upang i-debug ang iyong Javascript code at gumana sa mga lokal na file.
• Network: Mga tulong upang masubaybayan at mapagbuti ang pagganap ng pahina.
• Timeline: Pinapayagan ang pagrekord at paggalugad ng iba't ibang mga kaganapan na nagaganap sa panahon ng pagbisita sa isang site.
• Application: Sinisiyasat ang lahat ng mga mapagkukunan na na-load; bukod sa iba pa, mga database ng IndexedDB o Web SQL, lokal at imbakan ng session, cookies, cache ng app, mga imahe, font, at style sheet.
• Seguridad: Nakita ang mga problema sa seguridad sa code.

Tingnan natin kung ano ang magagamit natin sa Chrome DevTools

Ayusin kung ano ang hindi gumagana

Ito ay nangyari sa bawat developer. Isulat ang code, suriin na walang mga pagkakamali, at sa sandali ng katotohanan ang pahina ay hindi gumagana tulad ng nararapat. Ang kasangkapan sa Console ipinapakita kung anong error ang nangyayari sa oras ng pagpapatupad.

Bawasan ang oras ng paglo-load

Kung ang isang pahina ay tumatagal ng mahabang oras upang mai-load, ang user ay nagsasawa at pumunta sa ibang site. Sa kasamaang palad, ang panahon ng mga Flash website at ang kanilang mga animated na intro ay natapos na. Gayunpaman, ang tab na Mga Network ng Chrome DevTools ginagawang mas madali upang matuklasan kung aling mga elemento ang nakakaantala ng pag-load. Maaari naming ulitin ang pagsubok para sa iba't ibang mga bilis ng koneksyon.

Baguhin ang code

Magagawa natin sa tab na Mga Elemento tingnan ang mga elemento ng isang pahina, ang kaugnay na html code at ang mga katangian ng css. Maaari rin nating baguhin ang mga ito.

Maaari naming mai-edit ang teksto ng isang pahina gamit ang utos

document.designMode = 'on';

Subukan ang iba't ibang laki ng screen

Mga tablet, smartphone, smart TV, desktop computer. Ang listahan ng mga aparato kung saan kami nag-surf sa Internet ay lumalaki. Magagawa namin sa Chrome DevTools subukan kung ang isang pahina ay mukhang mahusay sa iba't ibang mga laki.

Benchmarking

Sa Pamamahala ng term na benchmarking ay nangangahulugang pag-aaral mula sa mga pinakamahusay na kasanayan ng mga gumagawa ng katulad sa atin. Sa Chrome DevTolls, kung nais namin ang disenyo ng isang website na maaari naming tingnan ang html code at mga style style ng css at kopyahin ang mga ito sa aming site.

Pagkuha ng Mga Chrome DevTool

Magagamit ang Chrome DevTools sa mga browser ng Google Chrome at Chromium. Ang Chromium ay nasa mga repository ng pangunahing mga pamamahagi. Maaari din itong mai-install mula sa mga tindahan ng Masapak. Tulad ng para sa Google chrome maaari mo punta ka dito sa DEB at format na RPM