Chrome Developer Tools-н бидний мэддэггүй функцууд

t бүхэн Chrome Developer Tools-н DOM inspector, styles panel, Javascript console гээд үндсэн хэрэгслүүдийг аль хэдийнээ хэрэглээд сурчихсан гэдэгт итгэлтэй байна. Харин хүн болгоны тэр бүр мэдээд байдаггүй апп хөгжүүлэхэд тань хэрэг болохуйц хэдэн хэрэгслийг танилцуулая.
Dark Theme

Dev tools-д хар өнгө байдаг гэдгийг мэдэх үү? Хөгжүүлэгчид гэхээр л хар өнгийн орчинд ажилладаг гэж хүмүүс боддог. Тиймдээ ч хөгжүүлэгчид хар өнгийн орчинд дуртай байдаг байх LOL.
Баруун дээд талын 3-н цэгэн цэс -> Settings (Fn+F1) -> Appearance -> Theme -> Dark.
Selection Mode

Dev tools-д DOM элемент сонгох хэд хэдэн аргууд байдгаас хамгийн тохиромжтой (хялбар) арга нь Selection mode.
Selection mode-г Dev tools-н зүүн дээд буланд байрлах Mouse icon дээр даран идэвхжүүлэнэ. Идэвхжүүлсэний дараа хулганаа хуудасны сонгох хэсэг дээр даран DOM элементээ хялбар олох болно.
Shortcut: Cmd + Shift + c
Store as global variable

Dev tools-н console дээр хэвлэгдсэн олон key, утга агуулсан том обьектыг задлан харах хэцүү байдаг. Харин Chrome үүнийг амархан байдлаар хувьсагчид оноож харах боломжийг олгожээ.
Console дээрх обьект дээр Mouse2-г даран гарч ирсэн “Store as Global Variable” цэсийг дарна. Ингээд та temp1 хувьсагчийг ашиглан Javascript-ээр дуртай коммандаа бичээрэй.
Animation Tools

Саяхан Dev tools-д нэмэгдсэн нэг хэрэгсэл нь Animations. Вэб сайтын бүх хөдөлгөөнт хэсгүүдийн хурдыг өөрчилж, зогсоох зэргээр шалгах боломжийг олгожээ.
Баруун дээд талын 3-н цэгэн цэс -> More tools -> Animations.


Мөн Styles panel дах ягаан curve icon дээр дарсанаар элементийн хөдөлгөөний утгуудыг animation байдлаар харахаас гадна 2 талын сум дээр дарж animation-ы утгыг өөрчлөх боломжтой.
Simulate Element Pseudo State

Бас нэг хэрэглүүштэй хэрэгсэл бол Element state simulator. Styles panel-н баруун дээд буланд байрлах :hov, .cls, + цэснүүд юм.
:hov
Элементийн active, hover, focus, visited төлөвүүдийг сонгож харна..cls
Элемент дээр хүссэн class-г хялбар нэмэхэд туслана.+
Элемент дээр класс, төлөв нэмж турших боломжийг олгожээ.

Дээрх жишээнд сонгосон logo класстайli элементэд:hover төлөв нэмж байна.
Prettify CSS and JavaScript

Жижигсгэсэн Javascript, CSS файлаас хэрэгтэй зүйлсээ хайж, харж, шалгахад хүндрэлтэй байдаг. Харин Dev tools үүнийг хөнгөвчилжээ.
Sources хэсэгт жижигсгэсэн файлыг нээсний дараа зүүн доод талд байрлах “{}” icon дээр даран Prettify хийх боломжтой. Javascript файлын хувьд багасгах явцад зарим хувьсагчийн утгийг өөрчилдөг учраас шалгахад бага зэрэг хүндрэлтэй, харин CSS файлын хувьд өөрчлөлтгүй байдаг.
Alt + Up / Alt + Down

CSS-г шалгах үед property-н утгыг өөрчлөх тохиолдол их гардаг. Ялангуяа бутархай утга.
- +/- дарахад утга
1-ээр alt-тай цуг +/- дарвал0.1-ээрshift-тэй цуг +/- дарвал10-аар нэмэгдэж хасагддаг байна.
Preserve Log

Хуудсыг дахин ачааллах үед Console log цэвэрлэгддэг. Тэгвэл Preserve log нь хуудас шилжих, дахин ачааллах үед хэвлэгдсэн log-г navigation-тай нь цуг харуулан авч үлддэг.
Network + Log Filters

Хөгжүүлэлтийн явцад авч байгаа олон network хүсэлтүүдийг шүүж зарим нэг хүсэлтийг шалгах хэрэг гардаг. Тэгвэл Chrome шүүлтүүр хийх боломжоор хангажээ. “*” wildcard, “regex” ашиглан шүүх боломжтой.
Мөн “-” эхлүүлж бичвэл Chrome таньд шүүлт хийх олон төрлийн сонголтуудыг гаргаж ирэх болно.
Code Coverage

Code coverage нь вэб аппликейшны бүх Javascript, CSS файлуудын аль мөр код нь ашиглагдаж байна, аль мөр код нь ашиглагдахгүй байна вэ? гэдгийг таньд амархан гаргаж харуулах болно.
Их мөр код ашиглагдаагүй файл нь дээрээсээ эхлээд доошоо жагсаж харагдана. Ингэснээр танд хэрэгцээгүй кодоо олж цэгцлэх боломжийг Chrome сүүлийн хувилбар(59) дээрээ оруулж иржээ.
Build better apps with less stress.
Dev tools-н эдгээр техникүүд хөгжүүлэлт хийхэд тань их нэмэр болно гэдэгт итгэлтэй байна. Анхаарал хандуулсанд баярлалаа.
Та бүхэн бидэнтэй нэгдэн ажиллахыг хүсвэл бидний зарласан нээлттэй ажлын байруудтай танилцана уу.

