Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Używamy narzędzi DevTools Chrome tak jak o tym

  1. Szybko edytuj elementy HTML
  2. Rozwiń wszystkie elementy potomne
  3. Przeniesienie inspektora
  4. Wyszukiwanie elementów DOM
  5. Palety
  6. Wiele kursorów
  7. Zakoduj obraz base64
  8. Przełączanie pseudoklas
  9. Wybór kolumny
  10. Kopiuj prośbę o cURL
  11. Klawiatura ekranowa
  12. Zrzut ekranu całej strony
  13. Emulacja urządzeń dotykowych
  14. Przydatne funkcje

Jak sama nazwa wskazuje, Chrome DevTools lub inspektor internetowy to narzędzie przeznaczone dla twórców stron internetowych i osób z nim związanych. Inspektor internetowy umożliwia wykonanie następujących czynności:

  • Sprawdź poprawność wyświetlacza.
  • Śledź wykonywanie skryptów w JavaScript.
  • Wyświetl działania sieciowe.

Podczas pisania tego artykułu użyłem Kanarek - wersja Chrome, w której testowane są nowe funkcje, które następnie wchodzą w stabilną wersję Chrome.

Aby uruchomić inspektora, możesz kliknąć prawym przyciskiem myszy w dowolnym miejscu na stronie i wybrać „Wyświetl kod elementu”, możesz też po prostu nacisnąć Ctrl + Shift + C.

Szybko edytuj elementy HTML

Zacznijmy od najprostszych: elementów edycji.

Zacznijmy od najprostszych: elementów edycji

Jak sprawdzić:

  • Wybierz kartę „Elementy”.
  • Wybierz dowolny element HTML wewnątrz panelu.
  • Kliknij dwukrotnie znacznik i zmień na przykład nazwę znacznika.

Po zakończeniu edycji tag zamykający zostanie automatycznie zaktualizowany.

Rozwiń wszystkie elementy potomne

Jak sprawdzić:

  • Przejdź do panelu Elementy.
  • Wybierz element i przytrzymując Alt, kliknij strzałkę po lewej stronie elementu.

Przeniesienie inspektora

Panel inspektora można nacisnąć zarówno w dolnej części okna przeglądarki, jak i po prawej stronie. Na przykład lokalizacja panelu po prawej stronie jest wygodna podczas pracy na monitorach szerokoekranowych. Ponadto panel inspektora można umieścić w oddzielnym oknie i na przykład przenieść na inny monitor.

Ponadto panel inspektora można umieścić w oddzielnym oknie i na przykład przenieść na inny monitor

Jak sprawdzić:

  • Ctrl + Shift + D - Przełącz lokalizację

Wyszukiwanie elementów DOM

Prawdopodobnie nie wielu, dla których będzie to odkrycie, ale w zakładce „Elementy” możesz wyszukiwać według DOM.

Prawdopodobnie nie wielu, dla których będzie to odkrycie, ale w zakładce „Elementy” możesz wyszukiwać według DOM

Jak sprawdzić:

  • Naciśnij Ctrl + F i wprowadź proponowane zapytanie.

Palety

Wybierz kolor z palety

Wybór kolorów w ostatnich wersjach Chrome został poddany pewnym zmianom: dodano dwie palety, aby ułatwić wybór koloru.

Wiele kursorów

Przesuń kursor i przytrzymując Ctrl, kliknij żądany obszar, aby dodać kursor. Możesz cofnąć akcję za pomocą Ctrl + U. Osobiście nigdy nie byłem przydatny.

Zakoduj obraz base64

Jak sprawdzić:

  • Przejdź do panelu Sieć.
  • Wybierz obraz
  • Kliknij obraz prawym przyciskiem myszy i wybierz „”

Przełączanie pseudoklas

Pseudoklasy odzwierciedlają stan elementów i ich względne pozycje.

Pseudoklasy odzwierciedlają stan elementów i ich względne pozycje

Jak sprawdzić:

  • Kliknij prawym przyciskiem myszy element w panelu Elementy i wybierz pseudoklasę z listy Stan elementu siły.
  • Możesz również wybrać pseudoklasę po prawej stronie panelu Elementy.

Wybór kolumny

Jak sprawdzić:

  • Przejdź do panelu „Źródła”.
  • Wybierz dowolny plik.
  • Wybierz tekst, przytrzymując Alt.

Wybór kolumny działa również wtedy, gdy HTML jest edytowany w panelu Elementy.

Kopiuj prośbę o cURL

Każde żądanie na karcie Sieć można skopiować, a następnie wkleić do terminala w celu wykonania za pomocą zwijania.

Klawiatura ekranowa

Jeśli wybrany jest profil Nexus 5X, możesz zobaczyć, jak wygląda strona, gdy klawiatura ekranowa jest aktywna.

Chrome DevTools: klawiatura ekranowa Chrome DevTools: klawiatura ekranowa

Zrzut ekranu całej strony

Zrób zdjęcie całej strony jest bardzo proste. Wystarczy ...

  1. Otwórz Inspektora.
  2. Idź do konsoli.
  3. Naciśnij Ctrl + Shift + P
  4. Wpisz „zrzut ekranu”
  5. Wybierz „Zrzut ekranu w pełnym rozmiarze”
Zrzut ekranu całej strony

Emulacja urządzeń dotykowych

Możesz także symulować niektóre czujniki:

  • Ekran dotykowy
  • Współrzędne geolokalizacji
  • Akcelerometr

Jak spróbować:

  • Wybierz panel Elementy.
  • Naciśnij „Esc” i wybierz „Emulacja> Czujniki”.

Przydatne funkcje

klucze i wartości

Funkcje klawiszy i wartości pozwalają odpowiednio wysyłać klucze lub wartości obiektu do konsoli. Funkcje klawiszy i wartości pozwalają odpowiednio wysyłać klucze lub wartości obiektu do konsoli Wyświetlanie kluczy i wartości obiektu oddzielnie