კონსოლის ობიექტი
console ობიექტი გვაძლევს საშუალებას ვიხილოთ და გამოვიტანოთ ვიზუალზე კოდში არსებული ცვლადის მნიშვნელობები. რეალურად როგორი სახითაც წინა სტატიებში ვიყენებდით კონსოლს იყო უბრალოდ მნიშვნელობის დალოგვა (ცვლადის მნიშვნელობის ვიზუალზე გამოტანა), მაგრამ console ობიექტს უფრო მეტი, რამ შეუძლია ვიდრე უბრალოდ ცვლადის მნიშვნელობის დალოგვა არის. კონსოლის ხილვა შესაძლებელია inspect-ში. inspect გახსნა შესაძლებელია რამოდენიმე გზით:
- კონტექსტური მენიუს გამოძახებით (ვებგვერდზე ნებისმიერ ადგილას დააკლიკეთ მარჯვენა მაუსის მარჯვენა ღილაკით და ბოლოსკენ დააწექით
inspect, ნებისმიერ ადგიალს დაკლიკება იმუშავებს თუ დეველოპერმა წინასწარ არ განსაზღვრა კონტექსტური მენიუს ცვლილება). - მალსახმობი (shortcut) გამოყენებით: F12 (პირდაპირ კონსოლი), Ctrl + Shift + I (პირდაპირ კონსოლი), Ctrl + Shift + C (პირდაპირ ელემენტები).
მეთოდები
ტექნიკურად კონსოლს ბევრი მეთოდი გააჩნია, ამჯერად განვიხილავთ მარტივ და საჭირო მეთოდებს, რომლებიც შედარებით გაგვიმარტივებს კოდთან მუშაობას. აღწერილი მეთოდები არის void ტიპის მეთოდები და არანაირ ინფორმაციას არ აბრუნებენ.
| მეთოდი | აღწერა |
|---|---|
console.clear() |
მეთოდი გამოიყენება იმისათვის, რომ არსებული ინფორმაციები, რაც გვაქვს კონსოლში გავასუფთავოთ. მეთოდი არის სტატიკური და არ საჭიროებს პარამეტრის გადაცემას. |
console.log() |
მეთოდი გამოიყენება მნიშვნელობების დასალოგად, შესაძლებელია იმდენი პარამეტრი გადავცეთ რამდენიც გაგვიხარდება. დალოგვის დროს შესაძლოა გავაფერადოთ ჩვენი კონსოლის მნიშვნელობები, მაგალითად: console.log("%cლამაზი ლოგი", "color: steelblue") ამ შემთხვევაში უბრალოდ ფერი შევცვალეთ მაგრამ მეორე მნიშვნელობად შეიძლება სხვადასხვა ფონტის სტილიზაციების გადაცემა, როგორიც არის: font-family, font-size, font-weight და ა.შ (პ.ს შეგიძლიათ ინსპექტი გახსნათ და ნახოთ მაგალითი) |
console.error() |
მეთოდი გამოიყენება ერორის დასალოგად, შესაძლებელია ისე გამოვიყენოთ, როგორც console.log() მეთოდი. |
console.warn |
მეთოდი გამოიყენება გაფრთხილების დასალოგად, შესაძლებელია ისე გამოვიყენოთ, როგორც console.log() მეთოდი. |
console.info() |
მეთოდი გამოიყენება ინფორმაციული მესიჯის დასალოგად, თითქმის იდენტურია console.log() მცირედი განსხვავება მდგომარეობს ბრაუზერებში, ზოგ ბრაუზერში (მაგ: Firefox) info ლოგის დროს მცირედი i აიქონი (ხატულა) გამოჩნდება. |
console.table() |
მეთოდი გამოიყენება ინფორმაციის ცხრილის სახით დასალოგად. კარგი არის მასივების და ობიექტების დასალოგად (სამაგალითო ლოგი შეგიძლიათ ნახოთ ინსპექტში). ცხრილში გამოჩნდება index და Value სადაც გამოტანილი იქნება თითოეული მნიშვნელობა თავისი ინდექსით და მნიშვნელობით. |
debugger
debugger ქივორდი გამოიყენება დებაგინგის პროცესის დროს. დებაგინგი ეს არის კოდის გაშვების პროცესი, რომელიც მიმდინარეობს ნელა. ნელა გაშვებაში იგულისხმება, რომ ჩვენ ვწყვიტავთ, როდის გადავიდეს ახალხაზზე და ახალ ფუნქციაზე. შეგვიძლია ჩვენს კოდში დავსვათ სხვდასხვა შეწყვეტის წერტილები (breakpoints), რომ კონკრეტულ ადგილას გავაჩეროთ კოდი. შეწყვეტის წერტილის ჩასმა vscode-ში საკმაოდ მარტივად შეიძლება ხაზის დასაწყისში დაკლიკებით ან შეგვიძლია ბრაუზერში გავხსნათ JavaScript ფაილი წყაროდან (Source), რომელიმე ხაზზე სადაც რიცხვი იწყება იქ დავაჭიროთ.
let a = 1;
let b = 2;
debugger;
console.log(a + b);
console.log(a * b);გავითვალისწინოთ რომ დებაგინგის პროცესი ირთვება მაშინ, როცა გვაქვს ინსპექტი გახსნილი. ამ მცირედი კოდის მაგალითიდან, როცა გავხსნით ინსპექტს ვღებულობთ, რომ კოდი შეჩერდება პირველ ჯერზე როცა წაიკითხავს debugger და გვაჩვენებს იმ კოდის ფრაგმენტს. ინსპექტში გამოჩნდება ბევრი დეტალი, როგორიც არის:
- scope სადაც ჩანს ცვლადის მნიშვნელობები კონკრეტული ფაილებიდან.
- breakpoint გაწყვეტის წერტილები.
- call stack საიდანაც მოხდა გამოძახება.
- ასევე ზემოთ გამოჩნდება ორი ღილაკი:
Resume script executionკოდის გაგრძლება, მისი მალსახმობი (shortcut) არისF8.Step over next function callშემდგომ ფუნქციაზე გადასვლა (ამ შემთხვევაშიconsole.logგადადის), მისი მალსახმობი არისF10.
ტექნიკურად იმაზე მეტი დეტალი ჩანს ვიდრე ამ სიაში არის აღწერილი, თუმცა საბაზისოდ შეგვიძლია ეს ნაწილი გამოვიყენოთ.
შეჯამება
კონსოლის გამოყენება, ეხმარება დეველოპერს სხვადასხვა პროცესების კონტროლში. სტატიაში ყოველი განხილული მეთოდი თითქმის მსგავსია log მეთოდისა, ძირითადი განსხვავება არის მათი დანიშნულება. შესაბამისი ლოგის დროს შეგვიძლია შესაბამისი მეთოდი გამოვიყენოთ, რაც გაგვიმარტივებს წაკითხვას გამოტანილი შეტყობინება, მესიჯის სახის არის, ერორის სახის არის თუ როგორი სახისაც არის. debugger ქივორდი კი გვიმარტივებს კოდის გააზრებას ნაბიჯ-ნაბიჯ.
იხილეთ სამაგალითო კოდები playground-ში.