Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

5 narzędzi w Chrome DevTools, które musisz znać

Alex Ritzcovan Independent Technology Consultant
Poznaj pięć narzędzi Chrome DevTools i sprawdź, które z nich przydadzą Ci się w pracy.
5 narzędzi w Chrome DevTools, które musisz znać

Google Chrome zapewnia szeroki wachlarz narzędzi, które są wbudowane w tę przeglądarkę. Nazywają się one Chrome DevTools i są nieustannie ulepszane, więc warto czasem zajrzeć na ich stronę, aby zobaczyć, czy coś nowego się nie pojawiło. 

Niektóre z mniej znanych funkcji pojawia się w API konsoli utility. Oznacza to tyle, że narzędzia są jedynie dostępne w konsoli Chrome’a i nie można ich odpalić ze swoich skryptów. 

Oto 5 moich ulubionych narzędzi rozwijanych przez zespół DevTools. 


1. $ and $$

Ta dwójka to aliasy. Pojedynczy symbol dolara to skrót do document.querySelector(), a $$ to skrót do document.querySelectorAll().

Załóżmy, że mamy prosty dokument HTML, który wygląda tak:

<div class="container">
    <div id="app">
        <div :class="{ ugly: isUgly }">{{ message }}</div>
        <h2 id="theCount">The count is: {{ count }}</h2>
        <button class="btn btn-primary" @click="increment">+</button>
        <button class="btn btn-primary" @click="decrement">-</button>
        <button class="btn btn-primary" @click="applyUgly">make ugly</button>
    </div>
</div>

Nasz dokument HTML

Pójdźmy trochę dalej. Chcemy teraz wybrać pierwszy przycisk z dokumentu razem ze zbiorem wszystkich przycisków: 

$ i $$ w akcji!

Wygląda fajnie, prawda? I można to znaleźć w Chrome. Pojedynczy symbol dolara zwraca jeden element, podczas gdy podwójny zwraca je wszystkie. 

Jeśli używacie takiej biblioteki jak jQuery, która przypisze kolejną wartość do $, to funkcja $ zostanie nadpisana. 


2. Funkcja inspect()

Tego narzędzia można używać w ścisłym powiązaniu z numerem 1. Powiedzmy, że nasz dokument HTML jest duży, a chcemy wybrać jakiś przycisk HTML-owy z konsoli. Możemy użyć poniższego: 

Okno Console- wywołaj funkcję inspect() przekazując selektor 

W momencie naciśnięcia enter, narzędzie przełączy się z okna Console do okna Elements i wyszczególni wybrany element HTML. 

Okno Elements podświetla wybrany element

Możecie zauważyć, że z powodzeniem wybraliśmy pierwszy przycisk. 

Jesteśmy teraz w stanie skorzystać ze skrótu $$ razem z inspect(). Wyświetli to listę dopasowań w konsoli, a to z kolei pozwoli na wybranie jednego z nich i przejście do niego w DOM. 

Bardzo przydatne!


3. monitor / unmonitor

Jeśli chcielibyśmy śledzić wywoływanie funkcji na naszej stronie, możemy użyć funkcji monitor(). Spójrzcie na następujący przykład kodu zwracając uwagę na obiekt methods.

let app = new Vue({
      el: '#app',
      data: {
          message: 'super impressive counter',
          count: 0,
          isUgly: false,
          person: { first: 'alex', last: 'ritzcovan' }
      },
      methods: {
          increment() {
              this.count++;
          },
          decrement() {
              this.count--;
          },
          applyUgly() {
              this.isUgly = !this.isUgly;
          }
      }
  });

Stworzyłem powyższy przykład przy użyciu Vue.js, ale raczej się nam on nie przyda. Co chciałbym natomiast zrobić to monitorować, kiedy metoda applyUgly() jest wywoływana. W tym celu wprowadzam następujący kod w konsoli:

Poobserwujemy metodę applyUgly

A teraz, kiedy metoda applyUgly jest wywoływana, nasze narzędzie zakomunikuję nam to w konsoli. 

Wywołana metoda applyUgly

Kiedy chcemy przestać obserwować daną metodą, po prostu wywołujemy unmonitor. 

Przestań obserwować appluUgly w sposób podany powyżej


4. keys/values

Dzięki temu narzędziu możemy szybko zobaczyć składowe obiektu. Załóżmy, że posiadamy następujący prosty obiekt. 

 let myObj = {
          first: 'alex',
          last: 'ritzcovan',
          state: 'ny'
      }


Używając keys() oraz values() zobaczysz klucze i wartości. Możesz też pokazać bezpośrednie wywołanie obiektu. 

Różne sposoby na otrzymanie danych z obiektu


5. Funkcja table

Na koniec mamy funkcję table(). Używając tego samego obiektu, który wykorzystaliśmy przy omawianiu narzędzia numer 4, oto co otrzymamy w konsoli, jeśli przekażemy obiekt do funkcji table():

Funkcja table w fajny sposób pokazuje nasz obiekt 


Główne wnioski

  1. Chrome DevTool to spory zestaw narzędzi, które pomagają współczesnym programistom w podniesieniu produktywności. 
  2. Niektóre z nich są tylko dostępne w konsoli i nie możesz ich użyć ze swoich skryptów. 
  3. $ i $$ to skróty do (odpowiednio) document.querySelector() oraz document.querySelectorAll().
  4. Funkcja inspect() przeniesie Cię do jakiegokolwiek elementu DOM w oknie Elements, dzięki której można nakierować się na selektor CSS. 
  5. Dzięki funkcjom monitor() i unmonitor() możesz mieć się na baczności, kiedy dana metoda jest wywoływana przez napisanie komunikatu dla konsoli. Komunikat ten zawiera informacje o argumentach przekazywanych metodzie. 
  6. Funkcje keys() oraz values() pozwalają na wyciągnięcie informacji z obiektu, który znajduje się na Twojej stronie. 
  7. Funkcja table() zapewnia niezłą prezentację obiektu, który przekazujesz do funkcji table()


Dziękuje za uwagę!

Nie przegap treści Bulldogjob
Subskrybuj artykuły

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej