Orodja za razvijalce Chrome (Vodič)

Uporaba orodij za razvijalce Chrome (vodič)

Jezik: nemščina

Uporaba orodij za razvijalce Chrome (Vodnik)

Z orodji za razvijalce Chrome lahko analizirate in urejate svoje spletne strani, izvajate analize uspešnosti ter preizkušate svoje strani na različnih napravah in zaslonih. V tem vadnem programu se naučite osnovne funkcije orodij za razvijalce. Kako razkrijete napake v HTMLju, CSSju in JavaScriptu, najdete načine za optimizacijo uspešnosti in porabe pomnilnika ter izboljšate postavitve vaših strani - Trener Stephan Haewß vam bo na praktičnih primerih pokazal, kako pristopiti!

Nauči se osnovnih funkcij orodij za razvijalce v brskalniku Chrome
Odpravljanje napak in optimiziranje HTML, CSS, JavaScript kode
Sledite poteku kode, odkrijte in odpravite napake
Prilagajanje CSS-animacij, oblikovanja in postavitev
Izboljšajte zmogljivost in porabo pomnilnika spletnih strani
Za brezhibne in hitre spletne strani z optimiziranimi postavitvami - tečaj trenerja Stefana Haewßa, ki traja več kot šest ur

Čist kode pomembno prispeva k vidnosti tvoje spletne strani. Spoznaj, kako uporabljati orodja za razvijalce Chrome, da analiziraš in optimiziraš svoje strani.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

podrobnosti

Vsebina: 6 h Video vadničenje
Licenca: zasebna in komercialna Pravice uporabe

Kategorije

Spletno oblikovanje, CMS in razvoj

Z ljubeznijo ustvarjeno od:

Stephan Haewß

Uvod v tečaj o orodjih za razvijalce Chrome

Chrome Developer orodja: 1.1 | Kaj se učiš v tem tečaju?

Brezplačno

Orodja za razvijalce Chrome: 1.1 | Kaj se boste naučili v tem tečaju?

Tukaj je predstavljen pregled vseh tem, ki jih bomo obravnavali v tem tečaju.

Orodja za razvijalce Chrome: 1.2 | Ustvarjanje testne spletnih aplikacij

Brezplačno

Orodja za razvijalce Chrome: 1.2 | Ustvarjanje testne spletne aplikacije

Prva spletna aplikacija je ustvarjena, s katero se bodo pojasnili prvi koraki pri uporabi orodij za razvijalce.

Brezplačno

Orodja za razvijalce Chrome: 1.3 | Prvi pregled funkcionalnosti

Uvod v različne panele orodij za razvijalce in njihovo osnovno delovanje.

Oblikovanje, postavitev, videz prek zavihka Elementi

Orodja razvijalca Chrome: 2.1 | Preglej DOM-strukturo v zavihku Elementi

Orodja za razvijalce v brskalniku Chrome: 2.1 | Pregled domače strukture v zavihku Elementi

Podroben pregled strukture HTML spletne strani in kako izbirati in urejati elemente na zavihku za Elementi.

Orodja za razvijalce Chrome: 2.2 | Spremeni slog

Živa urejanje CSS slogov in preučevanje vpliva na prikaz spletne strani.

Orodja razvijalca brskalnika Chrome: 2.3 | Urejanje HTML in DOM

Orodja za razvijalce Chrome: 2.3 | Urejanje HTML, DOM

Spreminjanje strukture HTML in opazovanje vpliva na DOM.

Orodja za razvijalce Chroma: 2.4 | Mobilni pogled - Preizkus odzivnega oblikovanja

Orodja za razvijalce Chrome: 2.4 | Mobilni pogled - Testiranje prilagodljivega oblikovanja

Simulacija različnih velikosti naprav in preverjanje prilagodljivosti spletne strani.

Orodja za razvijalce Chrome: 2,5 | Praktična vaja: Popravljanje menija strani

Orodja za razvijalce Chrome: 2.5 | Praktična vaja: Popravilo stranskega menija

Odprava napake v stranskem meniju.

Orodja za razvijalce Chrome: 2.6 | Praktična vadba: Popravljanje postavitve/prelivanje

