Narzędzia deweloperskie Chrome (Samouczek)

Efektywne wykorzystanie narzędzi deweloperskich Chrome (samouczek)

Język: niemiecki

Skorzystaj z narzędzi deweloperskich Chrome (samouczek)

Z narzędziami Chrome Developer możesz analizować i edytować swoje strony internetowe, przeprowadzać analizy wydajności oraz testować swoje strony pod kątem różnych urządzeń i rozdzielczości ekranu. Dowiedz się w tym samouczku, jak korzystać z najważniejszych funkcji narzędzi DevTools. Jak wykrywać błędy w HTML, CSS i JavaScript, znajdować sposoby optymalizacji wydajności i zużycia pamięci oraz poprawiać układy swoich stron - Trener Stephan Haewß pokaże Ci na praktycznych przykładach, jak postępować!

Zapoznaj się z najważniejszymi funkcjami narzędzi dla deweloperów Chrome
Debugowanie i optymalizacja kodu HTML, CSS, JavaScript
Śledzić przebieg kodu, wykrywać i naprawiać błędy
Dostosować animacje, stylowanie i układy CSS
Poprawić wydajność i zużycie pamięci stron internetowych
Dla bezbłędnych i szybkich stron internetowych z zoptymalizowanymi układami - ponad sześciogodzinny kurs prowadzony przez trenera Stephana Haewß

Czysty kod znacząco przyczynia się do widoczności twoich stron internetowych. Dowiedz się teraz, jak korzystać z narzędzi deweloperskich Chrome, aby analizować i optymalizować swoje strony.

szczegóły

Zawartość: 6 h Szkolenie wideo
Licencja: prywatna i komercyjna Prawa użytkowania

Kategorie

Web design, CMS i rozwój

Z miłością stworzone przez:

Stephan Haewß

Wprowadzenie do kursu dotyczącego narzędzi deweloperskich Chrome

Chrome Developer Tools: 1.1 | Co uczysz się w tym kursie?

Darmowe

Chrome Developer Tools: 1.1 | Co uczysz się na tym kursie?

Tutaj znajdziesz przegląd wszystkich tematów poruszanych w tym kursie.

Narzędzia deweloperskie Chrome: 1.2 | Tworzenie testowej aplikacji internetowej

Darmowe

Chrześcijańskie narzędzia developerskie: 1.2 | Utwórz aplikację testową internetową

Pierwsza aplikacja internetowa jest tworzona, która wyjaśnia pierwsze kroki w korzystaniu z narzędzi deweloperskich.

Narzędzia developerskie Chrome: 1.3 | Pierwsze spojrzenie na funkcje

Darmowe

Narzędzia Deweloperskie Chrome: 1.3 | Pierwsze spojrzenie na funkcjonalności

Wprowadzenie do różnych paneli narzędzi dla deweloperów i ich podstawowa funkcjonalność.

Styling, układ, wygląd w zakładce Elementy

Narzędzia deweloperskie Chrome: 2.1 | Inspekcja struktury DOM w zakładce Elements

Chrome Narzędzia deweloperskie: 2.1 | Inspekcja struktury DOM w karcie Elementy

Szczegółowe zbadanie struktury HTML strony internetowej i sposób wyboru i edycji elementów w karcie Elementy.

Narzędzia deweloperskie Chrome: 2.2 | Zmienić styl

Narzędzia deweloperskie Chrome: 2.2 | Zmiana stylu

Edycja na żywo stylów CSS i analiza wpływu na wygląd strony internetowej.

Narzędzia deweloperskie Chrome: 2.3 | Edycja HTML, DOM

Zmiana struktury HTML i obserwacja jej wpływu na DOM.

Narzędzia deweloperskie Chrome: 2.4 | Widok mobilny - Testowanie responsywnego designu

Chrome Narzędzia deweloperskie: 2.4 | Przegląd mobilny – Testowanie responsywnego projektu

Symulacja różnych rozmiarów urządzeń i sprawdzenie dostosowalności strony internetowej.

Narzędzia deweloperskie Chrome: 2.5 | Zadanie praktyczne: Naprawa menu strony

Narzędzia deweloperskie Chrome: 2.5 | Ćwiczenie praktyczne: Naprawa menu strony

