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!

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. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

  • jim1961

    Konsekwentnie piszesz „vue.js” mała literą. Dlaczego? Nazwa własna i IMHO mogła by tak być pisana.

    • nrm

      Nigdy się nad tym nie zastanawiałem, po prostu. W codziennym życiu prawie nie używam shifta więc to może ma związek 😉 Dzięki za podpowiedź.

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL