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

ჩვენ ვიყენებთ Chrome DevTools- ს შესახებ

  1. სწრაფად შეასწოროთ HTML ელემენტები
  2. ყველა ბავშვის ელემენტების გაშლა
  3. ინსპექტორის გადაყვანა
  4. DOM ელემენტის ძიება
  5. პალიტრები
  6. მრავალი კურსორი
  7. Encode base64 სურათი
  8. ფსევდო-კლასის გადართვა
  9. სვეტების შერჩევა
  10. დააკოპირეთ მოთხოვნის ნებართვა
  11. Onscreen კლავიატურა
  12. მთლიანი გვერდის სურათი
  13. სენსორული მოწყობილობების ემულაცია
  14. სასარგებლო თვისებები

როგორც სახელი გულისხმობს, Chrome DevTools ან ვებ ინსპექტორი არის ინსტრუმენტი, რომელიც განკუთვნილია ვებ დეველოპერებისთვის და მასთან დაკავშირებული ადამიანები. ვებ ინსპექტორი საშუალებას გაძლევთ გააკეთოთ შემდეგი:

  • შეამოწმეთ ეკრანის სისწორე.
  • სიმღერების შესრულება JavaScript- ში.
  • ქსელის საქმიანობის ნახვა.

ამ სტატიის წერის დროს მე ვიყენებდი კანარის - Chrome- ის ვერსია, სადაც ახალი ფუნქციები შემოწმებულია, რომელიც შემდეგ ჩნდება Chrome- ის სტაბილურ ვერსიაში.

ინსპექტორის დასაწყებად, შეგიძლიათ გვერდზე დააწკაპუნეთ ნებისმიერ გვერდზე და აირჩიეთ "ელემენტის კოდის ნახვა", ასევე შეგიძლიათ დააჭიროთ Ctrl + Shift + C.

სწრაფად შეასწოროთ HTML ელემენტები

დავიწყოთ მარტივი: რედაქტირების ელემენტები.

დავიწყოთ მარტივი: რედაქტირების ელემენტები

როგორ შეამოწმოთ

  • აირჩიეთ ელემენტები tab.
  • აირჩიეთ ნებისმიერი HTML ელემენტი პანელის შიგნით.
  • ორმაგი დაწკაპუნება ტეგიზე და ცვლილებაზე, მაგალითად, ტეგის სახელი.

როდესაც რედაქტირება დასრულებულია, დახურვის ტეგი ავტომატურად განახლდება.

ყველა ბავშვის ელემენტების გაშლა

როგორ შეამოწმოთ

  • გადასვლა ელემენტები პანელი.
  • ელემენტის არჩევა და Alt, დააჭირეთ ღილაკს arrow ელემენტის მარცხენა მხარეს.

ინსპექტორის გადაყვანა

ინსპექტორის პანელი შეიძლება დაჭერილი როგორც ბრაუზერის ფანჯრის ბოლოში და მისი მარჯვენა მხარეს. მაგალითად, პანელის ადგილმდებარეობის უფლება მოსახერხებელია, როდესაც მუშაობს ეკრანის მონიტორებზე. ასევე, ინსპექტორის პანელი ცალკე ფანჯარაში შეიძლება განთავსდეს და, მაგალითად, გადაცემული სხვა მონიტორზე.

ასევე, ინსპექტორის პანელი ცალკე ფანჯარაში შეიძლება განთავსდეს და, მაგალითად, გადაცემული სხვა მონიტორზე

როგორ შეამოწმოთ

  • Ctrl + Shift + D - გადართვა მდებარეობა

DOM ელემენტის ძიება

ალბათ არა ბევრი, ვისთვისაც ეს იქნება აღმოჩენა, მაგრამ "ელემენტებს" tab შეგიძლიათ მოძებნოთ DOM.

ალბათ არა ბევრი, ვისთვისაც ეს იქნება აღმოჩენა, მაგრამ ელემენტებს tab შეგიძლიათ მოძებნოთ DOM

როგორ შეამოწმოთ

  • დააჭირეთ Ctrl + F და შეიყვანეთ შემოთავაზებული ძიების მოთხოვნა.

პალიტრები

აირჩიეთ ფერის პალიტრა

ფერის არჩევანია Chrome- ის ბოლოდროინდელ ვერსიებში ცვლილებები განიცადა: დამატებულია ორი პალიტრა, რათა ხელი შეუწყოს ფერის არჩევანს.

მრავალი კურსორი

კურსორის გადატანა და, Ctrl- ის ჩატარებისას, დააწკაპუნეთ სასურველ ადგილას, რათა დაამატოთ კურსორი. თქვენ შეგიძლიათ გაუქმდეს ქმედება Ctrl + U. პირადად მე არასოდეს მომხდარა.

Encode base64 სურათი

როგორ შეამოწმოთ

  • ჩართეთ ქსელის პანელში.
  • აირჩიეთ სურათი
  • მარჯვენა სურათზე დააწკაპუნეთ და აირჩიეთ ""

ფსევდო-კლასის გადართვა

ფსევდო-კლასები ასახავს ელემენტების მდგომარეობას და მათ ნათესავ პოზიციებს.

ფსევდო-კლასები ასახავს ელემენტების მდგომარეობას და მათ ნათესავ პოზიციებს

როგორ შეამოწმოთ

  • ელემენტთა პანელის ელემენტზე დააწკაპუნეთ მარჯვენა ღილაკით და აირჩიეთ ფსევდო-კლასს ძალების ელემენტის სახელმწიფო სიაში.
  • ასევე შეგიძლიათ აირჩიოთ ფსევდო-კლასი ელემენტების პანელის მარჯვენა მხარეს.

სვეტების შერჩევა

როგორ შეამოწმოთ

  • გადასვლა "წყაროები" პანელი.
  • აირჩიეთ ნებისმიერი ფაილი.
  • აირჩიეთ ტექსტი Alt- ს მიერ.

სვეტის არჩევა ასევე მუშაობს, როდესაც HTML რედაქტირებულია ელემენტების პანელში.

დააკოპირეთ მოთხოვნის ნებართვა

ნებისმიერი მოთხოვნის ქსელის tab შეიძლება გადაწერა და შემდეგ გაკრული შევიდა ტერმინალის აღსრულების გამოყენებით curl.

Onscreen კლავიატურა

თუ Nexus 5X პროფილი შერჩეულია, შეგიძლიათ იხილოთ, თუ როგორ გამოიყურება საიტი ეკრანზე კლავიატურის ჩართვისას.

Chrome DevTools: ეკრანის კლავიატურა Chrome DevTools: ეკრანის კლავიატურა

მთლიანი გვერდის სურათი

სურათის მთელი გვერდი ძალიან მარტივია. უბრალოდ საჭიროა ...

  1. ღია ინსპექტორი.
  2. გადადით კონსოლზე.
  3. დააჭირეთ Ctrl + Shift + P
  4. ტიპი "სკრინშოტი"
  5. აირჩიეთ "სრული ზომის ეკრანის გადაღება"
მთლიანი გვერდის სურათი

სენსორული მოწყობილობების ემულაცია

თქვენ ასევე შეგიძლიათ სიმულატორი ზოგიერთი სენსორების:

  • სენსორული ეკრანი
  • კოორდინატები გეოლოგიისთვის
  • Accelerometer

როგორ ვცადოთ:

  • აირჩიეთ ელემენტების პანელი.
  • დააჭირეთ "Esc" და აირჩიეთ "Emulation> სენსორები".

სასარგებლო თვისებები

გასაღებები და მნიშვნელობები

გასაღებები და მნიშვნელობის ფუნქციები საშუალებას მოგცემთ გამოაქვეყნონ ობიექტის გასაღებები ან ღირებულებები კონსოლისთვის. გასაღებები და მნიშვნელობის ფუნქციები საშუალებას მოგცემთ გამოაქვეყნონ ობიექტის გასაღებები ან ღირებულებები კონსოლისთვის ნაჩვენებია გასაღებები და ობიექტების ღირებულებები ცალკე



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