Instrumente de dezvoltare Chrome Tutoriale, sfaturi, trucuri

Google Chrome este unul dintre browserele web populare pentru dezvoltarea web, datorită caracteristicilor avansate ale acestuia. Instrumentele de dezvoltare Chrome pot fi foarte utile în timpul depanării. Cei mai mulți dintre noi știu deja că putem edita live CSS utilizând Chrome Dev Tools, dar există mai multe sfaturi pe care le vom împărtăși astăzi.

Sfaturi pentru Instrumentele de dezvoltare Chrome

Există multe trucuri necunoscute și ascunse ale Chrome Dev Instrumente și vom căuta în cele mai utile trucuri între ele. Pentru a deschide instrumentele de dezvoltare în Chrome, apăsați F12 de pe tastatură și încercați următoarele trucuri:

1. Găsiți și deschideți orice fișier

Când facem dezvoltarea web, avem de-a face cu multe fișiere HTML, CSS, JS și alte fișiere. Când vrem să depanem orice, deschidem instrumentele Chrome Dev. Puteți căuta și găsi rapid fișierul special pentru a vă face munca mai ușoară. Doar, apăsați Ctrl + P și începeți să tastați numele fișierului. Acest lucru vă ajută să găsiți fișierul special din lista de fișiere.

2. Căutarea în fișierul sursă

În trucul anterior, am ajuns să știm cum să căutăm un anumit fișier. Puteți chiar să căutați un șir special în toate fișierele încărcate. Apăsați Ctrl + Shift + F pentru a căuta un șir în fișiere. De asemenea, acceptă expresii regulate.

3. Accesați linia specială

Odată ce ați deschis orice fișier sursă și doriți să treceți la o anumită linie, apăsați Ctrl + G și dați numărul liniei și apăsați Enter. Selectarea elementelor DOM Elemente în Consola

Dev Tools permite, de asemenea, selectarea elementelor din consola

$ () -

• Returnează prima apariție a selectorului CSS corespunzător. > Aceasta returnează matricea de elemente care se potrivesc cu selectorul CSS dat. Pentru mai multe comenzi consola, mergeți la acest post
• 5. Utilizați mai multe îngrijiri Uneori, doriți să setați mai multe îngrijiri în locuri diferite și puteți face acest lucru cu ușurință în instrumentele Chrome Dev prin menținerea tastei

Ctrl

și făcând clic pe locul în care doriți să le plasați. Apoi începeți să scrieți și veți vedea că acesta este plasat în diferite locuri selectate.

6. Păstrarea jurnalului Jurnalul de conservare vă ajută să persistenți jurnalul chiar dacă pagina este încărcată. Verificați opțiunea de lângă Mențineți jurnalul

din jurnalul consolei și jurnalul este păstrat. Aceasta afișează jurnalul înainte ca pagina să fie descărcată și utilă pentru a investiga erorile.

7. Utilizați codul încorporat încorporat Chrome Dev Tools are încorporat codificatorul numit destul de tipărit "{}".

Instrumentul pentru dezvoltatori prezintă codul minimalizat și nu este ușor de citit. Faceți clic pe butonul destul de tipărit care este afișat în partea din stânga sus a fișierului sursă deschisă, pentru a afișa fișierul sursă în format lizibil pentru oameni.

8. Este site-ul dvs. mobil prietenos? Verificați-l aici Chrome Dev Tools ne permite de asemenea să verificăm dacă un site web este prietenos cu dispozitivele mobile sau nu. Puteți să verificați modul în care site-ul dvs. Web este afișat pe diverse dispozitive. Treceți la instrumentele Chrome Dev și sub fila Emulation

, puteți încărca diverse dispozitive. Selectați dispozitivul pe care îl doriți și verificați modul în care site-ul dvs. web se află în dispozitivul respectiv.

Pentru mai multe informații, consultați următorul videoclip. 9. Emulați senzori și locația geografică Puteți chiar să emulați senzori precum ecranul tactil și accelerometrele. Puteți chiar să emulați locația geografică. Pentru a face acest lucru, mergeți la

Emulație -> Senzori.

10. Selectați următoarea apariție a cuvântului curent

Dacă doriți să înlocuiți cuvântul În toate cazurile, selectați cuvântul și apăsați Ctrl + D

pentru a selecta următoarea apariție a cuvântului selectat. Puteți să editați acel cuvânt în toate aparițiile acestuia într-o singură fotografie.

11. Alter Color Format Doar utilizați Shift + Faceți clic pe

în previzualizarea culorilor pentru a schimba modificările între formatele rgba, hexazecimal și hsl

12. Adăugați modificări la fișierele locale prin spațiul de lucru Suntem capabili să editați fișierele sursă și să facem unele modificări în CSS, Java Script și în alte fișiere din instrumentele Chrome Dev. Pentru a adăuga aceste modificări fișierelor locale, nu este necesar să copiați aceste modificări din spațiul de lucru în fișierele pe disc. Instrumentele Chrome Dev vă permit să potriviți fișierele și să actualizați fișierul local cu modificările pe care le-ați făcut în instrumentele dev. Pentru a face acest lucru, faceți clic dreapta pe fișierul sursă din partea stângă din fila Surse

și selectați

Adăugați folderul în spațiul de lucru. Pentru mai multe informații despre spațiile de lucru, mergeți la Chrome.com.