Chromen kehittäjätyökalut (Ohje)

Kieli: Saksa

Chrome-kehitystyökalujen tehokas käyttö (opetusohjelma)

Chromen kehittäjätyökalujen avulla voit analysoida ja muokata verkkosivustojasi, tehdä suorituskykyanalyysejä ja testata sivujasi eri laitteilla ja näytön koossa. Tutustu DevToolsin tärkeimpiin toimintoihin tässä opetusohjelmassa. Miten havaitset virheet HTML:ssä, CSS:ssä ja JavaScriptissä, löydät tapoja optimoida suorituskykyä ja muistinkäyttöä ja parannat sivujesi ulkoasua - kouluttaja Stephan Haewß näyttää sinulle käytännön esimerkkien avulla, miten edetä!

Tutustu Chrome Developer Tools -työkalujen tärkeimpiin toimintoihin.
HTML-, CSS- ja JavaScript-koodin vianmääritys ja optimointi
Koodisekvenssien ymmärtäminen, virheiden havaitseminen ja korjaaminen.
Mukauta CSS-animaatioita, muotoilua ja asetteluja.
Parantaa verkkosivustojen suorituskykyä ja muistinkulutusta
Virheettömät ja nopeat verkkosivut optimoiduilla ulkoasuilla - Stephan Haewßin kuuden tunnin kurssi.

Puhdas koodi vaikuttaa merkittävästi verkkosivustosi näkyvyyteen. Opi nyt, miten voit käyttää Chrome DevToolsia sivujesi analysointiin ja optimointiin.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

tiedot

Sisältö: 6 h Videokoulutus
Lisenssi: yksityinen ja kaupallinen Käyttöoikeudet

Luokat

Verkkosuunnittelu, CMS ja kehitys

Rakkaudella luonut:

Stephan Haewß

Chrome-kehitystyökalujen esittelykurssi

Ilmaiseksi

Chrome-kehitystyökalut: 1.1 | Mitä opit tällä kurssilla?

Seuraavassa on yleiskatsaus kaikista kurssin aiheista.

Tekstiohjeeseen

Ilmaiseksi

Chrome-kehitystyökalut: 1.2 | Luo testiverkkosovellus

Luodaan ensimmäinen verkkosovellus, jossa kerrotaan ensimmäiset vaiheet dev-työkalujen käytössä.

Tekstiohjeeseen

Ilmaiseksi

Chrome Developer Tools: 1.3 | Ensimmäinen yleiskatsaus toiminnallisuuksiin

DevTools-paneelien ja niiden perustoimintojen esittely.

Tekstiohjeeseen

Muotoilu, ulkoasu, ulkonäkö elementit-välilehden kautta

Chromen kehittäjätyökalut: 2.1 | Tarkastele DOM-rakennetta Elementit-välilehdellä.

Yksityiskohtainen katsaus verkkosivun HTML-rakenteeseen ja siihen, miten elementtejä valitaan ja muokataan Elementit-välilehdellä.

Tekstiohjeeseen

Chromen kehittäjätyökalut: 2.2 | Muuta tyyliä

CSS-tyylien suoramuokkaus ja sen vaikutuksen tutkiminen verkkosivuston esitystapaan.

Tekstiohjeeseen

Chrome-kehitystyökalut: 2.3 | HTML:n ja DOM:n muokkaaminen

HTML-rakenteen muuttaminen ja sen vaikutusten tarkkailu DOM:iin.

Tekstiohjeeseen

Chrome-kehitystyökalut: 2.4 | Mobiilinäkymä - Testaa responsiivista suunnittelua

Eri laitekokojen simulointi ja verkkosivuston mukautuvuuden tarkistaminen.

Tekstiohjeeseen

Chromen kehittäjätyökalut: 2.5 | Käytännön harjoitus: Sivuvalikon korjaaminen

Sivuvalikon virheen korjaaminen.

Tekstiohjeeseen

Chrome-kehitystyökalut: 2.6 | Käytännön harjoitus: Korjaa ulkoasu/ylivuoto

Ratkaisu asettelun ongelmiin ja ylivuotovirheisiin.

Tekstiohjeeseen

Skriptin virheenkorjaus lähteiden ja konsolin kautta

Chrome-kehitystyökalut: 3.1 | Johdanto: Skriptin debuggaus ja ensimmäisen taukopisteen asettaminen

Johdatus JavaScript-koodin virheenkorjaukseen ja taukopisteiden asettamiseen.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.2 | Käytännön harjoitus: TypeScript-sovelluksen vianmääritys

TypeScript-koodin virheenkorjaus DevTools.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.3 | Käytännön harjoitus: Virheenkorjaus - Virheiden löytäminen, kun poistat joukosta

Virheen löytäminen ja korjaaminen, kun elementtejä poistetaan joukosta.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.4 | Käytännön harjoitus: React-sovelluksen vianmääritys

React-sovellusten erityiset virheenkorjaustekniikat.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.5 | Ehdolliset taukopisteet

Taukopisteiden asettaminen, jotka käynnistyvät vain tietyissä olosuhteissa.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.6 | DOM-taukopisteet

Tiettyjen DOM-elementtien muutosten seuranta.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.7 | Hae taukopisteet

Koodin pysäyttäminen verkkopyyntöjä varten.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.8 | Poikkeuksen taukopisteet

Automaattinen pysäytys virheiden ilmetessä.

Tekstiohjeeseen

Chromen kehittäjätyökalut: 3.9 | Ohitukset ja työtila

Tyylien ja skriptien mukauttaminen ilman muutoksia alkuperäiseen koodiin.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.10 | Vianmääritys vaiheittain ja tietyissä kohdissa

Yksityiskohtainen virheenkorjausprosessin hallinta.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.11 | Konsoli: Yleiskatsaus, yksinkertainen koodin suoritus ja tuotokset

Konsolin ja sen perustoimintojen esittely.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.12 | DOM-elementtien käyttö konsolissa

DOM:n manipulointi suoraan konsolin kautta.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.13 | Pätkät ja ajoitus konsolissa

Uudelleenkäytettävät koodinpätkät ja suorituskyvyn mittaukset.

Tekstiohjeeseen

Chrome-kehitystyökalut: 3.14 | Lokitulosteiden ryhmittely ja muotoilu

Lokitulosteiden väriä ja fonttia voidaan muuttaa ja ryhmitellä.

Tekstiohjeeseen

Chrome Developer Tools: 3.15 | Lisää hyödyllisiä konsolimenetelmiä

Joitakin konsolin toimintoja, joita ei käytetä kovin usein, mutta jotka ovat kuitenkin hyödyllisiä.

Tekstiohjeeseen

Verkkoanalyysi ja optimointi

Chrome-kehitystyökalut: 4.1 | Verkko: Yleiskatsaus toimintoihin

Verkkopyyntöjen ja -vastausten analysointi.

Tekstiohjeeseen

Chromen kehittäjätyökalut: 4.2 | Verkko: kuristaminen, otsikot ja esikatselu

Hitaiden verkkoyhteyksien simulointi ja HTTP-otsakkeiden analysointi.

Tekstiohjeeseen

Suorituskyvyn ja muistin optimointi

Chrome Developer Tools: 5.1 | Profiler - Suorituskyvyn arviointi ja optimointi

JavaScript-koodin suorituskyvyn pullonkaulojen tunnistaminen.

Tekstiohjeeseen

Chrome-kehitystyökalut: 5.2 | Muistin käytön optimointi muistiprofiilin avulla

Muistin kulutuksen analysointi ja muistivuotojen tunnistaminen.

Tekstiohjeeseen

Sovellusvälilehti ja muut työkalut

Chrome Developer Tools: 6.1 | Hyödylliset apuohjelmat ja renderöintivälilehti

Lisätyökaluja suorituskyvyn optimointiin.

Tekstiohjeeseen

Chromen kehittäjätyökalut: 6.2 | Animaatioiden tarkastelu ja säätäminen

Chrome-kehitystyökalut: 6.2 | Animaatioiden tarkistaminen ja säätäminen

Yksityiskohtainen analyysi CSS-animaatioista ja siirtymistä. Suorituskyvyn optimointi säätämällä ajoitustoimintoja ja ominaisuuksia.

Tekstiohjeeseen

Chromen kehittäjätyökalut: 6.3 | Tutustu verkkosovelluksen resursseihin Sovellus-välilehdellä.

Verkkosovelluksen tallennettujen tietojen, kuten paikallisen tallennuksen, istuntotallennuksen ja indeksoidun tietokannan, analysointi. Tallennuksen hallinnan optimointi.

Tekstiohjeeseen

Chrome-kehitystyökalut: 6.4 | Käytä laajennusta React Dev Tools (React Dev Tools)

React DevTools -selainlisäosan esittely. React-komponenttien rakenteen, rekvisiitan ja tilan tarkastelu.

Tekstiohjeeseen

Asetukset

Chrome Developer Tools: 7 | Tärkeimmät Chrome Dev Tools -asetukset

DevToolsin konfigurointi tehokkaampaa työskentelyä varten. Teemojen, pikanäppäinten ja muiden asetusten mukauttaminen.

Tekstiohjeeseen

Muiden selainten DevTools

Chrome-kehitystyökalut: 8.1 | MS Edge DevTools -työkalut (MS Edge DevTools)

Hyvin samanlainen kuin Chromen kehitystyökalut, mutta yksityiskohdissa on eroja.

Tekstiohjeeseen

Chrome-kehitystyökalut: 8.2 | Firefox DevTools -ohjelmat

Niissä on huomattavia eroja, mutta ne ovat periaatteessa hyvin samankaltaisia.

Tekstiohjeeseen

Chrome-kehitystyökalut: 8.3 | Safari DevTools -työkalut

