Chrome DevTools-ийг бид хэрэглэдэг

  1. HTML элементүүдийг шуурхай засах
  2. Бүх хүүхдийн элементийг өргөжүүлнэ үү
  3. Хянан шалгагчийг шилжүүлэн өгөх
  4. DOM элементийн хайлт
  5. Палетт
  6. Олон курсор
  7. Base64 зургийг кодчилно уу
  8. Псевдо-ангиллын шилжүүлэлт
  9. Багана сонгох
  10. CURL-ийн хүсэлтийг хуулах
  11. Дэлгэцийн гар
  12. Бүх хуудасны дэлгэц
  13. Холбох төхөөрөмжийн эмуляц
  14. Ашигтай боломжууд

Нэрийн хувьд Chrome DevTools буюу вэб байцаагч нь вэб хөгжүүлэгчид болон түүнтэй холбоотой хүмүүст зориулагдсан хэрэгсэл юм. Веб хянагч дараах зүйлийг хийх боломжийг танд олгоно:

  • Дэлгэцийн зөв эсэхийг шалгах.
  • JavaScript-с скриптийн гүйцэтгэлийг хянах.
  • Сүлжээний үйл ажиллагааг харах.

Энэ өгүүллийг бичихдээ би ашигласан Канариа - Chrome-ийн шинэ хувилбарууд шалгагдсан бөгөөд дараа нь Chrome-ийн тогтвортой хувилбарт орсон.

Хянан шалгагчийг эхлүүлэхийн тулд та хуудасныхаа хаана ч баруун товшиж "Item item харах" хэсгийг сонгож болно, та зүгээр л Ctrl + Shift + C дарж болно.

HTML элементүүдийг шуурхай засах

Хамгийн хялбараар эхлүүлье: засварлах элементүүд.

Хамгийн хялбараар эхлүүлье: засварлах элементүүд

Хэрхэн шалгах вэ:

  • Элементүүдийг сонгоно уу.
  • Хэсгийн дотор ямар ч HTML элемент сонго.
  • Tag дээр давхар товшиж, жишээ нь шошгын нэрийг өөрчил.

Засвар хийж дууссаны дараа хаалтын хаяг автоматаар шинэчлэгдэнэ.

Бүх хүүхдийн элементийг өргөжүүлнэ үү

Хэрхэн шалгах вэ:

  • Элементүүдийн самбар руу очно уу.
  • Элементийг сонгоод, Alt-ийг барьж байхдаа элементийн зүүн талд байгаа сум дээр дарна уу.

Хянан шалгагчийг шилжүүлэн өгөх

Байцаагч самбарыг браузерын цонхны доод талд болон баруун талд нь дарж болно. Жишээ нь, өргөн дэлгэц дээр ажиллах үед баруун талын самбар байршил нь тохиромжтой. Мөн байцаагчийн самбарыг тусдаа цонхонд хийж болно, жишээлбэл, өөр монитор руу шилжинэ.

Мөн байцаагчийн самбарыг тусдаа цонхонд хийж болно, жишээлбэл, өөр монитор руу шилжинэ

Хэрхэн шалгах вэ:

  • Ctrl + Shift + D - Таарах Байршил

DOM элементийн хайлт

Магадгүй энэ нь нээлт болох байх магадлалгүй, гэхдээ "Элементүүд" табоор DOM-ээр хайлт хийж болно.

Магадгүй энэ нь нээлт болох байх магадлалгүй, гэхдээ Элементүүд табоор DOM-ээр хайлт хийж болно

Хэрхэн шалгах вэ:

  • Ctrl + F товчийг дарж санал болгож буй хайлтын асуултад оруулна уу.

Палетт

Палеттнаас өнгө сонгох

Сүүлийн үеийн Chrome-ийн өнгө сонгоход зарим өөрчлөлт орсон байна: өнгө сонгоход туслах хоёр палет нэмэх.

Олон курсор

Курсорыг зөөж, Ctrl-ийг барьж байхад хүссэн хэсэгт дарж курсороо нэмэх хэрэгтэй. Та Ctrl + U ашиглан үйлдлийг буцааж хийж болно. Хувь хүний ​​хувьд би хэзээ ч ашигласангүй.

Base64 зургийг кодчилно уу

Хэрхэн шалгах вэ:

  • Сүлжээний самбар руу шилжих.
  • Зургийг сонго
  • Зургийн баруун товчийг дараад "" сонгоно уу

Псевдо-ангиллын шилжүүлэлт

Псевдо-класс нь элементүүдийн байдал, тэдгээрийн харьцангуй байрлалыг илэрхийлдэг.

Псевдо-класс нь элементүүдийн байдал, тэдгээрийн харьцангуй байрлалыг илэрхийлдэг

Хэрхэн шалгах вэ:

  • Элементүүдийн самбар дахь элемент дээр баруун товчлуурыг дарж, Force Element State жагсаалтад псевдо-ангиллыг сонгоно уу.
  • Элементүүдийн самбар дээр баруун талд псевдо-классыг сонгож болно.

Багана сонгох

Хэрхэн шалгах вэ:

  • "Эх сурвалжууд" хэсэгт оч.
  • Ямар ч файл сонгох.
  • Алтыг барьж текстээ сонгоно уу.

Багана сонгох нь элементүүдийн элемент дээр HTML засварлагдсан үед ажилладаг.

CURL-ийн хүсэлтийг хуулах

Сүлжээний таб доторх аливаа хүсэлтийг хуулж авч дараа нь curl ашиглан гүйцэтгэлийг нь терминалд суулгаж өгдөг.

Дэлгэцийн гар

Хэрэв Nexus 5X профайл сонгосон бол дэлгэцэн дээрх гар идэвхтэй үед сайт хэрхэн харагдахыг харж болно.

Chrome DevTools: On-Screen Keyboard Chrome DevTools: On-Screen Keyboard

Бүх хуудасны дэлгэц

Бүх хуудсын зургийг авах нь маш энгийн. Зүгээр л ...

  1. Нээлттэй байцаагч.
  2. Консол руу яваарай.
  3. Ctrl + Shift + P дарна уу
  4. "Дэлгэцийн зураг" гэж оруулна уу
  5. "Бүрэн хэмжээгээр дэлгэцэн дээр зураг авах"
Бүх хуудасны дэлгэц

Холбох төхөөрөмжийн эмуляц

Та мөн зарим мэдрэгчийг дүрсэлж болно.

  • Дэлгэц барих
  • Гео-байршлыг зохицуулах
  • Accelerometer

Хэрхэн оролдох вэ:

  • Элементүүдийн самбарыг сонгоно уу.
  • "Esc" товчийг дараад "Эмуляц> Мэдрэгч" -г сонгоно уу.

Ашигтай боломжууд

түлхүүр ба үнэт зүйлс

Түлхүүрүүд болон утгуудын функцүүд нь обьектуудын түлхүүрүүд эсвэл утгуудыг консол руу гаргах боломжийг олгоно. Түлхүүрүүд болон утгуудын функцүүд нь обьектуудын түлхүүрүүд эсвэл утгуудыг консол руу гаргах боломжийг олгоно Түлхүүр ба объектын утгыг тусад нь үзүүл

Добро пожаловать , Гость !

Мы настоятельно рекомендуем Вам зарегистрироваться, если вы ещё этого не сделали. регистрация откроет Вам новые функции.

Войти или Зарегистрироваться

www.silvio-berluskoni.ru © Все права защищены © 2016.