Instrumentele de dezvoltare Chrome (Tutorial)

Utilizarea eficientă a instrumentelor pentru dezvoltatori Chrome (Tutorial)

Limba: Germană

Folosiți eficient instrumentele pentru dezvoltator Chrome (Tutorial)

Cu uneltele dezvoltatorului Chrome, poți analiza și edita site-urile web, efectua analize de performanță și testa paginile tale pentru diferite dispozitive și dimensiuni de ecran. Învață în acest tutorial principalele funcții ale uneltelor pentru dezvoltatori. Cum să descoperi erori în HTML, CSS și JavaScript, să găsești modalități de optimizare a performanței și a consumului de memorie și să îmbunătățești aspectul paginilor tale - Trainerul Stephan Haewß îți arată prin exemple practice cum să procedezi!

Învață cele mai importante funcții ale uneltelor de dezvoltare Chrome
Debugează și optimizează codul HTML, CSS și JavaScript
Urmăriți fluxurile de cod, identificați și remediați erorile
Ajustați animațiile, stilurile și aspectul CSS
Îmbunătățiți performanța și consumul de memorie al paginilor web
Pentru site-uri web fără erori și rapide, cu aspecte vizuale optimizate - un curs de peste șase ore susținut de trainerul Stephan Haewß

Un cod curat contribuie semnificativ la vizibilitatea paginilor tale web. Învață acum cum să folosești instrumentele de dezvoltare Chrome pentru a analiza și optimiza paginile tale.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

detalii

Conținut: 6 h Instruire video
Licență: privată și comercială Drepturi de utilizare

Categorii

Webdesign, CMS și dezvoltare

Creat cu dragoste de:

Stephan Haewß

Introducere în cursul despre instrumentele pentru dezvoltatori Chrome

Gratuit

Chrome Developer Tools: 1.1 | Ce înveți în acest curs?

Aici se oferă o prezentare generală a tuturor temelor care vor fi abordate în acest curs.

Tutorial textului

Chrome Developer Tools: 1.2 | Creare aplicație web de testare

Gratuit

Instrumentele de dezvoltare Chrome: 1.2 | Creare aplicație web de testare

Prima aplicație web va fi creată, în care vor fi explicate primii pași în utilizarea instrumentelor de dezvoltare.

Tutorial textului

Instrumentele de dezvoltare Chrome: 1.3 | Primul contact cu funcționalitățile

Gratuit

Instrumentele de dezvoltare ale Chrome: 1.3 | Prima vedere asupra funcționalităților

Introducere în diferitele panouri ale uneltelor de dezvoltare și modul lor de funcționare de bază.

Tutorial textului

Stil, aranjament, aspect în tab-ul Elemente

Instrumente pentru dezvoltatori Chrome: 2.1 | Investigarea structurii DOM în fila Elemente

Instrumentele de dezvoltare Chrome: 2.1 | Inspectați structura DOM în fila Elemente

Analiză detaliată a structurii HTML a unei pagini web și cum se selectează și se editează elementele în fila Elemente.

Tutorial textului

Uneltele pentru dezvoltatori Chrome: 2.2 | Schimbați stilul

Instrumentele pentru dezvoltatori Chrome: 2.2 | Schimbați stilul

Editarea live a stilurilor CSS și examinarea influenței asupra afișării paginii web.

Tutorial textului

Instrumentele de dezvoltare Chrome: 2.3 | Editare HTML, DOM

Instrumentele de dezvoltare ale Chrome: 2.3 | Editare HTML, DOM

Schimbarea structurii HTML și observarea impactului asupra DOM-ului.

Tutorial textului

Instrumentele de dezvoltare Chrome: 2.4 | Vizualizare mobilă - Testare design responsiv

Instrumentele dezvoltatorului Chrome: 2.4 | Vizualizare mobilă - Testarea design-ului responsiv

Simularea diferitelor dimensiuni de dispozitive și verificarea adaptabilității site-ului web.

Tutorial textului

Instrumentele de dezvoltare Chrome: 2.5 | Exercițiu practic: Repararea meniului paginii

Remedierea unei erori într-un meniu lateral.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 2.6 | Exercițiu practic: Repararea aspectului/depășirii (overflow)

Instrumentele pentru dezvoltatori Chrome: 2.6 | Exercițiu practic: Repararea aspectului/debordării

Soluționarea problemelor de layout și erorilor de depășire.

Tutorial textului

Debugare scripturilor prin Sources și Console

Instrumentele pentru dezvoltatori Chrome: 3.1 | Prezentare: Debugging-ul scripturilor și setarea primului breakpoint

Instrumentele de dezvoltare Chrome: 3.1 | Introducere: Depanarea scripturilor și setarea primului punct de oprire

Introducere în depanarea codului JavaScript și setarea punctelor de întrerupere.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 3.2 | Exercițiu practic: Depanarea unei aplicații TypeScript

Debugarea codului TypeScript cu instrumentele pentru dezvoltatori.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 3.3 | Exercițiu practic: Depanare - Identificarea erorilor la ștergere dintr-un array

Instrumentele de dezvoltare Chrome: 3.3 | Exercițiu practic: Remedierea erorilor - găsirea erorii la ștergerea dintr-un array

Căutarea și remedierea unei erori la eliminarea elementelor dintr-un tablou.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 3.4 | Exercițiul practic: depanarea unei aplicații React

Instrumentele de dezvoltare Chrome: 3.4 | Exercițiu practic: Depanarea unei aplicații React

Metode specifice de depanare pentru aplicațiile React.

Tutorial textului

Instrumentele de dezvoltare Chrome: 3.5 | Puncte de oprire condiționale

Instrumentele de dezvoltare Chrome: 3.5 | Breakpoints conditionate

Setarea breakpoint-urilor care sunt declanșate doar sub anumite condiții.

Tutorial textului

Instrumentele de dezvoltare Chrome: 3.6 | Puncte de întrerupere DOM

Supravegherea modificărilor care au loc la anumite elemente DOM.

Tutorial textului

Instrumente de dezvoltare Chrome: 3.7 | Puncte de opriri Fetch

Instrumentele de dezvoltare Chrome: 3.7 | Puncte de oprire Fetch

Oprirea codului la cererile de rețea.

Tutorial textului

Instrumentele de dezvoltare ale Chrome: 3.8 | Puncte de întrerupere ale excepțiilor

Instrumentele de dezvoltare Chrome: 3.8 | Puncte de oprire la excepții

Oprirea automată în caz de apariție a erorilor.

Tutorial textului

Instrumentele de dezvoltare Chrome: 3.9 | Suprascrieri și Spațiu de lucru

Instrumentele de dezvoltare Chrome: 3.9 | Overrides și Spațiul de lucru

Adaptarea stilurilor și scripturilor fără a face modificări în codul original.

Tutorial textului

Instrumentele de dezvoltare Chrome: 3.10 | Remedierea erorilor pas cu pas și la anumite locații

Instrumentele de dezvoltare Chrome: 3.10 | Depanare pas cu pas și la puncte specifice

Control detaliat al procesului de depanare.

Tutorial textului

Instrumentele de dezvoltare ale Chrome: 3.11 | Consola: Prezentare generală, execuție simplă a codului și afișare

Instrumentele de dezvoltare ale Chrome: 3.11 | Consolă: Prezentare generală, execuție simplă a codului și ieșiri

Introducere în consolă și funcțiile sale fundamentale.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 3.12 | Accesarea elementelor DOM în consolă

Instrumentele de dezvoltare Chrome: 3.12 | Acces la elementele DOM în Consolă

Manipularea DOM-ului direct prin consolă.

Tutorial textului

Unelte pentru dezvoltatori Chrome: 3.13 | Snippets și măsurarea timpului în consolă

Instrumentele pentru dezvoltatori Chrome: 3.13 | Snippets și măsurarea timpului în consolă

Firimituri de cod reutilizabile și măsurători de performanță.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 3.14 | Gruparea și stilizarea înregistrărilor de loguri

Instrumentele de dezvoltare Chrome: 3.14 | Gruparea și stilizarea înregistrărilor de loguri

Ieșirile de jurnal pot fi modificate în culoare și font și pot fi grupate.

Tutorial textului

Instrumentele de dezvoltare Chrome: 3.15 | Alte metode utile de consolă

