Pag-debug sa JavaScript: Pag-log in sa Browser Console

Ang web browser console ay isa sa mga pinaka malawak na ginamit na tool para sa pag-debug ng mga aplikasyon sa harap. Nagbibigay ang Console API ng mga developer ng kakayahang harapin ang mga error at mag-log ng mga mensahe.

console.log () marahil ay ang pinaka-karaniwang ginagamit na pamamaraan sa Console API, ngunit may iba pang mga pamamaraan na maaari mo ring magamit sa iyong daloy ng trabaho. Ipinapakita sa iyo ng gabay na ito ang iba't ibang mga pamamaraan ng web browser console na maaari mong gamitin upang mapagbuti ang iyong pag-debug ng daloy ng trabaho.

Bakit Mahalaga ang Pag-log?

Ang pag-log in sa web browser console ay isa sa mga pinakamahusay na pamamaraan ng pag-debug ng mga aplikasyon sa harap o sa JavaScript na nakabatay.

Kaugnay: 6 Mga Framework ng JavaScript na Worth Learning

Karamihan sa mga modernong web browser ay sumusuporta sa Console API, na ginagawang madali itong magagamit sa mga developer. Mananagot ang object ng console para sa pagbibigay ng pag-access sa debugging console ng browser. Ang pagpapatupad ay maaaring naiiba sa mga browser ngunit ang karamihan sa mga pamamaraan ay gagana sa lahat ng mga modernong browser.

Tip : Maaaring patakbuhin ng iyong browser console ang lahat ng code na tinalakay sa gabay na ito. Pindutin F12 sa iyong keyboard upang buksan ang mga tool ng mga developer ng browser sa Chrome o Firefox.

Mga Mensahe sa Pag-log ng Mga String

Ang isa sa mga pinaka-karaniwang pamamaraan ng console ay console.log () . Naglalabas lamang ito ng isang mensahe ng string o ilang halaga sa web console. Para sa mga simpleng halaga o mga mensahe ng string, ang console.log () Ang paraan ay marahil ang pinakamahusay na pagpipilian upang magamit.

kung paano tanggalin ang mga dobleng larawan sa iphone

Upang output a Kamusta Mundo mensahe, maaari mong gamitin ang sumusunod.

console.log(`Hello World`);

Isa pang espesyal na tampok ng console.log () Ang pamamaraan ay ang kakayahang mai-print ang output ng mga elemento ng DOM o ang istraktura ng isang bahagi ng isang website, halimbawa, upang maipakita ang istraktura ng sangkap ng katawan at lahat ng nasa loob nito ay gumagamit ng mga sumusunod.

console.log(document.body)

Ang output ay isang koleksyon ng mga elemento ng DOM bilang isang puno ng HTML.

Pag-log ng Mga Pakikipag-ugnay na JavaScript na Bagay

Ang console.dir () ginagamit ang pamamaraan para sa pag-log ng mga interactive na katangian ng mga JavaScript object. Halimbawa, maaari mo itong magamit upang matingnan ang mga elemento ng DOM sa isang webpage.

Ang tipikal na output ng console.dir () Ang pamamaraan ay binubuo ng lahat ng mga pag-aari ng tinukoy na JavaScript Object sa format na JSON. Gamitin ang pamamaraan sa ibaba upang mai-print ang mga katangian ng lahat ng mga elemento sa katawan ng isang pahina ng HTML:

console.dir(document.body)

Nasusuri ang mga Ekspresyon

Maaaring pamilyar ka sa mga igiit na pamamaraan mula sa pagsubok sa yunit — mabuti ang console.assert () gumagana ang pamamaraan sa isang katulad na pamamaraan. Gamitin ang console.assert () pamamaraan upang suriin ang isang expression o kundisyon.

Kapag nabigo ang pamamaraan ng assert, ang console ay naglilimbag ng isang mensahe ng error; kung hindi man, wala itong nai-print. Gamitin ang code sa ibaba upang suriin kung ang edad ng isang tao ay higit sa 18:

let ageLimit = 18;  
let yourAge = 12;  
const assertFailMessage = 'You have to be older than 18 years of age';  
  
console.assert( yourAge > ageLimit, assertFailMessage);

Nabigo ang assert sa itaas at may isang mensahe ng error na naka-print nang naaayon.

Pag-log ng Data sa Mga Talahanayan

Gamitin ang console.table () paraan upang maipakita ang data sa isang format na tabular. Ang mga magagandang kandidato upang maipakita sa form ng talahanayan ay may kasamang mga arrays o data ng object.

Tandaan : Ang ilang mga browser, tulad ng Firefox, ay may isang maximum na limitasyon ng 1,000 mga hilera na maaaring ipakita kasama ang console.table () pamamaraan

