ინსტრუმენტები - DevTools

 
                 - საიტზე იხსნება F12 ან მარჯვენა ღილაკით inspect
 - შეიძლება კოდის ჩასწორება და ლაივ რეჟიმში ნახვა
 1. Elements მოიცავს html და css კოდს, DOM ხეს
 2. Console შეცდომები და გაფრთხილებები, ამოწმებს JS მუშაობას
 3. Sources აჩვენებს რა არის ჩატვირთული, ფაილოვანი სისტემა
 4. Network აჩვენებს სერვერზე გაგზავნილ მოთხოვნებს, ჩატვირთვის სიჩქარეებს
 5. Performances აჩვენებს დატვირთვას კომპიუტერზე
 6. Memory აჩვენებს მეხსიერებისა და დატვირთვის განაწილებას
 7. Application აჩვენებს ქეშს და მეხსიერებას, ასევე ბაზებს 
 8. Security აჩვენებს კავშირის დაცულობას და სერთიფიკატს
 9. Lighthouse აჩვენებს ჩატვირთვის მაჩვენებლებს
 10. control + F ძებნა სახელით, ტეგით ან კლასით
 11. inspect აჩვენებს ელემენტის კოდს, გვერდის სტატუსს(404,503,200...)
 
   DevTools საჭირო ფუნქციების გამოყენება ტესტერისთვის
 1. android და ios ემულაცია.
 2. CSS სტილების შეცვლა კოდში, ლაივ რეჟიმში.
 3. გამოუყენებელი CSS და JS კოდები = Sources->Coverage
 4. cookies კუკ-ფაილები = Application->Cookies
 5. ელემენტის ძებნა = Element -> control + F (ძებნის ველი) ასევე შესაძლებელია ძებნა HTML ან CSS ფაილში.
 6. ელემენტების გადაადგილება = HTML-ში ხდება მაუსით გადატანა
 7. Cookies კუკების წაშლა = Application -> Cookies -> Clear All

   DevTools ფუნქციონალი
 -- ისარი(select) ზედა მარცხენა კუთხეში = ელემენტების მონიშვნისათვის(აჩვენებს მთავარ პარამეტრებს)
 -- გადამრთველი(Toggle) ახდენს მობილურისა და დესკტოპის ვარიანტებზე გადართვას.

   Element ფუნქციონალი
 -- გამოსახავს ელემენტებს და მათ თვისებებს. ელემენტზე მარჯვენა ღილაკის მენიუთი შესაძლებელია კოდის რედაქტირება, კოპირება, დუბლირება და სხვა ოპერაციები.
 -- Styles = ელემენტების CSS სტილები(კოდი),  აქვეა ფსევდოკლასების დამატების ღილაკები(:hov), კლასის დამატების ღილაკი(cls), მთავარ კოდში შესაბამის ადგილზე გადასვლის ღილაკი. ჩანს ელემენტის დაკავებული სივრცე თავის დაშორებებით.
 -- Computed = იგივეა რაც Style თვისებების უფრო სრული ჩამონათვალით
 -- Layout = სქემატურად გამოსახავს ელემენტების განლაგებას
 -- Event Listener = მოვლენების ჩამონათვალი
 -- Dom Breakpoints = წყვეტის წერტილები(ჩვენს მიერ შექმნილი)
 -- Properties = თვისებების ჩამონათვალი  

   Network ფუნქციონალი
 -- რეალურ დროში გამოსახავს ჩატვირთულ ფაილებს, შეგვიძლია ავირჩიოთ რა ტიპის ფაილები გვაჩვენოს.
 -- ჩატვირთული ფაილების თვისებებია(სვეტებში): Name(სახელი), Status(სერვერის პასუხის კოდი), Type(ფაილის ტიპი), Initiator(რა კოდმა გამოიძახა ფაილი), Size(ზომა), Time(ჩატვირთვის დრო), Waterfall(ჩატვირთვის ვიზუალი)
 -- ქვევით ბოლოში იწერება გაგზავნილი მოთხოვნების(request), გადაგზავნილი მონაცემების(transferred) და საჭირო რესურსების(resources) რაოდენობა, ასევე DOM ჩატვირთვის დრო.
 -- Record Network Log(შავი მსხვილი წერტილი) = ახდენს ჩატვირთვის პროცესების ჩამოწერას.
 -- Clear = ჩატვირთვის მონაცემების გასუფთავება
 -- Filter = ფილტრების მენიუს/ძებნის ჩამოშლა
 -- Disable cache = ქეშის ჩატვირთვის გამორთვა
 -- Fast3d/No throttling = ჩატვირთვის სიჩქარეების შეცვლა
 -- Offline = ინტერნეტის გარეშე საიტის გამოჩენა
 -- Capture Screenshots = ჩატვირთვის სკრინშოტების ჩვენება

   Console ფუნქციონალი
 -- შეგვიძლია გავუშვათ ბრძანებები(კოდი)
 -- ტესტირებისთვის მნიშვნელოვანი შეცდომები და გაფრთხილებები
 -- Clear = კონსოლის გასუფთავება
 -- Errors = კოდის შეცდომების ჩვენება 
 -- Warnings = გაფრთხილებები შესაძლო შეცდომებზე
 
   Source ფუნქციონალი
 -- აჩვენებს ყველა ფაილს თავისი შემადგენლობით(კოდი, სურათები, სკრიპტები...)
 -- შესაძლებელია კოდის რედაქტირება, წყვეტის წერტილების შექმნა(დებაგერში).
 -- მარჯვენა მხარეს არის კოდის შესრულების ინსტრუმენტები.

   Lighthouse ფუნქციონალი
 -- ახდენს საიტის შეფასებას სხვადასხვა მაჩვენებლებით
 -- Performance = კონტენტის ჩატვირთვის სიჩქარეები, ბლოკირების დრო, DOM სიღრმე
 -- Accessibility = ინტერფეისის ხელსაყრელობა, სხვადასხვა ელემენტების გამართული მუშაობა.
 -- Best Practices = რეკომენდაციები
 -- SEO = SEO ოპტიმიზაცია, კოდის გამართულობა

   Application ფუნქციონალი
 -- გამოიყენება ჩატვირთული ელემენტების გამოკვლევისათვის.
 -- გამოაქვს სხვადასხვა ტიპის მეხსიერების შესახებ ინფორმაცია, ასევე კუკებისა და ქეშის შესახებ

   Performance
 -- სხვადასხვა პროცესებზე დახარჯული დროის მონიტორინგი
 -- გვაჩვენებს რესურსების ჩატვირთვას და ჯავასკრიპტის პროცესების შესრულებას

   Secuirity
 -- აჩვენებს ინფორმაციას მოთხოვნებზე და მონიშნავს რის გამოც ვერ იღებს საიტი მწვანე სტატუსს.
 -- აჩვენებს აქვს თუ არა საიტს SSL სერთიფიკატი

   Memory
 -- გვაძლევს ინფორმაციას საიტებისა და აპლიკაციების მიერ მეხსიერების გამოყენებაზე.
 -- გვაჩვენებს ჯავასკრიპტის კოდებზე დახარჯულ დროს და მეხსირების განაწილებას.

   Audits
 -- აკეთებს გვერდის ანალიზს ჩატვირთვისას, იძლევა რეკომენდაციებს ოპტიმიზაციაზე.