Home-theater-designers
Ang Chrome DevTools ay isang mahalagang asset para sa mga developer. Habang ang iba pang mga browser ay nag-aalok ng medyo madaling gamiting mga tool sa pag-troubleshoot, ang Chrome DevTools ay nagkakahalaga ng iyong pansin dahil sa multi-functional interface at katanyagan nito.
Ang Chrome ay ang pinakatanyag na browser para sa mga developer dahil sa malakas na suite ng mga tool sa pag-debug. Madali ang paggamit ng Chrome DevTools, ngunit kailangan mong maunawaan kung paano ito gumagana upang masulit ito.
Paano Gumagana ang Mga Tool ng Developer ng Chrome
Pinapayagan ka ng Chrome DevTool na malutas ang mga problema sa isang website sa pamamagitan ng error console at iba pang mga tool sa pag-debug at pagsubaybay. Ang paggamit ng DevTools ay naglalantad sa mga lusot ng frontend at hinahayaan kang subaybayan kung paano lumilitaw ang iyong website sa mga mobile device at tablet.
Sa DevTools, maaari mong isagawa ang mga pag-edit ng real-time sa code ng isang website, tulad ng JavaScript, HTML, at CSS, at makakuha ng instant na mga resulta ng iyong mga pagbabago.
Ang mga pagbabagong nagawa mo sa pamamagitan ng DevTools ay hindi permanenteng nakakaapekto sa website. Pansamantala lamang nilang ipinapakita ang inaasahang kinalabasan na para bang inilapat mo ang mga ito sa aktwal na source code. Hinahayaan ka nitong mag-ehersisyo ng mga paraan upang ma-load ang iyong website nang mas mabilis at ginagawang mas madaling i-iron ang mga bug.
Paano Mag-access sa Mga Chrome DevTools
Maaari mong ma-access ang Chrome DevTools sa maraming paraan. Upang buksan ang mga tool ng developer gamit ang paraan ng shortcut sa Mac OS, pindutin ang Cmd + Opt + I . Kung gumagamit ka ng Windows OS, pindutin ang Ctrl + Shift + I mga susi sa iyong keyboard.
Bilang kahalili, maaari mong ma-access ang mga tool ng developer ng Chrome sa pamamagitan ng pag-click sa tatlong mga tuldok sa kanang sulok sa itaas ng screen. Tumungo sa Marami pang mga tool at piliin Mga tool ng developer . Ang isa pang pagpipilian ay mag-right click sa web page at mag-click sa Siyasatin pagpipilian
Gamit ang Mga Tool ng Developer ng Chrome para sa Website Diagnosis
Nag-aalok ang Chrome DevTools ng maraming paraan upang mag-tweak at mag-troubleshoot ng isang webpage. Tingnan natin ang ilan sa mga paraan na makakatulong sa iyo ang DevTools.
Tingnan Kung Paano Nakatingin ang Iyong Website sa isang Smartphone
Kapag pinalitan mo ang iyong browser ng Chrome sa mode ng developer, nagre-render ito ng isang kalahating sukat na bersyon ng iyong webpage. Gayunpaman, hindi ito bibigyan ka ng isang tunay na pagtingin sa kung ano ang hitsura nito sa isang smartphone o tablet.
Sa kabutihang palad, bilang karagdagan sa pagtatakda ng laki ng screen ng isang webpage, hinahayaan ka ng Chrome DevTool na lumipat sa pagitan ng iba't ibang mga uri ng mobile screen at mga bersyon din.
Upang ma-access ang opsyong iyon, magpalipat-lipat sa Siyasatin mode Susunod, mag-click sa Tumutugon drop-down sa kaliwang sulok sa tuktok ng DevTools at piliin ang iyong ginustong mobile device. Nagre-render at inaayos ang webpage upang magkasya sa laki ng mobile device na iyong pinili.
paano malalaman kung legit ang nagbebenta ng ebay
I-access ang Mga Source Source ng isang Webpage
Maaari mong ma-access ang mga file na bumubuo ng isang webpage sa pamamagitan ng Chrome DevTools. Upang ma-access ang mga file na ito, mag-click sa Pinagmulan pagpipilian sa itaas na bahagi ng menu ng DevTools. Inilalantad nito ang file system ng website at bibigyan ka rin ng pag-edit.
Maaari ka ring maghanap para sa mga mapagkukunang file, na maaaring maging kapaki-pakinabang kapag nakikipag-usap ka sa isang webpage na maraming mapagkukunan. Upang maghanap para sa isang mapagkukunan ng file sa pamamagitan ng DevTools, mag-click sa Maghanap pagpipilian sa itaas lamang ng console.
Gayunpaman, kung hindi mo mahanap ang Maghanap pagpipilian, isang mas mahusay na kahalili ay ang paggamit ng mga keyboard shortcuts. Sa Mac OS, pindutin ang Cmd + Opt + F mga susi upang maghanap para sa isang mapagkukunan ng file. Kung gumagamit ka ng Windows OS, pindutin ang Ctrl + Shift + F susi upang ma-access ang bar ng paghahanap ng mapagkukunan ng file.
Magsagawa ng Mga Live na Pag-edit sa isang Webpage
Isa sa mga pangunahing layunin ng paggamit ng DevTools ay upang maisakatuparan ang isang instant na pekeng pag-edit ng mga elemento sa isang webpage . Kapag lumipat ka sa mga tool ng developer, maaari mong i-edit ang nilalaman ng HTML ng isang website sa pamamagitan ng pag-click sa Mga elemento pagpipilian Pagkatapos, mag-right click sa anumang punto na nais mong ilapat ang mga pagbabago sa loob ng code editor at piliin I-edit bilang HTML .
Upang i-edit ang mga katangian ng CSS na hindi nakahanay, piliin ang Pinagmulan . Susunod, piliin ang CSS file na nais mong i-edit. Ilagay ang iyong cursor sa iyong linya ng pagpipilian sa loob ng code console upang magsagawa ng isang live na pag-edit. Ang paggawa nito ay nagbibigay sa iyo ng instant na feedback sa anumang mga pagbabago sa istilo na inilalapat mo sa webpage.
Tandaan na kapag nag-edit ka ng isang pahina sa pamamagitan ng DevTools, ang muling paglo-load ng pahina sa iyong browser ay ibabalik ito sa orihinal na form, at makikita mo lamang ang pag-edit. Ang pag-edit sa pamamagitan ng DevTools ay hindi nakakaapekto sa maayos na pagpapatakbo o paggamit ng website na iyon para sa iba pang mga gumagamit.
I-debug ang JavaScript Code kasama ang DevTools Console
Isa sa mga pinakamahusay na paraan upang ma-debug ang JavaScript ay ang paggamit ng mga tool sa developer ng Chrome. Nagbibigay ito sa iyo ng direktang ulat ng mga hindi wastong script pati na rin ang eksaktong lokasyon ng bug.
Mahusay na kasanayan na laging panatilihing bukas ang DevTools habang nagdidisenyo ng isang website na may JavaScript. Halimbawa, pagpapatakbo ng console.log () ang utos ng JavaScript sa isang hanay ng mga tagubilin ay ipinapakita ang resulta ng pag-log sa DevTools console kung matagumpay na tumatakbo ang programa.
Bilang default, nag-uulat ang console ng anumang mga isyu sa JavaScript sa iyong website. Maaari mong mahanap ang console sa mas mababang bahagi ng DevTools o i-access ito sa pamamagitan ng pag-click sa Console pagpipilian sa tuktok ng window ng Chrome DevTools.
Subaybayan ang Paglo-load ng Mapagkukunan mula sa isang Database
Bilang karagdagan sa pag-debug ng JavaScript, maaari ka ring bigyan ng console ng isang detalye ng mga mapagkukunan na hindi naglo-load nang tama mula sa database ng website.
Habang hindi ito palaging pinakamahusay na paraan upang mai-debug ang mga isyu sa backend, sinasabi pa rin sa iyo kung aling mga mapagkukunan ang nagbabalik a 404 error pagkatapos magpatakbo ng isang query sa database ng mga elementong iyon.
Kaugnay: Mga Karaniwang Error sa Website at Ano ang Ibig Sabihin
Lumipat ng Oryentasyon ng Mga Tool sa Developer ng Chrome
Upang baguhin ang posisyon ng mga tool ng developer ng Chrome, mag-click sa tatlong mga tuldok ng menu sa loob ng DevTools (hindi ang pangunahing isa sa browser). Pagkatapos piliin ang iyong ginustong posisyon mula sa Gilid ng pantalan pagpipilian
I-install ang Mga Extension ng Chrome DevTools
Maaari ka ring mag-install ng mga extension ng partikular na wika o balangkas na gumagana sa mga Chrome DevTools. Ang pag-install ng mga extension na ito ay nagbibigay-daan sa iyo upang i-debug ang iyong webpage nang mas mahusay.
Maaari mong ma-access ang isang listahan ng mga magagamit na extension para sa Chrome DevTools sa Chrome Tampok na Mga Extension ng DevTools gallery
Suriin ang Mga Isyu sa Seguridad sa isang Website
Hinahayaan ka ng mga Chrome DevTool na suriin kung gaano kaligtas ang iyong website, batay sa mga parameter tulad ng pagkakaroon ng mga sertipiko sa seguridad sa web at kung gaano kaligtas ang koneksyon, bukod sa iba pa. Upang suriin kung ang iyong website ay ligtas, mag-click sa Seguridad pagpipilian sa tuktok ng DevTools.
Ang Seguridad binibigyan ka ng tab ng isang pangkalahatang-ideya ng mga detalye sa seguridad ng iyong website at sasabihin sa iyo ang anumang mga potensyal na banta.
I-audit ang Iyong Website
Ang Chrome DevTools ay may tampok na hinahayaan kang suriin ang pangkalahatang pagganap ng iyong website batay sa mga tukoy na parameter.
Upang ma-access ang tampok na iyon, piliin ang Parola pagpipilian sa tuktok ng window ng DevTools. Susunod, piliin ang mga parameter na nais mong suriin, pagkatapos ay lagyan ng tsek ang alinman sa Mobile o Desktop mga pagpipilian upang makita kung paano gumaganap ang iyong webpage sa iba't ibang mga platform.
Susunod, mag-click sa Gumawa ng report upang magpatakbo ng isang pagtatasa ng iyong webpage batay sa mga parameter na pinili mo kanina.
Maaari mo ring suriin ang run-time o pag-load ng pagganap ng isang website sa pamamagitan ng pag-click sa Pagganap pagpipilian Upang magpatakbo ng isang pagsubok, mag-click sa icon sa tabi ng I-click ang record button pagpipilian upang maisagawa ang isang pagtatasa ng run-time. Bilang kahalili, mag-click sa pindutan ng reload sa ibaba nito upang masuri ang pagganap ng oras ng pag-load. Mag-click sa Tigilan mo na upang ihinto ang analyzer at ipakita ang mga resulta.
Samantalahin ang Advantage ng Chrome DevTools
Nakasalalay sa kung ano ang kailangan mo para dito, hinayaan ka ng Chrome DevTools na gumawa ng higit pa sa simpleng pag-debug lamang sa website. Sa kabutihang palad, ang mga DevTools ay madaling gamitin para sa mga programmer ng lahat ng mga antas ng kasanayan. Maaari mo ring malaman ang ilang mga pangunahing kaalaman sa pagbuo ng frontend ng website sa pamamagitan ng pagtingin sa source code ng mga website na iyong binibisita.
kung paano ayusin ang touch ng multo sa iphone
Maaari mo ring matuklasan ang ilang iba pang mga pagpipilian na hindi namin tinalakay sa artikulong ito. Kaya, huwag mag-atubiling maglaro sa mga magagamit na tampok. Bukod, ang pag-aayos ng mga tampok na ito ay hindi makakasama nang kaunti sa isang website.
Magbahagi Magbahagi Mag-tweet Email Paano Gumamit ng Chrome OS sa isang Raspberry PiHindi kayang bayaran ang isang Chromebook? Naghahanap ng isang kahalili sa Raspbian? Narito kung paano mag-install ng isang bersyon ng Chrome OS sa iyong Raspberry Pi.
Basahin Susunod Mga Kaugnay na Paksa- Internet
- Programming
- HTML
- Pag-unlad sa Web
- JavaScript
- Google Chrome
Si Idowu ay madamdamin tungkol sa anumang matalinong tech at pagiging produktibo. Sa kanyang libreng oras, naglalaro siya kasama ang pag-coding at paglipat sa chessboard kapag siya ay naiinip, ngunit gusto din niya ang paglayo mula sa nakagawiang gawain sa isang sandali. Ang kanyang hilig sa pagpapakita sa mga tao ng paraan sa paligid ng modernong tech ay nag-uudyok sa kanya na magsulat pa.
Higit pa Mula sa Idowu OmisolaMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe