Ang Google Chrome ay kasalukuyang isa sa pinakasikat na web browser na ginagamit ng mga developer ngayon. Maaaring lubos na mapahusay ng Chrome DevTools ang iyong daloy ng trabaho sa pamamagitan ng pagtulong sa iyong bumuo, subukan, at i-debug ang iyong mga site sa mismong browser mo. Marami sa inyo ang malamang na regular na gumagamit ng Chrome DevTools, ngunit tingnan ang mga karagdagang tip at trick na ito upang mapahusay ang iyong pagiging produktibo nang mabilis.

Mga hotkey ng Chrome Devtools at iba pang mga kagamitan sa pagpapaunlad mula sa Google:

Ano ang Google Chrome DevTools?

Ang Google Chrome Developer Tools, na kilala rin bilang Chrome DevTools, ay mga tool para sa paggawa at pag-debug ng mga website na binuo mismo sa browser. Nagbibigay sila sa mga developer ng mas malalim na access sa kanilang mga web application at browser. Magagawa mo ang lahat mula sa pagsubok sa iyong viewport sa isang mobile device hanggang sa pag-edit ng HTML/CSS on the fly, maging sa paggamit nito upang sukatin ang pagganap ng mga indibidwal na asset sa iyong site.

Upang magamit ang pinakabagong bersyon ng mga tool ng developer na kakailanganin mong gamitin Google Chrome Canary, na isang pang-eksperimentong bersyon ng Chrome. Maaaring patakbuhin ang Canary sa tabi ng Chrome upang masuri mo ang anumang mga problemang lalabas.

Maaari mong pagbutihin ang iyong pag-unlad gamit ang chrome://flags na nagpapahintulot sa mga pang-eksperimentong tampok sa mga tool ng developer. Pagkatapos ay maaari mong gamitin ang panel ng mga setting sa Mga Tool ng Developer upang i-toggle ang mga indibidwal na eksperimento.

Upang i-activate ang mga pang-eksperimentong function ng dev panel, paganahin ang item na ito:

Binubuksan ang Chrome DevTools

Mayroong ilang mga paraan upang buksan ang Chrome DevTools.

1. Buksan ang menu ng iyong browser

Maaari mong buksan ang Chrome DevTools mula sa menu ng Chrome, i-click ang Higit pang Mga Tool, at pagkatapos ay i-click ang Mga Tool ng Developer.

2. Buksan sa pamamagitan ng pag-right-click

Maaari ka ring mag-right click sa anumang elemento sa web page at i-click ang View Code, na maglulunsad ng Chrome DevTools.

3. Buksan gamit ang mga shortcut key

Maaari mo ring gamitin ang mga sumusunod na keyboard shortcut:

• Windows: F12 o Ctrl + Shift + I
• Mac: Cmd + Opt + I

Nasa ibaba ang ilan sa ilang daang bagay na maaari mong gawin sa Chrome DevTools. Ito rin ay gumagawa para sa isang mahusay na pagpapakilala sa mga tool kung hindi mo pa nagamit ang mga ito dati. Tandaan. Ginagamit namin ang Google Canary para sa lahat ng mga halimbawang ito dahil may mga mas bagong feature tulad ng mga palette ng disenyo ng materyal at pinagsama-samang data ng timeline.

Mabilis na paglipat ng file

Madali mong maa-access ang anumang file sa kasalukuyang proyekto o web page sa pamamagitan ng pagpindot sa Ctrl + P (Cmd + P) kapag bukas ang Chrome DevTools at hinahanap ang pangalan.

PrettyPrint()

Alam mo ba na ang Chrome DevTools ay may magandang pag-format para sa parehong mga naka-compress na istilo at naka-compress na java script? Madali mong mababago ang pag-format ng code na iyong ipinasok sa pamamagitan ng pagpindot sa (), na babalik sa normal na hitsura ng aktwal na naka-compress na code.

Pag-edit ng HTML Element

Maaari mong i-edit ang HTML nang mabilis sa pamamagitan ng pagtingin sa mga pagbabago sa preview sa pamamagitan ng pagpili ng anumang elemento, pagpili ng elemento ng DOM sa loob ng panel, at pag-double click sa pambungad na tag upang i-edit ito. Awtomatikong mag-a-update ang mga closing tag para sa iyo. Ang anumang mga pagbabago ay lalabas sa iyong browser na parang ang mga pagbabago ay ginawa sa source code.

Baguhin ang CSS Properties

Tulad ng pag-edit ng HTML, maaari mo ring i-edit ang CSS sa Chrome DevTools at i-preview kung ano ang magiging hitsura ng resulta. Marahil ito ay isa sa mga pinakakaraniwang gamit para sa tool na ito. Piliin lang ang elementong gusto mong i-edit at sa ilalim ng style panel maaari kang magdagdag/magbago ng anumang CSS property na gusto mo.

Maghanap sa source code

Mabilis mong mahahanap ang iyong source code sa pamamagitan ng pagpindot sa Ctrl + Shift + F (Cmd + Opt + F).

Maaari ka ring maghanap gamit ang mga tagapili ng CSS sa pamamagitan ng pagpindot sa Ctrl + F(Cmd + F

Mga Breakpoint ng Javascript

Kapag nagde-debug ng Javascript, minsan ay kapaki-pakinabang na magtakda ng mga breakpoint. Maaari kang magtakda ng mga breakpoint sa Chrome DevTools sa pamamagitan ng pag-click sa numero ng linya na gusto mong sirain at pindutin ang Ctrl+R(Cmd+R) upang i-refresh ang page. Ang pahina ay tatakbo nang diretso hanggang sa breakpoint na iyon.

Pumunta sa numero ng linya

Maaari kang awtomatikong tumalon sa isang linya ng iyong code sa pamamagitan ng pagpindot sa Ctrl + O (Cmd + O) at paggamit ng line syntax. Sa halimbawa sa ibaba, nag-type kami ng:200:10 at pinindot ang enter para pumunta sa line 200 ng column 10.

Maramihang mga cursor

Mayroon ka bang maraming linya na kailangang idagdag? Marahil ay gusto mong magdagdag ng laki ng font sa maraming klase. Madali kang makakapagdagdag ng maramihang mga cursor sa pamamagitan ng pagpindot sa Ctrl + Click(Cmd + Click) at paglalagay ng impormasyon sa maraming linya nang sabay-sabay. Ito ay isang napaka-madaling paraan.

Pagbabago sa DevTools Dock Position

Maaari mo ring baguhin ang dock na posisyon ng Chrome DevTools. May tatlong pagpipiliang mapagpipilian: Ibaba, Gilid at Undocked (lumulutang). Upang lumipat sa pagitan ng mga dock na posisyon, maaari mong pindutin ang Ctrl + Shift + D (Cmd + Shift + D). Pagkatapos, sa kanang sulok sa itaas, piliin ang posisyon kung saan dapat matatagpuan ang docking station.

Pag-clear ng cookies

Madali mo ring ma-clear ang cookies gamit ang Chrome DevTools. Maaari itong maging kapaki-pakinabang lalo na kapag sinusubukan at i-debug ang mga third-party na plugin. Pumunta lang sa tab na Mga Mapagkukunan at sa ilalim ng seksyong Cookies maaari mong i-right click at tanggalin ang lahat ng cookies na nakaimbak sa iyong browser.

Mode ng Device

Maaari mong subukan ang iyong mga query sa website at media upang matiyak na gumagana ang tumutugon na layout sa pamamagitan ng paglipat sa device mode. O marahil ay kailangan mong makita kung saang resolution ng screen ang isang page ay nai-render para malaman mo kung saan ilalapat ang mga query sa media. Upang makapasok sa Device Mode, i-click ang maliit na icon ng telepono sa Chrome DevTools o maaari mong pindutin ang Ctrl + Shift + M(Cmd + Shift + M). Maaari mong piliin kung aling device ang gusto mong tularan, ang oryentasyon, at maging ang resolution. Maaari mo ring baguhin ang network throttling upang makita kung paano lalabas ang iyong website sa isang regular na koneksyon sa 2G.

Mga custom na palette ng kulay at pagpili ng kulay

Baguhin ang format ng kulay

Maaari kang lumipat sa pagitan ng RGBA, HSL at Hex na pag-format sa pamamagitan ng Shift+Clicking sa isang color block.

Mga sensor ng emulation ng device

Ang isang magandang feature ng Chrome DevTools ay maaari mo ring gayahin ang mga touch screen. Upang gawin ito, i-click ang Console, Emulation at Sensors.

I-toggle ang estado ng elemento

Nasubukan mo na bang malaman kung saan nagmumula ang isang nakatagong istilo, sabihin nating: ang katangian ng hover? Sa Firefox, binibigyang-daan ka ng mga dev tool na makita ito kapag pumipili ng elemento, ngunit hindi sa Chrome DevTools. Gayunpaman, ang Chrome DevTools ay may mas mahusay na tinatawag na toggle element state. Pinapayagan ka nitong pilitin ang estado ng isang elemento:

Kopyahin ang larawan bilang URI data (base64 na naka-encode)

Maaari mong i-save ang anumang imahe mula sa isang web page bilang isang URI ng data o sa halip ay i-encode ito ng base64. Hindi na kailangang gumamit ng libreng online na converter dahil naka-built na ito sa Chrome DevTools. Upang gawin ito, mag-click lamang sa panel ng Network, mag-click sa larawan, at pagkatapos ay i-right-click ito at piliin ang Kopyahin ang Larawan bilang URL ng Data.

Pagkatapos ay makakatanggap ka ng larawan sa sumusunod na format: "URURIsdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAFt..."

Ipakita ang ahente ng gumagamit ng Shadow DOM

Kapag nakikitungo ka sa mga bagay tulad ng mga button at input, kadalasang gumagawa ang web browser ng mga nakatagong katangian. Upang makita ang mga pag-click na ito sa mga setting, pindutin ang F1(?), maaari mong paganahin ang "Show DOM user agent". Tulad ng makikita mo sa halimbawang ito, makikita na natin na ang shadow root # na ginagawa ay itinatayo. Maaari mo pa itong gawin nang higit pa at ilapat ang mga istilo ng CSS sa mga nakatagong katangian.

Piliin ang susunod na pangyayari (viya)

Pinapadali ng Chrome DevTools na piliin ang susunod na pangyayari at pagkatapos ay ilapat ang mga pagbabago sa lahat ng seksyon nang sabay-sabay. Upang gawin ito, i-double click lang kung ano ang gusto mong baguhin, pagkatapos ay pindutin ang Ctrl + D (Cmd + D) para sa bawat kaganapan na gusto mong piliin, at pagkatapos ay kapag ipinasok mo ito, baguhin ang lahat ng mga ito nang sabay-sabay.

Workspaces – pagkonekta ng mga lokal na file sa proyekto

Ang isang napakalakas na feature ng Chrome DevTools ay ang mga workspace. Bilang default, kapag binago mo ang mga bagay sa mga tool ng developer, mawawala ang mga ito pagkatapos ma-refresh ang page. Ito ay mahusay para sa maliliit na pag-aayos dito at doon, ngunit ang mga workspace ay talagang nagbibigay-daan sa iyo na i-save ang mga pagbabagong iyon sa pamamagitan ng pag-save ng mga ito sa iyong drive.

Upang gawin ito, mag-right-click sa folder at piliin ang "Magdagdag ng folder sa lokal na workspace." Pagkatapos, para gawin itong permanente, mag-right click sa file at piliin ang "Map to File System Resource...".

Filmstrip sa network

Nagbibigay-daan sa iyo ang feature na online na filmstrip na makita kung paano nire-render ang iyong page mula simula hanggang katapusan, na kumukuha ng mga screenshot habang naglo-load ito. Maaari itong maging isang mahusay na paraan upang makita kung paano nagre-render ang iyong font at kung nakikitungo ka sa mga isyu tulad ng

Upang patakbuhin ito, mag-click sa panel ng Timeline at pindutin ang Ctrl + R (Cmd + R) upang i-refresh ang pahina. Pagkatapos ay maaari kang mag-click sa panel ng Buod sa Pinagsama-samang panel.

DOMContentLoaded

Sa mga tool ng developer, makikita mo ang eksaktong oras ng DOMContentLoaded at ang kabuuang oras ng paglo-load. Upang patakbuhin ito, mag-click sa panel ng Network, i-click ang Ipakita ang Pangkalahatang-ideya, at pindutin ang Ctrl + R (Cmd + R) upang i-refresh ang pahina. May lalabas na asul na linya para sa DOMContentLoaded kasama ng pulang linya para sa kabuuang oras ng pagkarga. Karaniwan, ang lahat ng natitira o nakakapindot sa asul na linya ay mga asset na humaharang sa DOM o tinatawag na render blocking asset.

Google AMP HTML Validation

Gumamit ng Firefox Developer Tools sa Google Chrome

Alam mo ba na maaari mong patakbuhin ang Firefox Developer Tools sa Google Chrome? Ang Valence ay isang pang-eksperimentong karagdagan mula sa Firefox team na nagbibigay-daan sa Firefox Developer Tools na mag-debug ng mas malawak na hanay ng mga browser. Nangangailangan ang Valence ng Chrome 37.0 o mas mataas.

Pag-istilo ng mga dev tool sa Google Chrome

Kamakailan lang ay nalaman ko na sinusuportahan ng Chrome ang mga tema para sa mga dev tool. Nais kong subukan ito kaagad. Sasabihin ko kaagad na hindi ako lubos na nasisiyahan sa resulta :-)

Paghahanda

Upang ma-install ang tema para sa mga dev tool, kailangan mong paganahin ang mga pang-eksperimentong feature. Upang gawin ito, ilagay ang chrome://flags/#enable-devtools-experiments sa address bar ng Google Chrome. Malapit sa punto Paganahin ang mga eksperimento sa Developer Tools i-click Paganahin. Ngayon i-restart ang iyong browser (dapat mayroong isang pindutan sa ibaba).

Buksan ang mga tool ng developer (cmd + shif + i / F12), pumunta sa mga setting (icon ng gear), pumunta sa tab Mga eksperimento at lagyan ng check ang kahon sa tabi ng "Payagan ang mga custom na tema ng UI."
Ngayon ay maaari mong ligtas na mag-install ng mga tema mula sa tindahan.

Paghahanap at pag-install ng mga tema

Makakakita ka ng mga tema sa Google Chrome store. Maghanap ng mga tema ng dev. Ngunit ito ay hindi masyadong maginhawa; halos lahat ng mga paksa ay nakolekta sa website devthemez.com. At mayroon ding mga paksa para sa mga tool ng dev.

Pumunta ngayon sa tindahan, piliin ang tema na kailangan namin at i-install ito. Ngayon kapag binuksan mo ang Mga Tool ng Developer makikita mo ang iyong tema.

Ngayon ng kaunti tungkol sa hindi kasiya-siya. Ang mga tema ay madalas na mukhang mahirap. May problema din sa pagsanay. Halimbawa, nasanay ako sa katotohanan na kung ang numero sa console ay asul, ito ay Numero, at kung ito ay pula, ito ay String. Ngunit ang bawat paksa ay may sariling mga kulay, at nagiging mas mahirap na i-navigate ang mga ito.

Ang bawat modernong web browser ay may kasamang makapangyarihang hanay ng mga tool ng developer. Ang mga tool na ito ay gumagawa ng isang hanay ng mga bagay, mula sa pag-inspeksyon sa kasalukuyang naka-load na HTML, CSS at JavaScript hanggang sa pagpapakita kung aling mga asset ang hiniling ng page at kung gaano katagal ang pag-load ng mga ito. Ipinapaliwanag ng artikulong ito kung paano gamitin ang mga pangunahing pag-andar ng mga devtool ng iyong browser.

Tandaan: Bago mo patakbuhin ang mga halimbawa sa ibaba, buksan ang halimbawang site ng Beginner na aming binuo sa panahon ng Pagsisimula sa serye ng artikulo sa Web dapat mong bukas ito habang sinusunod mo ang mga hakbang sa ibaba.

Paano buksan ang devtools sa iyong browser

Ang devtools ay nakatira sa loob ng iyong browser sa isang subwindow na halos ganito ang hitsura, depende sa kung anong browser ang iyong ginagamit:

Paano mo ito hatakin? Tatlong paraan:

Ang Inspektor: DOM explorer at CSS editor

Karaniwang nagbubukas ang mga tool ng developer bilang default sa inspektor, na kamukha ng sumusunod na screenshot. Ipinapakita ng tool na ito kung ano ang hitsura ng HTML sa iyong page sa runtime, pati na rin kung ano ang inilapat na CSS sa bawat elemento sa page. Nagbibigay-daan din ito sa iyo na agad na baguhin ang HTML at CSS at makita ang mga resulta ng iyong mga pagbabago na makikita nang live sa viewport ng browser.

Kung ikaw huwag tingnan ang inspektor,

• I-tap/i-click ang Inspektor tab.
• Sa Internet Explorer, i-tap/i-click DOM Explorer o pindutin ang Ctrl + 1 .
• Sa Microsoft Edge, o Opera, i-tap/i-click ang Elements.
• Sa Safari, ang mga kontrol ay hindi masyadong malinaw na ipinakita, ngunit dapat mong makita ang HTML kung hindi ka pa nakapili ng ibang bagay na lalabas sa window. Pindutin ang Estilo button para makita ang CSS.

Paggalugad sa inspektor ng DOM

Para sa panimula, i-right-click (Ctrl-click) ang isang HTML na elemento sa DOM inspector at tingnan ang menu ng konteksto. Ang mga available na opsyon sa menu ay nag-iiba-iba sa mga browser, ngunit ang mga importante ay halos pareho:

• Tanggalin ang Node(minsan Tanggalin ang Elemento). Tanggalin ang kasalukuyang elemento.
• I-edit bilang HTML(minsan Magdagdag ng katangian/I-edit ang text). Hinahayaan kang baguhin ang HTML at makita ang mga resulta nang mabilis. Napaka-kapaki-pakinabang para sa pag-debug at pagsubok.
• :hover/:active/:focus. Pinipilit na i-toggle ang mga estado ng elemento, para makita mo kung ano ang magiging hitsura ng kanilang estilo.
• Kopyahin/Kopyahin bilang HTML. Kopyahin ang kasalukuyang napiling HTML.
• Ang ilang mga browser ay mayroon din Kopyahin ang CSS Path at Kopyahin ang XPath available, para bigyang-daan kang kopyahin ang CSS selector o XPath expression na pipili sa kasalukuyang elemento ng HTML.

Subukang i-edit ang ilan sa iyong DOM ngayon. I-double click ang isang elemento, o i-right click ito at piliin I-edit bilang HTML mula sa menu ng konteksto. Maaari kang gumawa ng anumang mga pagbabago na gusto mo, ngunit hindi mo mai-save ang iyong mga pagbabago.

Paggalugad sa editor ng CSS

Bilang default, ipinapakita ng editor ng CSS ang mga panuntunan ng CSS na inilapat sa kasalukuyang napiling elemento:

Ang mga tampok na ito ay lalong madaling gamitin:

• Ang mga panuntunang inilapat sa kasalukuyang elemento ay ipinapakita sa pagkakasunud-sunod ng pinaka-hanggang-pinakamaliit-tiyak.
• I-click ang mga checkbox sa tabi ng bawat deklarasyon upang makita kung ano ang mangyayari kung inalis mo ang deklarasyon.
• I-click ang maliit na arrow sa tabi ng bawat shorthand property upang ipakita ang longhand na katumbas ng property.
• Mag-click ng pangalan o value ng property para maglabas ng text box, kung saan maaari kang magpasok ng bagong value para makakuha ng live na preview ng pagbabago ng istilo.
• Sa tabi ng bawat panuntunan ay ang pangalan ng file at numero ng linya kung saan tinukoy ang panuntunan. Ang pag-click sa panuntunang iyon ay nagiging sanhi ng pagtalon ng mga dev tool upang ipakita ito sa sarili nitong view, kung saan maaari itong karaniwang i-edit at i-save.
• Maaari mo ring i-click ang closing curly brace ng anumang panuntunan upang ilabas ang isang text box sa isang bagong linya, kung saan maaari kang magsulat ng isang ganap na bagong deklarasyon para sa iyong pahina.

Mapapansin mo ang ilang mga naki-click na tab sa tuktok ng CSS Viewer:

• Nakalkula: Ipinapakita nito ang mga nakalkulang istilo para sa kasalukuyang napiling elemento (ang pangwakas, na-normalize na mga halaga na inilalapat ng browser).
• Layout: Sa Firefox, ang lugar na ito ay may kasamang dalawang seksyon:
  • Modelo ng Kahon: biswal na kumakatawan sa modelo ng kahon ng kasalukuyang elemento, upang makita mo sa isang sulyap kung anong padding, hangganan at margin ang inilapat dito, at kung gaano kalaki ang nilalaman nito.
  • Grid: Kung ang pahina na iyong sinisiyasat ay gumagamit ng CSS Grid, pinapayagan ka ng seksyong ito na tingnan ang mga detalye ng grid.
• Mga font: Sa Firefox, ang Mga font Ipinapakita ng tab ang mga font na inilapat sa kasalukuyang elemento.

Alamin ang higit pa

Alamin ang higit pa tungkol sa Inspector sa iba't ibang browser:

• Chrome DOM inspector

Ang JavaScript debugger

Binibigyang-daan ka ng JavaScript debugger na panoorin ang halaga ng mga variable at magtakda ng mga breakpoint, mga lugar sa iyong code na gusto mong i-pause ang pagpapatupad at tukuyin ang mga problemang pumipigil sa iyong code na maipatupad nang maayos.

Upang makapunta sa debugger:

Firefox: Piliin ang ➤ Web Developer ➤ Debugger o pindutin ang Ctrl + Shift + S upang buksan ang JavaScript Debugger. Kung ang mga tool ay ipinapakita na, mag-click sa Debugger tab.

Chrome: Buksan ang mga tool ng Developer at pagkatapos ay piliin ang Mga pinagmumulan tab. (Gumagana ang Opera sa parehong paraan.)

Edge at Internet Explorer 11: Pindutin ang F12 at pagkatapos, Ctrl + 3 , o kung ang mga tool ay ipinapakita na, mag-click sa tab na Debugger.

Safari: Buksan ang Mga Tool ng Developer at pagkatapos ay piliin ang tab na Debugger.

Paggalugad sa debugger

Mayroong tatlong mga pane sa JavaScript Debugger sa Firefox.

Listahan ng file

Ang unang pane sa kaliwa ay naglalaman ng listahan ng mga file na nauugnay sa pahinang iyong tina-debug. Piliin ang file na gusto mong gamitin mula sa listahang ito. Mag-click sa isang file upang piliin ito at tingnan ang mga nilalaman nito sa gitnang pane ng Debugger.

Source code

Magtakda ng mga breakpoint kung saan mo gustong i-pause ang execution. Sa sumusunod na larawan, ang highlight sa numero 18 ay nagpapakita na ang linya ay may set ng breakpoint.

Panoorin ang mga expression at breakpoints

Ang kanang-kamay na pane ay nagpapakita ng isang listahan ng mga expression ng relo na iyong idinagdag at mga breakpoint na iyong itinakda.

Sa larawan, ang unang seksyon, Panoorin ang mga expression, ay nagpapakita na ang listItems variable ay naidagdag. Maaari mong palawakin ang listahan upang tingnan ang mga halaga sa array.

Ang susunod na seksyon Mga breakpoint, naglilista ng mga breakpoint na itinakda sa pahina. Sa example.js, isang breakpoint ang naitakda sa statement listItems.push(inputNewItem.value);

Ang huling dalawang seksyon ay lilitaw lamang kapag ang code ay tumatakbo.

Ang Tumawag sa stack Ipinapakita sa iyo ng seksyon kung anong code ang naisakatuparan upang makarating sa kasalukuyang linya. Makikita mo na ang code ay nasa function na humahawak ng pag-click ng mouse, at ang code ay kasalukuyang naka-pause sa breakpoint.

Ang huling seksyon Saklaw, ay nagpapakita kung anong mga halaga ang nakikita mula sa iba't ibang mga punto sa loob ng iyong code. Halimbawa, sa larawan sa ibaba, makikita mo ang mga bagay na available sa code sa addItemClick function.

Alamin ang higit pa

Alamin ang higit pa tungkol sa JavaScript debugger sa iba't ibang browser:

Ang JavaScript console

Ang JavaScript console ay isang hindi kapani-paniwalang kapaki-pakinabang na tool para sa pag-debug ng JavaScript na hindi gumagana gaya ng inaasahan. Ito ay nagbibigay-daan sa iyong magpatakbo ng mga linya ng JavaScript laban sa pahinang kasalukuyang naka-load sa browser, at iulat ang mga error na naranasan habang sinusubukan ng browser na isagawa ang iyong code. Upang ma-access ang console sa anumang browser:

Kung bukas na ang mga tool ng developer, i-click o pindutin ang tab na Console.

Kung hindi, pinapayagan ka ng Firefox na buksan ang console nang direkta gamit ang Ctrl + Shift + K o gamit ang command ng menu: Menu ➤ Web Developer➤ Web Console, o Mga tool ➤ Web Developer ➤ Web Console. Sa ibang browser, buksan ang mga tool ng developer at pagkatapos ay i-click ang tab na Console.

Bibigyan ka nito ng isang window tulad ng sumusunod:

Upang makita kung ano ang mangyayari, subukang ilagay ang mga sumusunod na snippet ng code sa console nang paisa-isa (at pagkatapos ay pindutin ang Enter):

1. alerto("hello!");
2. document.querySelector("html").style.backgroundColor = "purple";
3. var myImage = document.createElement("img"); myImage.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);

Ngayon subukang ilagay ang mga sumusunod na maling bersyon ng code at tingnan kung ano ang makukuha mo.

1. alerto("hello!);
2. document.cheeseSelector("html").style.backgroundColor = "purple";
3. var myImage = document.createElement("img"); myBanana.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);

Magsisimula kang makita ang uri ng mga error na ibinabalik ng browser. Kadalasan ang mga error na ito ay medyo misteryoso, ngunit ito ay dapat na medyo simple upang malaman ang mga problemang ito!

Alamin ang higit pa

Alamin ang higit pa tungkol sa JavaScript console sa iba't ibang browser:

• Chrome JavaScript Console (Ang inspektor ng Opera ay gumagana tulad nito)

Ang bawat modernong Internet browser ay nilagyan ng makapangyarihang mga tool para sa mga web developer. Hinahayaan ka ng mga tool na ito na gumawa ng iba't ibang bagay, mula sa pagsusuri sa kasalukuyang naka-load na HTML, CSS, at JavaScript hanggang sa pagpapakita kung anong mga mapagkukunan ang kailangan ng isang page at kung gaano katagal mag-load. Ituturo sa iyo ng artikulong ito kung paano gamitin ang mga pangunahing pag-andar ng mga tool ng developer sa iyong browser.

Tandaan: Bago ka magsimulang gumawa ng mga halimbawa, buksan ang halimbawang site para sa mga nagsisimula na nakatrabaho namin sa mga nakaraang aralin. Dapat mong panatilihin itong bukas upang makumpleto ang mga hakbang sa ibaba.

Paano magbukas ng mga tool sa web developer sa iyong browser?

Ang panel ng developer ay matatagpuan sa ibaba ng iyong browser:

Paano ito ipapakita? Mayroong tatlong mga pagpipilian:

Inspector: DOM browser at CSS editor

Bilang default, bubukas ang isang tab sa panel Inspector, makikita mo ito sa screenshot sa ibaba. Binibigyang-daan ka ng tool na ito na makita kung ano ang hitsura ng HTML code sa page sa real time, pati na rin ang CSS na inilalapat sa bawat elemento sa page. Pinapayagan ka nitong i-edit ang parehong HTML at CSS sa real time. Ang mga pagbabagong ginawa ay direktang makikita sa browser window.

Kung ikaw ay nakikita mo Inspektor,

• Mag-click sa tab Inspektor.
• Sa Internet Explorer, mag-click sa DOM Browser, o pindutin ang Ctrl + 1.
• Sa Safari, ang mga kontrol ay hindi malinaw na ipinakita, ngunit dapat mong makita ang HTML code maliban kung pumili ka ng iba sa window ng disenyo. Mag-click sa pindutan Estilo, para makita ang CSS.

Pangkalahatang-ideya ng DOM inspector

Upang makapagsimula, subukan ang pag-right-click (Ctrl+click) sa isang HTML na elemento sa DOM inspector at tingnan ang menu ng konteksto. Ang mga item sa menu ay maaaring mag-iba-iba sa bawat browser, ngunit ang mga mahalaga ay pareho:

• Tanggalin ang node(Minsan Alisin ang elemento). Tinatanggal ang kasalukuyang elemento.
• I-edit bilang HTML(Minsan Magdagdag ng katangian/I-edit ang text). Binibigyang-daan kang mag-edit ng HTML at makita ang resultang "live". Napaka-kapaki-pakinabang para sa pag-debug at pagsubok.
• :hover/:active/:focus. Pinipilit ang mga elemento na ilipat ang kanilang estado sa kung saan inilalapat ang iyong istilo.
• Kopyahin/Kopyahin bilang HTML. Kinokopya ang kasalukuyang napiling HTML.

Subukang baguhin ang isang bagay sa pamamagitan ng Inspector window sa iyong page ngayon. I-double click ang elemento, o i-right click at piliin I-edit bilang HTML mula sa menu ng konteksto. Maaari kang gumawa ng anumang mga pagbabago na gusto mo, ngunit hindi mo mai-save ang mga ito.

Pangkalahatang-ideya ng CSS editor

Bilang default, ipinapakita ng editor ng CSS ang mga katangian ng CSS na inilapat sa kasalukuyang napiling elemento:

Ang mga tampok na ito ay lalong maginhawa:

• Ang mga katangiang inilapat sa kasalukuyang elemento ay ipinapakita sa pababang pagkakasunud-sunod ng priyoridad.
• Maaari mong alisan ng check ang mga kahon sa tabi ng mga property upang makita kung ano ang mangyayari kung aalisin mo ang mga ito.
• Mag-click sa maliit na arrow sa tabi ng isang property upang makita ang lahat ng katumbas nito.
• Mag-click sa pangalan ng property o halaga nito para magbukas ng text box kung saan maaari kang magtakda ng mga bagong value at makita kung paano magbabago ang iyong elemento sa mga bagong value.
• Sa tabi ng bawat property ay ang pangalan ng file at numero ng linya. Saan matatagpuan ang property na ito? Ang pag-click sa path na ito ay magdadala sa iyo sa isang window kung saan maaari mong i-edit ang CSS na ito at i-save ito.
• Maaari ka ring mag-click sa closing curly brace ng anumang property upang dalhin ang text field sa isang bagong linya, kung saan maaari kang magsulat ng isang ganap na bagong deklarasyon para sa iyong pahina.

Maaaring napansin mo na ang iba pang mga tab sa CSS editor:

• Kinakalkula: Ang lahat ng mga kalkulasyon ng ari-arian para sa napiling elemento ay nakalista dito (ang pangwakas, normalized na mga halaga na inilapat ng browser).
• I-block ang modelo: Nagpapakita ng modelo ng kahon ng napiling elemento, dito mo makikita ang padding, padding, at mga hangganan na inilapat sa elemento, at ang laki ng mga ito ay ipinahiwatig din dito.
• Mga animation: Sa Firefox, sa tab Mga animation Maaari mong makita ang mga animation na inilapat sa napiling elemento.

Alamin ang higit pa

Matuto pa tungkol sa Inspector sa iba't ibang browser:

• Chrome DOM inspector (Ang Opera's Inspector ay katulad ng Chrome's Inspector)

JavaScript Console

Ang JavaScript Console ay isang hindi kapani-paniwalang kapaki-pakinabang na tool para sa pag-debug ng JavaScript kung hindi ito gumagana gaya ng inaasahan. Binibigyang-daan ka nitong i-load ang JavaScript na salungat sa pagkakasunud-sunod kung saan nilo-load ng browser ang script, at nag-uulat ng mga error sa sandaling sinubukan ng browser na isagawa ang iyong code. Upang ma-access ang console mula sa anumang browser, i-click lang ang button ng Console. (Sa Internet Explorer, i-click ang Ctrl + 2.) Magbubukas ang isang window tulad ng ipinapakita sa ibaba:

Upang maunawaan kung ano ang nangyayari, subukang i-type ang mga snippet ng code sa console nang paisa-isa (at pagkatapos ay pindutin ang Enter):

1. alerto("hello!");
2. document.querySelector("html").style.backgroundColor = "purple";
3. var myImage = document.createElement("img"); myImage.setAttribute("src","https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg"); document.querySelector("h1").appendChild(myImage);

Ngayon subukan ang susunod, hindi tamang bersyon ng code at tingnan kung ano ang mangyayari.

1. alerto("hello!);
2. document.cheeseSelector("html").style.backgroundColor = "purple";
3. var myImage = document.createElement("img"); myBanana.setAttribute("src","https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg"); document.querySelector("h1").appendChild(myImage);

Makakakita ka ng ilang mga error na sasabihin sa iyo ng browser. Kadalasan ang mga error na ito ay mukhang medyo misteryoso, ngunit dapat silang maging medyo simple upang malaman ang problema!

Alamin ang higit pa

Matuto nang higit pa tungkol sa JavaScript console sa iba't ibang browser:

• Chrome JavaScript Console (Ang Opera's Inspector ay katulad ng Chrome's Inspector)

Marami sa atin ang gumagastos ng daan-daan at libu-libong dolyar sa mga serbisyong tumutulong sa pag-automate at pasimplehin ang ating pang-araw-araw na gawain. Ngunit mayroon kaming mahusay na libreng hanay ng mga tool para sa SEO na magagamit namin - mga tool ng developer (DevTools) sa Chrome browser. Sa tulong nito, maaari mong suriin ang pinakamahalaga at pangunahing aspeto ng anumang pahina para sa pag-optimize ng search engine.

Ang Chrome DevTools ay may ilang napaka-madaling gamitin na application na magiging kapaki-pakinabang kapag nagsasagawa ng pagsusuri sa SEO. Sa ibaba ay titingnan natin ang mga ito nang mas detalyado.

Upang magsimula, buksan ang page na gusto mong subukan sa iyong browser, at pagkatapos ay buksan ang Toolbar ng Developer. Upang gawin ito, pumunta sa menu ng Chrome na matatagpuan sa kanang sulok sa itaas ng screen at piliin ang " Mga karagdagang tool» -> « Mga Tool ng Developer».

Maaari mo ring gamitin ang mga keyboard shortcut: Ctrl+Shift+I (Windows) o Cmd+Opt+I (Mac).

Ang isa pang opsyon ay ang pag-right click sa page na gusto mong suriin at piliin ang item sa lalabas na menu "Tingnan ang code".

Ngayon ay maaari mong simulan ang pag-audit.

1. Sinusuri ang mga pangunahing elemento ng nilalaman ng pahina

Kasalukuyang nagagawa ng Google na i-crawl at i-index ang nilalaman ng JavaScript, ngunit hindi ito palaging ginagawa nang tama. Samakatuwid, kinakailangang suriin ang mga pangunahing elemento ng nilalaman ng pahina - pamagat, paglalarawan ng meta at teksto. Nangangahulugan ito na hindi mo lamang kailangang i-parse ang HTML code, ngunit suriin din ang DOM. Sa ganitong paraan makikita mo kung paano makikita at makikilala ng Google ang impormasyong ito.

Maaari mong tingnan ang DOM ng anumang pahina sa tab "Mga elemento" Panel ng Mga Tool ng Developer.

Pakisuri ang tab na ito upang matiyak na ang lahat ng impormasyong kailangan mo ay available sa Google.

Halimbawa, sa kaliwang sulok sa itaas ng screenshot sa ibaba, makikita namin na ang ipinapakitang body text (sa pulang frame) ay nakapaloob sa isang tag