Ipagpalagay na mayroon kang sumusunod na hanay ng mga bagay sa kotse:

 let cars = [  
 {'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},  
 {'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}  
]

Maaari mong ipakita ang array sa itaas sa isang talahanayan gamit ang pamamaraan sa ibaba:

console.table(cars);

Mga Mensahe sa Pag-log ayon sa Kategoryo

Ang mga mensahe sa web browser console ay pangunahing nakategorya sa tatlong pangkat: error, babala, at impormasyon.

Mga Error

Upang partikular na mai-print ang mga mensahe ng error sa console gamit ang console.error () paraan, ang mga mensahe na nauugnay sa error ay ipinapakita sa pulang font.

console.error('error message');

Mga babala

Upang mag-print ng mga babala, gamitin ang sumusunod. Tulad ng karamihan sa mga sitwasyon, ang mga mensahe ng babala ay ipinapakita sa kahel:

console.warn('warning message');

Impormasyon

Upang mai-print ang pangkalahatang impormasyon sa console, gamitin ang console.info () pamamaraan:

console.info('general info message')

Madaling mag-filter o makahanap ng mga mensahe sa browser console kapag nauri nang maayos ang mga ito.

Pagsubaybay sa Daloy ng Programa

Gamitin ang console.trace () paraan upang mai-print ang isang stack na bakas ng daloy ng programa o pagpapatupad. Ito ay isang napaka kapaki-pakinabang na tampok para sa pag-debug sapagkat ito ay naglilimbag ng pagkakasunud-sunod ng mga pagpapaandar na naisakatuparan sa iyong programa.

Upang makita ang console.trace () paraan sa pagkilos, maaari kang lumikha ng tatlong mga pag-andar (tulad ng bawat sa ibaba) at maglagay ng isang stack trace sa isa sa mga pag-andar.

function functionOne(){  
 functionTwo()  
}  
function functionTwo(){  
 functionThree()  
}  
function functionThree(){  
 console.trace()  
}

Sa iyong browser console, tumawag o mag-trigger functionOne () at makakakuha ka ng isang bakas ng bakas ng mga tawag sa pagpapaandar na naka-print sa Last In First Out Order (LIFO) dahil ito ay isang stack.

Pagpapatupad ng Programang Timing

Sa oras kung gaano katagal ang isang operasyon upang maipatupad sa iyong programa, maaari mong gamitin ang console.time () pamamaraan console.time () ay karaniwang ginagamit kasama ang console.timeEnd () paraan kung saan ginagamit ang huli upang wakasan ang timer.

Maaari kang magkaroon ng hanggang sa 10,000 timer na tumatakbo bawat webpage, na binibigyang-diin ang kahalagahan ng maayos na lagyan ng label ang iyong mga timer.

Sa oras kung gaano katagal ang a para sa loop na kinakailangan upang dumaan sa mga numero 1 hanggang 50,000, maaari mong gamitin ang timer tulad ng sumusunod.

console.time('loop timer 2');  
for(i=1; i<50001; i++){  
}  
console.timeEnd('loop timer 2');

Nagbibilang

Ang console.count () Ang pamamaraan ay ginagamit upang subaybayan ang bilang ng beses ng isang pag-andar o ilang piraso ng code na tinawag sa isang programa. Halimbawa, maaari naming subaybayan ang bilang ng beses ng isang para sa loop ay naisakatuparan tulad ng sumusunod:

 for(i=0; i<4; i++ ){  
 console.count();  
}

Pag-grupo ng Mga Mensahe sa Log

Tulad ng pamamaraan ng timer, ang console.group () , at console.groupEnd () ang mga pamamaraan ay karaniwang ginagamit nang pares.

Tinutulungan ka ng pamamaraan ng pangkat na mas mahusay na ayusin ang iyong mga mensahe sa pag-log. Halimbawa, makakalikha kami ng isang pangkat ng mga mensahe ng babala na may mga babalang label bilang mga sumusunod.

console.group('warnings')  
 console.warn('another warning');  
 console.warn('This is a warning')  
console.groupEnd()

Ang dalawang mensahe sa loob ng pangkat ng babala ay visual na nakategorya tulad ng nakikita sa output sa ibaba.

Pag-clear ng Console

Huling ngunit hindi pa huli, narito ang maraming mga paraan kung saan maaari mong i-clear ang mga mensahe sa pag-log sa iyong browser console.

Gamitin ang console.clear () pamamaraan tulad ng sumusunod.

console.clear()

Maaari mo ring i-clear ang browser console gamit ang mga keyboard shortcut sa browser.

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

Paggamit ng Pinuno ng Console ng Browser

Ipinakita sa iyo ng gabay na ito ang ilan sa iba't ibang magagamit na mga pamamaraan ng web browser console upang matulungan kang i-debug ang mga aplikasyon sa harap. Ang console API ay napaka-magaan, madaling matutunan, at malawak na sinusuportahan sa karamihan sa mga modernong browser.

kung paano mapalabas ang sirang headphone jack

Gumawa ng isang pagpapatotoo ng CAPTCHA form na iyong susunod na proyekto at ilagay sa iyong pagsubok ang iyong mga bagong kasanayan sa pag-debug!

Magbahagi Magbahagi Mag-tweet Email Lumikha ng isang CAPTCHA Validation Form Gamit ang HTML, CSS, at JavaScript

I-secure ang iyong mga website gamit ang pagpapatunay ng CAPTCHA.

Basahin Susunod Mga Kaugnay na Paksa

Programming
Pag-unlad sa Web
JavaScript

Tungkol sa May-akda Magandang pumunta(36 na Artikulo Nai-publish)

Binubuo ni Mwiza ang software sa pamamagitan ng propesyon at malawak na nagsusulat sa Linux at front-end na programa. Ang ilan sa kanyang mga interes ay may kasamang kasaysayan, ekonomiya, politika at arkitektura ng enterprise.

Higit pa Mula kay Mwiza Kumwenda

Mag-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