Naprawa błędu w menu strony.

Narzędzia deweloperskie Chrome: 2.6 | Praktyczne ćwiczenie: Naprawa układu/przepływu danych

Narzędzia deweloperskie Chrome: 2.6 | Praktyczne ćwiczenie: Naprawa układu/przepływu

Rozwiązanie problemów z układem i błędami przekroczenia.

Debugowanie skryptów za pomocą źródeł i konsoli

Narzędzia deweloperskie Chrome: 3.1 | Wprowadzenie: Debugowanie skryptów i ustawienie pierwszego punktu przerwania

Narzędzia deweloperskie Chrome: 3.1 | Prezentacja: Debugowanie skryptów i ustawienie pierwszego punktu przerwania

Wprowadzenie do debugowania kodu JavaScript i ustawiania punktów wstrzyknięcia.

Narzędzia deweloperskie Chrome: 3.2 | Praktyczne ćwiczenie: Debugowanie aplikacji TypeScript

Debugowanie kodu TypeScript za pomocą narzędzi developerskich.

Narzędzia deweloperskie Chrome: 3.3 | Ćwiczenie praktyczne: Debugowanie – Znajdź błąd przy usuwaniu z tablicy

Narzędzia deweloperskie Chrome: 3.3 | Ćwiczenie praktyczne: Debugowanie – Znajdowanie błędu przy usuwaniu z tablicy

Szukanie i naprawa błędu podczas usuwania elementów z tablicy.

Chrome Narzędzia programistyczne: 3.4 | Praktyczne zadanie: Debugowanie aplikacji React

Narzędzia dla programistów Chrome: 3.4 | Praktyczne ćwiczenie: Debugowanie aplikacji React

Konkretne techniki debugowania dla aplikacji React.

Chrome Narzędzia deweloperskie: 3.5 | Punkty przerwania warunkowe

Narzędzia deweloperskie Chrome: 3.5 | Punkty przerywania warunkowe

Ustawianie punktów przerwania, które są aktywowane tylko w określonych warunkach.

Chrome Developer Tools: 3.6 | DOM-Punkte przerwane

Chrome Narzędzia deweloperskie: 3.6 | Punkty odniesienia w drzewie DOM

Nadzór nad zmianami w określonych elementach DOM.

Chrome Narzędzia dla programistów: 3.7 | Pobierz-Punkty przerwania

Chrome Narzędzia dla programistów: 3.7 | Punkty przerwania Fetch

Zatrzymywanie kodu podczas żądań sieciowych.

Narzędzia deweloperskie Chrome: 3.8 | Punkty wyjątków

Chrome Narzędzia programistyczne: 3.8 | Wyjątki-punkty przerywania

Automatyczne zatrzymywanie przy występujących błędach.

Chrome Developer Tools: 3.9 | Zastępowania i Przestrzeń robocza

Chrome Narzędzia Developerskie: 3.9 | Przesłonięcia i Obszar roboczy

Dostosowanie stylów i skryptów bez zmian w kodzie źródłowym.

Narzędzia deweloperskie Chrome: 3.10 | Debugowanie krok po kroku i w określonych miejscach

Chrome Developer Tools: 3.10 | Debugowanie krok po kroku i w określonych miejscach

Szczegółowa kontrola procesu debugowania.

Narzędzia deweloperskie Chrome: 3.11 | Konsola: Przegląd, proste wykonywanie kodu i wyniki

Chrome Developer Tools: 3.11 | Konsola: Przeglądarka, prosty kod i wyniki

Wprowadzenie do konsoli i jej podstawowych funkcji.

Narzędzia deweloperskie Chrome: 3.12 | Dostęp do elementów DOM w konsoli

Manipulacja drzewem DOM bezpośrednio za pomocą konsoli.

Narzędzia deweloperskie Chrome: 3.13 | Skrypty i pomiar czasu w konsoli

Kodów łatwo zmienne i pomiary wydajności.

Narzędzia deweloperskie Chrome: 3.14 | Grupowanie i stylizacja logów

Narzędzia deweloperskie Chrome: 3.14 | Grupowanie i stylizowanie logów

Wyjścia dziennika można zmieniać pod względem koloru i czcionki oraz grupować.

Narzędzia deweloperskie Chrome: 3.15 | Dodatkowe przydatne metody konsoli

Chrome Narzędzia deweloperskie: 3.15 | Dodatkowe przydatne metody konsoli

Kilka mało używanych, ale nadal przydatnych funkcji konsoli. p>

Analiza i optymalizacja sieci

Chrome Narzędzia Deweloperskie: 4.1 | Sieć: Przegląd funkcji

Narzędzia deweloperskie Chrome: 4.1 | Sieć: Przegląd funkcji

Analiza zapytań i odpowiedzi sieciowych.

Chrome Narzędzia deweloperskie: 4.2 | Sieć: Ograniczanie przepustowości, Nagłówki i Podgląd

Chrome Narzędzia Deweloperskie: 4.2 | Sieć: Ograniczenia przepustowości, Nagłówki i Podgląd

Symulacja wolnych połączeń sieciowych i badanie nagłówków HTTP.

Optymalizacja wydajności i pamięci

Narzędzia deweloperskie Chrome: 5.1 | Profiler - Oceniaj i optymalizuj wydajność

Zidentyfikowanie wąskich gardeł wydajności w kodzie JavaScript.

Narzędzia deweloperskie Chrome: 5.2 | Optymalizacja zużycia pamięci za pomocą narzędzia Memory Profiler

Narzędzia deweloperskie Chrome: 5.2 | Optymalizowanie zużycia pamięci za pomocą profilera pamięci

Analiza zużycia pamięci i identyfikacja wycieków pamięci.

Karta aplikacji i inne narzędzia

Narzędzia developerskie Chrome: 6.1 | Przydatne narzędzia i karta renderowania

Chrome Developer Tools: 6.1 | Przydatne narzędzia i zakładka Renderowanie

Dodatkowe narzędzia do optymalizacji wydajności.

Chrome Developer Tools: 6.2 | Ocenianie i dostosowywanie animacji

Narzędzia deweloperskie Chrome: 6.2 | Ocenianie i dostosowywanie animacji

Szczegółowa analiza animacji i przejść w CSS. Optymalizacja wydajności poprzez dostosowanie funkcji czasu i właściwości.

Narzędzia deweloperskie Chrome: 6.3 | Badanie zasobów aplikacji internetowych za pomocą karty „Application”

Narzędzia Programisty Chrome: 6.3 | Badanie zasobów aplikacji sieciowej za pomocą karty Aplikacja

Badanie przechowywanych danych aplikacji internetowej, takich jak Local Storage, Session Storage i IndexedDB. Optymalizacja zarządzania pamięcią.

Chrome Developer Tools: 6.4 | Użyj rozszerzenia React Dev Tools

Chrome Developer Tools: 6.4 | Używanie rozszerzenia React Dev Tools

Wprowadzenie do narzędzi przeglądarki React DevTools. Inspekcja struktury komponentów React, Props i State.

Ustawienia

Narzędzia deweloperskie Chrome: 7 najważniejszych ustawień narzędzi deweloperskich Chrome

Konfiguracja narzędzi deweloperskich dla bardziej efektywnej pracy. Dostosowanie motywów, skrótów klawiszowych i innych ustawień.

Narzędzia deweloperskie innych przeglądarek

Chrome Narzędzia programistyczne: 8.1 | Narzędzia programistyczne MS Edge

Chrome Narzędzia programistyczne: 8.1 | Narzędzia deweloperskie MS Edge

Bardzo podobne do narzędzi Chrome Dev, ale są pewne różnice w szczegółach.

Narzędzia programistyczne Chrome: 8.2 | Narzędzia programistyczne Firefoksa

Narzędzia deweloperskie Chrome: 8.2 | Narzędzia deweloperskie Firefox

Istnieją zauważalne różnice, ale zasadniczo są one bardzo podobne.

Narzędzia deweloperskie Chrome: 8.3 | Narzędzia deweloperskie Safari

Czasami większe różnice w stosunku do Chrome, ale zasada jest taka sama.

Szczegóły dotyczące zawartości

