"Chrome" programuotojo įrankiai

Kalba: vokiečių

Efektyvus "Chrome" programuotojo įrankių naudojimas (pamoka)

Naudodamiesi "Chrome" programuotojo įrankiais galite analizuoti ir redaguoti savo svetaines, atlikti našumo analizę ir išbandyti puslapius, pritaikytus skirtingiems įrenginiams ir ekrano dydžiams. Šiame vadovėlyje susipažinkite su svarbiausiomis "DevTools" funkcijomis. Kaip aptikti HTML, CSS ir "JavaScript" klaidas, rasti būdų, kaip optimizuoti našumą ir atminties naudojimą, ir patobulinti puslapių išdėstymą - mokytojas Stephanas Haewßas, remdamasis praktiniais pavyzdžiais, parodys, kaip elgtis!

Susipažinkite su svarbiausiomis "Chrome" programuotojo įrankių funkcijomis
HTML, CSS ir "JavaScript" kodo derinimas ir optimizavimas
Suprasti kodo sekas, aptikti ir ištaisyti klaidas
Pritaikykite CSS animacijas, stilių ir išdėstymą
Pagerinti svetainių našumą ir atminties suvartojimą
Šešių valandų trukmės mokytojo Stephano Haewßo kursas, skirtas optimizuotoms svetainėms be klaidų ir greitai, su optimizuotais maketais.

Švarus kodas labai prisideda prie jūsų svetainės matomumo. Sužinokite, kaip naudoti "Chrome DevTools" ir analizuoti bei optimizuoti puslapius.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

informacija

Turinys: 6 h Vaizdo mokymas
Licencija: privati ir komercinė Naudotojų teisės

Kategorijos

Tinklalapių kūrimas, CMS ir kūrimas

Sukurta su meile:

Stephan Haewß

Įvadas į "Chrome" programuotojo įrankių kursą

Nemokamai

"Chrome" programuotojo įrankiai: 1.1 | Ko išmoksite šiame kurse?

Čia apžvelgiamos visos šio kurso temos.

Į teksto vadovėlį

Nemokamai

"Chrome" programuotojo įrankiai: 1.2 | Sukurti bandomąją žiniatinklio programėlę

Sukuriama pirmoji žiniatinklio programa, kurioje paaiškinami pirmieji kūrimo įrankių naudojimo žingsniai.

Į teksto vadovėlį

Nemokamai

"Chrome" programuotojo įrankiai: 1.3 | Pirmoji funkcijų apžvalga

Įvadas į įvairius "DevTools" skydelius ir pagrindines jų funkcijas.

Į teksto vadovėlį

Stilius, išdėstymas, išvaizda per skirtuką Elementai

"Chrome" programuotojo įrankiai: 2.1 | DOM struktūros tikrinimas skirtuke Elementai

Išsamiai susipažinkite su tinklalapio HTML struktūra ir kaip pasirinkti bei redaguoti elementus skirtuke Elementai.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 2.2 | Pakeisti stilių

Tiesioginis CSS stilių redagavimas ir poveikio svetainės pateikimui tyrimas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 2.3 | HTML, DOM redagavimas

HTML struktūros keitimas ir poveikio DOM stebėjimas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 2.4 | Mobilusis vaizdas - išbandykite reaguojantį dizainą

imituoti skirtingų dydžių įrenginius ir patikrinti svetainės pritaikomumą.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 2.5 | Praktinė užduotis: šoninio meniu taisymas

Klaidos šoniniame meniu ištaisymas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 2.6 | Praktinis pratimas: taisyti išdėstymą / perpildymą

Išspręskite išdėstymo problemas ir perpildymo klaidas.

Į teksto vadovėlį

Scenarijaus derinimas per šaltinius ir konsolę

"Chrome" programuotojo įrankiai: 3.1 | Įvadas: scenarijaus derinimas ir pirmojo nutraukimo taško nustatymas

Įvadas į "JavaScript" kodo derinimą ir nutraukimo taškų nustatymą.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.2 | Praktinė užduotis: "TypeScript" programos derinimas

TypeScript kodo derinimas su DevTools.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.3 | Praktinis pratimas: Derinimas - klaidų paieška šalinant iš masyvo

Klaidos šalinant elementus iš masyvo paieška ir taisymas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.4 | Praktinė užduotis: "React" programos derinimas

