Šajā rokasgrāmatā saņemsi pilnīgu ieskatu par Chrome Developer Tools. Šie rīki ir būtiski tīmekļa attīstītājiem, jo tie piedāvā dažādas vērtīgas funkcijas, kas palīdz analizēt un veikt atkļūdošanu taviem tīmekļa vietnēm. Mēs sākam ar pamatiem un pakāpeniski vedam tevi caur dažādajiem paneļiem un to funkcionalitātēm.
Svarīgākās atziņas
- Chrome Developer Tools piedāvā dažādus paneļus, kas palīdz pārbaudīt un atkļūdot taviem tīmekļa vietnes HTML, CSS un JavaScript.
- Katram paneļam ir specifiskas funkcijas, kas būtiski vienkāršo tīmekļa vietņu analīzi.
- Tu vari atlasīt un rediģēt elementus tieši no skata un redzēt nekavējoties veiktās izmaiņas.
Pakāpeniska vadlīnija
1. solis: Atvērt Chrome Developer Tools
Sākumā ir jāatver Chrome pārlūkprogramma. Lai sāktu Developer Tools, ir vairākas iespējas. Vienkārši nospied F12 taustiņu savā tastatūrā. Cita metode ir izmantot kombināciju Command + Shift + C (Mac) vai Ctrl + Shift + C (Windows). Rīkus var atvērt arī ar labo peles klikšķi uz tīmekļa vietnes un izvēloties "Pārbaudīt".
2. solis: Pielāgot skatu
Kad esi atvēris Developer Tools, vari pielāgot loga skatu. Izmantojot trīs punktus Developer Tools augšējā labajā stūrī, vari mainīt skatu vai atvērt kā atsevišķu logu. Atverot rīkus atsevišķā logā, tos var viegli pārvietot uz otro monitoru, lai iegūtu vairāk vietas.
3. solis: "Elementi" paneļa izmantošana
"Elementi" panelis ir sadaļa, kurā vari redzēt taviem tīmekļa vietnes HTML struktūru. Šeit tiek rādīti visi DOM elementi hierarhiskā kārtībā. Tu vari pārvietoties ar peli pār katru elementu un redzēt to izmērus un pozīcijas uz vietnes. Elementu hierarhiju vari paplašināt vai samazināt, noklikšķinot uz bultiņām.
4. solis: Pārbaudīt stilus
Kad esi izvēlējies HTML elementu "Elementi" skatā, labajā pusē vari redzēt saistītos CSS stilus. Šie stili ir sadalīti dažādos sadaļās: deklarētajos stilos un aprēķinātajos stilos. Tu vari pat pievienot savus CSS noteikumus un redzēt izmaiņas reālajā laikā. Zem "Izkārtojums" cilnes vari iegūt informāciju par izmēriem, atkāpumiem un malām.
5. solis: Izmantot "Konsoli" paneli
"Konsole" panelis ir ļoti daudzfunkcionāls un nepieciešams dažādos izstrādes scenārijos. Šeit vari manuāli izpildīt JavaScript komandas, uzraudzīt žurnālu izvades un aplūkot kļūdu žurnālus. Atverot konsoles logu, redzēsi visus taviestradātās vietnes ģenerētos žurnālus. Nospied Escape taustiņu, lai pēc vajadzības slēgtu vai atvērtu konsoli.
6. solis: Atkļūdot avota koda ar "Avoti"
Sekojot "Avoti" panelim, vari apskatīt savas projekta avotkoda failus un veikt atkļūdošanu pēc vajadzības. Vari izvietot pārtraukuma punktus, lai pakāpeniski pārskatītu savu lietojumprogrammu. Tas ir īpaši noderīgi, lai precīzi pārbaudītu savu koda darbību un atrastu kļūdas. Failu struktūra šeit ir izveidota līdzīgi kā integrētās attīstības vides redaktorā.
7. solis: Uzraudzīt tīkla aktivitāti
"Tīkla" panelis rāda visus resursus, kas tiek iegūti tīmekļa vietnes ielādes laikā caur tīklu. Pēc lapas atsvaidzināšanas redzēsi atsevišķas pieprasījumus, to ielādes laikus un atbildes kodiem. Šeit vari arī deaktivizēt kešatmiņu, lai pārliecinātos, ka redzi jaunākos un nekešotus datus.
8. solis: Veikt veiktspējas un atmiņas izmantojuma pārbaudi
"Veiktspējas" cilnē vari analizēt savas lietojumprogrammas veiktspēju un veikt profilēšanas uzņēmējdarbību, lai analizētu skriptu ātrumu un renderēšanas laikus. "Atmiņas" panelī vari redzēt tīmekļa vietnes atmiņas patēriņu un identificēt atmiņas noplūdumus, salīdzinot veiktos momentuzņēmumus un to izmantošanu.
9. solis: Pieteikumu saglabāšana pārbaudīt
"Pieteikumu" panelis ir svarīgs, lai uzraudzītu dažādas web lietotnes saglabāšanas iespējas, tostarp "locale storage", "session storage" un sīkdatnes. Šeit jūs varat skatīt pieteikuma pārlūkprogrammas vispārējo atmiņu, it sevišķi to, kas ir saglabāts vietēji klientā.
10. solis: Drošības un optimizācijas norādījumi
Beigās "Drošības" panelis sniedz pārskatu par jūsu tīmekļa vietnes drošības aspektiem, kamēr "Veiktspējas padomi" panelis dod jums ieteikumus par jūsu vietnes optimizāciju, lai uzlabotu ielādes ātrumu un lietotājam draudzīgumu.
Kopsavilkums
Šajā ceļvedī jūs esat ieguvuši visaptverošu ieskatu Chrome izstrādātāja rīku galvenajās funkcijās. Tagad jūs zināt, kā atvērt rīkus, izmantot dažādus paneļus un veikt specifiskas taktikas, piemēram, praktiskās nodarbības un veiktspējas analīzes. Šie zināšanas, ko šeit esat ieguvuši, ir pamatnes efektīvai tīmekļa izstrādei.
Bieži uzdotie jautājumi
Kā varu atvērt Chrome izstrādāja rīkus?Chrome izstrādāja rīki var tikt atvērti, nospiežot F12, Command + Shift + C (Mac) vai Ctrl + Shift + C (Windows).
Kas tiek rādīts "Console" panelī?"Console" panelis rāda žurnāla ierakstus, kļūdu žurnālus, un ļauj jums manuāli izpildīt JavaScript komandas.
Kā es varu pielāgot izstrādātāju rīku skatu?Jūs varat pielāgot izstrādātāju rīku skatu sadalītā ekrāna režīmā vai atsevišķā logā un pielāgot otrajam monitoram.
Ko parāda "Tīkla" panelis?"Tīkla" panelis rāda visus tīkla aktivitātes, ielādes laikus un atbildes kodus, kad sazinās ar serveri.
Kā es varu pārbaudīt manas vietnes veiktspēju?Ar "Veiktspējas" cilni, jūs varat saglabāt un analizēt veiktspējas profilus, kamēr "Atmiņas" panelis palīdz identificēt atmiņas problēmas.
