Chrome izstrādātāja rīki (pamācība)

Valoda: vācu

Efektīva Chrome izstrādātāja rīku lietošana (pamācība)

Izmantojot Chrome izstrādātāja rīkus, varat analizēt un rediģēt vietnes, veikt veiktspējas analīzi un testēt lapas dažādām ierīcēm un ekrāna izmēriem. Šajā pamācībā iepazīstieties ar svarīgākajām DevTools funkcijām. Kā atklāt kļūdas HTML, CSS un JavaScript, atrast veidus, kā optimizēt veiktspēju un atmiņas izmantošanu, kā arī uzlabot lapu izkārtojumu - pasniedzējs Stefans Hēvs (Stephan Haewß) uz praktiskiem piemēriem parādīs, kā rīkoties!

Iepazīstieties ar svarīgākajām Chrome programmētāja rīku funkcijām
HTML, CSS un JavaScript koda atkļūdošana un optimizēšana
Kodu secības izpratne, kļūdu atklāšana un labošana
CSS animāciju, stila un izkārtojumu pielāgošana
Uzlabot tīmekļa vietņu veiktspēju un atmiņas patēriņu
Bezkļūdu un ātras tīmekļa vietnes ar optimizētu izkārtojumu - sešu stundu kurss, ko pasniedz pasniedzis pasniedzējs Stefans Hēvss (Stephan Haewß)

Tīrs kods ievērojami uzlabo jūsu vietnes atpazīstamību. Uzziniet, kā izmantot Chrome DevTools, lai analizētu un optimizētu savas lapas.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Sīkāka informācija

Saturs: 6 h Video mācību kurss
Licence: privāta un komerciāla Lietošanas tiesības

Kategorijas

Tīmekļa dizains, CMS un attīstība

Ar mīlestību izveidots no:

Stephan Haewß

Ievads kursā par Chrome izstrādātāja rīkiem

Bezmaksas

Chrome izstrādātāja rīki: 1.1 | Ko uzzināsiet šajā kursā?

Šeit ir sniegts pārskats par visiem šajā kursā aplūkotajiem tematiem.

Teksta vadlīnija

Bezmaksas

Chrome izstrādātāja rīki: 1.2 | Izveidot testa tīmekļa lietojumprogrammu

Tiek izveidota pirmā tīmekļa lietojumprogramma, kurā izskaidroti pirmie soļi, kā izmantot izstrādes rīkus.

Teksta vadlīnija

Bezmaksas

Chrome izstrādātāja rīki: 1.3 | Pirmais funkciju pārskats

Iepazīstināšana ar dažādiem DevTools paneļiem un to pamatfunkcijām.

Teksta vadlīnija

Stils, izkārtojums, izskats, izmantojot cilni Elementi

Chrome izstrādātāja rīki: 2.1 | DOM struktūras pārbaude cilnē Elementi

Detalizēti aplūkojiet tīmekļa lapas HTML struktūru un elementa elementu atlasi un rediģēšanu cilnē Elements.

Teksta vadlīnija

Chrome izstrādātāja rīki: 2.2 | Mainīt stilu

CSS stilu rediģēšana tiešraidē un ietekmes uz vietnes noformējumu izpēte.

Teksta vadlīnija

Chrome izstrādātāja rīki: 2.3 | HTML, DOM rediģēšana

HTML struktūras maiņa un ietekmes uz DOM novērošana.

Teksta vadlīnija

Chrome izstrādātāja rīki: 2.4 | Mobilais skats - responsīvā dizaina testēšana

Dažādu ierīču izmēru simulēšana un vietnes pielāgojamības pārbaude.

Teksta vadlīnija

Chrome izstrādātāja rīki: 2.5 | Praktisks uzdevums: sānu izvēlnes labošana

Kļūdas labojums sānu izvēlnē.

Teksta vadlīnija

Chrome izstrādātāja rīki: 2.6 | Praktisks uzdevums: izkārtojuma labošana/pārplūšana

Izkārtojuma problēmu un pārplūdes kļūdu risinājums.

Teksta vadlīnija

Skriptu atkļūdošanas atkļūdošana, izmantojot avotus un konsoli

Chrome izstrādātāja rīki: 3.1 | Ievads: skriptu atkļūdošana un pirmā pārtraukuma punkta iestatīšana

Ievads JavaScript koda atkļūdošanā un pārtraukuma punktu iestatīšanā.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.2 | Praktiskais uzdevums: TypeScript lietojumprogrammas atkļūdošana

TypeScript koda atkļūdošana ar DevTools.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.3 | Praktiskais uzdevums: atkļūdošana - kļūdu atklāšana, dzēšot no masīva

Kļūdas atrašana un labošana, noņemot elementus no masīva.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.4 | Praktiskais uzdevums: React lietojumprogrammas atkļūdošana

