Šajā pamācībā parādīšu, kā efektīvi pārbaudīt un rediģēt vietnes DOM (Document Object Model ) struktūru , izmantojot Chrome izstrādātāja rīkus. Cilne Elementi ir jaudīgs rīks, kas palīdz jums saprast lapas HTML kodu, atlasīt elementus un mainīt to īpašības reāllaikā. Neatkarīgi no tā, vai esat tīmekļa izstrādātājs, dizaineris vai vienkārši ziņkārīgs, šīs zināšanas ir nepieciešamas, lai labāk analizētu un pielāgotu vietnes.
Galvenās atziņas
- Chrome izstrādātāja rīki piedāvā dažādus veidus, kā pārbaudīt HTML elementus, analizēt CSS stilus un veikt izmaiņas tiešraidē.
- Jūs uzzināsiet, kā atlasīt elementus, izprast DOM struktūras hierarhiju un pielāgot stilistiskās īpašības.
Soli pa solim
Piekļuve cilnei Elementi
Lai atvērtu cilni Elements (Elementi) pārlūkprogrammā Chrome Developer Tools, vienkārši noklikšķiniet ar peles labo pogu uz jebkura tīmekļa lapas elementa un izvēlieties "Izpētīt". Varat arī izmantot taustiņu kombināciju F12 vai Ctrl + Shift + I (Windows), vai Command + Option + I (Mac), lai atvērtu Izstrādātāja rīkus.
HTML elementa atlase
Ja vēlaties pārbaudīt konkrētu elementu, varat izmantot ātrās atlases funkciju. Noklikšķiniet uz ikonas ar punktētu taisnstūri (Izvēlieties elementu lapā, lai to pārbaudītu). Tas ļauj tieši noklikšķināt uz elementiem tīmekļa lapā.
Noklikšķinot uz elementa, tas automātiski tiks izcelts cilnē Elements (Elementi), un jūs varēsiet redzēt DOM struktūras hierarhiju.
DOM struktūras pārlūkošana
DOM struktūrā var redzēt elementu izvietojumu. Varat izvērst un sablīvēt elementus, lai uzzinātu vairāk par hierarhiju. Tas ir īpaši noderīgi, lai atpazītu saistītus elementus un to attiecības.
Bulttaustiņu izmantošana
Ērta funkcija ir iespēja pārvietoties uz augšu un uz leju, izmantojot bulttaustiņus, un izvēlēties dažādus elementus hierarhijā. Šī metode atvieglo DOM struktūras pārlūkošanu.
Konkrētu elementu meklēšana
Lai meklētu konkrētu saturu, varat izmantot funkciju "Meklēt". Nospiediet Ctrl + F (Windows) vai Command + F (Mac) un ievadiet meklēšanas frāzi. Tas ļauj ātri atrast attiecīgos elementus, piemēram, ID vai klases.
CSS stilu pārbaude
Tiklīdz esat izvēlējies elementu, pārslēdzieties uz elementu cilnes labajā pusē esošo apgabalu Stili. Šeit varat apskatīt visus CSS noteikumus, kas ir piemēroti izvēlētajam elementam. Augšpusē redzēsiet iebūvētos stilus, kam sekos ārējie CSS noteikumi.
Ja noklikšķināsiet uz konkrēta CSS noteikuma, jūs tiksiet novirzīts tieši uz stilu lapas vietu, kur šis noteikums ir definēts. Tas ir ļoti noderīgi, lai uzzinātu, no kurienes nāk konkrēti stili un kā tie ir strukturēti.
Izpratne par pārrakstītiem stiliem
Bieži gadās, ka daži CSS noteikumi tiek pārrakstīti. To var atpazīt pēc tā, ka tie ir parādīti pārsvītroti. Sadaļā Stili varat piekļūt sadaļai "Izrēķināts", lai redzētu, kurš stils galu galā ir piemērots elementam.
Veiciet tiešos pielāgojumus
Jūs varat viegli pielāgot CSS stilu vērtības. Noklikšķiniet uz vērtības, kuru vēlaties mainīt, un ievadiet jaunu vērtību. Rezultāts ir redzams uzreiz. Varat arī atcelt izmaiņas, noklikšķinot uz "X", kas parādās pie atsevišķiem CSS noteikumiem.
JavaScript konsoles izmantošana
Izstrādātāja rīkos ir pieejama arī konsole, kurā varat izpildīt JavaScript kodu. Tas ir noderīgi, lai veiktu dinamiskas izmaiņas tīmekļa vietnē un pārbaudītu, kā skripti reaģē uz dažādiem elementiem.
Kopsavilkums
Šajā pamācībā uzzinājāt, kā efektīvi izmantot Chrome izstrādātāja rīkus, lai pārbaudītu vietnes DOM struktūru. Jūs arī uzzinājāt, kā atlasīt elementus, analizēt CSS stilus un veikt tiešraides izmaiņas. Izmantojot šīs prasmes, jūs varat ievērojami uzlabot savu tīmekļa vietņu izstrādi un dizainu.
Biežāk uzdotie jautājumi
Kas ir Chrome izstrādātāja rīki? Chrome izstrādātāja rīki ir Google Chrome iebūvēti rīki, kas palīdz izstrādātājiem pārbaudīt, atkļūdot un optimizēt vietnes.
Kā es varu atlasīt konkrētu elementu?Jūs varat atlasīt elementu, uzklikšķinot uz tā ar peles labo pogu un izvēloties "Inspect" (Pārbaudīt) vai izmantojot atlases rīku cilnē Elements.
Ko nozīmē, ja CSS stils ir pārsvītrots? Pārsvītrots CSS stils nozīmē, ka šis stils ir aizstāts ar citu noteikumu, kas ir piemērots elementam.
Kā var mainīt CSS vērtības cilnē Elements (Elementi)?CSS vērtības var mainīt, noklikšķinot uz vērtības sadaļā Styles (Stili) un ievadot jaunu vērtību.
Kā uzzināt, kuri CSS noteikumi ir piemēroti elementam? Elementu cilnes sadaļā Elements (Elementi) sadaļā Styles (Stili) varat redzēt visus piemērotos CSS noteikumus un noklikšķiniet uz "Computed" (Izrēķināts), lai redzētu galīgās vērtības, kas faktiski tiek izmantotas.
