Kam paredzēti Chrome DevTools?

Chrome DevTools ir a Google Chrome iebūvēto vietņu izveides un atkļūdošanas rīku komplekts. Protams, mēs tos varam arī izmantot tā atvērtā pirmkoda versijā; Hroms.

Chrome izstrādātājiem var piekļūt, nospiežot taustiņu kombināciju Ctrl + Shift + I, arī virzot kursoru virs elementa un ar peles labo pogu noklikšķinot uz Pārbaudīt.

Sastāvdaļas

Atverot Chrome DevTools, redzam, ka parādās un panelis pa labi no lapas, kuru pārlūkojam. Savukārt šis panelis eTas ir sadalīts cilnēs, kas atbilst katram no rīkiem. Savukārt instrumenti ir sadalīti sadaļās.
Sadaļas ir:

• Elementi: parāda lapas dažādos komponentus.
• Konsole: ļauj izstrādes laikā palaist diagnostiku vai mijiedarboties ar Javascript kodu tāpat kā ar Linux termināli.
• Avoti: atvieglo Javascript koda atkļūdošanu un darbu ar vietējiem failiem.
• Tīkls: palīdz uzraudzīt un uzlabot lapu veiktspēju.
• Laika skala: ļauj ierakstīt un izpētīt dažādus notikumus, kas notiek vietnes apmeklējuma laikā.
• Lietojumprogramma: Izpēta visus ielādētos resursus; cita starpā IndexedDB vai Web SQL datu bāzes, lokālā un sesiju krātuve, sīkfaili, lietotņu kešatmiņa, attēli, fonti un stila lapas.
• Drošība: nosaka koda drošības problēmas.

Apskatīsim, kam mēs varam izmantot Chrome DevTools

Labojiet to, kas nedarbojas

Tas ir noticis ar katru izstrādātāju. Uzrakstiet kodu, pārbaudiet, vai nav kļūdu, un patiesības brīdī lapa nedarbojas tā, kā vajadzētu. Konsoles rīks parāda, kāda kļūda rodas izpildes laikā.

Samaziniet iekraušanas laiku

Ja lapas ielāde prasa ilgu laiku, lietotājs nogurst un dodas uz citu vietni. Par laimi, Flash vietņu un to animēto intro laikmets ir beidzies. Jebkurā gadījumā Chrome DevTools cilne Tīkli ļauj vieglāk noskaidrot, kuri elementi kavē slodzi. Mēs varam atkārtot testu dažādiem savienojuma ātrumiem.

Mainīt kodu

Cilnē Elementi mēs varam skatiet lapas elementus, saistīto HTML kodu un css rekvizītus. Mēs tos varam arī mainīt.

Mēs varam rediģēt lapas tekstu, izmantojot komandu

document.designMode = 'on';

Izmēģiniet dažādus ekrāna izmērus

Planšetdatori, viedtālruņi, viedie televizori, galddatori. Palielinās to ierīču saraksts, ar kurām mēs sērfojam internetā. Ar Chrome DevTools mēs varam pārbaudiet, vai lapa izskatās labi dažādos izmēros.

Benchmarking

Vadībā termins etalonsalīdzinājums nozīmē mācīties no to cilvēku labākās prakses, kuri rīkojas tāpat kā mēs. Izmantojot Chrome DevTolls, ja mums patīk vietnes dizains, mēs varam apskatiet html kodu un css stilu lapas un nokopējiet tās uz mūsu vietni.

Iegūstot Chrome DevTools

Chrome DevTools ir pieejams pārlūkprogrammās Google Chrome un Chromium. Hroms atrodas galveno izplatījumu krātuvēs. To var uzstādīt arī no veikaliem aizdare. Attiecībā uz Google hromu jūs varat Nāc šurp. DEB un RPM formātā