Īpašas atkļūdošanas metodes React lietojumprogrammām.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.5 | Nosacījuma pārtraukuma punkti

Pārrāvuma punktu iestatīšana, kas tiek aktivizēti tikai noteiktos apstākļos.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.6 | DOM pārtraukuma punkti

Noteiktu DOM elementu izmaiņu uzraudzība.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.7 | Pārtraukuma punktu iegūšana

Tīkla pieprasījumu koda apturēšana.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.8 | Izņēmuma pārtraukuma punkti

Automātiska apstāšanās, ja rodas kļūdas.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.9 | Virsraksti un darbvieta

Stilu un skriptu pielāgošana, nemainot sākotnējo kodu.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.10 | Atalgošana pa posmiem un konkrētos punktos

Detalizēta atkļūdošanas procesa kontrole.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.11 | Konsole: Pārskats, vienkārša koda izpilde un izvades

Iepazīstināšana ar konsoli un tās pamatfunkcijām.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.12 | Piekļuve DOM elementiem konsolē

Manipulēšana ar DOM tieši no konsoles.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.13 | Konsole un laika grafiks

Atkārtoti izmantojami koda fragmenti un veiktspējas mērījumi.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.14 | Žurnāla izvades grupēšana un stilizēšana

Žurnāla izvades rezultātu krāsu un fontu var mainīt un grupēt.

Teksta vadlīnija

Chrome izstrādātāja rīki: 3.15 | Vairāk noderīgu konsoles metožu

Dažas ne pārāk bieži izmantotas, tomēr noderīgas konsoles funkcijas.

Teksta vadlīnija

Tīkla analīze un optimizācija

Chrome izstrādātāja rīki: 4.1 | Tīkls: funkciju pārskats

Tīkla pieprasījumu un atbilžu analīze.

Teksta vadlīnija

Chrome izstrādātāja rīki: 4.2 | Tīkls: droseles, galvenes un priekšskatījums

Lēnu tīkla savienojumu simulēšana un HTTP galvenu analīze.

Teksta vadlīnija

Veiktspējas un atmiņas optimizācija

Chrome izstrādātāja rīki: 5.1 | Profileris - Izvērtējiet un optimizējiet veiktspēju

JavaScript koda veiktspējas vājo vietu identificēšana.

Teksta vadlīnija

Chrome izstrādātāja rīki: 5.2 | Atmiņas patēriņa optimizēšana, izmantojot atmiņas profilētāju

Atmiņas patēriņa analīze un atmiņas noplūdes identificēšana.

Teksta vadlīnija

Lietojumprogrammu cilne un citi rīki

Chrome izstrādātāja rīki: 6.1 | Noderīgi palīgi un atveidošanas cilne

Papildu rīki veiktspējas optimizācijai.

Teksta vadlīnija

Chrome izstrādātāja rīki: 6.2 | Animāciju pārskatīšana un pielāgošana

Detalizēta CSS animāciju un pāreju analīze. Veiktspējas optimizācija, pielāgojot laika noteikšanas funkcijas un īpašības.

Teksta vadlīnija

Chrome izstrādātāja rīki: 6.3 | Web lietojumprogrammu resursu izpēte, izmantojot cilni Pieteikums

Tīmekļa lietojumprogrammas glabāto datu, piemēram, vietējās krātuves, sesiju krātuves un indeksētās datubāzes (IndexedDB), analīze. Glabāšanas pārvaldības optimizācija.

Teksta vadlīnija

Chrome izstrādātāja rīki: 6.4 | Izmantot paplašinājumu React Dev Tools

Iepazīstināšana ar React DevTools pārlūkprogrammas papildinājumu. React komponentu struktūras, rekvizītu un stāvokļa pārbaude.

Teksta vadlīnija

Iestatījumi

Chrome izstrādātāja rīki: 7 | Svarīgākie Chrome Dev Tools iestatījumi

DevTools konfigurēšana efektīvākam darba veidam. Tēmu, tastatūras īsceļu un citu iestatījumu pielāgošana.

Teksta vadlīnija

Citu pārlūkprogrammu DevTools

Chrome izstrādātāja rīki: 8.1 | MS Edge DevTools

Ļoti līdzīgi Chrome izstrādes rīkiem, taču ir atšķirības detaļās.

Teksta vadlīnija

Chrome izstrādātāja rīki: 8.2 | Firefox DevTools

Ir ievērojamas atšķirības, taču principā tās ir ļoti līdzīgas.

Teksta vadlīnija

Chrome izstrādātāja rīki: 8.3 | Safari DevTools

Ir dažas būtiskas atšķirības salīdzinājumā ar pārlūku Chrome, taču princips arī šeit ir tāds pats.

Teksta vadlīnija

