Inspect Element un Developer Tools pamati

Vai jums kādreiz ir gribējies īslaicīgi rediģēt lapu, lai redzētu, kā tā izskatītos ar noteiktām krāsām, fontiem un tā tālāk?

Tas ir iespējams, izmantojot jau jūsu pārlūkprogrammā esošo rīku Inspect Element. Tas ir īsts sapnis visiem lietotājiem, kuri vēlas paši pielāgot vietnes. Šajā rakstā jūs uzzināsiet Inspect Element izmantošanas pamatus un to, kā ar to strādāt.

Kas ir Inspect Element vai Developer Tools

Mūsdienu pārlūkprogrammas, piemēram, Google Chrome, Mozilla Firefox, Edge un Safari ir aprīkotas ar iebūvētiem rīkiem, kas ļauj tīmekļa izstrādātājiem sekot līdzi kļūdām un rediģēt elementus. Šie rīki parāda HTML, CSS un JavaScript kodu, kā arī to, kā pārlūkprogramma apstrādā šo kodu. Ar šiem rīkiem jūs varat redzēt, kā jūsu vietne izskatīsies pēc veiktajām korekcijām, neieliekot izmaiņas pašā vietnē.

Autori arī novērtēs šo rīku, jo tas ļauj viegli mainīt personisko informāciju pirms ekrānuzņēmuma uzņemšanas — vairs nav jāzaudē laiks konfidenciālo datu aizsegošanai Photoshop. Savukārt tehniskās atbalsta aģentiem tas ir lielisks veids, kā atrast kļūdas, kas ietekmē vietnes pareizu attēlošanu.

Šajā rakstā mēs aplūkosim Inspect Element darbību Google Chrome, jo tas ir mūsu iecienītākais pārlūks.

Inspektora palaišana un koda meklēšana

Jūs varat palaist koda inspektoru, izmantojot taustiņu kombināciju Ctrl + Shift + I. Kā alternatīvu varat klikšķināt jebkur lapā un izvēlēties “Inspect” no pārlūkprogrammas izvēlnes.

Jūsu pārlūks tiks sadalīts divos logos, apakšējā logā tiks rādīts avota kods. Izstrādātāja kods arī tiek sadalīts divos logos. Pa kreisi jūs redzat HTML, pa labi — CSS noteikumus.

Pa kreisi redzat HTML, pa labi — CSS noteikumus

Kad novietojat peles rādītāju uz HTML avota, jūs redzēsiet, ka izvēlētā zona ir izcelta lapā. Jūs arī redzēsiet, ka CSS noteikumi mainās, lai parādītu CSS elementam, ko apskatāt.

Izvēlētā zona

Jūs varat arī vienkārši novietot peles rādītāju uz jebkura lapas elementa, klikšķināt ar labo taustiņu un izvēlēties “Inspect”. Izvēlētais elements tiks izcelts avota kodā.

Koda rediģēšana un atkļūdošana Inspect Element

Abi logi Inspect Element ir rediģējami. Varat veikt dubultklikšķi jebkurā vietā un rediģēt kodu.

Varat arī veikt dubultklikšķi un rediģēt jebkurus atribūtus un stilus CSS logā. Lai pievienotu savu noteikumu, klikšķiniet uz plusa ikonas vai nedaudz zem pēdējā noteikuma.

Tiklīdz veiksiet izmaiņas kodā, tās uzreiz parādīsies pārlūkprogrammā. Taču atcerieties, ka pēc lapas atsvaidzināšanas (refresh vai F5) visas izmaiņas, ko veicāt ar Inspect Element, pazudīs.

Ņemiet vērā, ka jūsu izmaiņas nekur netiek saglabātas. Inspect Element ir tikai atkļūdošanas rīks, tas neveic izmaiņas jūsu servera failos. Tas nozīmē, ka, ja atsvaidzināsiet lapu, visas izmaiņas pazudīs. Lai izmaiņas paliktu jūsu vietnē, jums būs jārediģē jūsu WordPress tēmas faili.

Vieglā kļūdu atrašana savā vietnē

Inspect Element rīkam ir sadaļa Console, kas parāda visas jūsu vietnē esošās kļūdas. Pirms veicat atkļūdošanu vai lūdzat palīdzību spraudņa autoriem, vienmēr ir noderīgi paskatīties šeit, lai labāk izprastu kļūdas būtību.

Piemēram, ja esat OptinMonster lietotājs un neizprotiet, kāpēc jūsu optin neielādējas, jūs viegli varat atrast kļūdu “your page slug does not match”. Ja jūsu sharebar nedarbojās pareizi, jūs varat pamanīt JavaScript kļūdu. Rīki kā Inspect Element un SupportAlly palīdzēs saņemt efektīvāku atbalstu. Jebkura atbalsta dienests novērtē klientus, kuri rīkojas patstāvīgi un sniedz maksimāli daudz detaļu par problēmu.

Un tas ir tikai neliels daļa no tā, ko var paveikt ar tik jaudīgu rīku kā Inspect Element. DevTools ietver cilnes un rīkus, piemēram, Lighthouse, kas ļauj pārbaudīt veiktspēju, SEO un Core Web Vitals, kā arī tīkla pieprasījumu analīzes (Network) un veiktspējas profilēšanas (Performance) rīkus. Šīs iespējas palīdz atklāt vietnes ātruma un struktūras šaurās vietas, padarot to ātrāku un ērtāku lietotājiem.

Mūsu specializācija — WordPress vietņu izstrāde un uzturēšana. Kontakti bezmaksas konsultācijai — [email protected], +371 29394520