<
  • Главная
Статьи

Naudojame „Chrome DevTools“ kaip apie

  1. Greitai redaguokite HTML elementus
  2. Išplėsti visus vaiko elementus
  3. Inspektoriaus perkėlimas
  4. DOM elementų paieška
  5. Paletės
  6. Keli žymekliai
  7. Koduoti base64 vaizdą
  8. Pseudo klasės perjungimas
  9. Stulpelių pasirinkimas
  10. Kopijuoti užklausą dėl CURL
  11. Ekraninė klaviatūra
  12. Visas puslapio ekranas
  13. Jutiklinių prietaisų emuliacija
  14. Naudingos funkcijos

Kaip rodo pavadinimas, „Chrome DevTools“ arba žiniatinklio inspektorius yra įrankis, skirtas žiniatinklio kūrėjams ir su jais susijusiems žmonėms. Interneto inspektorius leidžia jums atlikti šiuos veiksmus:

  • Patikrinkite ekrano teisingumą.
  • Stebėkite scenarijų vykdymą „JavaScript“.
  • Peržiūrėti tinklo veiklą.

Rašydamas šį straipsnį aš naudoju Kanarų salos - „Chrome“ versija, kurioje išbandomos naujos funkcijos, kurios tada patenka į stabilią „Chrome“ versiją.

Norėdami pradėti inspektorių, galite dešiniuoju pelės klavišu spustelėti bet kurioje puslapio vietoje ir pasirinkti „Peržiūrėti elemento kodą“, taip pat galite tiesiog paspausti Ctrl + Shift + C.

Greitai redaguokite HTML elementus

Pradėkime nuo paprasčiausių: redagavimo elementų.

Pradėkime nuo paprasčiausių: redagavimo elementų

Kaip patikrinti:

  • Pasirinkite skirtuką Elements.
  • Pasirinkite bet kurį HTML elementą skydelyje.
  • Dukart spustelėkite žymę ir pakeiskite, pvz., Žymos pavadinimą.

Baigus redagavimą, uždarymo žyma automatiškai atnaujinama.

Išplėsti visus vaiko elementus

Kaip patikrinti:

  • Eikite į elementų skydelį.
  • Pasirinkite elementą ir, laikydami Alt, spustelėkite rodyklę kairėje elemento pusėje.

Inspektoriaus perkėlimas

Inspektorių skydelį galima paspausti tiek į naršyklės lango apačią, tiek į dešinę. Pavyzdžiui, skydelio vieta dešinėje yra patogi dirbant su plačiaekraniais monitoriais. Be to, inspektorių skydelis gali būti dedamas į atskirą langą ir, pavyzdžiui, perkeliamas į kitą monitorių.

Be to, inspektorių skydelis gali būti dedamas į atskirą langą ir, pavyzdžiui, perkeliamas į kitą monitorių

Kaip patikrinti:

  • „Ctrl“ + „Shift“ + „D“ - perjungti vietą

DOM elementų paieška

Tikriausiai ne daugelis, kuriam tai bus atradimas, bet „Elementų“ skirtuke galite ieškoti DOM.

Tikriausiai ne daugelis, kuriam tai bus atradimas, bet „Elementų“ skirtuke galite ieškoti DOM

Kaip patikrinti:

  • Paspauskite Ctrl + F ir įveskite siūlomą paieškos užklausą.

Paletės

Pasirinkite spalvą iš paletės

Spalvų pasirinkimas naujausiose „Chrome“ versijose pasikeitė: pridėta dviejų paletių, kad būtų lengviau pasirinkti spalvą.

Keli žymekliai

Perkelkite žymeklį ir, laikydami klavišą Ctrl, spustelėkite norimą sritį, kad pridėtumėte žymeklį. Galite atšaukti veiksmą naudodami „Ctrl + U“. Asmeniškai aš niekada nebuvo naudinga.

Koduoti base64 vaizdą

Kaip patikrinti:

  • Perjunkite į tinklo skydelį.
  • Pasirinkite vaizdą
  • Dešiniuoju pelės mygtuku spustelėkite vaizdą ir pasirinkite „“

Pseudo klasės perjungimas

Pseudo klasės atspindi elementų būklę ir jų santykines pozicijas.

Pseudo klasės atspindi elementų būklę ir jų santykines pozicijas

Kaip patikrinti:

  • Dešiniuoju pelės mygtuku spustelėkite elementą skydelyje Elementai ir pasirinkite Pseudo klasę Force Element State sąraše.
  • Taip pat galite pasirinkti pseudo klasę dešinėje Elementų skydo pusėje.

Stulpelių pasirinkimas

Kaip patikrinti:

  • Eikite į skiltį „Šaltiniai“.
  • Pasirinkite bet kurį failą.
  • Pasirinkite tekstą laikydami Alt.

Pasirinkus stulpelį, elementai skydelyje Elementai redaguojami.

Kopijuoti užklausą dėl CURL

Bet kurį užklausą, esantį skirtuke Tinklas, galima nukopijuoti ir įterpti į terminalą, kad galėtumėte juos naudoti.

Ekraninė klaviatūra

Jei pasirinktas „Nexus 5X“ profilis, galite pamatyti, kaip svetainė atrodo, kai ekrano klaviatūra yra aktyvi.

„Chrome DevTools“: ekrano klaviatūra „Chrome DevTools“: ekrano klaviatūra

Visas puslapio ekranas

Paimkite viso puslapio vaizdą labai paprasta. Tiesiog reikia ...

  1. Atidaryti inspektorių.
  2. Eikite į konsolę.
  3. Paspauskite Ctrl + Shift + P
  4. Įveskite „screenshot“
  5. Pasirinkite „Capture full size screenshot“
Visas puslapio ekranas

Jutiklinių prietaisų emuliacija

Taip pat galite imituoti kai kuriuos jutiklius:

  • Jutiklinis ekranas
  • Geolokacijos koordinatės
  • Greičio matuoklis

Kaip išbandyti:

  • Pasirinkite elementą Elementai.
  • Paspauskite „Esc“ ir pasirinkite „Emulation> Sensors“.

Naudingos funkcijos

raktus ir vertybes

Klavišų ir reikšmių funkcijos leidžia atitinkamai išvesti objekto raktus arba vertes į konsolę. Klavišų ir reikšmių funkcijos leidžia atitinkamai išvesti objekto raktus arba vertes į konsolę Raktų ir objektų verčių rodymas atskirai



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью