Chrome Developer Tools (Juhend)

Kuidas kasutada Chrome'i arendajate tööriistu tõhusalt (õpetus)

Keel: eesti keel

Chrome'i arendaja tööriistadega tõhusalt töötamine (õpetus)

Chrome'i arendajate tööriistade abil saate analüüsida ja redigeerida oma veebisaite, teha jõudlusanalüüse ning testida oma lehekülgi erinevate seadmete ja ekraanisuuruste jaoks. Õpi selle õpetuse abil tundma DevToolsi olulisemaid funktsioone. Kuidas leida vigu HTML-is, CSS-is ja JavaScriptis, võimalusi tulemuslikkuse ja mälukasutuse optimeerimiseks ning oma lehekülgede kujunduste parandamiseks - instruktor Stephan Haewß näitab sulle praktiliste näidete abil, kuidas jätkata!

Õpi tundma Chrome'i arendajatööriistade olulisemaid funktsioone
HTML, CSS, JavaScripti koodi veaotsing ja optimeerimine
Koodivooge jälgida, vigu avastada ja parandada
Kohanda CSS-animatsioonid, -stiilid ja -paigutused
Veebisaitide jõudlust ja mälukasutust parandama
Veatu ja kiirete veebisaitide loomiseks optimeeritud kujundusega - Treener Stephan Haewßi üle kuue tunni kestev kursus

Puhas kood on oluline teie veebisaitide nähtavusele. Õpi nüüd, kuidas kasutada Chrome DevToolsi oma lehtede analüüsimiseks ja optimeerimiseks.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

üksikasjad

Sisu: 6 h Videoõpe
Litsents: eraõiguslik ja äriline Kasutusõigused

Kategooriad

Veebidisain, CMS ja arendus

Armastusega loodud:

Stephan Haewß

Sissejuhatus Chrome Developeri tööriistadesse

Chrome Developer Tools: 1.1 | Mida sa õpid selles kursusel?

Tasuta

Chrome'i arendajate tööriistad: 1.1 | Mida sa õpid selles kursuses?

Siin antakse ülevaade kõigist teemadest, mis selles kursuses käsitletakse.

Tekstiõpetuse juurde

Chrome Developer tööriistad: 1.2 | Looge testveebi rakendus

Tasuta

Chrome'i arendaja tööriistad: 1.2 | Loo testveebi rakendus

Esimene veebirakendus luuakse, millega selgitatakse esimesi samme arendajatööriistade kasutamisel.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 1.3 | Esimene ülevaade funktsionaalsustest

Tasuta

Chrome'i arendajatööriistad: 1.3 | Esimene ülevaade funktsioonidest

Tutvustus DevTools erinevatest paneelidest ja nende põhifunktsioonidest.

Tekstiõpetuse juurde

Stiil, paigutus, välimus elementide vahekaardil

Chrome'i arendaja tööriistad: 2.1 | Inspekteeri DOM-struktuuri Elementide vahekaardil

Chrome'i arendaja tööriistad: 2.1 | Vaadake DOM-i struktuuri Elements-i vahekaardil

Veebilehe HTML-struktuuri põhjalik analüüs ja selle koostisosade valimine ning muutmine Elements- vahekaardil.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 2.2 | Stiil muutmine

Chrome Developer Tools: 2.2 | Stiili muutmine

CSS-stiilide reaalajas muutmine ja nende mõju veebilehe kuvamisele uurimine.

Tekstiõpetuse juurde

Chrome Developer Tools: 2.3 | HTML, DOM muutmine

Chrome'i arendaja tööriistad: 2.3 | HTML-d ja DOM-i muutmine

Muuta HTML-struktuuri ja jälgida selle mõju DOM-ile.

Tekstiõpetuse juurde

Chrome Developer Tools: 2.4 | Mobiilivaade - Responsive Designi testimine

Chrome Developer Tools: 2.4 | Mobiilivaade – Reageeriva kujunduse testimine

Erinevate seadmete suuruste simuleerimine ja veebisaidi kohandamisvõime kontrollimine.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 2.5 | Praktiline harjutus: Lehe menüü parandamine

Chrome arendajate tööriistad: 2.5 | Praktiline harjutus: lehe menüü parandamine

Vea parandamine lehe menüüs.

Tekstiõpetuse juurde

Chrome Developer Tools: 2.6 | Praktiline harjutus: Paigutuse/ülevoolu parandamine

Chrome Developeri tööriistad: 2.6 | Praktiline harjutus: paigutuse/ümberlaadimise parandamine

Küljendusprobleemide ja ülevooluvead lahendamine.

Tekstiõpetuse juurde

Scripti tõrkeotsing läbi allikate ja konsooli

Chrome Developer Tools: 3.1 | Tutvustus: Skriptide silumine ja esimese vahepeatuse seadmine

Chrome Developer Tools: 3.1 | Tutvustus: Skriptide silumine ja esimese vahepeatuse seadistamine

Sissejuhatus JavaScript-koodi silumisse ja vahepunktide seadmisse.

Tekstiõpetuse juurde

Chrome Developer tööriistad: 3.2 | Praktiline harjutus: TypeScript rakenduse silumine

Chrome'i arendaja tööriistad: 3.2 | Praktiline harjutus: TypeScripti rakenduse silumine

Tüübitatud TypeScripti koodi silumine arendajate tööriistadega.

Tekstiõpetuse juurde

Chrome Developeri tööriistad: 3.3 | Praktiline harjutus: Veateate leidmine massiivist kustutamisel

Chrome Developer Tools: 3.3 | Praktiline harjutus: silumine - vea leidmine massiivist kustutamisel

Otsi ja paranda viga, kui eemaldatakse elemente massiivist.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 3.4 | Praktiline harjutus: React- rakenduse silumine

Chrome Developeri tööriistad: 3.4 | Praktiline harjutus: Reacti rakenduse silumine

Spetsiifilised tõrkeotsingu tehnikad Reacti rakendustele.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 3.5 | Tingimuslikud vahepeatused

Määrake pausipunktid, mis käivitatakse ainult teatud tingimustel.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 3.6 | DOM-katkestuspunktid

Chrome'i arendaja tööriistad: 3.6 | DOM-murdumiskohad

Jälgimine teatud DOM-elementide muudatuste osas.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 3.7 | Fetch-katkestuskohad

Chrome Developeri tööriistad: 3.7 | Fetch-katkendpunktid

Kood peatub võrgupäringutel.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 3.8 | Erandi punktid

Chrome Developer Tools: 3.8 | Erindite katkestuspunktid

Automaatne peatumine tekkivate vigade korral.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 3.9 | Ülekirjutised ja tööruum

Chrome Developeri tööriistad: 3.9 | Kattematerjalid ja tööruum

Stiilide ja skriptide kohandamine originaalkoodi muutmata.

Tekstiõpetuse juurde

Chrome Developer Tools: 3.10 | Silumine samm-sammult ja määratud kohtades

Chrome Developer Tools: 3.10 | Silumine sammhaaval ja kindlates kohtades

Detailne tõrkeotsingu protsessi juhtimine.

Tekstiõpetuse juurde

Chrome Developer Tools: 3.11 | Console: Ülevaade, lihtne koodi käivitamine ja väljund

Chrome'i arendaja tööriistad: 3.11 | Konsool: Ülevaade, lihtne koodi täitmine ja väljund

Sissejuhatus konsooli ja selle põhifunktsioonidesse.

Tekstiõpetuse juurde

Chrome Developer Tools: 3.12 | Juurdepääs DOM-elementidele konsoolis

Chrome Developer Tools: 3.12 | Ligipääs DOM-elementidele konsoolis

DOM manipuleerimine otse konsoolist.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 3.13 | Lõigud ja ajamõõdikud konsoolis

Chrome Developer Tools: 3.13 | Snipetid ja ajamõõtmine konsoolis

Taaskasutatavad kooditükid ja jõudluse mõõtmised.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 3.14 | Logi väljundite grupeerimine ja kujundamine

Chrome Developer tööriistad: 3.14 | Logiva väljundi grupeerimine ja kujundamine

Logi väljundeid saab muuta värvi ja tekstikirjatüüpi ning grupeerida.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 3.15 | Lisaks kasulikud konsooli meetodid

Chrome'i arendaja tööriistad: 3.15 | Järgmised kasulikud konsoolimeetodid

Mõned mitte väga sage, kuid siiski kasulikud konsoolifunktsioonid.