Orodja za razvijalce Chrome: 2.6 | Praktična vaja: Popravljanje postavitve/prelivanja

Rešitev težav s postavitvijo in prelivanjem.

Razhroščevanje skriptov prek virov in konzole

Orodja za razvijalce Chrome: 3.1 | Predstavitev: Odpravljanje težav s skripti in nastavitev prvega prekinitvenega mesta

Orodja za razvijalce Chrome: 3.1 | Predstavitev: Odpravljanje napak v skriptah in postavitev prve prekinitve

Uvod v odpravljanje napak v JavaScript kodi in postavljanje prelomnih točk.

Orodja za razvijalce Chrome: 3.2 | Praktična vaja: Razhroščevanje aplikacije TypeScript

Orodja za razvijalce Chrome: 3.2 | Praktična vaja: Odpravljanje napak aplikacije TypeScript

Odpravljanje napak v TypeScript kode z orodji za razvijalce.

Orodja za razvijalce Chrome: 3.3 | Praktična vaja: Odpravljanje napak - Odkrivanje napak pri brisanju iz tabele

Orodja za razvijalce Chrome: 3.3 | Praktična vadba: Odpravljanje napak - Iskanje napak pri brisanju iz polja

Iskanje in odpravljanje napake pri odstranjevanju elementov iz tabele.

Orodja za razvijalce Chroma: 3.4 | Praktična vaja: Debugiranje React aplikacije

Orodja za razvijalce brskalnika Chrome: 3.4 | Praktična vadba: Debugiranje React aplikacije

Specifične tehnik operativnega reševanja za React aplikacije.

Orodja za razvijalce Chrome: 3.5 | Pogojni prekinitveni točki

Orodja razvijalca Chrome: 3.5 | Pogojni prekinitveni točki

Nastavitev prelomnih točk, ki se sprožijo le pod določenimi pogoji.

Orodja za razvijalce Chrome: 3.6 | DOM-prekinitve

Orodja za razvijalce Chrome: 3.6 | DOM-prelomi

Nadzor spreminjanja določenih DOM elementov.

Orodja za razvijalce Chrome: 3.7 | Točke prekinitve pridobivanja

Orodje za razvijalce Chrome: 3.7 | Pobiranje-prelomi

Zaustavitev kode med omrežnimi zahtevami.

Orodja za razvijalce Chrome: 3,8 | Izjeme-prerivne točke

Orodja razvijalca Chrome: 3.8 | Točke prekinitve izjem

Samodejno zaustavljanje ob napakah.

Orodja za razvijalce Chrome: 3.9 | Preklici in delovno mesto

Orodja za razvijalce brskalnika Chrome: 3.9 | Zamenjave in delovno okolje

Prilagajanje slogov in skript brez sprememb na originalnem kodi.

Orodja za razvijalce Chrome: 3.10 | Razhroščevanje po korakih in do določenih mest

Orodja razvijalca Chroma: 3.10 | Razhroščevanje v korakih in na določenih mestih

Podroben nadzor postopka odpravljanja napak.

Orodja razvijalca Chrome: 3.11 | Konzola: Pregled, enostavno izvajanje kode in izhodi

Orodja za razvijalce Chrome: 3.11 | Konzola: Pregled, izvajanje preprostega kode in izhodni podatki

Vaja v konzoli in njenih osnovnih funkcijah.

Orodja za razvijalce brskalnika Chrome: 3.12 | Dostop do elementov DOM v konzoli

Orodja za razvijalce Chrome: 3.12 | Dostop do DOM-elementov v konzoli

Manipulacija DOM neposredno preko konzole.

Orodja za razvijalce Chrome: 3.13 | Izseki in merjenje časa v konzoli

Ponovno uporabni koščki kode in meritve uspešnosti.

Orodja razvijalca Chrome: 3.14 | Združevanje in oblikovanje dnevniških izpisov

Orodja za razvijalce Chrome: 3.14 | Združevanje in oblikovanje dnevniških izpisov

Dnevniki se lahko spreminjajo v barvi in pisavi ter se lahko združujejo.

Orodja razvijalca Chrome: 3.15 | Dodatne uporabne metode konzole