Optymalizuj swoje strony internetowe za pomocą narzędzi deweloperskich Chrome
Strona internetowa wolna od błędów, która szybko się ładowuje i prezentuje się dobrze na każdym rozmiarze ekranu?! Aby to osiągnąć musisz przeanalizować i zoptymalizować kod swoich stron. Narzędzia deweloperskie Chrome są do tego doskonałe. Dzięki nim odkryjesz błędy w swoim kodzie HTML, CSS i JavaScript. Ponadto będziesz miał możliwość szczegółowej analizy wydajności, przebiegu kodu oraz zużycia pamięci. Wykorzystaj te informacje aby skutecznie edytować swoje strony i w końcu poprzez debugowanie i optymalizację zwiększyć widoczność swoich stron.
Jak skutecznie korzystać z narzędzi deweloperskich Chrome, nauczysz się w tym ponad sześciogodzinnym samouczku prowadzonym przez programistę oprogramowania i trenera Stephana Haewß. Zacznij od podstawowych funkcji narzędzi Chrome DevTools aż do zaawansowanych technik - dla czystego, wydajnego wyglądu Twoich stron!

HTML, CSS, JavaScript - Debugowanie dla czystych, szybkich stron internetowych z zoptymalizowanymi układami

Kurs rozpoczyna się od wprowadzenia do narzędzi deweloperskich Chrome, które są dostępne bezpośrednio w przeglądarce. Dowiesz się, czym są narzędzia DevTools i jak podstawowo z nich korzystać. Następnie zajmiesz się zakładką Elements-, dzięki której możesz inspirować się i edytować styl, układ i wygląd swoich stron. Korzystając z zakładek Sources i Console przeprowadzisz debugowanie skryptów. Ponadto dowiesz się, jak przy użyciu narzędzi deweloperskich Chrome przeprowadzić analizę sieci, optymalizacje wydajności oraz zużycia pamięci. Na koniec poznasz narzędzia DevTools innych przeglądarek. W skrócie, kurs jest odpowiedni dla wszystkich programistów internetowych, którzy chcą debugować i optymalizować strony internetowe za pomocą narzędzi DevTools Chrome.

Skuteczne stosowanie narzędzi Chrome DevTools - zestawienie treści samouczka

Wprowadzenie do narzędzi Chrome DevTools: Kurs pokaże Ci, jak otworzyć DevTools, poruszać się w nich i jak wydajnie korzystać z najważniejszych funkcji do edytowania i usuwania błędów w HTML, CSS i JavaScript.
Debugowanie HTML i CSS: Jak za pomocą narzędzi Chrome DevTools zbadać drzewo DOM strony internetowej, edytować HTML i CSS na żywo i natychmiast rozwiązywać problemy z układem i błędami stylistyki CSS – idealne dla szybkiego testowania i dostosowywania designu, zanim zmiany zostaną trwale zaakceptowane.
Debugowanie JavaScript: Dowiedz się, jak ładować pliki JavaScript, ustawiać punkty przerwania i ustawiać krokowy przebieg kodu. Zmienne i obiekty mogą być badane w czasie rzeczywistym, a stos wywołań ułatwia śledzenie wywołań funkcji – idealne do precyzyjnego debugowania.
Wykorzystanie konsoli: Konsola narzędzi Chrome Development Tools umożliwia otwieranie i analizowanie logów, wykonywanie kodu JavaScript oraz bezpośrednie manipulowanie elementami strony internetowej. Precyzyjne zapisy logów pozwalają na dokładną analizę i optymalizację kodu, co znacznie ułatwia debugowanie i poprawę wydajności.
Optymalizacja wydajności: Sprawdź żądania sieciowe i czasy ładowania, monitoruj zużycie pamięci i identyfikuj wycieki pamięci. Dzięki geściej optymalizacji wydajności JavaScript i szczegółowym analizom wydajności aplikacji można skutecznie poprawić szybkość ładowania i zarządzanie zasobami.
Zaawansowane techniki: Panel Application- narzędzi Chrome DevTools umożliwia dostęp do przechowywanych danych, takich jak LocalStorage, IndexedDB i Cache, a także zarządzanie pracownikami usługowymi i manifestami. Ponadto można integrować rozszerzenia, takie jak React-DevTools, aby lepiej debugować reaktywne aplikacje. Personalizowane ustawienia zapewniają optymalną konfigurację narzędzi devTools dla indywidualnych wymagań pracy.