Tekstiõpetuse juurde

Võrguanalüüs ja -optimeerimine

Chrome arendajate tööriistad: 4.1 | Võrguosa: Ülevaade funktsioonidest

Chrome'i arendajate tööriistad: 4.1 | Võrk: Ülevaade funktsioonidest

Võrgupäringute ja -vastuste analüüs.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 4.2 | Võrgustik: Mahutamine, päised ja eelvaade

Chrome'i arendajate tööriistad: 4.2 | Võrguühendus: Pidurdamine, päised ja eelvaade

Aeglaste võrguühenduste simuleerimine ja HTTP päiste uurimine.

Tekstiõpetuse juurde

Jõudluse ja salvestusmahtude optimeerimine

Chrome'i arendaja tööriistad: 5.1 | Profiler - Jõudluse hindamine ja optimeerimine

Tulemuspiirangute tuvastamine JavaScripti koodis.

Tekstiõpetuse juurde

Chrome Developer Tools: 5.2 | Mälu profiili abil mälukasutust optimeerida

Chrome'i arendaja tööriistad: 5.2 | Optimeerige mälukasutust mäluprofiili abil

Mälu kasutamise analüüs ja mälulekeede tuvastamine.

Tekstiõpetuse juurde

Rakenduse vahekaart ja muud tööriistad

Chrome Developer Tools: 6.1 | Kasulikud abivahendid ja renderdamise vahekaart

Chrome Developer'i tööriistad: 6.1 | Kasulikud abimehed ja renderdamise vahekaart

Lisatööriistad jõudluse optimeerimiseks.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 6.2 | Animatsioonide hindamine ja kohandamine

Chrome'i arendaja tööriistad: 6.2 | Animatsioonide vaatlus ja kohandamine

Detailne analüüs CSS-animatsioonidest ja üleminekutest. Jõudluse optimeerimine ajastamisfunktsioonide ja omaduste kohandamise kaudu.

Tekstiõpetuse juurde

Chrome'i arendaja tööriistad: 6.3 | Uurige veebirakenduse ressursse rakenduse vahekaarti kasutades

Chrome Developer Tools: 6.3 | Veebirakenduse ressursse uurige rakendusesingu vahekaardi abil

Salvestatud andmete uurimine veebirakenduses nagu kohalik salvestus, sessioonihoidla ja IndexedDB. Salvestuse halduse optimeerimine.

Tekstiõpetuse juurde

Chrome'i arendajate tööriistad: 6.4 | Kasutage React Dev Toolsi laiendust

Chrome'i arendajate tööriistad: 6.4 | Kasuta laiendust Reacti arendajate tööriistad

Sissejuhatus React DevTools-i brauseri lisandmoodulisse. Reacti komponentide struktuuri, propside ja oleku kontrollimine.

Tekstiõpetuse juurde

Seaded

Chrome Developer Tools: 7 | Chrome Dev tööriistade olulisemad sätted

Chrome'i arendajate tööriistad: 7 | Chrome Dev Tools peamised sätted

Arendusvahendite konfigureerimine efektiivsemaks tööks. Teemade, kiirklahvide ja muude seadete kohandamine.

Tekstiõpetuse juurde

Teiste veebilehitsejate arendustööriistad

Chrome Developer Tools: 8.1 | MS Edge'i arendajatööriistad

Chrome'i arendaja tööriistad: 8.1 | MS Edge'i arendaja tööriistad

Väga sarnane Chrome Dev tööriistadele, kuid on detailseid erinevusi.

Tekstiõpetuse juurde

Chrome' arendajate tööriistad: 8.2 | Firefoxi arendajate tööriistad

Chrome'i arendajate tööriistad: 8.2 | Firefoxi arendajate tööriistad

Olulised erinevused on olemas, kuid põhimõtteliselt väga sarnased.

Tekstiõpetuse juurde

Chrome Developer Tools: 8.3 | Safariga arendajate tööriistad

Chrome arendaja tööriistad: 8.3 | Safari arendaja tööriistad

Mõned suuremad erinevused võrreldes Chrome'iga, kuid ka siin on põhimõte sama.

Tekstiõpetuse juurde

Sisu üksikasjad