Konkretūs "React" programų derinimo būdai.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.5 | Sąlyginės pertraukos taškai

Nustatyti nutraukimo taškus, kurie suveikia tik esant tam tikroms sąlygoms.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.6 | DOM pertraukos taškai

tam tikrų DOM elementų pokyčių stebėjimas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.7 | Pertraukos taškų gavimas

Tinklo užklausų kodo sustabdymas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.8 | Išimties pertraukos taškai

Automatinis sustabdymas įvykus klaidoms.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.9 | Perdengimai ir darbo sritis

Stilių ir scenarijų pritaikymas nekeičiant pradinio kodo.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.10 | Derinimas etapais ir konkrečiuose taškuose

Išsamus derinimo proceso valdymas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.11 | Konsolė: Apžvalga, paprastas kodo vykdymas ir išvestys

Įvadas į konsolę ir pagrindines jos funkcijas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.12 | Prieiga prie DOM elementų konsolėje

Manipuliavimas DOM tiesiogiai per konsolę.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.13 | Ištraukos ir laiko nustatymas konsolėje

Daugkartinio naudojimo kodo fragmentai ir našumo matavimai.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.14 | Žurnalo išvesties grupavimas ir stilizavimas

Galima keisti žurnalo išvesties spalvą ir šriftą bei grupuoti.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 3.15 | Daugiau naudingų konsolės metodų

Kai kurios ne itin dažnai naudojamos, tačiau naudingos konsolės funkcijos.

Į teksto vadovėlį

Tinklo analizė ir optimizavimas

"Chrome" programuotojo įrankiai: 4.1 | Tinklas: funkcijų apžvalga

tinklo užklausų ir atsakymų analizė.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 4.2 | Tinklas: ribojimas, antraštės ir peržiūra

Imituoti lėtus tinklo ryšius ir analizuoti HTTP antraštes.

Į teksto vadovėlį

Našumo ir atminties optimizavimas

"Chrome" programuotojo įrankiai: 5.1 | Profileris - įvertinkite ir optimizuokite našumą

Našumo trūkumų nustatymas "JavaScript" kode.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 5.2 | Optimizuokite atminties vartojimą naudodami atminties profiliavimo programą

Atminties suvartojimo analizė ir atminties nutekėjimo nustatymas.

Į teksto vadovėlį

Paraiškų skirtukas ir kiti įrankiai

"Chrome" programuotojo įrankiai: 6.1 | Naudingi pagalbininkai ir atvaizdavimo skirtukas

Kiti našumo optimizavimo įrankiai.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 6.2 | Animacijų peržiūra ir koregavimas

Išsami CSS animacijų ir perėjimų analizė. Veikimo optimizavimas reguliuojant laiko funkcijas ir savybes.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 6.3 | Naršykite žiniatinklio programų išteklius naudodami skirtuką Programos

Analizuoti saugomus žiniatinklio programos duomenis, pavyzdžiui, vietinę saugyklą, sesijos saugyklą ir IndexedDB. Saugyklų valdymo optimizavimas.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 6.4 | Naudokite plėtinį "React Dev Tools"

Įvadas į "React DevTools" naršyklės priedą. React komponentų struktūros, rekvizitų ir būsenos apžiūra.

Į teksto vadovėlį

Nustatymai

"Chrome" programuotojo įrankiai: 7 | Svarbiausi "Chrome Dev Tools" nustatymai

"DevTools" konfigūravimas, kad darbas būtų efektyvesnis. Temų, klaviatūros nuorodų ir kitų nustatymų pritaikymas.

Į teksto vadovėlį

Kitų naršyklių "DevTools

"Chrome" kūrėjų įrankiai: 8.1 | "MS Edge DevTools"

Labai panašūs į "Chrome" kūrimo įrankius, tačiau skiriasi detalės.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 8.2 | "Firefox DevTools"

Yra pastebimų skirtumų, tačiau iš esmės jie labai panašūs.

Į teksto vadovėlį

"Chrome" programuotojo įrankiai: 8.3 | "Safari DevTools"

Yra keletas esminių skirtumų, palyginti su "Chrome", tačiau ir čia principas tas pats.

Į teksto vadovėlį

Turinys

Optimizuokite svetaines naudodami "Chrome" programuotojo įrankius
Svetainė be klaidų, kuri įkeliama itin greitai ir puikiai atrodo bet kokio dydžio ekrane! Kad tai pasiektumėte, turite išanalizuoti ir optimizuoti puslapių kodą. Tam puikiai tinka " Chrome" programuotojo įrankiai. Jais galite aptikti HTML, CSS ir "JavaScript" kodo klaidų. Taip pat galite išsamiai peržiūrėti našumą, kodo sekas ir atminties sąnaudas. Naudodamiesi gautais rezultatais tikslingai redaguokite puslapius ir galiausiai padidinkite puslapių matomumą, atlikdami klaidų šalinimą ir optimizavimą.
Išmokite naudotis "Chrome Developer Tools" šioje programinės įrangos kūrėjo ir instruktoriaus Stephano Haewßo šešių valandų trukmės pamokoje. Pradėkite nuo "Chrome DevTools" pagrindų ir pereikite prie pažangiųjų metodų - kad jūsų puslapiai atrodytų švariai ir efektyviai!

HTML, CSS, "JavaScript" - derinimas, kad svetainės būtų švarios ir greitos, o jų išdėstymas optimizuotas

Kursas pradedamas nuo įvado į "Chrome" programuotojo įrankius , kuriuos galima naudoti tiesiogiai naršyklėje. Sužinosite, kas tai yra "DevTools" ir kaip jais naudotis. Tada apžvelgsite skirtuką "Elementai", kurį galite naudoti puslapių stiliui, išdėstymui ir išvaizdai tikrinti ir redaguoti. Naudositės šaltinių ir konsolės sritimis, kad atliktumėte scenarijų derinimą. Taip pat sužinosite, kaip naudotis "Chrome" programuotojo įrankiais, kad atliktumėte tinklo analizę ir optimizuotumėte našumą bei atmintį. Galiausiai apžvelgsite kitų naršyklių "DevTools" įrankius. Todėl apskritai šis kursas tinka visiems žiniatinklio kūrėjams, norintiems derinti ir optimizuoti svetaines naudojant "Chrome DevTools".

Efektyvus "Chrome DevTools" naudojimas - glaustas mokomosios programos turinys

Įvadas į "Chrome DevTools": Šiame kurse parodoma, kaip atidaryti "DevTools", naršyti joje ir efektyviai naudoti svarbiausias HTML, CSS ir "JavaScript" redagavimo ir derinimo funkcijas.
HTML ir CSS derinimas: Kaip naudoti "Chrome DevTools", kad galėtumėte ištirti tinklalapio DOM medį, redaguoti HTML ir CSS tiesiogiai tiesioginiu režimu, kad iš karto ištaisytumėte išdėstymo problemas ir CSS stiliaus klaidas - idealiai tinka greitai išbandyti ir pritaikyti dizainą prieš atliekant nuolatinius pakeitimus.
"JavaScript" derinimas: Sužinokite, kaip įkelti "JavaScript" failus, nustatyti nutraukimo taškus ir žingsnis po žingsnio paleisti kodą. Kintamuosius ir objektus galima tikrinti realiuoju laiku, o naudojant "CallStack" lengva atsekti funkcijų iškvietimus - tai idealiai tinka tiksliam derinimui.
Naudojimasis konsole: Naudodami "Chrome Development Tools" konsolę galite atidaryti ir analizuoti žurnalus, vykdyti "JavaScript" kodą ir tiesiogiai manipuliuoti tinklalapio elementais. Tikslinė žurnalų išvestis leidžia nuodugniai analizuoti ir optimizuoti kodą, o tai gerokai palengvina derinimą ir našumo gerinimą.
Optimizuokite našumą: tikrinkite tinklo užklausas ir įkėlimo laiką, stebėkite atminties naudojimą ir nustatykite atminties nutekėjimą. Tikslinis "JavaScript" našumo optimizavimas ir išsamios taikomosios programos našumo analizės gali veiksmingai pagerinti krovimo greitį ir išteklių valdymą.
Išplėstiniai metodai: "Chrome DevTools" taikomųjų programų skydelisleidžia naudotis žiniatinklio saugyklomis, tokiomis kaip "LocalStorage", "IndexedDB" ir "Cache", taip pat valdyti paslaugų darbuotojus ir manifestus. Taip pat galima integruoti plėtinius, pavyzdžiui, "React DevTools", kad būtų galima geriau derinti reaktyviąsias programas. Pritaikomi nustatymai taip pat leidžia optimaliai nustatyti "DevTools" pagal individualius darbo reikalavimus.