fb pixel

Kurs Vue.js krok po kroku – Chrome DevTools

|

Zanim przejdziemy do praktycznej części kursu warto wykonać jeszcze jeden drobny krok i zainstalować vue-devtools. To rozszerzenie dla przeglądarki Chrome, która bardzo ułatwia pracę z Vue.js. W prosty i czytelny sposób pokazuje nam „debug mode” naszej aplikacji i ułatwia pracę na poszczególnych elementach.

Instalacja

Źródła rozszerzenia wraz z linkiem do Chrome Web Store znajdziesz oczywiście na GitHubie. Przy okazji znajdziesz też tam instrukcję jak przystosować devtoolsy do Firefoksa (nie używam więc ciężko mi powiedzieć czy działa bezproblemowo; gdyby ktoś z tego korzystał proszę o info w komentarzu).

Warto pamiętać o dwóch sprawach:

  • gdybyś miał problem z rozpoznaniem Vue.js załadowanego przez file:// to pamiętaj zaznaczyć zezwalaj na dostęp do adresów URL plików w ustawieniach rozszerzeń Chrome

    vue-chrome-devtools
    • dodatek nie zadziała na wersjach produkcyjnych (zminifikowanych)

Po zainstalowaniu rozszerzenia możesz zauważyć dwie zmiany:

  • obok paska adresu pojawi się ikonka, która podświetli się kiedy na danej stronie wykryje źródła Vue.js. Mało przydatne, można usunąć 😉
  • W Devtools pojawi się dodatkowa zakładka Vue i to interesuje nas najbardziej.

Przykład działania na TODOS

vue-chrome-devtools-vuex

Todos to klasyczny przykład jak zbudować prostą listę zadań w danej technologii (sprawdź sobie stronę TodoMVC jak jesteś ciekawy innych przykładów np. Angularze, Backbone, React czy jQuery). Otwórz wersję napisaną w Vue.js, odpal devtoolsy i spróbuj pobawić się aplikacją dodając nowe zadania i oznaczając je jako wykonane. Oczywiście jednocześnie obserwując jak zmieniają się dane.

Kurs Vue.js krok po kroku

  1. Wprowadzenie i hello world
  2. Chrome DevTools
  3. Warunki i pętle
  4. Zdarzenia i metody
  5. Przypisywanie atrybutów
  6. kolejne
  7. odcinki
  8. wkrótce

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Nie chcesz przegapić kolejnych odcinków? Subskrybuj kanał na YouTube!

Dodaj na LinkedIn
Mirosław Okoński
Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Miłośnik piwa i Metaxy. W czasie pomiędzy kontuzjami biega.