Przewodnik po narzędziach internetowych Google

Sep 14, 2025

Jak

Strona 1 z 5:

Zobacz i zmień HTML, CSS & AMP; Js.

Zobacz i zmień HTML, CSS & AMP; Js.
Korzystanie z debugera.
Praca z trybem urządzenia
Zacznij od materiału projektowego
Uchwyć z progresywnymi aplikacjami internetowymi

Big G, AKA Google, zapewnia programistom mnóstwo narzędzi przeznaczonych do łatwego projektowania stron internetowych. W tym artykule przechodzimy na niektóre z najlepszych narzędzi Google, a pokazujemy, jak korzystać z nich w swoim projekcie internetowym i przepływ pracy.

Obejmujemy szereg różnych Narzędzia do projektowania stron internetowych. Tutaj podzielamy treść na strony, aby ułatwić nawigację. Użyj menu rozwijanego powyżej, aby przejść do sekcji, którą Cię interesuje. Chcesz zaprojektować witrynę za pomocą innego dostawcy? Nasi przewodnicy do hosting i top Kreator strony internetowej Czy pokryłeś.

Dopóki strony internetowe są niezryminowane, ich treści można oglądać przez każdego. DevTools Chrome Make to proste - na tej stronie pokazujemy, jak przeglądać i zmienić HTML, CSS i JavaScript. Na Strona 2 Przyjrzymy się bliżej, jak korzystać z Google Debuger, aby szybko i łatwo naprawić błędy kodujące. Strona 3. Umieszcza reflektor w trybie urządzenia Google, który można użyć do przetestowania wersji mobilnych stron za pośrednictwem maszyny pulpitu. Na strona 4. Przedstawiamy podstawy, które musisz być świadomy, aby rozpocząć wdrażanie zasad projektowania materiałów w swoich projektach. Wreszcie, Page 5. Wygląda na progresywnych aplikacji internetowych, najnowszej wielkiej rzeczy w branży projektowania stron internetowych.

Zobacz i zmień HTML, CSS & AMP; Js.

Dopóki kod witryny nie został złożony, może być oglądany przez kogoś przy użyciu narzędzi deweloperskich Chrome. Przede wszystkim sprawdź wersję Chrome - następujące kroki działa na wersji 70.0.3538.67 działa na 64-bitowej stacji roboczej Ubuntu. Następnie otwórz menu hamburgera i kliknij Więcej Narzędzia & GT; Narzędzia deweloperskie.

Launch Google's Developer Tools — Uruchom narzędzia deweloperskie i powinieneś zobaczyć ekran podobny do tego [kliknij ikonę w prawym górnym rogu, aby powiększyć]

Przeglądarka odpowiada otwierając panel po lewej stronie ekranu. Należy zmienić rozmiar w pierwszym kroku - domyślnie przeglądarka nie przypada wystarczającej liczby nieruchomości z ekranem. Po zakończeniu ekran wygląda podobnie do tego pokazanego na obrazku powyżej.

Domyślnie narzędzia programistyczne uruchamiają się z załadowanym kartą konsoli. Zawiera wyjście emitowane przez wywołanie funkcji rejestrowania konsoli. Błędy renderowania pojawiają się tam również - jeśli znajdziesz czerwone linie, coś jest w znaczniku lub kodzie twojej strony. Kliknięcie małego "URL" po prawej stronie przynosi cię do linii, co spowodowało pojawienie się wiadomości.

Sprawdź znacznik

Jeśli twoje odsetki koncentruje się na znacznikach, użyj zakładki Elementy pokazane na rysunku. Pokazuje, że marka aktualnie wytwarza przeglądarka. Możesz rozwinąć i zwarty go w modzie podobnej do widoku drzewa - ukryj niestrawione elementy, aby zapobiec przeciążeniu sensorycznym.

The. Raison d'etre. zakładki jest wyświetlanie struktury CSS. Widżety "Zbieraj" CSS z różnych źródeł, które są wyświetlane starannie i obok siebie. W przypadku przykładowego na rysunku widzimy, że style zostały dostarczone zarówno z tagu "DIV", jak i "głównym" znacznikiem strony.

Chrome pozwala edytować większość atrybutów w locie. Kliknij dwukrotnie dowolne z czarnych tekstów, aby przekształcić etykietę w edytor, a następnie wprowadź nowo pożądaną wartość i naciśnij klawisz RETURN. Render podnosi te zmiany i stosuje je do domu w locie. Jest to szczególnie przydatne podczas próby zoptymalizowania kolorów lub problemów z umieszczeniem; Muszę przeładować stronę, aby przejrzeć zmiany staje się męczące.

Google's web tools — Żółte tło wskazuje zawartość okna podlega filtrowaniu [kliknij ikonę w prawym górnym rogu, aby powiększyć]

Wreszcie spójrz na pole tekstowe na szczycie okienka. Umożliwia filtrowanie pokazanych elementów znaczników: na przykład wprowadź "MDC", aby ograniczyć widok na wszystkie style odziedziczone z biblioteki projektowania materiału używane w dalszej części tego artykułu. Gdy filtr jest aktywny, żółte tło pojawia się w modzie podobnej do tego pokazanego powyżej.

Wykonaj szczegółową analizę

W nowoczesnych przeglądarkach internetowych Dom nie jest ograniczony do "Statical" Prezentacja. Reguluje również przepływ i umieszczenie zdarzenia. Przełącz na kartę obliczoną, aby odsłonić listę "wymiarowych" właściwości. Jest to niezwykle przydatne podczas układania widżetów na ekranie w dokładnym modzie.

Przeprowadzka do zakładki słuchaczy zdarzeń zapewnia przegląd przepływów zdarzeń. Użyj tej funkcji, aby szybko wyeliminować problemy związane z interakcją użytkownika: Jeśli zdarzenie nie wyzwala, zaczyna się sprawdzając połączenia obsługi zdarzeń.

Wreszcie okno Właściwości pozwala spojrzeć na atrybuty przechowywane wewnątrz poszczególnych węzłów Dom. Jeśli kiedykolwiek spędziłeś dużo czasu na polowaniu na kod manipulowania, wartość jest jasna.

Następna strona: Jak korzystać z Google Debuger

Bieżąca strona: Zobacz i zmień HTML, CSS & AMP; Js.

Następna strona Korzystanie z debugera.

Przewodnik po narzędziach internetowych Google

Zobacz i zmień HTML, CSS & AMP; Js.

Sprawdź znacznik

Wykonaj szczegółową analizę

Jak - Najpopularniejsze artykuły

Pureref: Jak używać narzędzia odniesienia obrazu

Jak narysować ramię

Wszystko, co musisz wiedzieć o Kod JavaScript

Jak utworzyć animowany efekt pisania

Jak malować realistyczne fale w Photoshopie

Jak zarządzać klasami CSS z JavaScript

Sekrety spełnienia kreatywnego projektu krótkie

Zbuduj złożone układy z Postcss-Flexbox

Kategorie