Chromeen verrattuna on joitakin merkittäviä eroja, mutta periaate on sama myös tässä.

Tekstiohjeeseen

Yksityiskohdat sisällöstä

Optimoi verkkosivustosi Chromen kehittäjätyökalujen avulla
Virheettömät verkkosivut, jotka latautuvat huippunopeasti ja näyttävät hyvältä kaikilla näytön kokoisilla näytöillä! Tämän saavuttamiseksi sinun on analysoitava ja optimoitava sivujesi koodi. Chromen kehittäjätyökalut sopivat tähän erinomaisesti. Niiden avulla voit paljastaa virheet HTML-, CSS- ja JavaScript-koodissasi. Voit myös tarkastella yksityiskohtaisesti suorituskykyä, koodijaksoja ja muistinkulutusta. Hyödynnä havaintoja muokkaamalla sivujasi kohdennetusti ja viime kädessä lisäämällä sivujesi näkyvyyttä virheenkorjauksen ja optimoinnin avulla.
Opi käyttämään Chrome Developer Tools -työkaluja tässä kuuden tunnin oppitunnissa, jonka on laatinut ohjelmistokehittäjä ja kouluttaja Stephan Haewß. Aloita Chrome DevTools -työkalujen perusteista ja siirry aina edistyneisiin tekniikoihin asti - sivujesi siistiä ja suorituskykyistä ulkoasua varten!

HTML, CSS, JavaScript - virheenkorjaus puhtaiden, nopeiden ja optimoitujen verkkosivujen saamiseksi.

Kurssi alkaa Chrome Developer Tools -työkalujen esittelyllä , jotka ovat käytettävissä suoraan selaimessa. Opit, mitä DevTools ovat ja miten niitä käytetään. Sen jälkeen tutustut Elements-välilehteen, jonka avulla voit tarkastaa ja muokata sivujesi muotoilua, asettelua ja ulkoasua. Käytät Sources- ja Console-alueita skriptien virheenkorjaukseen. Opit myös käyttämään Chromen kehittäjätyökaluja verkkoanalyysin tekemiseen sekä suorituskyvyn ja muistin optimointiin. Lopuksi saat yleiskuvan muiden selainten DevTools-työkaluista. Kaiken kaikkiaan kurssi sopii siis kaikille web-kehittäjille, jotka haluavat debugata ja optimoida verkkosivustoja Chrome DevTools -työkalujen avulla.

Chrome DevToolsin tehokas käyttö - oppikirjan sisältö yhdellä silmäyksellä

Chrome DevTools -ohjelman esittely: Kurssilla opastetaan, miten DevTools avataan, siinä navigoidaan ja käytetään tehokkaasti tärkeimpiä toimintoja HTML:n, CSS:n ja JavaScriptin muokkaamiseen ja debuggaamiseen.
HTML:n ja CSS:n virheenkorjaus: Miten Chrome DevToolsilla voi tutkia verkkosivun DOM-puuta, muokata HTML- ja CSS-muotoilua suoraan live-tilassa ja korjata ulkoasuun liittyviä ongelmia ja CSS:n muotoiluvirheitä välittömästi - optimaalista suunnittelun nopeaan testaamiseen ja mukauttamiseen ennen muutosten pysyväksi tekemistä.
JavaScriptin virheenkorjaus: Opi lataamaan JavaScript-tiedostoja, asettamaan katkaisupisteitä ja ajamaan koodia vaihe vaiheelta. Muuttujia ja objekteja voidaan tutkia reaaliajassa, ja CallStackin avulla on helppo jäljittää funktiokutsuja - ihanteellinen tarkkaan virheenkorjaukseen.
Konsolin käyttö: Chromen kehitystyökalujen konsolin avulla voit avata ja analysoida lokitiedostoja, suorittaa JavaScript-koodia ja käsitellä verkkosivun elementtejä suoraan. Kohdennetun lokitulostuksen avulla voit analysoida ja optimoida koodia perusteellisesti, mikä helpottaa huomattavasti virheenkorjausta ja suorituskyvyn parantamista.
Suorituskyvyn optimointi: Tarkista verkkopyynnöt ja latausajat, seuraa muistin käyttöä ja tunnista muistivuodot. JavaScript-suorituskyvyn kohdennetulla optimoinnilla ja yksityiskohtaisilla sovelluksen suorituskykyanalyyseillä voidaan tehokkaasti parantaa latausnopeutta ja resurssien hallintaa.
Edistyneet tekniikat: Chrome DevTools -sovelluspaneelinavulla voit käyttää verkkotallennustiloja, kuten LocalStoragea, IndexedDB:tä ja välimuistia, sekä hallita palvelutyöläisiä ja manifesteja. Laajennukset, kuten React DevTools, voidaan myös integroida reaktiivisten sovellusten parempaan virheenkorjaukseen. Mukautettavat asetukset mahdollistavat myös DevToolsin optimaalisen määrityksen yksilöllisiin työvaatimuksiin.