Šajā pamācībā tu iemācīsies, kā ar Chrome Developer Tools (DevTools) rediģēt tīmekļa lapas HTML struktūru. Šie praktiskie rīki ļauj tev vērot izmaiņas tīmekļa lapas struktūrā un izskatās reāllaikā. DevTools piedāvā daudzas funkcijas, kas atvieglo tīmekļa lapu izstrādi un debugošanu. Šajās pamācībās īpaši pievērsīsimies HTML un DOM (Document Object Model) rediģēšanai.
Svarīgākās atziņas
- Chrome Developer Tools ļauj veikt plašas izmaiņas HTML un DOM.
- Tu vari dublēt HTML elementus, mainīt to tekstu, pievienot vai noņemt atribūtus, un pat pielāgot elementa stilu.
- Šīs izmaiņas nav pastāvīgas un palīdz testēt un debugot tīmekļa lapas.
Pēc solīti
Sākumā pārliecinies, ka atverami Chrome Developer Tools. To vari izdarīt, noklikšķinot uz lapas ar labo peles taustiņu un izvēloties "Pārbaudīt" vai izmantojot kombināciju Ctrl + Shift + I (Windows) vai Cmd + Option + I (Mac).
Elementu dublēšana
Elementa dublēšanai uz Elementi cilniem DevTools ar labo peles taustiņu nokliŗčķini uz vēlamo elementu un izvēlies opciju "Dublēt elementu". Tas nokopēs visu elementu, ieskaitot visus stilus.
Ķermeņa un visa struktūra
Tu vari arī piekļūt body elementam un veikt izmaiņas visā lapā. Lai rediģētu body taga saturu, vienkārši izvēlies elementu un pielieto iepriekš minētās tehnikas.
Pielietot izmaiņas
Svarīgi ir atzīmēt, ka visas izmaiņas, ko veicat izmantojot Attīstītāja rīkus, ir pagaidu rakstura. Atsvaidzinot lapu, visas pielāgojumi zudīs. Tāpēc ir ieteicams nokopēt rediģēto kodu un saglabāt savā projektā, ja vēlaties saglabāt izmaiņas.
Kopsavilkums
Šajā pamācībā esi iemācījies, kā izmantot Chrome Attīstības rīkus, lai rediģētu HTML un DOM. Tu vari dublēt elementus, modificēt HTML, pievienot un dzēst atribūtus, kā arī kontrolēt elementu redzamību. Šīs funkcijas ir īpaši noderīgas lapu kļūdu novēršanai un tīmekļa lapu izstrādei.
Bieži uzdotie jautājumi
Kā es varu atvērt Chrome Attīstības rīkus?Atveriet Attīstības rīkus, veicot labo klikšķi uz tīmekļa lapas un izvēloties "Pārbaudīt" vai izmantojot Ctrl + Shift + I (Windows) vai Cmd + Option + I (Mac).
Vai izmaiņas ir pastāvīgas?Nē, izmaiņas, ko veicat Attīstības rīkos, ir pagaidu rakstura un pazudīs, atsvaidzinot lapu.
Vai es varu pievienot vairākas rindas teksta?Jā, izmantojot -Tagus HTML, lai ievietotu jaunas rindas.
Ko darīt, ja vēlos izdzēst elementu?Noklikšķiniet ar labo peles taustiņu uz elementa un izvēlieties "Dzēst".
Kā uzstādīt Hover stāvokli?Noklikšķiniet ar labo peles taustiņu uz elementa un izvēlieties "Piespiest stāvokli" > "hover", lai parādītu Hover efektu.
