Alamin kung ano ang magagawa ng mga tool para sa iyo developer ng Chrome DevTools at matutong gamitin ang kanilang buong potensyal.

Sa lahat ng mga disiplina sa computer programming, ang web development ay tiyak na may pinakamababang hadlang sa pagpasok. Halos lahat ng kailangan mo para gumawa ng simpleng web page ay Notepad at browser.

Gayunpaman, habang nagiging mas kumplikado ang layout, ang pagsubaybay sa mga pagbabago sa code ng pahina sa isang regular na Notepad ay nagiging mas mahirap. Alam ko mula sa aking sarili na ang isang baguhang web developer ay maaaring gumugol ng higit sa isang oras para lamang maghanap ng isang panuntunan sa style sheet upang baguhin ang hitsura ng ito o ang elementong iyon...

Siyempre, maaari kang maghanap nang random, ngunit ang mga eksperto na itinuro ng mapait na karanasan ay hindi umaasa sa kanilang pagbabantay. Gumagamit lang sila ng mga espesyal mga tool ng developer, na binuo sa karamihan ng mga browser at nagbibigay-daan sa iyong mabilis na suriin ang code at subukan ang ilang mga opsyon para sa pagpapatakbo nito.

Ang isang katulad na uri ng tool ay lumitaw sa Internet Explorer. Ginamit ng lumang Opera ang Dragonfly panel para sa mga layuning ito at mayroon ding sariling built-in na analogue ng Notepad na may pag-highlight ng code, na naging posible na mag-type nang direkta sa kapaligiran ng browser:

Ngayong araw mula sa katulad na kasanayan umatras at nagbigay sa mga web browser ng mga espesyal na inspektor ng code. Maaaring ipagmalaki ng mga browser na nakabatay sa Chromium engine ang mga pinaka-functional na tool ng developer, at mas partikular sa Google Chrome. Tingnan natin ang lahat gamit ang kanyang halimbawa.

Mga tool sa pagtawag sa developer at page view

Maaari mong tawagan ang mga tool ng developer sa Chrome sa maraming paraan:

1. Mula sa pangunahing menu. Mag-click sa pindutan ng menu (tatlong tuldok sa kanan itaas na sulok browser window), mag-hover sa drop-down na listahan "Higit pang Mga Tool" at i-click ang item "Mga Tool ng Developer".
2. Mga hotkey. Maaari mong pindutin ang pindutan upang tumawag F12 o kumbinasyon CTRL+SHIFT+I.
3. Mula sa menu ng konteksto (pinaka maginhawa para sa pag-inspeksyon ng mga partikular na elemento ng pahina). I-click i-right click mouse sa ibabaw ng gustong bagay sa web page at piliin ang item "Tingnan ang code"(o "Suriin ang Elemento" sa ilan pa mga naunang bersyon Chroma).

Ang toolbar ng developer ay isang hanay ng mga tab kung saan matatagpuan ang ilang mga functional na module, pati na rin ang mga control at configuration button. Una sa lahat, dapat mong bigyang pansin pangkalahatang mga pindutan. Sa kaliwa ay makakakita ka ng button sa pagpili ng elemento ng pahina at button sa pagpili ng page view:

Pag-aaralan pa rin namin ang pag-uugali ng una, ngunit para sa pangalawa, pinapayagan ka nitong tularan ang pagpapakita ng isang web page sa screen ng isa sa mga magagamit na mobile device (halimbawa, isang iPhone) o sa isang display. ibinigay na resolusyon sa mga pixel. Ang kailangan mo lang gawin ay pindutin ito at piliin ang gustong device:

Mayroon ding ilang mga button at indicator sa kanang bahagi. Ipinapakita ng mga tagapagpahiwatig ang bilang ng mga error (sa pula) at mga babala (sa dilaw) sa pagpapatakbo ng mga script. Ang pangunahing pindutan dito ay maaaring tawagan menu ng mga setting. Pinapayagan ka nitong baguhin ang pagkakatali ng panel mismo na nauugnay sa frame na may pahina, pati na rin paganahin at huwag paganahin karagdagang mga tab gamit ang mga tool (seksyon "Higit pang mga tool"). Bilang default, ito ay matatagpuan sa ibaba sa ilalim ng pahinang sinisiyasat, ngunit maaari rin itong ilagay sa gilid o kahit na i-undock sa isang hiwalay na window:

Ang menu ay mayroon ding seksyong "Mga Setting", na nagbibigay ng access sa maraming mga setting ng tool ng developer. Ngunit sa simula, malamang na hindi mo sila kailanganin, kaya't ang pag-alam lamang tungkol sa kanila ay sapat na. At titingnan natin ang mga pangunahing tab na may mga kapaki-pakinabang na pag-andar.

Tab ng Mga Elemento

Sa pamamagitan ng default na Chrome Bubukas ang DevTools sa tab "Mga elemento". Isa ito sa mga pinakakapaki-pakinabang na tab dahil pinapayagan ka nitong tingnan at mabilis na baguhin ang HTML at CSS code iba't ibang elemento mga web page. Para pumili ng elemento, i-activate lang ang unang button sa kaliwang bahagi ng panel (“Pumili ng elemento sa page para siyasatin ito”) at ituro ang mouse cursor sa gustong fragment ng page. Sa mismong pahina, ang pagpili at laki ng block sa mga pixel ay ipapakita sa paligid ng napiling elemento, at sa tab na "Mga Elemento" ang HTML code ay lalawak sa isang linya na naglalarawan sa napiling fragment:

Ang pagkakaroon ng pagpili ng isang elemento, maaari naming i-edit ito at ang mga estilo na nauugnay dito ayon sa kailangan namin. Halimbawa, gusto naming baguhin ang text at hitsura ng block na "cloud" gamit ang mga parirala ni Frida sa aming website. Upang gawin ito, piliin ang bloke mismo at tingnan ang mga nilalaman nito:

Tulad ng nakikita mo, sa loob nito ay may tatlong bloke na may iba't ibang mga replika at isang script na nagpapalit ng mga replika na ito pagkatapos ng ilang partikular na panahon. Upang magsulat ng sarili naming bagay, maaari naming ihinto ang script at isulat ang aming teksto sa isa sa mga bloke (Ang pag-edit ng HTML ay magagamit pagkatapos ng pag-double click sa elemento). Bagaman, bakit mag-aaksaya ng oras sa mga bagay na walang kabuluhan? Maaari naming alisin ang lahat ng hindi kinakailangang mga bloke, nag-iiwan lamang ng isa (at sa parehong oras maaari naming buwagin ang script :)):

