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

Tsend Altankhuyag
Jul 24, 2017 · 4 min read

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

Dark Theme

Dev tools-д хар өнгө байдаг гэдгийг мэдэх үү? Хөгжүүлэгчид гэхээр л хар өнгийн орчинд ажилладаг гэж хүмүүс боддог. Тиймдээ ч хөгжүүлэгчид хар өнгийн орчинд дуртай байдаг байх LOL.

Баруун дээд талын 3-н цэгэн цэс -> Settings (Fn+F1) -> Appearance -> Theme -> Dark.

Selection Mode

Dev toolsDOM элемент сонгох хэд хэдэн аргууд байдгаас хамгийн тохиромжтой (хялбар) арга нь Selection mode.

Selection modeDev 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.

Animation-ы нэгж бүрийн хурд, дараалал зэргийг өөрчилж болно.
CSS animation controller

Мөн 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 нь хуудас шилжих, дахин ачааллах үед хэвлэгдсэн lognavigation-тай нь цуг харуулан авч үлддэг.

Network + Log Filters

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

Мөн “-” эхлүүлж бичвэл Chrome таньд шүүлт хийх олон төрлийн сонголтуудыг гаргаж ирэх болно.

Code Coverage

Code coverage нь вэб аппликейшны бүх Javascript, CSS файлуудын аль мөр код нь ашиглагдаж байна, аль мөр код нь ашиглагдахгүй байна вэ? гэдгийг таньд амархан гаргаж харуулах болно.

Их мөр код ашиглагдаагүй файл нь дээрээсээ эхлээд доошоо жагсаж харагдана. Ингэснээр танд хэрэгцээгүй кодоо олж цэгцлэх боломжийг Chrome сүүлийн хувилбар(59) дээрээ оруулж иржээ.


Build better apps with less stress.

Dev tools-н эдгээр техникүүд хөгжүүлэлт хийхэд тань их нэмэр болно гэдэгт итгэлтэй байна. Анхаарал хандуулсанд баярлалаа.


Та бүхэн бидэнтэй нэгдэн ажиллахыг хүсвэл бидний зарласан нээлттэй ажлын байруудтай танилцана уу.

Nomadays

Create a world that inspires human connection. Big challenges, Beautiful solutions.

Tsend Altankhuyag

Written by

I am a lover of all being. I am and always will be the optimist. Co-founder of a start up project "Nomadays".

Nomadays

Nomadays

Create a world that inspires human connection. Big challenges, Beautiful solutions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade