Google Chrome ir viena no populārākajām pārlūkprogrammām tīmekļa attīstībai, pateicoties tā uzlabotajām funkcijām. Chrome izstrādātāju rīki var būt ļoti noderīgs, bet atkļūdošana. Lielākā daļa no mums jau zina, ka mēs varam rediģēt tiešraidē CSS, izmantojot Chrome Dev rīkus, taču ir vairāk padomu, kurus mēs šodien dalīsimies ar jums.
Chrome izstrādes rīku padomi
Ir daudz nezināmu un slēptu Chrome izstrādes rīku triku, un mēs aplūkosim visnoderīgākos trikus no tiem. Lai Chrome izstrādātāju rīkus atvērtu, nospiediet F12 uz tastatūras un izmēģiniet sekojošus trikus.
1. Atrodiet un atveriet jebkuru failu
Veicot web izstrādi, mēs nodarbojamies ar daudziem HTML, CSS, JS un citiem failiem. Ja mēs vēlamies atkļūdot kaut ko, mēs atveram Chrome Dev rīkus. Jūs varat ātri meklēt un atrast konkrēto failu, lai padarītu darbu vieglāku. Tikai nospiediet Ctrl + P un sāciet rakstīt faila nosaukumu. Tas palīdz jums atrast konkrēto failu no failu saraksta.
2. Meklēt avota failā
Iepriekšējā triks mēs uzzinājām, kā meklēt konkrētu failu. Jūs varat pat meklēt konkrētu virkni visos ielādētajos failos. Nospiediet Ctrl + Shift + F lai meklētu virkni failos. Tā atbalsta arī regulāras izteiksmes.
3. Iet uz konkrētu rindiņu
Kad esat atvēris kādu avota failu un vēlaties pāriet uz konkrētu rindiņu, nospiediet Ctrl + G un norādiet līnijas numuru un nospiediet enter.
4. DOM elementu izvēle konsole cilnē
Dev rīki ļauj atlasīt elementus konsolē.
- $() – Atgriež pirmo atbilstošo CSS selektora parādīšanos.
- $$() – Tas atgriež elementu masīvu, kas atbilst attiecīgajam CSS atlasītājam.
5. Izmantojiet vairākus ratiņus
Dažreiz jūs vēlaties iestatīt vairākus rullīšus dažādās vietās, un jūs varat to viegli izdarīt Chrome Dev rīkos, noturot Ctrl taustiņu un noklikšķinot, kur vēlaties tos ievietot. Tad sāciet rakstīt, un jūs redzēsiet, ka tas tiek ievietots dažādās izvēlētajās vietās.
6. Saglabājiet žurnālu
Saglabāt žurnālu palīdz saglabāt žurnālu, pat ja lapa ir ielādēta. Atzīmējiet izvēles rūtiņu blakus Saglabājiet žurnālu konsoles logā un žurnāls tiek saglabāts. Tas parāda žurnālu, pirms lapa ir izlaista un noderīga, lai izmeklētu kļūdas.
7. Izmantojiet iebūvēto kodu beautifier
Chrome Dev rīki ir iebūvēti koda bildinātājs diezgan izdrukāt "{}". Izstrādātāju rīks parāda minimizēto kodu un to nav viegli nolasīt. Noklikšķiniet uz diezgan drukas pogas, kas tiek rādīta atvērtā avota faila apakšējā kreisajā stūrī, lai parādītu avota failu cilvēka lasāmajā formātā.
8. Vai jūsu vietne ir mobilizēta? Pārbaudiet to šeit
Chrome Dev rīki arī ļauj mums pārbaudīt, vai vietne ir mobilizēta vai ne. Varat pārbaudīt, kā jūsu vietne izskatās dažādās ierīcēs. Pārejiet pie Chrome Dev rīku un zemāk Emulācija cilni, varat ierakstīt dažādas ierīces. Atlasiet vajadzīgo ierīci un pārbaudiet, kā jūsu vietne izskatās šajā ierīcē.
9. Emulēt sensorus un ģeogrāfisko atrašanās vietu
Jūs pat varat imulēt sensorus, piemēram, skārienekrānu un akselerometrus. Jūs pat varat simulēt ģeogrāfisko atrašanās vietu. Lai to paveiktu, dodieties uz Emulācija -> sensori.
10. Izvēlieties nākamo pašreizējā vārda parādīšanos
Ja vēlaties aizstāt vārdu Visā tā notikumā, pēc tam izvēlieties vārdu un nospiediet Ctrl + D lai izvēlētos nākamo izvēlēto vārdu parādīšanos. Jūs varat rediģēt šo vārdu visos tā notikumos vienā šāvienā.
11. Mainīt krāsu formātu
Tikai izmantot Shift + klikšķis par krāsu priekšskatījumu mainīt mainās starp rgba, hexadecimal un hsl formatējumu.
12. Pievienojiet vietējo failu izmaiņas, izmantojot darbvietu
Mēs varam rediģēt avota failus un veikt dažas izmaiņas CSS, Java Script un citos failos Chrome Dev rīkos. Lai šīs izmaiņas tiktu pievienotas vietējiem failiem, šeit nav nepieciešams kopēt ielīmēt izmaiņas no darbvietas uz failiem diskā. Chrome Dev rīki ļauj jums saskaņot failus un atjaunināt vietējo failu ar izmaiņām, ko esat veicis dev rīkos. Lai to izdarītu, noklikšķiniet uz avota faila kreisajā pusē Avoti cilni un atlasiet Pievienot mapi darbvietai.
Lai iegūtu papildinformāciju par darbvietām, dodieties uz Chrome.com.
