Ten popularny artykuł został zaktualizowany w 2020 roku. Aby uzyskać więcej informacji na temat poprawy przepływu pracy programistycznej za pomocą narzędzi, przeczytaj Developer Essentials: Tools on SitePoint Premium.
typowy dzień web Developera polega na tworzeniu stron HTML z powiązanymi CSS i JavaScript w ich ulubionym edytorze. Obieg pracy:
- Otwórz lokalnie hostowaną stronę w przeglądarce.
- Otwórz DevTools, aby zbadać problemy z układem i funkcjonalnością.,
- Dostosuj elementy HTML, właściwości CSS i kod JavaScript, aby rozwiązać problemy.
- skopiuj te zmiany z powrotem do edytora i wróć do kroku # 1.
podczas gdy narzędzia takie jak live reloading ułatwiły ten proces, wielu programistów nadal dostosowuje kod zarówno w Devtoolach, jak i ich edytorze.
można jednak otwierać i edytować pliki źródłowe bezpośrednio w Chrome. Wszelkie wprowadzone zmiany są zapisywane w systemie plików i aktualizowane w edytorze (zakładając, że odświeża się, gdy nastąpi zmiana pliku).,
Krok 1: Uruchom narzędzia programistyczne
Otwórz Chrome, załaduj stronę z lokalnego systemu plików/serwera i otwórz Narzędzia programistyczne z menu Więcej narzędzi lub naciśnij F12 lub Ctrl / Cmd + Shift + I w zależności od systemu. Przejdź do zakładki Źródła, aby sprawdzić Eksplorator plików:
możesz otwierać i edytować pliki CSS i JavaScript w tym widoku, ale wszelkie zmiany zostaną utracone po odświeżeniu strony.
Krok 2: Powiąż Folder z obszarem roboczym
kliknij kartę System plików, a następnie kliknij + Dodaj folder do obszaru roboczego., Zostaniesz poproszony o zlokalizowanie folderu roboczego, a Chrome poprosi Cię o potwierdzenie, że zezwalasz na dostęp. Eksplorator pokazuje pliki w systemie, które można otworzyć za pomocą jednego kliknięcia:
Krok 3: Edytuj i zapisz kod
Możesz teraz wskoczyć i edytować kod. Niezapisane edycje są oznaczone gwiazdką na karcie plik.
zmiany CSS są natychmiast aktualizowane, ale w przypadku HTML i JavaScript, zwykle musisz nacisnąć Ctrl / Cmd + S, aby zapisać plik w systemie plików, a następnie odświeżyć przeglądarkę.,
pamiętaj, że możesz również kliknąć prawym przyciskiem myszy kartę plik i wybrać Zapisz jako…, Aby zapisać kopię pliku w innym miejscu.
Krok 4: przeglądanie i cofanie zmian
aby przejrzeć zmiany, kliknij prawym przyciskiem myszy kartę plik i wybierz Local modifications… z menu kontekstowego:
wyświetlany jest widok podobny do różnic. Ikona strzałki w lewym dolnym rogu panelu cofnie wszystkie zmiany i przywróci plik do pierwotnego stanu.,
narzędzia programistyczne Chrome nigdy nie będą w pełni zastępować Twojego ulubionego edytora, ale mogą być przydatne, gdy wprowadzasz szybkie zmiany lub pracujesz na innym komputerze, na którym edytor może nie być zainstalowany.