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

Používame Chrome DevTools ako o

  1. Rýchlo upravovať prvky HTML
  2. Rozbaliť všetky podradené prvky
  3. Premiestnenie inšpektora
  4. Vyhľadávanie elementu DOM
  5. palety
  6. Viac kurzorov
  7. Kódovanie base64 obrazu
  8. Pseudo-triedne prepínanie
  9. Výber stĺpca
  10. Kopírovať žiadosť o cURL
  11. Klávesnica na obrazovke
  12. Snímka obrazovky celej stránky
  13. Emulácia dotykových zariadení
  14. Užitočné funkcie

Ako už názov napovedá, Chrome DevTools, alebo webový inšpektor, je nástroj určený pre webové vývojárov a ľudí s ním spojených. Webový inšpektor vám umožňuje:

  • Skontrolujte správnosť displeja.
  • Sledovanie vykonávania skriptov v jazyku JavaScript.
  • Zobrazenie sieťových aktivít.

Pri písaní tohto článku som použil kanárik - verzia prehliadača Chrome, kde sú testované nové funkcie, ktoré potom patria do stabilnej verzie prehliadača Chrome.

Ak chcete spustiť inšpektora, môžete kliknúť pravým tlačidlom myši kdekoľvek na stránke a vybrať položku Zobraziť kód položky.

Rýchlo upravovať prvky HTML

Začnime s najjednoduchšími: editačnými prvkami.

Začnime s najjednoduchšími: editačnými prvkami

Ako skontrolovať:

  • Vyberte kartu „Prvky“.
  • Vyberte ľubovoľný prvok HTML v paneli.
  • Dvakrát kliknite na značku a zmeňte napríklad názov značky.

Po dokončení úprav sa záverečná značka automaticky aktualizuje.

Rozbaliť všetky podradené prvky

Ako skontrolovať:

  • Prejdite na panel Prvky.
  • Vyberte prvok a podržte Alt, kliknite na šípku vľavo od prvku.

Premiestnenie inšpektora

Panel inšpektorov možno stlačiť v spodnej časti okna prehliadača a na jeho pravej strane. Umiestnenie panela vpravo je vhodné napríklad pri práci na širokouhlých monitoroch. Panel inšpektorov môže byť tiež umiestnený v samostatnom okne a napríklad prenesený na iný monitor.

Panel inšpektorov môže byť tiež umiestnený v samostatnom okne a napríklad prenesený na iný monitor

Ako skontrolovať:

  • Ctrl + Shift + D - Toggle Poloha

Vyhľadávanie elementu DOM

Pravdepodobne nie veľa, pre ktorých to bude objav, ale v záložke „Prvky“ môžete vyhľadávať podľa DOM.

Pravdepodobne nie veľa, pre ktorých to bude objav, ale v záložke „Prvky“ môžete vyhľadávať podľa DOM

Ako skontrolovať:

  • Stlačte Ctrl + F a zadajte navrhovaný vyhľadávací dopyt.

palety

Vyberte farbu z palety

Výber farby v najnovších verziách prehliadača Chrome prešiel niekoľkými zmenami: pridali sa dve palety na uľahčenie výberu farieb.

Viac kurzorov

Pohybom kurzora a podržaním klávesu Ctrl kliknite na požadovanú oblasť a pridajte kurzor. Akciu môžete vrátiť späť pomocou Ctrl + U. Osobne som nikdy nebol užitočný.

Kódovanie base64 obrazu

Ako skontrolovať:

  • Prepnite na panel Sieť.
  • Vyberte obrázok
  • Kliknite pravým tlačidlom myši na obrázok a vyberte položku „“

Pseudo-triedne prepínanie

Pseudo-triedy odrážajú stav prvkov a ich vzájomné pozície.

Pseudo-triedy odrážajú stav prvkov a ich vzájomné pozície

Ako skontrolovať:

  • Kliknite pravým tlačidlom myši na prvok v paneli Prvky a vyberte zoznam pseudo-triedy v zozname stavu Force Element State.
  • Môžete tiež vybrať pseudotriedu na pravej strane panela Prvky.

Výber stĺpca

Ako skontrolovať:

  • Prejdite na panel „Zdroje“.
  • Vyberte ľubovoľný súbor.
  • Vyberte text podržaním klávesu Alt.

Výber stĺpca funguje aj vtedy, keď je HTML upravované v paneli Prvky.

Kopírovať žiadosť o cURL

Každú požiadavku na karte Sieť možno kopírovať a potom vložiť do terminálu na vykonanie pomocou curl.

Klávesnica na obrazovke

Ak je vybratý profil Nexus 5X, môžete vidieť, ako stránka vyzerá, keď je aktívna klávesnica na obrazovke.

Chrome DevTools: Klávesnica na obrazovke Chrome DevTools: Klávesnica na obrazovke

Snímka obrazovky celej stránky

Urobte si obrázok celej stránky je veľmi jednoduchý. Len potrebujete ...

  1. Otvorte inšpektora.
  2. Prejdite na konzolu.
  3. Stlačte Ctrl + Shift + P
  4. Zadajte „screenshot“
  5. Vyberte možnosť Zachytiť snímku v plnej veľkosti
Snímka obrazovky celej stránky

Emulácia dotykových zariadení

Môžete tiež simulovať niektoré senzory:

  • Dotyková obrazovka
  • Súradnice pre geolokáciu
  • akcelerometer

Ako vyskúšať:

  • Vyberte panel Prvky.
  • Stlačte "Esc" a vyberte "Emulation> Sensors".

Užitočné funkcie

kľúče a hodnoty

Funkcie klávesov a hodnôt vám umožňujú vydávať kľúče alebo hodnoty objektu do konzoly. Funkcie klávesov a hodnôt vám umožňujú vydávať kľúče alebo hodnoty objektu do konzoly Zobrazenie kľúčov a hodnôt objektov samostatne



Новости
    Без плагина
    На сайте 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) — поднятие позиций сайта в результатах... 
    Читать полностью