Kaya, binago namin ang teksto sa bloke, ngunit mukhang maliit ito ... Kailangan namin ang sukat ng aming "krimen" upang makita sa unang tingin :) At dito ang function ng pag-edit ng estilo, na magagamit sa karagdagang bahagi ng tab na "Mga Elemento", ay makakatulong sa amin . Piliin ang kinakailangang bloke sa code at i-double click sa side panel maaari mong parehong i-edit ang mga istilong umiiral na at magdagdag ng mga bago. Sa ganitong paraan makakamit mo ang napakapansing mga resulta :)

Pakitandaan na ang lahat ng elemento na idinaragdag namin sa panel ng mga estilo ay awtomatikong nakarehistro bilang mga inline na istilo (mga parameter ng katangiang "estilo") ng napiling bloke ng HTML code. Bukod dito, ang bawat isa sa kanila ay maaaring mabilis na hindi paganahin sa pamamagitan ng pag-alis ng check sa checkbox sa kaliwa (sa code, ang hindi pinagana na parameter ay awtomatikong tinanggal bilang isang komento).

At, marahil, ang pinaka-kapaki-pakinabang na bagay ay na para sa bawat tagapili na may paglalarawan ng mga estilo ay may eksaktong link sa linya kung saan ito ay aktwal na nakasulat sa CSS file. Pinapayagan ka nitong buksan ang file at gawin ang mga kinakailangang pagbabago nang maaga. sikat na lugar sa halip na maghanap ng mano-mano! Iyon ay, maaari mong gamitin ang mga tool ng developer sa tab na "Mga Elemento" upang pumasok at suriin ang paunang pansamantalang pag-edit code ( lahat ng mga pag-edit ay nawawala pagkatapos i-reload ang pahina) na sinusundan ng pagpapakilala ng pinakamatagumpay na pagbabago sa code sa patuloy na batayan.

Kapansin-pansin din sa wakas na ang panel para sa mga istilo ng pag-edit ay may ilang sariling mga tab, kung saan ang "Mga Estilo" ang una lamang. Narito kung ano karagdagang mga seksyon mayroong:

• Nakalkula- ipinapakita ang modelo ng napiling bloke at awtomatikong kinakalkula ang mga istilo para dito, na hindi tahasang tinukoy o minana mula sa mga bloke ng magulang;
• Mga Tagapakinig ng Kaganapan- nagpapakita ng isang listahan ng mga function na "nakikinig" sa ilang mga kaganapan para sa buong pahina o isang partikular na napiling bloke (kailangan mong alisan ng tsek ang kahon;
• Mga Breakpoint ng DOM- naglalaman ng tinatawag na "breakpoints" DOM ​​​​(pinaikling "Dokumento" Modelo ng Bagay" - "modelo ng bagay dokumento"), na maaaring malikha mula sa menu ng konteksto ng HTML code (pangkat na "Break on") kapag binago ito upang mabilis na kanselahin/ilapat ang mga pagbabagong ginawa;
• Mga Katangian- nagbibigay-daan sa iyo upang tingnan buong listahan Mga katangian ng JavaScript para sa napiling bloke sa pahina;
• Accessibility- Ipinapakita ang hierarchical level ng nesting para sa napiling block nang hindi isinasaalang-alang ang mga uri ng block, ang kanilang mga klase, identifier o iba pang mga katangian.

Ang pagkakaroon ng lahat ng mga karagdagang tool na ito ay hindi nag-oobliga sa iyo na gamitin ang mga ito. Karaniwan, sapat na ang kakayahang mag-edit ng HTML at CSS code. Gayunpaman, kung kailangan mong gumamit ng JavaScript, kung gayon ang listahan ng pakikinig, mga breakpoint ng DOM, at mga katangian ng block ay maaaring maging lubhang kapaki-pakinabang sa iyo!

Console

Dahil pinag-uusapan natin ang tungkol sa JavaScript, hindi natin maiiwasang pag-usapan ang tungkol sa naturang tool na nakapaloob Chrome DevTools parang console. Mahahanap mo ito sa isang hiwalay Tab na "Console"., at ito ay ipinapakita din bilang default bilang karagdagang panel sa ibaba sa lahat ng iba pang mga tab (maaari mong i-disable ang display sa mga setting sa pamamagitan ng pagpili sa "Itago ang console drawer" o pagpindot sa ESC button):

Ang console ay maaaring magsagawa ng dalawang function nang sabay-sabay: pagsubaybay sa kaganapan sa page na nagpapakita ng mga babala at error, pati na rin pagpapatupad ng mga utos ng JavaScript ipinasok ng gumagamit. Ang unang function ay malinaw na naisakatuparan. Sa output ng console, ang lahat ng mga kaganapan ay pinagsama-sama sa tatlong kategorya na may iba't ibang kulay ng background:

1. Puti- "mga knockout" tungkol sa matagumpay na nakumpletong mga kaganapan.
2. Dilaw- mga babala tungkol sa mga posibleng hindi kritikal na pagkakamali at pagkabigo.
3. Pula- mga error sa pagpapatupad ng script o sa pag-access ng ilang hiniling na mapagkukunan.

Ang mga error at babala ay naglalaman ng maikling paglalarawan mga problema at isang link sa file at ang linya sa loob nito na nagiging sanhi ng problemang ito. Alam ang eksaktong lokasyon ng problema (ipagpalagay na ito ay nangyayari sa isang file sa iyong server), maaari mong mabilis na mai-localize at ayusin ang error.

Tulad ng para sa pagpapatupad ng code ng gumagamit, pagkakataong ito Ito ay madalas na ginagamit para sa mabilis na pag-debug ng code at pagsasagawa ng iba't ibang mga eksperimento gamit ang JavaScript. Halimbawa, kapag nag-aaral ng wikang ito, hindi mo palaging kailangan ng isang hiwalay na Notepad o kahit isang ganap na kapaligiran sa pag-unlad. Maaari kang magsagawa ng mga simpleng script nang direkta sa console (lalo na dahil sinusuportahan nito ang pagkumpleto ng command).

Para sa console programming, pinakamahusay na magbukas ng hindi umiiral na internal page sa Chrome (halimbawa, chrome://blank/) o isang bagong tab na walang laman (chrome://newtab/). Maiiwasan nito ang mga overlap sa pagpapatupad ng mga script na tumatakbo na sa page. Sa katunayan, iyon lang - maaari tayong magsulat ng code sa console at isagawa ito sa pamamagitan ng pagpindot sa Enter. Ang tanging bagay na kailangan mong tandaan ay para sa output, sa halip na ang tradisyonal na "document.write("");", ang construction na "console.log("");" Narito ang pinaka primitive na halimbawa para sa pagpapakita ng text string:

console.log("Aking unang text output sa Chrome console:)");

Sinusuportahan ng console ang ilang mga specifier na nagbibigay-daan sa iyong tahasang tukuyin ang uri ng output (string/number/DOM ​​​​element/JavaScript object), magsagawa ng data substitution ng itinalagang uri, o maglapat ng pag-format:

Narito ang ilang halimbawa ng paggamit ng mga specifier:

*** Halimbawa 1 ***

console.log("Nagbibilang ako hanggang lima: %d, %d, %d, %d, %d \n%s", 1, 2, 3, 4, 5, "Titingnan ko! ");

*** Halimbawa 2 ***

console.log("%cIto ay isusulat sa malalaking pulang letra sa isang asul na background", "color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold");

*** Halimbawa 3 ***

var curDate = bagong Petsa();
var day = curDate.getDate();
var month = curDate.getMonth();
var arr = [
"Enero",
"Pebrero",
"Marso",
"Abril",
"Mayo",
"Hunyo",
"Hulyo",
"Agosto",
"Setyembre",
"Nobyembre",
"Disyembre",
];
console.log("%cToday: %s - %d number", "color: orange; font-size: 30px; background: blue; padding: 20px", arr, day);

Tulad ng nakikita mo, ang console ay maaaring matagumpay na magamit hindi lamang para sa pag-inspeksyon ng umiiral na code, kundi pati na rin bilang isang kapaligiran para sa pag-aaral ng JavaScript. Sinusuportahan nito ang parehong mga single-line na expression at mas kumplikadong multi-line construct na may mga variable, array, at loop. Upang magpakain ng isang linya sa console, sa halip na Enter, kailangan mong pindutin ang SHIFT+ENTER, at para mag-feed ng mga linya sa mga resulta ng output, gamitin ang line feed character - "\n".

Tab ng Mga Pinagmulan

Sa unang tingin, ang layunin ng ikatlong tab ng mga tool ng developer "Mga Pinagmulan" hindi lubos na malinaw. Bilang default, sa gitna ng workspace, ang source code ng page ay binubuksan din dito, na, sa ilang kadahilanan, ay hindi maaaring i-edit. Mayroong dalawang panel sa mga gilid: "Pahina" (kaliwa) at "Mga Thread" (kanan). At ganoon lang kaliwang panel at ito ang pangunahing "kayamanan" ng tab na "Mga Pinagmulan"!

Binibigyang-daan ka ng panel na ito na tingnan ang lahat ng mga mapagkukunan na na-load kasama ng pahina. Mga larawan, script, style sheet - lahat ng ito ay maaaring piliin at tingnan sa lugar ng trabaho (at maaari ding i-edit ang mga script):

Bilang karagdagan sa pagtingin sa mga mapagkukunan at pag-edit ng JavaScript (nga pala, maaari mong gamitin ang mga tool mula sa kanang panel), pinapayagan ka ng tab na "Mga Pinagmulan" na mag-download ng anumang mga file sa iyong computer. Maaaring gamitin ang feature na ito para mag-download, halimbawa, mga larawan mula sa Instagram at iba pang mapagkukunan sa web kung saan hindi available ang direktang pag-save ng mga larawan! Buksan lamang ang mga tool ng developer at hanapin ito sa listahan ng mga mapagkukunan kinakailangang mga larawan, at pagkatapos ay i-save ang mga ito:

Katulad nito, maaari mong i-download, halimbawa, ang iyong mga paboritong font, SVG graphics at mga katulad na mapagkukunan, na ang direktang pag-save ay maaaring hindi magagamit.

Mga Tool sa Pagsusuri at Pag-audit

Ang tatlong tab na tinalakay sa itaas ay, maaaring sabihin ng isa, ang mga pangunahing sa mga tool sa pag-unlad. Ang komposisyon at bilang ng iba ay maaaring magbago mula sa bersyon patungo sa bersyon ng Google Chrome (tulad ng, halimbawa, nangyayari sa tab na "Memory", na lumalabas at nawawala). Bilang karagdagan, maaaring madagdagan ang bilang ng mga tab dahil sa mga naka-install na extension na nagdaragdag ng sarili nilang mga toolbar.

Naka-on sa ngayon kaugnay bersyon ng Google Ang Chrome ay isang kamakailang na-update na ika-69 na sangay. Samakatuwid, isasaalang-alang namin ang mga karagdagang tab gamit ang halimbawa nito.

Tab ng network

Binibigyang-daan ka ng tab na "Network" na tingnan ang mga istatistika ng paglo-load para sa lahat ng elemento ng na-inspeksyon na web page, pati na rin subaybayan ang mga kahilingang ipinadala nito sa panahon ng operasyon. Upang simulan ang pagsubaybay, kailangan mong i-click ang pindutan ng record sa kaliwang bahagi ng tab at i-reload ang pahina (F5). Maaari mong ihinto ang pagre-record anumang oras, gayunpaman, ipinapayong gawin ito pagkatapos buong load pahina ng lahat ng kinakailangang mapagkukunan:

Maaaring pag-aralan ang mga resultang nakuha gamit ang pag-filter ng kaganapan ayon sa mga uri ng data na ipinadala, ayon sa kanilang laki, oras ng paglo-load, atbp. Bilang karagdagan, maaari mong tularan ang paglo-load ng pahina na may artipisyal na limitasyon sa bilis na naaayon sa tiyak mga mobile network(drop-down list na "Online"). Ang lahat ng ito ay maaaring gamitin upang matukoy ang pinaka "mabigat" na mga file at i-optimize ang kanilang pag-load (o alisin ang mga ito nang buo) upang makatipid ng trapiko at mapabilis ang iyong site.

Tab ng Pagganap

Kung pinayagan kami ng nakaraang tab na subaybayan nang puro aktibidad ng network mga pahina, pagkatapos ay "Pagganap", nagtatrabaho sa mga katulad na prinsipyo (pagre-record ng mga aksyon), ay nagbibigay-daan sa iyo upang masuri ang pag-load na nilikha ng isang mapagkukunan sa web sa computer ng gumagamit. Upang makakuha ng sapat na dami ng data para sa pagsusuri, sapat na upang itala ang pagpapatakbo ng pahina sa loob ng isang minuto, pagkatapos ay huminto kami at tingnan ang mga resulta:

Ang mga graph ay may maraming kulay na mga label na nagbibigay-daan sa iyong makita kung aling mga proseso ang kumukuha ng pinakamaraming oras at mga mapagkukunan ng computer sa buong pag-scan. At maaari mong ibuod ang data na nakuha sa pamamagitan ng pagtingin sa pie chart sa ibaba, na nagpapakita ng kabuuang oras ng pagsubok, pati na rin ang porsyento na ginugol sa pagpapatakbo ng mga script, pag-render ng mga elemento ng page, pagguhit ng mga larawan, pag-load ng iba pang mga elemento (halimbawa, mga third-party na script) at downtime. Magagamit din ang lahat ng data na ito upang i-optimize ang mga web page.

Tab ng Memorya

Isa sa pinaka pabagu-bago Mga tab ng Google DevTools, na naroroon at pagkatapos ay nawawala. Maaari itong gumana sa dalawang mga mode. Bilang default, ito ay nagpapakita ng isang pangkalahatang kasalukuyang pagkonsumo ng memorya bukas na pahina. Kung kailangan mo detalyadong ulat, maaari kang magsimula ng proseso ng pag-record na katulad ng nasa nakaraang mga tab. Bilang resulta, makakatanggap ka ng data tungkol sa lahat ng mga prosesong ginagamit RAM kompyuter:

Kapansin-pansin, ang pagkonsumo ng memorya ay ipinapakita hindi lamang ng mismong pahina, ng mga script nito at na-load na mga mapagkukunan, kundi pati na rin ng mga extension ng Chrome na kasalukuyang aktibo! Maaari itong maging kapaki-pakinabang sa mga kaso kung saan ang browser ay naging napakabagal dahil sa "sobrang paglaki" ng mga hindi kinakailangang plugin. Alam ang pangunahing "mga kumakain" ng mga mapagkukunan, maaari mong alisin ang mga ito, na ibabalik ang iyong Chrome sa dati nitong kagaanan.

Tab ng Application

Kung kailangan mong malaman kung ano ang iniimbak ng isang web page sa mga session, cookies o iba pa mga lokal na imbakan, Ikaw sa tab na "Application." Narito ang lahat ay kasing simple hangga't maaari - sa kaliwang panel pipiliin namin ang imbakan ng data na interesado kami, at sa pangunahing lugar tinitingnan namin ang mga nilalaman nito. At, na karaniwan, dito maaari naming agad na i-edit ang nilalamang ito at kahit na ganap na tanggalin ito (ang mga pindutan na "I-clear ang lahat" at "Tanggalin ang mga napili"):

Tab ng seguridad

Ngayon ay halos kailangan na gamitin ang secure na HTTPS protocol sa mga website. Upang suriin ang pagganap nito at mga potensyal na puwang sa seguridad ng mga web page, maaari mong gamitin ang tab na "Seguridad." Dito, pagkatapos i-reload ang page, makakakita kami ng ulat sa ligtas at mapanganib na mga mapagkukunan at, nang naaayon, makakagawa kami ng mga karagdagang hakbang upang maalis ang mga natukoy na kakulangan:

Tab ng mga audit

Panghuli, para sa lahat, maibibigay sa amin ng Google Chrome praktikal na payo upang mapabuti ang pagganap ng site. Upang gawin ito, pumunta sa tab na "Mga Pag-audit," simulan ang pagsubok at hintayin itong makumpleto. Batay sa mga resulta ng pag-audit, bubuo ng mga chart at partikular na rekomendasyon para sa karagdagang pag-optimize ng page:

Mga konklusyon

Ang Google Chrome ay nagbibigay sa user ng lubos magandang set mga tool ng developer. Mayroon itong halos lahat ng maaaring kailanganin mo upang siyasatin at i-optimize ang mga web page. Sa iyong pagtatapon ay mga tool para sa pag-edit ng HTML code, pamamahala ng mga istilo, at maging ganap na kontrol sa mga script. Bilang karagdagan, sa Chrome DevTools makakahanap ka ng mga tool para sa pagsubok sa pagganap ng site, na magbibigay-daan sa iyong tumukoy ng mga paraan para sa karagdagang pag-optimize.

At lahat ng ito ay hindi nangangailangan ng pag-install ng anuman karagdagang mga programa o mga extension. Bagaman, maaaring magdagdag ang ilang extension ng sarili nilang mga tool sa mayamang arsenal ng Chrome. Kung master mo ang hindi bababa sa kalahati ng kung ano ang ibinibigay ng DevTools, maaari mong makabuluhang taasan ang iyong pagiging produktibo at mapabuti ang kalidad ng mga web page na iyong nilikha!

P.S. Ipinagkaloob ang pahintulot na malayang kopyahin at banggitin ang artikulong ito, sa kondisyon na ang isang bukas na aktibong link sa pinagmulan ay ipinahiwatig at ang pagiging may-akda ni Ruslan Tertyshny ay napanatili.

Ipapakita sa iyo ng tutorial na ito kung paano gamitin ang Google Chrome Research Tool.

Marahil ay alam mo na ang tungkol sa FireBug, isang plugin para sa Mozilla Firefox. Isa sa aming mga video tutorial ay magpapakita sa iyo kung paano magtrabaho sa FireBug. Mula sa tutorial na ito matututunan mo kung paano gumana sa isang katulad na extension para sa Google Chrome.

Upang gamitin ang Google Chrome Research Tool, sundin ang mga tagubiling ito:

Ang tool na ito ay may ilang mga setting na magagamit:

Pag-edit ng Mga Estilo ng CSS

Tab Elemento Binibigyang-daan ka ng (Elemento) na i-edit ang CSS nang live. Nangangahulugan ito na maaari mong i-preview ang mga pagbabagong gagawin mo sa CSS ng iyong site bago direktang gumawa ng mga pagbabago sa iyong site.

Dito makikita mo kung aling mga istilo ang itinalaga sa ilang partikular na elemento ng iyong site.

Paggalugad ng HTML Markup

Upang ma-access ang HTML code sa iyong browser, buksan ang iyong Google Chrome Developer Tool mula sa menu ng browser, o gamit ang Element Explorer tool.

Sa malawak na kaliwang seksyon, makikita mo ang HTML code na ginamit sa iyong pahina.

Sa pamamagitan ng pagpili ng isang partikular na elemento ng iyong site, makikita mo ang kaukulang HTML code na naka-highlight sa browser. Bilang kahalili, maaari kang mag-click sa HTML na elemento direkta sa Inspector, at ang elemento ay mai-highlight sa pahina.

Nagtatrabaho sa Console

Tutulungan ka ng console na makahanap ng mga bug sa iyong page. Para buksan ang page ng Console:

Gumamit ng keyboard shortcut CRTL+Shift+J para sa Windows (o Cmd+Opt+J para sa Mac).

O mag-click sa pindutan Console(Console) sa naunang binuksang developer tool.

Kapag nakabukas ang Console, makikita mo ang mga error na ipinapakita sa iyong site.

Ang tool na ito ay lubhang kapaki-pakinabang kung mayroon kang anumang mga problema sa site. Ipapakita ng console ang lahat ng mga error sa site at ilang tip kung paano lutasin ang mga ito.

Maaari mo ring gamitin ang tab na Network upang makita ang mga file na nagdudulot ng mga error. Ang mga error ay minarkahan ng pula.

Upang matuto nang higit pa tungkol sa Google Chrome console, maaari mong tingnan ang karaniwang website ng Google Chrome.

Gamit ang feature na Google Chrome Device Emulator

Tutulungan ka ng function na ito na suriin ang kakayahang umangkop ng site sa pamamagitan ng pagtulad iba't ibang laki screen at resolution.

Upang ma-access ang feature na ito, tiyaking bukas ang iyong Tool ng Developer. Mag-click sa pindutan Nada-drag na toolbar ng device(I-toggle ang Toolbar ng Device) (o gumamit ng keyboard shortcut CTRL+Shift+M):

Sa pamamagitan ng pagpapagana sa functionality na ito, maaari kang pumili mobile device, kung saan kailangan mong malaman kung ano ang hitsura ng iyong site sa isang partikular na resolution ng screen.

Maaari mo ring tingnan ang detalyadong video tutorial sa ibaba.

Gumagamit ang mga tao ng browser hindi lamang upang tingnan ang mga pahina sa mga website, ngunit upang lumikha din ng mga bago. Ang mode ng developer sa browser ng Yandex (at anumang iba pa) ay nagbibigay-daan sa gumagamit na ma-access ang mga tool na kinakailangan para sa web programming.

Basahin ang artikulo at malalaman mo kung bakit kailangan ang mode na ito at kung paano na-activate ang developer console sa web browser na ito.

Para saan ang developer mode?

Ang mga tool sa pag-develop ay mga espesyal na module na nilikha at ginagamit ng mga third-party na webmaster upang iba't ibang gawain. Sa una ay sa Yandex browser Mayroon nang ilang plugin na naka-install na makakatulong sa iyong magsagawa ng mga pangunahing gawain sa web development.

Nagbibigay ang Developer Console ng ilang opsyon para sa pag-customize at pagsubok ng mga page sa real time. Kabilang sa mga ito:

• Tingnan ang HTML code ng pahina.
• Pagsubaybay sa pag-usad ng lahat ng pagkilos na ginawa ng mga user sa isang partikular na website.
• Inspeksyon ng mga log file, na naglalaman ng mga sanggunian sa mga error na nangyayari sa panahon ng pagpapatakbo ng mga script, atbp.

Ang serbisyo ng "mga tool ng developer" ay malamang na hindi kailangan ng mga ordinaryong user na hindi kailangang subukan, gumawa at suriin ang mga pahina ng website para sa mga error. Ngunit maaaring kailanganin ito ng mga webmaster, halimbawa, upang i-debug ang isang pahina, ayusin ang isang imahe sa isang partikular na laki, atbp.

Maaaring kailanganin ng karaniwang user ang mga tool ng developer, halimbawa, kung nagustuhan niya ang font o kulay tiyak na pahina, at gusto niyang malaman ang pangalan nito. Anumang elemento ay maaaring matingnan sa pamamagitan ng pagbubukas html code at mga istilo ng css na ginamit sa pahinang ito. Pagkatapos ay maaari mong kopyahin ang kinakailangang data (halimbawa, ang istilo at code ng button) at i-paste ito sa iyong site.

Pag-activate ng mode

Paano paganahin ang mode ng developer? Ang interface na may mga tool ay pinagana sa maraming paraan. Una, buksan ang browser ng Yandex sa anumang pahina.

Ang unang paraan ay buksan ang console gamit ang mga tool:

1. Sa kanang sulok sa itaas ng web browser, mag-click sa icon na "mga setting" (na may tatlong pahalang na guhit).
2. Sa listahan na bubukas, piliin ang "advanced" na item.
3. Susunod, mag-click sa "Higit pang mga tool".
4. Piliin ang ninanais na tool.

Ang pangalawang paraan ay para sa mga hindi gustong buksan ang console gamit ang mouse. Upang gawin ito, maaari kang gumamit ng mga hotkey upang i-activate ang kinakailangang tool, na may anumang layout ng keyboard at hindi alintana kung pinindot ang "Caps Lock" na key:

• Ctrl+U (para sa Russian keyboard – ang letrang “G”) – para tingnan ang page code (“Tingnan ang page code”). Upang gumawa ng mga pagbabago, mag-click sa pindutang "I-edit".
• Ctrl+Shift+J (“O”) – para buksan java console(“JavaScript console”) Magbubukas ang mga tool pagkatapos mag-click sa tab na "Console".
• Ctrl+Shift+I (Ш) – upang piliin ang mga tool ng developer ("Developer tools").

Maaaring mabuksan ang mga tool ng developer gamit ang isang key lamang – “F12”. Susunod, mag-click sa parehong tab na "Console". Naka-on Sistema ng Mac Ang mga tool ng developer ay pinagana sa pamamagitan ng pagpindot sa Cmd" ⌘, "Option" ⌥ at "I".

Magagamit din ng mga developer ng extension ang console. Upang gawin ito kailangan mo:

1. Buksan ang Yandex browser.
2. Idikit sa address bar link browser://extensions/ (ang parehong paraan ay gumagana sa Chrome).
3. Sundin ito.

Dito ka ididirekta:

Maglagay ng checkmark sa itaas kung saan nakasulat ang "Developer Mode". Pagkatapos nito, binibigyan ang user ng pagpipilian kung ano ang gagawin sa mga extension:

• Upang i-update ang mga extension na naka-install sa browser, mag-click sa "i-update ang mga extension".
• Kung kailangan mong subukan ito, piliin ang opsyon na "I-load ang hindi naka-pack na extension", at pagkatapos ay mag-click sa nais na file.

Upang paganahin ang mga extension, kailangan mong pumunta sa seksyong "Mga Add-on." Dito makikita mo ang isang listahan ng lahat ng mga extension na naka-install sa mga browser. Ang ilan sa kanila ay maaaring aktibo, habang ang iba ay maaaring hindi pinagana. Maaari mong ilunsad at i-disable ang mga extension gamit ang mga espesyal na switch.

Kaya, alam kung paano buksan ang mode ng developer, ang isang espesyalista ay maaaring makabuluhang mapabilis ang trabaho sa mga pahina ng website.

Kumusta, mahal na mga kaibigan!

Ngayon gusto kong pag-usapan ang tungkol sa isang natatanging tool para sa mga web developer, na binuo sa sikat na browser Google Chrome. Ang tool na ito ay tinatawag na WebTools o web inspector. Dahil sa pagiging simple at kaginhawahan nito, maaari itong magamit ng parehong mga taong propesyonal na kasangkot sa paggawa ng mga website, at ng mga taong medyo pamilyar sa Mga wikang HTML at CSS. Binibigyang-daan ka ng tool na itama ang mga error sa code ng website sa panahon ng paglikha nito, gumawa ng mga pagbabago sa mga yari na website: baguhin ang pag-aayos ng mga elemento, disenyo ng mga ito, at marami pa.

Tingnan natin ang tool na WebTools.

Magagawa ito sa dalawang paraan:

Ang window ng tool ay binubuo ng dalawang bahagi. Bilang default, bubukas ang tab na Mga Elemento sa kaliwa, na nagpapakita ng HTML code ng pahina, at bubukas ang tab na Mga Estilo sa kanan. Naglalaman ito ng CSS code ng napiling elemento.

Dapat pansinin kaagad na ang window ng WebTools ay maaaring iposisyon sa iba't ibang paraan. Upang gawin ito, mag-click sa icon sa tabi ng close button at piliin ang nais na opsyon:

• Sa ibaba ng window ng browser.
• SA kanang bahagi. Maaari itong maging maginhawa kapag gumagamit ng isang widescreen na screen.
• Sa isang hiwalay na bintana. Ang pagpipiliang ito ay maginhawa kung gagamit ka, maaari kang mag-eksperimento sa code sa isang monitor, at makita ang resulta sa pangalawa.

Mga paraan upang mag-navigate sa pamamagitan ng code

Dalawang ganoong paraan ang posible.

• Sa una, inilipat lang namin ang mouse sa ibabaw ng code sa window ng Web Inspector at ang mga lugar na nauugnay sa code na iyon ay naka-highlight sa mismong web page. Iyon ay, hinahanap namin ang elemento gamit ang code.
• Ang pangalawang paraan ay ang kabaligtaran, kapag ang code ay natagpuan ng elemento. Sa kasong ito, lumilipat kami sa pahina at ang lugar ng code ay naka-highlight. Sa pamamagitan ng pag-click sa elementong interesado tayo, makikita natin ang code nito sa window sa ibaba.

Upang lumipat ng mga mode ng paggalaw, gamitin ang pinakakaliwang pindutan.

Code sa Pag-edit

Ang pangunahing bentahe ng WebTools ay ang lahat ng mga pagbabago sa code ay makikita kaagad sa web page sa window ng browser, iyon ay, ginagawa ng tool na ito ang iyong browser sa isang visual editor.

Upang i-edit ang code na kailangan mong gawin i-double click sa katumbas na tag, attribute, CSS selector o value nito. Ang elemento ay iha-highlight at maaaring i-edit.

Ang tool ay may maraming iba't ibang magagandang maliliit na bagay na nagpapadali sa iyong trabaho. Halimbawa, sa pamamagitan ng pagpili ng istilo ng isang elemento, matutukoy mo kung saang linya at kung saang CSS file ito nakasulat. Kapag nagtatrabaho sa kulay, lumilitaw ang isang palette upang tulungan kang piliin ang tamang kulay. Kapag nag-highlight ka ng URL ng larawan, may lalabas na thumbnail, atbp.

Ang isang kawili-wiling tampok ng tool ay pinapayagan ka nitong i-highlight ang code hindi lamang sa mga linya, kundi pati na rin sa isang haligi. Upang gawin ito, pumunta sa tab Mga pinagmumulan, piliin ang file na ie-edit, hanapin ang mga kinakailangang linya, pindutin ang key Alt at pumili ng column na may magkaparehong piraso ng code. Sa ganitong paraan, maaari mong i-edit ang ilang magkakaparehong elemento sa magkakaibang linya nang sabay-sabay.

Pagsubok ng adaptive na layout

Ang isa pang kapaki-pakinabang at may-katuturang function ng tool na WebTools ay ang pagsuri sa display ng page sa iba't ibang mga aparato. Upang i-activate ito, mag-click sa button na may larawan ng isang telepono. Maaari ka na ngayong pumili ng mga resolution ng screen, i-rotate ito, at baguhin ang sukat. Ang window ng inspektor mismo ay hindi nagbabago.

Base64 image encoding

Sa artikulo, isinulat ko na upang mapabilis ang paglo-load ng site, ang mga maliliit na larawan ay maaaring i-encode sa format ng URL ng data at direktang ipasok sa pahina ng HTML. Kaya, binibigyang-daan ka ng aming natatanging tool na gawin ang naturang pag-encode. Paano ito gawin?

Lihim na trick

Gamit ang tool na ito, maaari mong pag-aralan ang code hindi lamang ng iyong website, kundi pati na rin ng iba pang binuksan sa browser. At, kung nagustuhan mo ang anumang elemento ng site ng ibang tao, ngunit hindi mo alam kung paano ito ginawa, maaari mo lamang kopyahin ang kaukulang HTML code at estilo ng CSS, i-paste ito sa iyong mga file at pagkatapos ay i-edit ito. Siyempre, nangangailangan ito ng hindi bababa sa kaunting kaalaman sa mga wikang ito.

Mga kapintasan

Kapag nagtatrabaho sa itinuturing na tool sa pag-edit ng code, mapapansin mo kaagad ang kawalan nito - lahat ng mga pagbabagong ginawa sa code ay hindi nai-save. Pagkatapos i-refresh ang pahina sa browser, babalik ito sa orihinal nitong anyo. Upang i-save ang mga pagbabagong ito, kailangan mong buksan ang kaukulang mga file sa text editor, i-edit ang code at i-save ang mga ito. Gusto kong ma-save kaagad ang lahat ng pagsasaayos na ginawa sa WebTools. Maaaring malutas ang problemang ito, at titingnan natin kung paano ito gagawin sa susunod na post. Samakatuwid, mag-subscribe sa mga update sa blog upang hindi makaligtaan ang mga bagong materyales (subscription form sa kanan).

Samantala, para sa kalinawan, iminumungkahi kong panoorin ang video:

Ngayon ipinakilala ko sa iyo ang isa sa mga tool na kapaki-pakinabang para sa pagbuo ng web, ngunit maraming mga ganoong tool, kaya ang WebForMyself team ay nakabuo bagong kurso "Mga Tool ng Developer sa Front-End". Kung ikaw ay kasangkot sa paglikha ng mga website, kung gayon ang kursong ito ay maaaring maging kawili-wili at kapaki-pakinabang sa iyo. Narito ang link sa kurso

Mga Tool ng Developer sa Front-End

Hi sa lahat.

Nakabuo ako ng mas advanced na bersyon ng aking artikulo gamit ang mga tool sa web developer sa Google Chrome. Ang browser ay sikat at samakatuwid ang mga tool nito ay in demand. Bukod dito, kamakailan lamang ay ipinamahagi ng Google kapaki-pakinabang na extension upang i-optimize ang mga pahina ng html. Ngunit ngayon ay nagbago ang isip ng Google at ang pagtatasa na ito ay magagamit lamang online.

Nasa ibaba ang post ng isang may-akda na nagngangalang Akkad.

Ang post na ito ay pagpapatuloy ng pagsusuri sa mismong browser ng Google Chrome. Dito, nais kong bigyang pansin ang Google Chrome Developers Tools. Sa tingin ko magiging masama kung hindi bigyan ng kaunting pansin ang produktong ito. Pagkatapos ng lahat, ang browser na ito ay nagbibigay ng tunay na mahalaga at mahalagang paraan, sa tulong kung saan maaari mong makabuluhang mapabuti at mapabuti ang pagpapatakbo ng iyong mga pahina, mga script, hanapin at alisin ang maraming mga error, kontrolin ang visual na pagpapakita ng mga pahina, atbp. Ang tanging bagay na maaaring maging hadlang sa aktibong paggamit ng mga tool na ito ay marahil ang kawalan ng kakayahang gamitin ang mga ito at maging ang kakulangan ng kaalaman na umiiral ang mga ito.)

Bago lumipat sa paglalarawan ng interface mismo, nais kong pag-isipan ang tanong na ito: kung paano matukoy ang browser ng Google Chrome?

Maaaring kailanganin ito kung kailangan mong magsulat espesyal na code partikular para sa kanya, o vice versa - upang ipaalam sa user na kailangan ng ibang browser, o maaaring gamitin mga espesyal na tampok, likas na partikular sa kanya. Maaari mong matukoy na ang isang user ay gumagamit ng Chrome browser gaya ng sumusunod:

kung (navigator.userAgent.toLowerCase().indexOf("chrome")>-1) (

//code, kung hindi ang Chrome

o ganito:

kung (window.chrome) (

//ito ang Chrome browser)

//ito ay ibang browser

at kahit isang bersyon:

var chromever=/Chrome\/+\b/i.exec(navigator.appVersion).substring(7);

Sa variable ay makukuha natin ang bersyon sa anyo ng isang string, na maaari nang i-parse para makilala ang mga subversion. Ang ganitong "kumplikadong" code ay kailangan dahil ang appVersion property mismo ay naglalaman ng parehong bersyon ng OS at Chrome at AppleWebKit.

Kaya, para buksan ang mga tool ng developer sa Google Chrome sa anumang page, pindutin lang ang key combination na Ctrl+Shift+J. Lumilitaw ang buong toolkit mula sa ibaba, na hinahati ang buong window sa dalawang frame. Tapos na talaga siya Ingles, ngunit hindi ito napakahalaga. Sa itaas ay mayroong panel ng mga button kung saan maaari kang lumipat sa isang partikular na tool. Sa kanan ng mga ito ay mayroong field ng paghahanap, na ginagamit upang mahanap ang mga tag at iba pang mga node sa page code. At sa pinakaibaba ay ang Google Chrome console. Naglalaman ito ng lahat ng mga babala at mga error na naganap habang naglo-load ang pahina. Kapag sinusubukan ang isang pahina sa unang pagkakataon, dapat mong tingnan muna ito, dahil napakabilis mong makakatuklas ng mga hindi na-load na script, code calling kritikal na mga pagkakamali, paglabag sa istruktura ng dokumento, tulad ng mga hindi nakasarang tag, atbp. Ang output ng mga tala sa console ay maaaring i-filter gamit ang mga pindutan na "Lahat" - ipakita ang lahat ng mga kaganapan, "Mga Error" - mga error lamang, "Mga Babala" - mga babala. Siyempre, una sa lahat, kailangan mong alisin ang mga error, pagkatapos ay maaari kang magpatuloy sa mga babala at matukoy kung mahalaga ang mga ito.

Panel ng mga elemento sa Mga Tool ng Developer.

Ito marahil ang pinakamahalaga at pinakamadaling seksyon. Ipinapakita ng workspace sa kaliwa ang source code ng page na may pag-highlight ng syntax. At hindi lamang ang orihinal, na sumasalamin sa tunay na istraktura ng DOM ng dokumento, kabilang ang mga elemento na nilikha nang pabago-bago, na sa panahon ng normal na pagtingin source code hindi nakikita. Ang lahat ay nakaayos sa anyo multi-level na listahan, ibig sabihin. Kapag nag-click ka, makikita mo ang lahat ng mga nested na elemento (mga inapo) ng isang ito. Ang path sa napiling tag ay ipinapakita sa ibaba ng code (sa itaas mismo ng console). Ngunit sa kanan ay ipinapakita ang lahat ng mga katangian na nakapangkat ayon sa kategorya ng kasalukuyang napiling elemento. Bukod dito, kapag inilipat mo ang iyong mouse sa isang partikular na tag, namumukod-tangi ito sa pahina ayon sa laki nito at ito kasalukuyang laki lilitaw bilang isang tooltip. Sa ganitong paraan, maaari mong maingat na subaybayan kung ang mga bloke sa pahina ay kumukuha ng mga kinakailangang laki, at mahanap din ang may problemang hindi ipinapakita ayon sa nararapat.

Ang tab na Computed Style ay naglalaman ng lahat ng aktibong elemento estilo, isinasaalang-alang ang lahat ng mga override, pagbabago, mana, atbp. Available sa kasalukuyang sandali mga kahulugan. Katumbas ng currentStyle object. Ang tab na Mga Estilo ay naglalaman ng mga panuntunan kung saan napapailalim ang napiling bagay. Ngunit hindi tulad ng nauna, hindi lahat sila ay nagtutugma totoong oras. Dito makikita mo ang iyong sariling mga patakaran at ang mga minana mula sa mga magulang, pati na rin ang kanilang mga kahulugan. Kung ang isang panuntunan ay tinukoy ngunit hindi aktibo, ito ay tinatanggal. Ang mga istilong hindi sinusuportahan ay ipinapakita rin bilang mga strikethrough. Google browser Chrome at pagkatapos ay isang icon na may tandang padamdam. Sa isa pang kaso, mayroon itong checkbox sa kanan, inaalis ng check kung alin ang hindi pinapagana ang pagkilos ng isang partikular na katangian ng CSS, at ang pagsuri nito ay nagbibigay-daan dito. Gamit ang paraang ito, makakahanap ka ng isang partikular na panuntunan ng CSS dahil sa kung saan ang elemento ay hindi naipakita nang tama. Bukod dito, ang mga halaga ng bawat ari-arian ay maaaring i-edit at ang mga pagbabago ay maaaring maobserbahan kaagad. Upang gawin ito, i-double click ang halaga ng ari-arian at i-type ang bagong halaga. Ito ay ipinahiwatig sa animation sa itaas, ngunit para sa pagtingin orihinal na sukat buksan sa isang bagong window, kung hindi, hindi lahat ng browser ay nagpaparami nito sa ganitong paraan.

Ang susunod na tab na Mga Sukatan ay schematically na nagpapakita ng paglalagay ng elemento at mga halaga nito: margin, padding, border. Ang mga halaga ng mga indent at hangganan ay madaling nakikita.

Ang tab na Properties ay napaka-kaalaman din. Sa loob nito, ang napiling elemento ay kinakatawan bilang isang instance ng isang DOM tree object. At lahat ng magagamit na mga pag-aari, pamamaraan, kaganapan at ang kanilang mga halaga ay makikita. Halimbawa: id, pamagat, innerHTML, atbp. Maaari din silang i-edit. Mga Breakpoint - Naglalaman ng mga breakpoint kapag itinakda mo ang mga ito. Ito ay kapag nagde-debug.

Panel ng mga mapagkukunan sa Mga Tool ng Developer.

Ang tool na ito ay nagpapakain sa na-load na pahina sa anyo ng mga bahagi: ang html file, mga guhit, mga istilo ng css, nakakonekta ang mga script. Ito rin ay pinaghiwa-hiwalay sa mga frame, kung sila ay ginagamit. Ang lahat ng mga sangkap na ito, sa anyo ng isang hierarchical na listahan, ay inilalagay sa isang panel sa kaliwa, na kahawig ng isang panel Windows Explorer. Kapag pumili ka ng isang partikular na bahagi, ito ay ipinapakita sa kanang bahagi. Kaya ang mga script at style sheet ay magagamit para sa pagtingin sa code at pag-edit.

Panel ng mga network sa Mga Tool ng Developer.

Ipinapakita ng seksyong ito ang lahat ng mga kahilingang ginawa kapag nilo-load ang page na ito at ang mga bahagi nito.

Ang column na "Paraan" ay naglalaman ng uri ng kahilingan (GET, POST).

"Katayuan" - tugon ng server, sa isip ay dapat na 200 OK. Dito mahalagang bigyang pansin ang maling 404 at 403 na dapat alisin. Maaaring sanhi ang mga ito ng mga maling address (mga katangian ng src). Maipapayo rin na alisin ang mga pag-redirect 301 at 302 upang mabawasan ang kabuuang bilang ng mga kahilingan, at samakatuwid ay ang bilis ng paglo-load ng site.

“Uri” – uri ng nilalaman, halimbawa para sa mga dokumento sa web dapat itong text/html.

“Laki/Nilalaman” – ang laki ng bawat hiniling na bahagi.

“Oras/Latency” – oras ng paglo-load.

Ang impormasyong ito ay maaari ding suriin sa pamamagitan ng HandyCache. Sa pangkalahatan, gamit ang tool na Networks, maaari mong suriin at suriin ang pagganap ng server, pati na rin ang mga sukat ng iyong mga file. Subukang bawasan kung saan posible upang mabawasan ang pagkarga sa server. Siyempre, tuklasin din at alisin ang mga posibleng error.

Panel ng mga script sa Mga Tool ng Developer.

Ito ay halos kapareho sa Elements, ngunit idinisenyo para sa pagsusuri at pag-debug ng mga script. Maaari kang pumili ng isang partikular na script mula sa listahan ng lahat ng mga na-download sa kaliwang tuktok. Ang code nito ay agad na ipinapakita sa window sa kaliwa. Ang panel sa kanan ay katulad sa hitsura at istraktura sa Elements, ngunit may mga espesyal na tab. “Watch Expression” – maaari mong tukuyin ang expression (variable) na gusto mong panoorin. Sa iba, maaari kang magtakda ng mga breakpoint, mga stack ng tawag, at iba pang mga bagay tulad niyan.

Panel ng timeline sa Mga Tool ng Developer.

Ito ay napaka kapaki-pakinabang na kasangkapan upang pag-aralan ang bilis ng paglo-load ng mga pahina ng website. Gamit ito maaari mong makuha visual na representasyon sa anyo ng isang tsart, kung gaano karaming oras ang ginugol sa pag-load at pagbibigay-kahulugan sa pahina.

Paano gamitin ang Timeline?

1. Ilunsad muna ito at piliin ang seksyong "Mga Timeline" sa kaliwa gamit ang icon ng orasan.

2. I-click ang button na Record sa ibaba ng panel ●.

3. I-reload ang page na pinag-aaralan hanggang sa ganap itong ma-load.

4. Pindutin muli ang "Record" na buton, na ngayon ay pula.

Ngayon, sa listahan ng Mga Tala sa kaliwa, ang iba't ibang mga kaganapan na naganap sa proseso ng paglo-load at pagpapakita ng dokumento ay magagamit. At sa kanang tuktok ay ipinakita ang mga ito sa anyo ng isang diagram ng kulay na may sukat ng oras, na nagpapakita kung aling proseso ang tumagal kung gaano katagal. Ang mga detalye tungkol sa bawat kaganapan ay mahahanap sa pamamagitan ng pag-click dito sa listahan ng Mga Tala. Ang impormasyong ito ay lilitaw bilang isang tooltip. Ang mga kaganapang nauugnay sa pag-load at pagtanggap ng data ay may kulay asul; pagpapatupad ng script - dilaw; Ang visual na pagpapakita ng mga elemento ay lila. Sa ganitong paraan madali at malinaw mong makikita kung saan ang pinakamaraming oras na ginugugol sa paglo-load ng iyong site o hindi sa iyo. Halos imposibleng maimpluwensyahan ang mga asul na segment, dahil nakadepende sila sa bilis ng pagho-host, ngunit ang pagsisikap na bawasan ang dilaw at lila na mga segment ay nasa iyong kapangyarihan.

Upang mag-zoom at mag-highlight lamang ng isang tiyak na tagal ng panahon, gamitin ang mouse at ang mga slider sa timeline sa itaas. Tanging ang mga kaganapan mula sa panahong ito ang ipapakita sa ibaba sa isang pinalaki na sukat. Bilang karagdagan, sa ibaba maaari mong huwag paganahin ang pagpapakita ng bawat uri ng kaganapan sa pamamagitan ng pag-alis ng check sa kaukulang kahon.

Sa pamamagitan ng pagpunta sa seksyong "Memory", magkakaroon ka ng access sa isang graph ng paggamit ng memorya ng pahinang ito.

Panel ng mga profile sa Mga Tool ng Developer.

1. “CPU Profiles”, kung saan makikita mo ang oras ng CPU na ginugol sa pag-execute ng mga script ng page.

2. "Heap Snapshots", na idinisenyo upang mangolekta ng mga istatistika ng memorya na ginagamit ng mga elemento ng pahina at mga script. Gaano karaming memorya ang ginagamit ng aling bagay?

Panel ng mga pag-audit sa Mga Tool ng Developer.

Susuriin ng tool na ito ang pagganap ng pahina at network at magbibigay ng mga tip sa kung paano ito pataasin. Halimbawa: alisin ang hindi nagamit na mga panuntunan sa css, mga function ng javascript, at posibleng buong module, atbp. Upang patakbuhin ito, kailangan mong piliin ang mga kinakailangang pag-audit ( Pahina sa Web Performance) at pindutin ang "Run" button sa ibaba. Kunin natin ang mga resulta nang may payo.

Parang lahat ng gusto kong isulat. Umaasa ako na ang materyal sa post na ito ay tungkol sa mga tool para sa mga web developer Ang Google Chrome ay naging o magiging kapaki-pakinabang sa iyo at magagamit mo ito sa pagsasanay. Kung mayroon kang anumang bagay na idaragdag o punahin, ang mga komento ay nasa iyong serbisyo. Maaari mong ipahayag ang iyong pasasalamat sa pamamagitan ng pagbabahagi ng post sa mga social network o isang link mula sa iyong mga site.