Instrumentele dezvoltatorului Chrome: 3.15 | Alte metode utile de consolă

Câteva funcții de consolă nu foarte des utilizate, dar totuși utile.

Tutorial textului

Analiză și optimizare a rețelelor

Instrumentele dezvoltatorului Chrome: 4.1 | Rețea: Prezentare generală a funcțiilor

Instrumentele pentru dezvoltatori Chrome: 4.1 | Rețea: Prezentare generală a funcțiilor

Analiza cererilor și a răspunsurilor din rețea.

Tutorial textului

Instrumentele de dezvoltare Chrome: 4.2 | Rețea: Limitare de viteză, Antete și Previzualizare

Instrumentele de dezvoltare Chrome: 4.2 | Rețea: Limitare, Antete și Previzualizare

Simularea conexiunilor de rețea lente și analizarea antetelor HTTP.

Tutorial textului

Optimizare performanță și memorie

Instrumentele de dezvoltare Chrome: 5.1 | Profiler - Evaluarea și optimizarea performanței

Instrumentele de dezvoltare Chrome: 5.1 | Profiler – Evaluarea și optimizarea performanțelor

Identificarea punctelor slabe de performanță în codul JavaScript.

Tutorial textului

Instrumentele de dezvoltare Chrome: 5.2 | Optimizarea utilizării memoriei cu ajutorul Memory Profiler

Instrumentele pentru dezvoltatori Chrome: 5.2 | Optimizează consumul de memorie cu ajutorul profilului de memorie

Analiza consumului de memorie și identificarea scurgerilor de memorie.

Tutorial textului

File de aplicații și alte instrumente

Instrumentele de dezvoltare Chrome: 6.1 | Instrumente utile și fila de redare a conținutului

Instrumentele de dezvoltare Chrome: 6.1 | Instrumente utile și fileul de redare

Alte instrumente pentru optimizarea performanței.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 6.2 | Vizualizarea și ajustarea animațiilor

Instrumentele de dezvoltare Chrome: 6.2 | Vizualizare și ajustare animații

Analiză detaliată a animațiilor CSS și tranzițiilor. Optimizarea performanței prin ajustarea funcțiilor de temporizare și a proprietăților.

Tutorial textului

Instrumentele de dezvoltare Chrome: 6.3 | Să investighezi resursele aplicației web cu fila de aplicație

Instrumentele de dezvoltare ale Chrome: 6.3 | Investigarea resurselor aplicației web cu fila de aplicații

Examinarea datelor stocate ale unei aplicații web cum ar fi Local Storage, Session Storage și IndexedDB. Optimizarea gestionării stocării.

Tutorial textului

Instrumentele pentru dezvoltatori Chrome: 6.4 | Folosiți extensia React Dev Tools

Instrumentele pentru dezvoltatori Chrome: 6.4 | Folosește extensia React Dev Tools

Introducere în adăugarea browser-ului React DevTools. Inspectarea structurii componentelor React, Props și State.

Tutorial textului

Setări

Instrumente pentru dezvoltatori Chrome: 7 | Cele mai importante setări ale instrumentelor de dezvoltare Chrome

Configurarea instrumentelor de dezvoltare pentru o activitate mai eficientă. Personalizarea temelor, scurtăturilor de tastatură și altor setări.

Tutorial textului

Instrumentele de dezvoltare ale altor browsere

Instrumentele de dezvoltare ale Chrome: 8.1 | Instrumentele pentru dezvoltatori MS Edge

Instrumentele de dezvoltare ale Chrome: 8.1 | Instrumentele de dezvoltare MS Edge

Foarte similar cu instrumentele de dezvoltare Chrome, dar există diferențe de detaliu.

Tutorial textului

Instrumentele de dezvoltare ale Chrome: 8.2 | Instrumentele de dezvoltare ale Firefox

Instrumentele pentru dezvoltatori Chrome: 8.2 | Instrumentele pentru dezvoltatori Firefox

Există diferențe semnificative, dar în principiu foarte similare.

Tutorial textului

Instrumentele de dezvoltare Chrome: 8.3 | Instrumentele Safari-DevTools

Instrumentele de dezvoltare ale Chrome: 8.3 | Instrumentele Safari-DevTools

Unele diferențe mai mari față de Chrome, dar și aici principiul rămâne același.

Tutorial textului

Detalii despre conținut

Optimizează-ți paginile web cu instrumentele de dezvoltare Chrome
Un site web fără erori, care se încarcă extrem de rapid și arată bine pe orice dimensiune de ecran?! Pentru a realiza acest lucru, trebuie să analizezi și să optimizezi codul paginilor tale. Instrumentele de Dezvoltare Chrome sunt perfecte în acest sens. Cu ajutorul lor vei identifica erorile din codul tău HTML, CSS și JavaScript. Mai mult, poți examina în detaliu performanța, fluxurile de cod și consumul de memorie. Folosește cunoștințele acumulate pentru a edita eficient paginile tale și în cele din urmă, prin intermediul debugging-ului și optimizării, să-ți crești vizibilitatea paginilor.
Cum să folosești eficient instrumentele de dezvoltare Chrome, vei afla în acest tutorial de peste șase ore susținut de dezvoltatorul de software și instructorul Stephan Haewß. Pornind de la conceptele de bază referitoare la Chrome DevTools și ajungând la tehnici avansate, vei obține o prezență curată și puternică a paginilor tale!

HTML, CSS, JavaScript – Debugging pentru pagini web curate, rapide, cu layout-uri optimizate

Cursul începe cu o Introducere în instrumentele de dezvoltare Chrome, disponibile direct în browser. Veți afla ce sunt DevTools și cum le puteți aplica fundamental. Ulterior, veți lucra cu fila Elemente, care vă permite să inspectați și să editați stilul, aspectul și design-ul paginilor dumneavoastră. Utilizând secțiunile Surse și Consolă, veți realiza un debugging al scripturilor. În plus, veți învăța cum să realizați o analiză a rețelei, a performanței și a optimizării consumului de memorie cu ajutorul instrumentelor de dezvoltare Chrome. În final, veți explora DevTools-urile altor browsere. Cursul este astfel potrivit pentru toți dezvoltatorii web care doresc să debugheze și să optimizeze pagini web folosind DevTools-urile Chrome.

Aplicarea eficientă a Chrome DevTools – conținutul tutorialului într-o privire generală

Introducere în instrumentele de dezvoltare Chrome: Cursul îți arată cum să deschizi DevTools, să navighezi și să folosești eficient funcțiile principale pentru editarea și remedierea erorilor din HTML, CSS și JavaScript.
Debugging al HTML și CSS: Cum poți utiliza Chrome DevTools pentru a investiga structura DOM a unei pagini web, a edita HTML și CSS direct în modul live pentru a rezolva imediat problemele de layout și erorile de stil CSS – optim pentru testarea și ajustarea rapidă a design-ului înainte de a efectua schimbările definitiv.
Debugging al JavaScript: Află cum poți încărca fișiere JavaScript, așeza breakpoint-uri și executa codul pas cu pas. Variabilele și obiectele pot fi inspectate în timp real, iar CallStack-ul facilitează urmărirea apelurilor de funcții – ideal pentru o căutare precisă a erorilor.
Utilizarea consolei: Consola DevTools-urilor Chrome permite deschiderea și analizarea log-urilor, executarea codului JavaScript și manipularea directă a elementelor paginii web. Prin afișarea log-urilor specifice, poți analiza și optimiza codul în detaliu, facilitând semnificativ debugging-ul și creșterea performanței.
Optimizarea performanței: Verifică cererile de rețea și timpii de încărcare, monitorizează utilizarea memoriei și identifică scurgerile de memorie. Prin optimizarea eficientă a performanței JavaScript și analiza detaliată a performanței aplicației, poți îmbunătăți eficient viteza de încărcare și gestionarea resurselor.
Tehnici avansate: Tab-ul Aplicație al Chrome DevTools îți oferă acces la stocarea web precum LocalStorage, IndexedDB și Cache, la fel cum poți gestiona și lucrul cu Workerii de Serviciu și Manifestele. De asemenea, poți integra extensii precum React-DevTools pentru a debuga mai bine aplicațiile reactive. Setările personalizabile oferă o configurare optimă a DevTools pentru cerințele de lucru individuale.