Chrome DevTools ir viens no lielākajiem iemesliem, kāpēc izstrādātāji atsakās pieskarties nevienai citai pārlūkprogrammai.
Taču lielākā daļa no mums izmanto tikai nedaudzas funkcijas, neņemot vērā daudz vairāk prātu satriecošu funkciju, kas tiek izlaistas klusi.
Atklāsim dažus no šiem slēptajiem dārgakmeņiem!
Ikvienam ir sava iecienītākā operētājsistēma, aparatūras platforma, ierīces veids, ierīces formas faktors utt. Taču viena lieta ir kopīga visiem — viņi izmanto pārlūkprogrammu Chrome un tikai pārlūkprogrammu Chrome! Es domāju, ka var droši teikt, ka pārlūkprogrammu kari ir beigušies, un Chrome ir pārliecinoši uzvarējis.
Windows lietotāji noklusējuma pārlūkprogrammu izmanto tikai Chrome lejupielādei un pēc tam izmanto pārlūku Chrome, ignorējot visus Windows “ieteikumus”. Tas pats attiecas uz Apple ierīcēm (īpaši MacBooks un lielāka ekrāna ierīcēm), kurās lietotāji un izstrādātāji izvairās no Safari, neskatoties uz Apple daudzajiem stingrajiem apgalvojumiem un konversijas taktiku.
Un, ja ierīcē nedarbojas pārlūks Chrome, pastāv liela iespēja, ka tajā darbojas ar Chrome saderīgs papildu savienojums, piemēram, Drosmīgs vai Vivaldi. Jā, es zinu, tehniski šīs pārlūkprogrammas nav balstītas uz Chrome, bet tā ir cita diskusija. Vidējais lietotājs var izmantot šīs citas pārlūkprogrammas ideoloģisku vai īpašu iemeslu dēļ, taču, runājot par izstrādātājiem, nav citu pārlūkprogrammu, izņemot Chrome.
Pat tas, ka tas ir atmiņas ēdošs briesmonis, tiek ignorēts. Iemesls ir vienkāršs: Chrome DevTools.
Attēla avots: oficiālie Chrome DevTools dokumenti
Tagad, lasot šo rakstu, var droši pieņemt, ka esat prasmīgs lietotājs, gudrinieks, tīmekļa izstrādātājs vai kaut kas līdzīgs šim mērķim. Tādējādi nevienam no mums nav nepieciešams ievads par DevTools, kā to atvērt, tā dažādajām funkcijām utt.
Tā vietā, netērējot laiku, iedziļināsimies dažās mazāk zināmās, bet pārsteidzoši noderīgās Chrome DevTools funkcijas.
Dizaina režīms
Viena no lietām, ko izstrādātāji regulāri dara, ir lapas elementa pārbaude un pēc tam tā HTML modificēšana, lai kaut ko priekšskatītu vai pārbaudītu izmaiņu ietekmi.
Tomēr darbs ar HTML tieši programmā DevTools nav pats vienmērīgākais — jābrien cauri tagu zupai, sasprindzina acis, mēģinot atrast pareizo atvēršanas/aizvēršanas iekava, un teksta rediģēšanas laikā tiek izmantots smieklīgs atstarpju daudzums (baltstarpes, kas redzamajā dokumentā nepārprotami trūkst), ir dažas no problēmām, ar kurām jūs varat saskarties. Tas ir vēl trakāk, ja esat dizainers un nevēlaties izsijāt bardaku.
Šeit ir ekrānuzņēmums no vienas no šīs vietnes (pcdream.lt) lapām:
Dziļi ligzdots HTML un noslēpumainās, mulsinošās CSS klases mūsdienās ir raksturīgas jebkurai nenozīmīgai vietnei, kur pieredze ar DevTools ir maigi izsakoties neoptimāla. 🤭
Bet ir DevTools funkcija, ko sauc par dizaina režīmu, kas daudzos gadījumos var mazināt sāpes. Izmantojot dizaina režīmu (tas, starp citu, nav oficiālais nosaukums; tas ir tikai tas, kā cilvēki to ir nosaukuši tāpēc, ka tas tiek aktivizēts un ko tas dara — neuztraucieties, mēs to redzēsim pavisam drīz!) lapu var izveidot vizuāli un dzīvot, tāpat kā rediģēt izklājlapu vai teksta redaktoru! Vienīgā problēma ir tāda, ka šī funkcija nav ieslēgta pēc noklusējuma, un tās aktivizēšana ir nelielas galvassāpes, jo īpaši tiem, kas nav izstrādātāji.
Jebkurā gadījumā to izdarīt ir pavisam vienkārši; viss, kas jums jādara, ir sekot tālāk sniegtajiem norādījumiem. Atkarībā no tā, kur atrodaties lietotāja sarežģītības līknē, tas var būt smieklīgi viegli vai vidēji sarežģīti. Tālāk ir norādīts, kā rīkoties.
- Pārliecinieties, vai ir ielādēta tīmekļa lapa, kuru vēlaties rediģēt, un vai jūs to pašlaik skatāt (tas ir, attiecīgā cilne ir aktīvā).
- Atveriet DevTools paneli, kā to darāt parasti (īsinājumtaustiņš, peles klikšķi, jebkas). Man patīk izmantot īsinājumtaustiņus, un operētājsistēmā Mac Opt + Cmd + I paveic šo darbu.
- Tagad, kad DevTools ir atvērts, dodieties uz cilni “Console”. Iespējams, daži no jums skatās, cik muļķīgi un pašsaprotami tas viss šķiet, taču padomāsim arī par (simtiem?) tūkstošiem cilvēku, kuriem ir grūtības, strādājot ar pārlūkprogrammas konsoli un JavaScript (kādu iemeslu dēļ). ).
- Noklikšķiniet uz pirmās rindas blakus kursoram, kas pēc tam parādīs ierakstīšanas uzvedni, un tagad varat tur ierakstīt JavaScript kodu (skatiet ekrānuzņēmumu nedaudz tālāk).
- Tagad mums ir jāraksta JavaScript kods. Neuztraucieties, jo tas, kas jums jāraksta/ievada, ir ļoti īss un vienkāršs: document.designMode = “ieslēgts”. Varat arī kopēt un ielīmēt kodu no šīs lapas (ja to darāt, pārliecinieties, ka formatējums netiek kopēts — mums ir nepieciešams tikai vienkāršs teksts) vai, ja jūtaties pārliecināts, ierakstiet to.
- Nospiediet Enter/Return.
„Tieši tā??!”
Jā, tas arī viss!
Tagad jūs varat brīvi rediģēt lapu tā, it kā tā būtu dokuments. Apskatiet šo video piemēru, kurā es tiešraidē rediģēju Spotify vietni, izmantojot dizaina režīmu:
Dizaina režīma funkcija, lai arī cik aizraujoša tā ir, nav sudraba lode; jūs nevarat, piemēram, viegli kopēt-ielīmēt pogas, mainīt to izskatu utt. Faktiskais lietu skaits, ko tas var paveikt, salīdzinot ar sapņu vizuālo tīmekļa lapu redaktoru, ir ļoti mazs; tomēr tas atrisina lietošanas gadījumus, kad saturs ir jāmaina vizuāli un lidojumā.
Tas nozīmē, ka nav pārāk tālu apgalvot, ka Chrome ļaudis pārbauda, cik labi šī funkcija tiek uztverta; ja tas atradīs labu uztveršanu un spēcīgu lietošanas gadījumu, ir saprātīgi sagaidīt, ka drīzumā parādīsies jaudīgākas rediģēšanas iespējas! 🤞🏻🤞🏻
Tīkla apstākļu simulācija
Chrome DevTools cilne Tīkls, iespējams, ir visplašāk izmantotā (man, protams, par to nav datu, taču kā tīmekļa izstrādātājs es mēdzu izmantot cilni Konsole 20–30% laika, un cilne Tīkls pārējā laikā). Tas sniedz mums visu veidu informāciju par pieprasījumiem, kas tiek veikti no lapas, to veidu, metadatiem/galvenēm, statusu, līdzekļu (attēlu, stila lapu utt.) lejupielādes gaitu, ielādes laikiem un tā tālāk. Ar tik neticamu lietderību nav brīnums, ka cilne Tīkls ir visizplatītākā.
Un tomēr ir vienkārši palaist garām funkciju, par kuru mēs runājam; jūs, iespējams, neesat pamanījis nekaitīgu nolaižamo izvēlni, kurā ir norādīts acīmredzamais: tiešsaistē.
Noklikšķinot uz šīs pogas, tiks parādīta nolaižamā izvēlne ar dažādām opcijām, kas ļauj samazināt tīkla ātrumu: ātrs 3G, lēns 3G, bezsaistē utt. Lai gan šai opcijai var būt dažādi lietošanas gadījumi, visizplatītākā ir vietnes pārbaude. veiktspēja lēnos tīklos vai tīmekļa lietotņu darbība bezsaistē (pieņemot, ka šādas iespējas ir pievienotas).
Apskatīsim šo. Es iestatīšu tīklu uz “Lēns 3G” un atkārtoti ielādēšu to pašu lapu no iepriekšējā ekrānuzņēmuma. Pirms to daru, ievērojiet iepriekšējā ekrānuzņēmumā, kā manā pašreizējā tīkla savienojumā (40 Mb/s platjoslas savienojums) lielākā daļa līdzekļu tiek lejupielādēti mazāk nekā 100 milisekundēs.
Un tagad ir laiks redzēt, ko lēnais 3G dara ar to.
Kāda starpība!
Ņemiet vērā, ka līdzekļu ielādes laiks tagad ir 5–10 sekunžu diapazonā. Turklāt vietne tika pilnībā ielādēta 17,25 sekundēs! Jā, es zinu, ko jūs domājat, taču jāņem vērā, ka lēnā 3G tīklā jebkuras modernas vietnes ielāde prasīs vairākas sekundes. Tas, vai vēlaties ātru ielādi lēnos tīklos, ir cita lieta, lai gan kopumā tam ir jābūt biznesa lēmumam, kurā peļņa attaisno pūles.
Iepriekš redzamajā ekrānuzņēmumā ievērojiet brīdinājuma ikonu cilnē Tīkls. Šādi pārlūks Chrome atgādina, ka esat veicis dažas pastāvīgas izmaiņas, kas nav noklusējuma iestatījums, un, ja vien nezināt, ko darāt, iespējams, tās vajadzētu atiestatīt.
Interaktīvs krāsu atlasītājs
DOM elementu pārbaude programmā DevTools ir tas, ko mēs visi darām gandrīz katru dienu. Mēs esam pieraduši arī pie blakus redzamās CSS informācijas sadaļas, un zinām, ka varam to rediģēt un uzreiz redzēt rezultātus.
Viena no šīm ērtībām ir tāda, ka, noklikšķinot uz CSS krāsu rekvizīta, tiks parādīts pazīstams krāsu atlasītāja interfeiss!
Ievērojiet, ka tas nav tukšs, pamata krāsu atlasītājs. Tas ļauj kontrolēt caurspīdīgumu, mainīt izmantotās krāsu sistēmas, izvēlēties krāsu tieši no lapas un daudz ko citu.
Tātad, nākamreiz, kad eksperimentējat, piemēram, ar vietnes akcentu krāsām, jums nav jāizstrādā vai jāmin īstā toņa vērtība, kuru jūs domājat! Patiesībā daudziem cilvēkiem patīk veidot vietnes tieši pārlūkprogrammā; viņiem tādas funkcijas kā šīs ir Dieva dāvana! 🙂
Notikumu uzraudzība lapā elementi
Mēs bieži atrodamies situācijā, kad vēlamies zināt, kas notiek ar konkrēto mūs interesējošo elementu. Tas jo īpaši attiecas uz jQuery izmantošanu netriviālā kodu bāzē — gan jūsu, gan citu; notikumu apstrādātāji un loģika ir izplatīti visur, un kļūdas izsekošana var būt murgs.
Par laimi, Chrome DevTools ir lieliska funkcija tieši šim nolūkam. Tas novēros norādīto elementu jūsu vietā un reģistrēs notikumus konsolē. Taču ir neliela vilšanās: šai funkcijai nav elementu atlases iespēju, pamatojoties uz CSS klašu nosaukumiem. Tātad jQuery veids $(“#email”) nav pieejams. 🙂
Ņemot to vērā, redzēsim, kā to panākt. Mēs sākam, veicot vienkāršu “pārbaudes elementu”, izmantojot DevTools inspektoru. Jā, tas ir tas pats pārbaudes rīks, ko mēs izmantojam katru dienu.
Tālāk esošajā ekrānuzņēmumā es izmantoju inspektora rīku, lai izceltu teksta ievadi. Ar “izcelt” es nedomāju, ka elements lapā ir izcelts (tā nav, kā redzat); drīzāk inspektora kursors tika noklikšķināts uz teksta ievades, un tiek iezīmēts atbilstošais HTML kods rīkā DevTools.
Veicot šo darbību, tiek atlasīts pašreiz pārbaudītais notikumu uzraudzības elements, kas padara elementu pieejamu kā īpašu JavaScript mainīgo ar nosaukumu $0. Pēc tam, pārliecinoties, ka neuzmanīgi neklikšķinu citur pārlūkprogrammas logā (īpaši HTML koda daļā), es noklikšķiniet uz konsoles un pievienoju notikumu uztvērēju šai teksta ievadei. Šim nolūkam man ir nepieciešama tikai viena koda rindiņa: monitorEvents ($0, ‘pele’). Šeit esošā “peles” daļa norāda pārlūkam Chrome, ka mani interesē tikai ar peli saistītu notikumu skatīšanās.
Tiklīdz es nospiežu taustiņu Enter/Return, uzraudzība tiek aktivizēta, un, ja tagad virzu kursoru virs teksta ievades vai noklikšķinu uz tās, šie notikumi tiek reģistrēti konsolē kā JavaScript objekti:
Kā redzat ekrānuzņēmumā, tika fiksēti vairāku veidu peles notikumi, kad es noklikšķināju uz elementa, ierakstīju savu vārdu un pēc tam pārvietoju peli (rakstīšanas notikumi, kas ir tastatūras notikumi, netika reģistrēti). Notikumi paši par sevi ir JavaScript objekti, kā redzams ekrānuzņēmumā; katrs notikuma objekts satur milzīgu daudzumu informācijas. Piemēram, es paplašināju notikuma objektu “klikšķis”, un rekvizītu skaits nevarēja iekļauties vienā ekrānuzņēmumā!
Es ļoti iesaku jūs nekavējoties izmēģināt šo funkciju, jo tā noteikti ietaupīs jums daudz galvassāpju jūsu gaidāmajos projektos!
Vietnes veiktspējas pārskati
Mūsdienās vietņu veiktspēja veido vai sagrauj uzņēmumu/vietni. Pat neliels veiktspējas pieaugums nozīmē milzīgu SEO pieaugumu, kā arī lietotāju apmierinātību. Bet kā zināt, kurām jūsu vietnes daļām jāpievērš uzmanība un kuras jau ir labas?
Vai jums ir jānoalgo ekspertu komanda un pacietīgi jāgaida dažas dienas?
Ir gadījumi, kad tas ir jādara, taču, par laimi, Chrome DevTools ir nodrošināts ar citiem. Jaunākajās Chrome versijās (2020. gada beigās) izstrādātāju rīkos ir cilne Lighthouse. Dažus mēnešus atpakaļ to sauca Audits, un mulsinoši tas ir nosaukums, ko jūs atradīsit oficiālajos dokumentos pēc rakstīšanas. Jebkurā gadījumā lieta ir tāda, ka Lighthouse agrāk bija moderna vietne, lai bez maksas pārbaudītu vietnes veiktspēju, taču pēc tam Google to noņēma (iemesli netika sniegti). Par laimi, tā pati jaudīgā funkcionalitāte vēlāk atkal parādījās DevTools.
Lai izveidotu veiktspējas pārskatu, viss, kas jums jādara, ir jānospiež viena poga pēc tam, kad ir ielādēta jūs interesējošā lapa:
Kā redzat ekrānuzņēmuma labajā pusē, ir dažas iespējas, lai kontrolētu, cik daudz informācijas vēlaties (un, protams, ko vēlaties pārbaudīt). Kad esat apmierināts ar iestatījumiem, nospiediet lielo zilo pogu, apsēdieties un atpūtieties. Pēc dažām sekundēm jums būs izdevīgs ziņojums, kas izskatīsies apmēram šādi:
Iepriekš redzamajā ekrānuzņēmumā redzamie skaitļi parāda katras kategorijas kopējo punktu skaitu. Progresīvo tīmekļa lietotņu (PWA) kategorija ir pelēkota, iespējams, tāpēc, ka šai vietnei nav PWA iespēju. Turklāt, kā jūs varat saprast pēc ritjoslas izmēra ekrānuzņēmumā (labajā pusē), tas ir garš ziņojums.
Lūk, kā izskatās daļa no sadaļas par veiktspēju:
Es neapgalvos, ka Lighthouse un tās ieteikumi ir vietnes veiktspējas svētais grāls, taču tie ir ārkārtīgi noderīgi; Tas ir tāpēc, ka vietņu īpašnieki un izstrādātāji reti zina, kādas problēmas pastāv un kā tās precīzi risināt.
Godīgi sakot, pat es jūtos apmaldījies kā tīmekļa izstrādātājs, jo veiktspēja un testēšana mēdz būt sava veida specializācijas. Kā tāds Lighthouse ir mazpazīstams, nenovērtēts rīks, kas tagad ir daļa no Chrome DevTools un kas ir ļoti noderīgs gan uzņēmumu īpašniekiem, gan izstrādātājiem/sistēmu administratoriem.
Koda rediģēšanas prasme
DevTools cilne Avoti ļauj mums piekļūt dažādiem vietnes ielādētiem failiem. Tam ir arī tādas iespējas kā koda rediģēšana, fragmentu saglabāšana utt. Tīmekļa izstrādātājiem tas nav pārsteigums. Tomēr DevTools ir arī iebūvētas dažas ērtības, kas atvieglo dzīvi izstrādātājiem, kuri pieraduši pie iecienītākā koda IDE.
DevTools izmanto dažus labi zināmus tastatūras īsinājumtaustiņus, kas ietaupīs jūsu laiku un līdz minimumam samazinās neapmierinātību ar kodu. Piemēram, Ctrl + D (vai Cmd + D operētājsistēmā Mac) var izmantot, lai izceltu vairākus vārda gadījumus. Tāpat, turot nospiestu taustiņu Ctrl (vai Cmd operētājsistēmā Mac) un noklikšķinot vairākās koda vietās, tiek parādīti vairāki kursori. Lai iegūtu labāku priekšstatu, skatiet tālāk esošo videoklipu:
Ja uzskatāt, ka tas ir forši, noteikti iedziļinieties oficiālajos dokumentos, lai izmantotu visas DevTools piedāvātās koda rediģēšanas funkcijas.
Kontrolējiet DOM elementa stāvokli
Dažkārt mēs kaut ko pārbaudām vai atkļūdojam, taču mūsu meklētā darbība ir pieejama tikai noteiktā elementa stāvoklī. Atkarībā no tā, kādā stāvoklī tas ir, jums var būt šausmīgs laiks; man tas ir “virzīšanas” stāvoklis, jo atceros, ka tērēju neskaitāmas minūtes, mēģinot noteikt laiku, kad tiek rādīta kursora novietošana, vai uzklikšķinot uz papildu, pagaidu CSS utt.
Par laimi, Chrome DevTools piedāvā vienkāršu veidu, kā mainīt pārbaudītā elementa stāvokli. Turklāt ir iespēja to izdarīt, ja ar peles labo pogu noklikšķinām uz elementa (cilnē Elementi), taču, ņemot vērā funkciju skaitu un ikdienas darba slodzi, ir viegli neievērot šo:
Jā, tas tiešām ir tik vienkārši!
Tagad, novērojot elementu citā stāvoklī, jums nav jāiekļauj nosacījuma testēšanas loģika savā kodā, jāraksta papildu CSS vai jālec cauri citiem stīpiem.
Rīku panelis
Pēdējais, bet noteikti ne mazāk svarīgais šajā sarakstā ir rīku panelis. Tā ir vēl viena no tām neticami noderīgajām funkcijām, kas ir labi paslēptas un kuras var redzēt tikai, izmantojot īsinājumtaustiņus. Kā norāda nosaukums, rīku panelis nav atsevišķs rīks, bet gan dažāda veida informācijas panelis, kurā ir pieejamas gandrīz visas DevTool funkcijas. Tā kā ir pārāk daudz funkciju, kas piedāvā kopējo DevTools funkcionalitāti, meklēšanas josla ir pieejama tieši augšpusē.
Lai aktivizētu paneli Rīki, pārliecinieties, vai esat DevTools panelī, un pēc tam nospiediet Ctrl + Shift + P (vai Cmd + Shift + P Mac lietotājiem):
Rīku panelis ir pilns ar iespējām un pārsteigumiem. Piemēram, vai zinājāt, ka varat uzņemt ekrānuzņēmumu tieši no DevTools?
Varu derēt, ka nē, jo jums ir jāieslēdz rīku panelis un meklēšanas joslā jāieraksta “screenshot”, lai to atklātu:
Jūs pamanīsit arī vairākas ekrānuzņēmumu uzņemšanas iespējas, tostarp vienu atlasītajam DOM mezglam! Izpētiet rīku paneli vairāk, un es apliecinu, ka nebūsiet vīlušies!
Ja jums ir nepieciešams attālināti uzņemt jebkuras tīmekļa lapas ekrānuzņēmumu, skatiet pcdream.lt ekrānuzņēmuma rīku.
Secinājums
Pārlūkprogramma Chrome pati par sevi ir bagāta ar funkcijām, taču tā patiešām spīd, ir DevTools piedāvājums. Kā redzējām šajā rakstā, ir diezgan daudz labi paslēptu funkciju — un citas, kas slēpjas skaidri redzamā vietā — par kurām lielākā daļa lietotāju nezina. Kāpēc šīs funkcijas ir paslēptas?
Man šķiet, ka daži no tiem ir ļoti eksperimentāli (piemēram, dizaina režīms), un Chrome izstrādātāji vēlas apgrūtināt šo funkciju atrašanu ikdienas lietotājiem. Attiecībā uz pārējām daudzajām funkcijām, manuprāt, tas ir vienkārši informācijas pārslodzes gadījums: ja ir, teiksim, 120 līdzekļi, ar dažiem no tiem ir apakšfunkcijas un tā tālāk, ir gandrīz neiespējami izveidot piemērotu lietotāja saskarni. scenārijs. Turklāt Google vēsturiski nav paveicis lielisku darbu ar savu produktu UX, tāpēc tas ir. 🤷🏻♂️
Tomēr es ceru, ka dažas no šīm funkcijām jums bija noderīgas. Bet vēl svarīgāk ir tas, ka es ceru, ka šis raksts sniedza jums priekšstatu par to, kur slēpjas, lai nākamreiz, kad vēlēsities izpētīt vai meklēt kaut ko konkrētu, jūs zinātu, kur doties, lai „raktu dziļi”. 😆