Acest articol popular a fost actualizat în 2020. Pentru mai multe informații despre îmbunătățirea fluxului dvs. de dezvoltare cu instrumente, citiți Developer Essentials: Tools on SitePoint Premium.
ziua tipică a unui dezvoltator web implică crearea de pagini web HTML cu CSS și JavaScript asociate în editorul lor preferat. Fluxul de lucru:
- deschideți pagina găzduită local într-un browser.
- jură.
- deschideți DevTools pentru a investiga problemele de aspect și funcționalitate.,
- Tweak elementele HTML, proprietățile CSS și codul JavaScript pentru a remedia problemele.
- copiați aceste modificări înapoi în editor și reveniți la Pasul #1.în timp ce instrumente precum reîncărcarea live au făcut acest proces mai ușor, mulți dezvoltatori continuă să ajusteze codul atât în DevTools, cât și în editorul lor.cu toate acestea, este posibil să deschideți și să editați fișierele sursă direct în Chrome. Orice modificări pe care le faceți sunt salvate în sistemul de fișiere și actualizate în cadrul editorului (presupunând că se reîmprospătează atunci când apar modificări ale fișierelor).,
Pasul 1: Lansați instrumente pentru dezvoltatori
deschideți Chrome, încărcați o pagină din sistemul/serverul de fișiere local și deschideți Instrumente pentru dezvoltatori din meniul Mai multe instrumente sau apăsați F12 sau Ctrl/Cmd + Shift + I în funcție de sistemul dvs. Navigați la fila Surse pentru a examina exploratorul de fișiere:
puteți deschide și edita fișiere CSS și JavaScript în această vizualizare, dar orice modificări vor fi pierdute imediat ce actualizați pagina.
Pasul 2: asociați un Folder cu spațiul de lucru
Faceți clic pe fila Sistem de fișiere, apoi faceți clic pe + Adăugați folder în spațiul de lucru., Vi se va solicita să localizați folderul de lucru, iar Chrome vă va solicita să confirmați că permiteți accesul. Explorer arată fișierele de sistem care pot fi deschise cu un singur clic:
Pasul 3: modificați și Salvați Codul
puteti sari în și edita codul. Editările nesalvate sunt marcate cu un asterisc în fila Fișier.
modificările CSS sunt actualizate instantaneu, dar, în cazul HTML și JavaScript, va trebui în mod normal să apăsați Ctrl/Cmd + s pentru a salva fișierul în sistemul de fișiere, apoi să reîmprospătați browserul.,
rețineți că puteți, de asemenea, să faceți clic dreapta pe fila fișier și să selectați Salvare ca… pentru a salva o copie a fișierului în altă parte.
Pasul 4: Revizuirea și Anula Modificările
Pentru a examina modificările, faceți clic pe fila fișier și alegeți modificări Locale… din meniul contextual:
Un diff-ca punct de vedere este prezentat. Pictograma săgeată din partea stângă jos a panoului va anula toate modificările și va readuce fișierul la starea inițială.,instrumentele pentru dezvoltatori Chrome nu vor fi niciodată un înlocuitor complet pentru editorul dvs. preferat, dar poate fi util atunci când efectuați modificări rapide sau lucrați de pe un alt computer pe care este posibil ca editorul dvs. să nu fie instalat.