Detaļas par saturu

Optimizējiet vietnes, izmantojot Chrome izstrādātāja rīkus
Mājaslapa bez kļūdām, kas ielādējas īpaši ātri un izskatās lieliski jebkurā ekrāna izmērā! Lai to panāktu, ir jāanalizē un jāoptimizē lapu kods. Šim nolūkam lieliski noder Chrome izstrādātāja rīki. Tos varat izmantot, lai atklātu kļūdas HTML, CSS un JavaScript kodā. Varat arī detalizēti aplūkot veiktspēju, koda secību un atmiņas patēriņu. Izmantojiet iegūtos rezultātus, lai mērķtiecīgi rediģētu savas lapas un galu galā uzlabotu lappušu atpazīstamību, veicot atkļūdošanu un optimizāciju.
Uzziniet, kā izmantot Chrome izstrādātāja rīkus, šajā sešu stundu garajā pamācībā, ko sagatavojis programmatūras izstrādātājs un pasniedzējs Stefans Haußs. Sāciet ar Chrome DevTools pamatiem un turpiniet ar padziļinātiem paņēmieniem - lai jūsu lapas izskatītos tīras un augstas veiktspējas!

HTML, CSS, JavaScript - atkļūdošana tīru, ātru un optimizētu izkārtojumu tīmekļa vietņu izveidei

Kurss sākas ar iepazīstināšanu ar Chrome izstrādātāja rīkiem, kas ir pieejami tieši pārlūkprogrammā. Jūs uzzināsiet, kas ir DevTools un kā tos izmantot. Pēc tam aplūkosiet cilni Elements, ko varat izmantot, lai pārbaudītu un rediģētu lapu stilu, izkārtojumu un izskatu. Jūs izmantosiet sadaļas Sources un Console, lai veiktu skriptu atkļūdošanu. Uzzināsiet arī, kā izmantot Chrome izstrādātāja rīkus, lai veiktu tīkla analīzi un optimizētu veiktspēju un atmiņu. Visbeidzot, jūs gūsiet pārskatu par citu pārlūkprogrammu DevTools. Kopumā šis kurss ir piemērots visiem tīmekļa izstrādātājiem, kuri vēlas atkļūdošanas un tīmekļa vietņu optimizēšanas prasmes, izmantojot Chrome DevTools.

Efektīva Chrome DevTools izmantošana - mācību kursa saturs īsumā

Ievads Chrome DevTools: Šajā kursā tiek parādīts, kā atvērt DevTools, pārvietoties pa tiem un efektīvi izmantot svarīgākās HTML, CSS un JavaScript rediģēšanas un atkļūdošanas funkcijas.
HTML un CSS atkļūdošana: Izpētiet, kā izmantot Chrome DevTools, lai pārbaudītu tīmekļa lapas DOM koku, rediģētu HTML un CSS tieši tiešraides režīmā, lai nekavējoties novērstu izkārtojuma problēmas un CSS stila kļūdas - ideāli piemērots ātrai dizaina testēšanai un pielāgošanai pirms izmaiņu veikšanas.
JavaScript atkļūdošana: Uzziniet, kā ielādēt JavaScript failus, iestatīt pārtraukuma punktus un soli pa solim palaist kodu. Mainīgos un objektus var pārbaudīt reāllaikā, savukārt CallStack ļauj viegli izsekot funkciju izsaukumiem - ideāli piemērots precīzai atkļūdošanai.
Konsoles izmantošana: Chrome izstrādes rīku konsole ļauj atvērt un analizēt žurnālus, izpildīt JavaScript kodu un tieši manipulēt ar tīmekļa lapas elementiem. Mērķtiecīga žurnālu izvade ļauj rūpīgi analizēt un optimizēt kodu, kas ievērojami atvieglo atkļūdošanu un veiktspējas uzlabošanu.
Optimizējiet veiktspēju: pārbaudiet tīkla pieprasījumus un ielādes laiku, uzraugiet atmiņas izmantošanu un identificējiet atmiņas noplūdes. JavaScript veiktspējas mērķtiecīga optimizācija un detalizēta lietojumprogrammas veiktspējas analīze var efektīvi uzlabot ielādes ātrumu un resursu pārvaldību.
Uzlabotas metodes: Chrome DevTools lietojumprogrammu panelisļauj piekļūt tīmekļa krātuvēm, piemēram, LocalStorage, IndexedDB un Cache, kā arī pārvaldīt pakalpojumu darbiniekus un manifestus. Var integrēt arī paplašinājumus, piemēram, React DevTools, lai uzlabotu reaktīvo lietojumprogrammu atkļūdošanu. Pielāgojami iestatījumi nodrošina arī optimālu DevTools iestatīšanu atbilstoši individuālām darba prasībām.