Optimeeri oma veebilehti Chrome Developeri tööriistadega
Vigadeta veebileht, mis laadib kiiresti ja näeb igal ekraanisuurusel hea välja?! Selle saavutamiseks pead analüüsima ja optimeerima oma lehtede koodi. Chrome Developeri tööriistad on selleks suurepärased. Nende abil saad oma HTML-, CSS- ja JavaScripti koodis avastada vigu. Lisaks saad üksikasjalikult uurida jõudlust, koodi käitumist ja mälukasutust. Kasuta teadmisi, et oma lehti tõhusalt muuta ja lõpuks läbi veatuks seadmise ja optimeerimise ka oma lehtede nähtavust suurendada.
Kuidas rakendada Chrome Developeri tööriistu tõhusalt, saad õppida selles üle kuue tunni kestvas õpetuses tarkvaraarendaja ja koolitaja Stephan Haewßi juhendamisel. Alates Chrome Developeri tööriistade põhitõdedest kuni edasijõudnud tehnikateni - selleks, et sinu lehed esineksid puhtalt ja võimsalt!

HTML, CSS, JavaScript – veatute, kiirete veebilehtede veatuvastus optimeeritud paigutustega

Kursus algab sissemurdmisega Chrome Developeri tööriistadesse, mis on otse brauseris kättesaadavad. Sa õpid, mis on DevToolsid ja kuidas neid põhitasemel kasutada. Seejärel vaatad üle Elements-kaardi, mille kaudu saad uurida ja muuta oma lehtede stiili, paigutust ja väljanägemist. Alade Sources ja Console abil teostad skripti sissemurdmist. Lisaks saad teada, kuidas Chrome Developeri tööriistade abil teostada võrguanalüüsi ning jõudluse- ja mälluoptimeerimist. Lõpuks saad ülevaate ka teiste brauserite tööriistadest. Tervikuna sobib kursus seega kõigile veebiarendajatele, kes soovivad Chrome'i DevToolsi abil lehti veaotsingul ja optimeerimisel kasutada.

Chrome DevToolsi tõhus kasutamine – õpetuse sisu ülevaade

Sissejuhatus Chrome Developeri tööriistadesse: Kursus näitab sulle, kuidas avada DevToolsid, nendes navigeerida ning kasutada tõhusalt põhifunktsioone, et HTML, CSS ja JavaScripti redigeerimisel ja veaotsingul efektiivselt kasutada.
HTML ja CSS veaotsing: Kuidas kasutada Chrome Developeri tööriistu veebilehe DOM-puu uurimiseks, HTML ja CSS-i otse režiimis muuta ning seeläbi paigutusprobleeme ja CSS-veatingimusi kohe parandada - optimaalne kiireks testimiseks ja kujunduse kohandamiseks enne püsivaid muudatusi.
Javascripti veaotsing: Õpi, kuidas laadida JavaScripti faile, seada murdepunkte ning käivitada kood järk-järgult. Muutujaid ja objekte saab reaalajas uurida, samal ajal kui callstack muudab funktsioonikõnede tagasijälgimise lihtsamaks - ideaalne täpse veaotsingu jaoks.
Konsooli kasutamine: Chrome'i arendustööriistade konsool võimaldab avada ja analüüsida logisid, käivitada JavaScripti koode ning manipuleerida veebilehe elemente otse. Täpsete logiväljundite abil saad koodi põhjalikult analüüsida ja optimeerida, mis oluliselt lihtsustab veaotsimist ja jõudluse suurendamist.
Jõudluse optimeerimine: Kontrolli võrgu päringuid ja laadimisaegu, jälgi mälukasutust ja tuvasta mälulekkeid. Eesmärgipärase JavaScripti jõudluse optimeerimisega ning üksikasjalike rakenduse jõudluseanalüüsidega saad laadimiskiirust ja ressursihaldust tõhusalt parandada.
Edasijõudnud tehnikad: Chrome'i DevToolsi Application-paneel võimaldab ligipääsu veebisalvestussüsteemidele nagu LocalStorage, IndexedDB ja Cache, samuti Service Workeri ja Manifesti haldamisele. Lisaks saavad reageerivate rakenduste paremaks veaotsinguks integreerida laiendusi, näiteks React-DevToolsid. Kohandatavad seaded pakuvad individuaalsete töönõuete jaoks optimaalset DevToolsi seadistust.