Jak „zmusić” Chrome, żeby zapisywał nasz postęp?


Jak zmusić Chroma, żeby zapisywał nasz postęp

Pamiętam to jak dziś. Śniłem o narzędziu, które zrewolucjonizuje kodowanie w HTML’u. To było moje małe marzenie. Chciałem połączyć część wizualną – Front End (tak nazywa się to co widzisz gdy wchodzisz na stronę) i część ukrytą – Back End, której nie zobaczysz na pierwszy rzut oka czyli kod HTML, znany i rozumiany tylko przez programistę, i przeglądarkę. Nic więcej.

Idea była prosta. Chciałem widzieć i wiedzieć, który z elementów wizualnych w danym miejscu na stronie odpowiada jego zapisowi w kodzie i móc na żywo podglądać efekty moich działań. Edycje, dodawanie, usuwanie.

Takie połączenie Photoshopa, Dreamweavera,  Notepad++ i co sobie tylko wymyślisz. W owych czasach nie było czegoś takiego a przynajmniej nic o czymś takim nie wiedziałem. Zacząłem więc szukać. Szukałem długo, wśród różnych narzędzi. O jakimkolwiek programie teraz pomyślisz, ja już go przetestowałem i żadne z nich nie spełniało na tamten czas moich oczekiwań.

Aż pewnego razu trafiłem na Chrome i jego narzędzia developerskie. Znalazłem więc czego szukałem, ale okazało się, że po moich modyfikacjach na stronie, po jej odświeżeniu efekty mojej pracy przepadały. Stosowałem wtedy jeszcze te partyzanckie metody typu: kopiuj-wklej. Kopiowałem z Chroma do Notepad++, zapisywałem i wysyłałem na serwer programem FTP FileZilla. Masakra.

Kolejny raz o krok od szczęścia.

I znów zacząłem szukać… tym razem szukałem sposobu na to:

Jak „zmusić”  Chrome, żeby zapisał mój postęp.

Więc jeżeli i ty masz z tym problem czytaj dalsze wersety tego artykułu.


 

Sprawa wygląda następująco. Potrzebujesz zainstalować dwie rzeczy:

Node.js instaluje się jak typowy program na Windowsie i nie powinno to sprawić nikomu problemu. Gdyby jednak pojawił się błąd podczas instalacji… No cóż. Niestety u mnie tak się stało i nie obyło się bez reinstalacja Windowsa.

Po instalacji serwera, przejdź do konsoli (wiersz poleceń),  żeby zainstalować Autosave jako program. Konsole w Windowsie włączysz,  wpisując słowo cmd w polu wyszukiwania (po kliknięciu menu Start) lub w oknie Uruchamiania (przy pomocy kombinacji klawiszy: WIN [klawisz Windows] + R).

Niezależnie w jakiej lokalizacji się znajdziesz, wpisz komendę (jak na załączonym obrazku):

npm install -g autosave

 

Zainstaluje się program Autosave. Jest on niezbędny do prawidłowego działania rozszerzenia.

Żeby twój postęp w edycji i dokonanych zmian był możliwy do utrwalania, za każdym razem gdy korzystasz z Chrome DevTools, w celu edycji strony, należy go włączyć, również z poziomu konsoli lub w polu wyszukiwania wpisując po prostu: autosave.

To nie wszystko.

Jeszcze trzeba mu „powiedzieć” jakie to pliki mają być nadpisywane. Należy więc zainstalować podsłuch czyli wyznaczyć mu tzw.: „ścieżkę logiczną”Routes.

W tym okienku poniżej należy skonfigurować zależność pomiędzy tym, co edytujesz a tym gdzie się to znajduje. Dostaniesz się do niego albo poprzez menu: Narzędzia > Rozszerzenia (3 poziome kreski w górnym prawym rogu przeglądarki), lub wpisując w pasek adresu: chrome://extensions/ i w DevTools Autosave klikając: Opcje

Dla przykładu.

Masz bloga na serwerze lokalnym pod adresem: http://localhost/wordpress/. Jest to oczywiście witryna na WordPressie więc adresem URL do pliku style.css będzie:

^http://localhost/wordpress/wp-content/themes/twentyten/style.css

Który fizycznie znajduje się w lokalizacji:

C:\xampp\htdocs\wordpress\wp-content\themes\twentyten\style.css

Takie też ścieżki dostępu należy wpisać w pola Match i Save to i połączyć to z serwerem: http://127.0.0.1:9104

Zwróć szczególną uwagę na te ścieżki, bo od nich będzie zależeć sukces w działaniu aplikacji.

Pierwsza ścieżka dotyczy położenia arkusza stylów według adresu zasobu, tak jak go widzi przeglądarka. Najprędzej możesz go odnaleźć podglądając kod źródłowy i odszukując linijki z kodem:

<link rel='stylesheet' id='style-css' href='...' type='text/css' media='all' />

Jednak grzebanie w kodzie w ten sposób może być niewygodne i sprawiać problem. Dlatego jest na to drugi sposób a mianowicie taki:
Jak-odnalezc-sciezke-do-pliku-style-css-Jak-Zmusic-Chrome-zeby-zapisywal-nasz-postep-WPSolucje-WordPress-wspacie-pomoc-forum

Obie te zakładki pokazują stan rzeczywisty Twojego serwera, jednak tylko tyle ile sama może pobrać przeglądarka. W zakładce: Application jest to ładnie podzielone na kategorie a w zakładce: Sources pokazane jest drzewo katalogów, tak jak fizycznie jest to na serwerze. Zarówno jedna jak i druga kryje ukrytą funkcję. Najeżdżając na dany plik myszką, Twoim ślicznym oczom ukarze się ta właśnie ścieżka, o którą nam chodzi. Klikając PPM możesz sobie ją skopiować i wkleić do pola: Save to

Jeśli zmienisz motyw swojego bloga, musisz również zmienić te linki.

Drugi link jest linkiem do plików na komputerze i jego forma zależy od systemu operacyjnego, i oczywiście, co najważniejsze – lokalizacji w jakiej zainstalowałeś sobie serwer XAMPPa.

 

Czy można edytować pliki znajdujące się na zdalnym serwerze www?


Tak.

Wygląda to identycznie jak w przypadku lokalnych zmian tylko jak wiadomo, należy podać odpowiednie ścieżki nasłuchujące pliki. Serwer WWW teoretycznie jest poza zasięgiem naszego komputera i można się do niego dostać jedynie poprzez FTP.

 

Ale Chrome nie obsługuje FTP. Jak więc wymusić zapis zmian do pliku style.css znajdującego się na serwerze WWW?


Bardzo prosto. Użyć do tego FileZilli.

ALE…

Normalnie ten program nie posiada synchronizacji. Będziesz musiał więc, za każdym razem bądź co jakiś czas, przełączać się pomiędzy okienkami i potwierdzać transfer pliku na serwer zdalny.

Jest na to sposób.

Jeden z czytelników rozwiązał ten problem stosując wtyczkę NppFTP do Notepada. Jednak ta wtyczka bywała i jest jeszcze bardziej niestabilna niż WinSCP. Często zrywała się połączenie co znacznie utrudniało zadanie a praca była niewygodna.

Rozwiązaniem jest program do FTP o nazwie: WinSCP.

Choć nie jest tak stabilny jak FileZilla, posiada funkcję synchronizacji katalogów, która w naszym przypadku jest jak woda na pustyni.

Po pierwsze

Nie odwołujesz się już więcej do plików tymczasowych (tak jak w FileZilli), które mogą zostać skasowane.

Po drugie

Utrzymujesz identyczny stan pomiędzy serwerem www a lokalnym komputerem.

Czyli możesz posiadać klon swojego serwera www u siebie i jednocześnie korzystać z niego offline, w ramach usługi localhost, kiedy nadal będziesz chciał testować witrynę a połączenie z internetem zostanie przerwane.

 

Jak to się robi?


Najpierw ustawiasz nasłuch czyli ścieżki: Save to w Autosave na pliki z katalogu Xamppa. Tak samo jak w przykładzie wyżej. W polu: Match zmieniasz tylko adres URL podmieniając localhost na domenę.

W WinSCP nawiązujesz połączenie FTP z zawartością katalogu motywu. Okienko z lewej będzie to lokalizacja z plikami w katalogu Xamppa a okienko z prawej, dla serwera zdalnego.

Żeby przypadkowo nie nadpisać sobie plików, musisz zsynchronizować pliki i katalogi. Jeżeli pobierałeś wcześniej motyw używając FileZilli, musisz zrobić to jeszcze raz używając WinSCP.

Chodzi o różnice w czasie modyfikacji pliku.

Podejrzewam, że każdy z programów pozostawia jakiś swój unikatowy ślad działania, znany tylko sobie. Dlatego, gdybyś od razu włączył automatyczną synchronizacje, WinSCP wysłałby te pliki z powrotem na serwer, gdyż rozpoznałby w nich różnice.

Jak wiadomo, w takich momentach zapala się nam czerwone światełko: „O o. Co się dzieje?! Nie chcę tego!” Coś się wtedy zaczyna wysyłać, nie wiadomo co i w niewiadomym kierunku. A może się okazać, że lokalnie mieliśmy nieco inną wersje?

Dlatego usuń sobie pliki motywu i pobierz od nowa używając Synchronizacji Ctrl + S (w opcji wybierz: Kierunek -> Lokalny).

Następnie włączasz Automatyczną aktualizację katalogu zdalnego:  Ctrl + U.

Uwaga! Ze względu na ryzyko utraty danych należy wykonać kopie zapasową. Jeżeli nie wiesz co robić w tym przypadku, zgłoś się do administratora.

WinSCP Automatyczna-aktualizacja-katalogu-zdalnego---Jak-zmusic-Chrome-zeby-zapisywal-nasz-postep

 

Edycja


Jeżeli przed modyfikacjami nie włączyłeś programu Autosave z wiersza poleceń i od razu zabrałeś się za przeróbki, dostaniesz odpowiednie powiadomienie:

To samo tyczy się nieprawidłowych ścieżek dostępu do pliku. Jeżeli nie będą one pasowały, również zostaniesz o tym odpowiednio poinformowany:

W nowszej wersji ostrzeżenia pojawiają się już tylko w konsoli.

Jeżeli wszystko ustawiłeś prawidłowo, w oknie terminala (wiersza poleceń), tam gdzie przed chwilą uruchomiłeś Autosave, pojawią się pierwsze komunikaty o prawidłowym zapisie postępów do pliku:

Jest informacja o tym, że arkusz stylów został zapisany do wybranej lokalizacji, jak również o tym co zostało zmienione i jak. W tym przypadku zmieniłem rozmiar czcionki z 30 (na czerwono) na 26 (na zielono) px. Te kolory nie są przypadkowe. Dzięki nim, w bardzo wyraźny sposób widzisz co jest zmienione – usunięte – i na ile – dodane. Takimi samymi kolorami będziesz informowany za każdym razem, jeżeli usuniesz dany styl, dodasz inny, nowy itd.

Z poprzedniego artykułu dowiedziałeś się również, że zmiany te są także widoczne w zakładce Sources (po kliknięciu PPM wybierasz: Local modifications…). Monitoruj to okienko od czasu do czasu, aby skontrolować działanie programu. Jeżeli nie pojawiają się w nim komunikaty o zmianach, najprawdopodobniej ścieżki w polu Match, nadal nie są prawidłowe.

Chrome-dev-tools-localne-modyfikacje - Jak Zmusić chroma, żeby zapisywał nasz postęp

 

Chciałbym modyfikować też inne pliki źródłowe, nie tylko CSS i JS. Czy jest to możliwe?


TAK. Jest to możliwe.  Dzięki Chrome możesz również  modyfikować inne pliki źródłowe twojego szablonu jak PHP czy HTML.

 

Wcześniej czyli w początkach powstania tego artykułu, do wybranej lokalizacji wystarczyło dodać plik o nazwie: .allow-devtools-edit i dodatkowo włączyć: DevTools experiments (Włącz eksperymenty w narzędziach dla programistów) w chrome://flags.

Teraz Chrome znacznie to ułatwił i wystarczy, że dany plik dodasz do Workspace.

Workspace to alternatywa dla Autosave. Jeśli wcześniej miałeś/miałaś probleby z poprawnym działaniam Autosave, to lepszym rozwiązaniem bedzie Workspace. Nie wymaga on instalacji żadnych dodatkowych wtyczek, co znacznie ułatwia rozpoczecie pracy. Jedna tylko rzecz pozostaje bez zmian, jak poprzednio a mianowicie sposób zapisywania na serwer programem WinSCP.

O tym:

Jak ustawić Workspace w Chrome jako alternatywe dla Autosave


przeczytasz w kolejnym artykule lub na drugiej stronie a teraz odsyłam Cię do oryginalnego źródła: https://developer.chrome.com/devtools/docs/workspaces

 

W ten oto sposób doszliśmy do punktu, gdzie łączą się ze sobą 2 światy – ten programistyczny i ten wizualny. Pomimo tego, że do jego obsługi nadal są wymagane dodatkowe programy i ustawienia, to i tak ogromny postęp. 99% pracy jaką wykonasz, zrobisz w jednym miejscu – jednym narzędziem, a nie jak to pewnie było dotychczas – dwoma, trzema osobno. Mało tego – dostęp do wyników swojej pracy masz natychmiast, co znacznie skraca czas wykonania zlecenia i odsuwa Cię od posady copywritera (Kopiuj/Wklej), jak i obchodzisz szerokim łukiem ten cały proces poszukiwania jednej małej „pierdołki” w (czasami zagmatwanej) składni kodu HTML, CSS, JS, PHP itd.

A jak Ty sobie z Tym radzisz? Czy tak samo jak ja, tak mocno przywiązałeś się do tego narzędzia, że nie możesz się bez niego obejść? A może masz lepsze sposoby radzenia sobie w takich sytuacjach? Czekam na twój wartościowy komentarz i cenne sugestie dotyczące tego narzędzia.

Pozdrawiam Cie Serdecznie i do usłyszenia niebawem ;)

 

P.s. Od napisania tego artykułu aż do dziś minęło sporo czasu i sam Chrome znacznie się zmienił. Zmienił nieco sposób jego obsługi i wygląd narzędzi. Mam jednak nadzieję, że pomimo tych zmian ten artykuł nadal będzie pomocny.

 


Otagowano:, , , , , , , , , ,

6 odpowiedzi do: “Jak „zmusić” Chrome, żeby zapisywał nasz postęp?“  

  • Dawid piszę:

    Już dodaję tą stronę do ulubionych :D

    Odpowiedz 

    • Paweł Nowak piszę:

      Proszę Bardzo :-) (y)

      Odpowiedz 

  • Mateusz piszę:

    Witam ponownie!
    Jako że narzędzie jest wspaniałe, jednak czasem nie chce działać tak jak powinno to opracowałem jak nie mieszać w to FileZilli która to wydaje się powoduje problem :P (bądź jej pliki tymczasowe).

    W każdym razie widzę że używasz Notepada++, dlatego też aby wszystko szło bez problemu – używam wtyczki NppFTP, zaciągam sobie plik do edycji przez Notepada++, pobieram ścieżkę, ustawiam wszystko jak trzeba. Następnie bawię się chromem. Jak skończę kombinować ze stylami Notepad++ pyta się czy przeładować plik – oczywiście mu na to pozwalam – dodaje spację i CTRL + S – plik leci na serwer – Działa za każdym razem.

    Odpowiedz 

    • Paweł Nowak piszę:

      No proszę, jak ładnie :-)
      Jak widać, wszystko można obejść i znaleźć rozwiązanie na każdy „problem”. Przed nami kolejne wyzwania.
      Pozdrawiam Serdecznie :-)

      Odpowiedz 

  • Mateusz piszę:

    Świetne narzędzie – czasem nie chce zadziałać tak jak powinno ale i tak jest wspaniałe – wzrastają moce przerobowe :P

    Odpowiedz 

    • Paweł Nowak piszę:

      Zgadza się Mateuszu. Mnie również potrafi „dać w kość”, zwłaszcza gdy go nie poustawiam zawczasu.
      Mimo to nadrabia za trzech :)

      Pozdrawiam Serdecznie.

      Odpowiedz 


Napisz odpowiedź lub dodaj komentarz


Twój adres e-mail nie będzie opublikowany. Pola oznaczone gwiazdką * są wymagane

Możesz używać tych znaczników HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>