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ę!