Chrome orodja za razvijalce: 3.15 | Dodatne uporabne metode konzole

Nekatere ne zelo pogosto uporabljene, vendar vseeno koristne funkcije konzole.

Analiza in optimizacija omrežja

Orodja za razvijalce Chrome: 4.1 | Omrežje: Pregled funkcij

Analiza omrežnih zahtev in odgovorov.

Orodja za razvijalce Chrome: 4.2 | Omrežje: Omejevanje, Glave in Predogled

Orodja razvijalca brskalnika Chrome: 4.2 | Omrežje: Zmanjševanje hitrosti, Glave in Predogled

Simulacija počasnih omrežnih povezav in preučevanje HTTP-headerjev.

Optimizacija delovanja in shranjevanja

Orodja za razvijalce Chrome: 5.1 | Ocenjevalec - Izboljšajte in optimizirajte zmogljivost

Chrome orodja za razvijalce: 5.1 | Profiler - Preverjanje in optimizacija delovanja

Prepoznavanje ozkih grl pri izvajanju v JavaScript kodi.

Orodja za razvijalce Chrome: 5.2 | Optimizirajte porabo pomnilnika s pomočjo orodja za analizo pomnilnika

Orodja za razvijalce Chrome: 5.2 | Optimiranje porabe pomnilnika s pomočjo orodja za profiliranje spomina

Analiza porabe pomnilnika in identifikacija uhajanja pomnilnika.

Orodje za aplikacije in dodatna orodja

Orodja za razvijalce Chrome: 6.1 | Uporabni pomočniki in zavihek za prikazovanje

Orodja za razvijalce Chrome: 6.1 | Uporabni pripomočki in zavihek za prikazovanje

Dodatna orodja za optimizacijo zmogljivosti.

Orodja za razvijalce Chrome: 6.2 | Ocenjevanje in prilagajanje animacij

Orodja za razvijalce Chrome: 6.2 | Oglejte si in prilagodite animacije

Podrobna analiza CSS animacij in prehodov. Optimizacija zmogljivosti s prilagajanjem časovnih funkcij in lastnosti.

Orodja za razvijalce Chrome: 6.3 | Preučevanje spletnih aplikacijskih virov z zavihkom Aplikacija

Pregled shranjenih podatkov spletne aplikacije, kot so Lokalno shranjevanje, Sejno shranjevanje in IndexedDB. Optimizacija upravljanja pomnilnika.

Orodja razvijalca Chrome: uporabite razširitev React Dev Tools 6.4

Orodja razvijalca Chrome: 6.4 | Uporaba razširitve React Dev Tools

Uvod v brskalni dodatek React DevTools. Pregled strukture komponent React, props in stanja.

Nastavitve

Orodja za razvijalce Chrome: 7 | Najpomembnejše nastavitve orodij za razvijalce Chrome

Nastavitev orodij za razvijalce za učinkovitejše delo. Prilagajanje tem, bližnjic na tipkovnici in drugih nastavitev.

Orodja za razvijalce drugega brskalnika

Orodja za razvijalce Chrome: 8.1 | Orodja za razvijalce MS Edge

Orodja za razvijalce brskalnika Chrome: 8.1 | Orodja za razvijalce za MS Edge

Zelo podobno orodjem Chrome Dev, vendar obstajajo podrobnosti.

Orodja za razvijalce Chrome: 8.2 | Orodja Firefox-DevTools

Orodja za razvijalce brskalnika Chrome: 8.2 | Orodja Firefox-DevTools

Opazne razlike obstajajo, vendar so načeloma zelo podobne.

Orodja za razvijalce Chrome: 8.3 | Orodja Safari-DevTools

Včasih so večje razlike v primerjavi s Chromeom, a tudi tukaj je načelo enako.

Podrobnosti vsebine

Optimirajte svoje spletne strani s pripomočki za razvijalce v brskalniku Chrome
Brezhibna spletna stran, ki se izjemno hitro naloži in se dobro obnese na vseh velikostih zaslonov?! Za dosego tega morate analizirati in optimirati kodo svojih strani. Pripomočki za razvijalce v brskalniku Chrome so zanje odlično orodje. Z njimi lahko odkrijete napake v svoji HTML-, CSS- in JavaScript-kodi. Poleg tega si lahko podrobno ogledate izvajanje kode, delovanje kode ter porabo pomnilnika. Uporabite pridobljene informacije, da boste usmerjeno urejali svoje strani in na koncu z odpravljanjem napak in optimizacijo povečali tudi vidnost svojih strani.
Kako učinkovito uporabljati pripomočke za razvijalce v brskalniku Chrome boste izvedeli v tem več kot šesturnem vadnem programu vodilnega razvijalca in trenerja programske opreme Stephana Haewßa. Začnite z osnovami pripomočkov DevTools v brskalniku Chrome in se sprehodite do naprednih tehnik - za čisto in zmogljivo predstavitev vaših strani!

HTML, CSS, JavaScript – Odpravljanje napak za čiste, hitre spletne strani z optimiziranimi postavitvami

Tečaj se začne z uvodom v pripomočke za razvijalce v brskalniku Chrome, ki so neposredno dostopni v brskalniku. Izvedeli boste, kaj so DevTools in kako jih lahko osnovno uporabljate. Nato se boste ukvarjali z zavihkom Elementi, preko katerega boste lahko pregledali in urejali slog, postavitev ter videz svojih strani. S področji Vir in Konzola boste izvedli odpravljanje skriptov. Poleg tega se boste naučili, kako z uporabo pripomočkov za razvijalce v brskalniku Chrome doseči analizo omrežja ter optimizacijo delovanja in pomnilnika. Nazadnje si boste ogledali tudi pripomočke drugih brskalnikov. Tečaj je tako primeren za vse spletne razvijalce, ki želijo odpravljati napake in optimizirati spletne strani z uporabo pripomočkov Chroma.

Učinkovita uporaba pripomočkov DevTools v brskalniku Chrome – vsebine v vadnem programu na kratko

Uvod v pripomočke DevTools v brskalniku Chrome: Tečaj vam pokaže, kako odpreti DevTools, se po njih premikati ter učinkovito izkoristiti najpomembnejše funkcije za urejanje in odpravljanje napak v HTML, CSS in JavaScript.
Odpravljanje napak v HTML in CSS: Kako z uporabo pripomočkov za razvijalce v brskalniku Chrome preiskovati DOM-drevo spletne strani, urejati HTML in CSS neposredno v živo ter s tem takoj odpraviti težave s postavitvijo in napake pri oblikovanju CSS – optimalno za hitro testiranje in prilagajanje oblikovanja pred dokončnim spremenitvami.
Odpravljanje napak v JavaScriptu: Spoznajte, kako naložiti JavaScript-datoteke, postaviti prelome in postopoma izvajati kodo. Medtem ko lahko v realnem času preiskujete spremenljivke in objekte, vam klicni sklad olajšuje sledenje klicev funkcij – idealno za natančno iskanje napak.
Uporaba konzole: Konzola orodij za razvijalce v Chrome omogoča odpiranje in analiziranje dnevnikov, izvajanje JavaScript kode ter neposredno manipuliranje elementov spletnih strani. S ciljnimi izpisi dnevnikov lahko temeljito analizirate in optimizirate kodo, kar olajša odpravljanje napak in povečanje zmogljivosti.
Optimizacija zmogljivosti: Preverite omrežne zahteve in čase nalaganja, spremljajte uporabo pomnilnika in identificirajte puščanja pomnilnika. Z geografsko usmerjeno optimizacijo delovanja JavaScript in podrobno analizo delovanja aplikacij lahko učinkovito izboljšate hitrost nalaganja ter upravljanje virov.
Napredne tehnike: Plošča Aplikacija v pripomočkih DevTools v brskalniku Chrome vam omogoča dostop do spletnega pomnilnika, kot sta lokalno shranjevanje, IndexedDB in predpomnilnik, in tudi upravljanje storitvenih delavcev in manifestov. Poleg tega lahko vključite razširitve, kot so React-DevTools, za boljše odpravljanje napak v reaktivnih aplikacijah. Prilagodljive nastavitve pa zagotavljajo optimalno nastavitev pripomočkov DevTools za individualne delovne zahteve.