Chrome izstrādātāja rīki: Overrides un darbavieta - Pilnīga vadlīnija

Šajā norādījumā tiks izskaidrots, kā izmantot Chrome Developer Tools, lai pielāgotu stilus un skriptus, neveicot izmaiņas oriģinālajā kodā. Tiks parādīts, kā izmantojot Overrides un Chrome darbvirsotni, veikt apjomīgas testēšanas un pielāgošanas darbības savā tīmekļa vietnē, nelietojot oriģinālo servera failu.

Svarīgākie secinājumi

• Pārrakstot failus, izmantojot Overrides, tādējādi veicot testus un pielāgojumus.
• Darbvirsotne ļauj savienot jūsu lokālo attīstības mapi ar Chrome Developer Tools, lai veiktu tiešas izmaiņas.
• Šīs divas funkcijas ir ļoti noderīgas problēmu novēršanai ražošanas vidē, neietekmējot oriģinālo servera kodu.

Solis pa solim norādījums

Lai efektīvi izmantotu Chrome Developer Tools, ievēro šos soļus:

1. Pārrakstu izmantošana

Sākumā vēlamies izmantot Chrome pārrakstu funkciju. Atradi JavaScript failu, piemēram, main.js, kas tiek ielādēts no servera.

Uzklikšķini uz faila ar labo peles taustiņu un izvēlies kontekstizvēlni "Pārrakstīt saturu".

Parādīsies dialoglodziņš, kurā vari izvēlēties atrašanās vietu vietējai failam. Pārliecinies, vai jau esi izveidojis mapi, kurā novietot savus pārrakstošos failus.

Izvēlies vēlamo mapju un noklikšķini uz "Atlasīt mapi". Tas nodrošinās savienojumu starp oriģinālo failu un tavu lokālo failu.

Tagad jānodrošina pārlūkprogrammas piekļuve šai mapei. Atkal noklikšķini uz Pārrakstes izvēlnes un pārliecinies, vai atļauja piekļūt iecerētajai mapei ir aktivizēta.

2. Lokāla faila izveide

Tagad vari izveidot jaunu failu Pārrakstes mapē. Atver failu un ievieto, piemēram, vienkāršu alert() skriptu.

Varēsi pielāgot saturu saskaņā ar savām vajadzībām. Saglabā failu, atsvaidzini lapu un pārbaudi, ka tagad parādās alert loga paziņojums, nevis fails, kas sākotnēji tika ielādēts no servera.

3. Tīkla aktivitātes pārbaude

Lai nodrošinātu, ka fails vairs netiek ielādēts no servera, atver Network cilni Developer Tools. Tev vajadzētu redzēt, ka main.js fails tagad netiek atlādēts no servera, bet vietām tiek ielādēti vietējie pārrakstītie satura.

Ja vēlies pievienot jaunus pārrakstus vai dzēst esošos, dodies uz Pārrakstes sadaļu, kur redzēsi visus aktivizētos pārrakstus.

4. Darbs ar darbvirsmu

Nākamajā solī tiek veikta darbvirsmes iestatīšana. Šeit vari savienot savu lokālo attīstības mapi ar Developer Tools. Dodies uz Developer Tools iestatījumiem un meklē opciju "Darbvirsmes".

Izvēlies mapi, kurā atrodas tavas projekti. Chrome arī šeit prasīs atļauju piekļūt šai mapei, tāpēc pārliecinies, ka esi piešķīris atbilstošās atļaujas.

5. Kodējuma maiņas

Tagad vari strādāt tieši Workspace. Piemēram, atver savu main.js failu, veic izmaiņas un saglabā failu. Kods tiks automātiski ielādēts no servera un tu uzreiz vari redzēt, kā izmaiņas attiecas uz tavu vietni.

6. Darbos strādāšana

Viena no Workspaces praktiskajām priekšrocībām ir tāda, ka vari ielikt pārtraukumus, lai efektīvi īstenotu koda izplenšanu. Ieliec pārtraukumus koda rindās un pārlādē lapu, lai pārtrauktu izpildi un pārbaudītu mainīgo pašreizējo stāvokli.

7. Priekšrocības un trūkumi

Lai gan Workspace ir noderīgs, daudzi attīstītāji iesaka veikt izmaiņas tieši koda redaktorā, piemēram, Visual Studio Code, un saglabāt failus tur. Tādējādi vari labāk redzēt, kura failu versija tiek izmantota. Lietojot Workspace, situācija var kļūt neskaidra, it īpaši, ja saikne ar sākotnējiem failiem nav skaidra.

Taču ja tu strādā tikai ar vienkāršām CSS failiem vai ne-transpilētu kodu, Workspace var būt laba izvēle.

Kopsavilkums

Šajā norādījumā esi uzzinājis/-usi, kā strādāt ar izmaiņām un Workspace Chrome Developer Tools, lai pielāgotu stilus un skriptus, neaizskarot oriģinālo servera failu. Ar izmaiņām vari veikt ātras izmaiņas, kamēr Workspace ļauj strādāt tieši ar savu izstrādes mapi.