Home-theater-designers
Chrome DevTools ir būtiska vērtība izstrādātājiem. Lai gan citas pārlūkprogrammas piedāvā diezgan ērtus problēmu novēršanas rīkus, Chrome DevTools ir jūsu uzmanības vērts tā daudzfunkcionālā interfeisa un popularitātes dēļ.
Chrome ir izstrādātāju populārākā pārlūkprogramma, pateicoties jaudīgam atkļūdošanas rīku komplektam. Chrome DevTools lietošana ir vienkārša, taču jums ir jāsaprot, kā tā darbojas, lai gūtu maksimālu labumu.
Kā darbojas Chrome izstrādātāju rīki
Chrome DevTools ļauj jums atrisināt problēmas vietnē, izmantojot tās kļūdu konsoli un citus atkļūdošanas un uzraudzības rīkus. Izmantojot DevTools, tiek atklātas frontes nepilnības un varat pārraudzīt, kā jūsu vietne parādās mobilajās un planšetdatoros.
Izmantojot DevTools, varat reāllaikā rediģēt vietnes kodu, piemēram, JavaScript, HTML un CSS, un iegūt tūlītējus izmaiņu rezultātus.
Izmaiņas, ko veicat, izmantojot DevTools, neietekmē vietni pastāvīgi. Tie tikai īslaicīgi parāda gaidīto rezultātu tā, it kā jūs būtu tos piemērojis faktiskajam avota kodam. Tas ļauj jums izstrādāt veidus, kā panākt, lai jūsu vietne tiktu ielādēta daudz ātrāk, un atvieglot kļūdu izlīdzināšanu.
Kā piekļūt Chrome DevTools
Chrome DevTools varat piekļūt vairākos veidos. Lai operētājsistēmā Mac OS atvērtu izstrādātāju rīkus, izmantojot saīsnes metodi, nospiediet Cmd + Opt + I . Ja izmantojat Windows operētājsistēmu, noklikšķiniet uz Ctrl + Shift + I taustiņus uz tastatūras.
Varat arī piekļūt Chrome izstrādātāju rīkiem, noklikšķinot uz trim punktiem ekrāna augšējā labajā stūrī. Doties uz Vairāk rīku un izvēlieties Izstrādātāju rīki . Vēl viena iespēja ir ar peles labo pogu noklikšķināt uz tīmekļa lapas un noklikšķināt uz Pārbaudīt iespēja.
Chrome izstrādātāju rīku izmantošana vietņu diagnostikai
Chrome DevTools piedāvā vairākus veidus, kā uzlabot un novērst tīmekļa lapu. Apskatīsim dažus veidus, kā DevTools var jums palīdzēt.
Skatiet, kā jūsu vietne izskatās viedtālrunī
Kad pārlūks Chrome ir pārslēgts uz izstrādātāja režīmu, tas parāda jūsu tīmekļa lapas pusizmēra versiju. Tomēr tas nedos jums reālu priekšstatu par to, kā tas izskatītos viedtālrunī vai planšetdatorā.
Par laimi, papildus tīmekļa lapas ekrāna lieluma iestatīšanai Chrome DevTools ļauj pārslēgties arī starp dažādiem mobilo ierīču ekrānu veidiem un versijām.
Lai piekļūtu šai opcijai, ieslēdziet Pārbaudīt režīmu. Tālāk noklikšķiniet uz Atsaucīgs nolaižamajā izvēlnē DevTools augšējā kreisajā stūrī un atlasiet vēlamo mobilo ierīci. Pēc tam tīmekļa lapa tiek renderēta un pielāgota, lai tā atbilstu jūsu izvēlētās mobilās ierīces izmēram.
kā izveidot teksta spēli
Piekļūstiet tīmekļa lapas avota failiem
Failiem, kas veido tīmekļa lapu, varat piekļūt, izmantojot Chrome DevTools. Lai piekļūtu šiem failiem, noklikšķiniet uz Avoti opcija izvēlnes DevTools augšējā daļā. Tas atklāj vietnes failu sistēmu un ļauj arī rediģēt.
Varat arī meklēt avota failus, kas var būt noderīgi, strādājot ar tīmekļa lapu, kurā ir daudz resursu. Lai meklētu avota failu, izmantojot DevTools, noklikšķiniet uz Meklēt opcija tieši virs konsoles.
Tomēr, ja nevarat atrast Meklēt iespēju, labāka alternatīva ir izmantot īsinājumtaustiņus. Operētājsistēmā Mac OS nospiediet Cmd + Opt + F taustiņus, lai meklētu avota failu. Ja izmantojat Windows OS, nospiediet Ctrl + Shift + F. taustiņu, lai piekļūtu avota faila meklēšanas joslai.
Veiciet tīmekļa lapas rediģēšanu reāllaikā
Viens no galvenajiem DevTools izmantošanas mērķiem ir veikt tūlītēja viltota tīmekļa lapas elementu rediģēšana . Kad esat pārslēdzies uz izstrādātāju rīkiem, varat rediģēt vietnes HTML saturu, noklikšķinot uz Elementi iespēja. Pēc tam ar peles labo pogu noklikšķiniet uz jebkura punkta, kuram vēlaties piemērot izmaiņas koda redaktorā, un atlasiet Rediģēt kā HTML .
Lai rediģētu CSS rekvizītus, kas nav iekļauti rindā, atlasiet Avoti . Pēc tam atlasiet rediģējamo CSS failu. Novietojiet kursoru uz izvēles rindas koda konsolē, lai veiktu rediģēšanu reāllaikā. To darot, jūs saņemsiet tūlītēju atgriezenisko saiti par visām tīmekļa lapas stila izmaiņām.
Ņemiet vērā, ka, rediģējot lapu, izmantojot DevTools, atkārtoti ielādējot lapu pārlūkprogrammā, tā tiek atjaunota sākotnējā formā, un rediģēšana ir redzama tikai jums. Rediģēšana, izmantojot DevTools, neietekmē šīs vietnes nevainojamu darbību un izmantošanu citiem lietotājiem.
Atkļūdojiet JavaScript kodu, izmantojot DevTools konsoli
Viens no labākajiem JavaScript atkļūdošanas veidiem ir Chrome izstrādātāju rīku izmantošana. Tas sniedz jums tiešu ziņojumu par nederīgiem skriptiem, kā arī precīzu kļūdas atrašanās vietu.
Veidojot vietni, izmantojot JavaScript, ir laba prakse vienmēr atvērt DevTools. Piemēram, palaižot console.log () JavaScript komanda instrukciju kopā parāda žurnāla rezultātu DevTools konsolē, ja programma darbojas veiksmīgi.
Pēc noklusējuma konsole ziņo par visām JavaScript problēmām jūsu vietnē. Jūs varat atrast konsoli DevTools apakšējā daļā vai piekļūt tai, noklikšķinot uz Konsole opcija Chrome DevTools loga augšdaļā.
Pārraudzīt resursu ielādi no datu bāzes
Papildus JavaScript atkļūdošanai konsole var arī sniegt detalizētu informāciju par resursiem, kas netiek pareizi ielādēti no vietnes datu bāzes.
Lai gan tas ne vienmēr ir labākais veids, kā atkļūdot aizmugures problēmas, tas tomēr norāda, kuri resursi tiek atgriezti 404 kļūda pēc šo elementu datu bāzes vaicājuma palaišanas.
Saistīts: Bieži sastopamās vietnes kļūdas un to nozīme
Pārslēdziet Chrome izstrādātāju rīku orientāciju
Lai mainītu Chrome izstrādātāju rīku pozīciju, noklikšķiniet uz trim izvēlnes punktiem DevTools (nevis galvenajā pārlūkprogrammā). Pēc tam atlasiet vēlamo pozīciju no Piestātnes puse iespēja.
Instalējiet Chrome DevTools paplašinājumus
Varat arī instalēt valodas vai ietvara specifiskus paplašinājumus, kas darbojas ar Chrome DevTools. Instalējot šos paplašinājumus, varat efektīvāk atkļūdot savu tīmekļa lapu.
Pārlūkā Chrome varat piekļūt Chrome DevTools pieejamo paplašinājumu sarakstam Piedāvātie DevTools paplašinājumi galerija.
Pārbaudiet, vai vietnē nav drošības problēmu
Chrome DevTools ļauj novērtēt jūsu vietnes drošību, pamatojoties uz tādiem parametriem kā pieejamība tīmekļa drošības sertifikāti un cik drošs ir savienojums, cita starpā. Lai pārbaudītu, vai jūsu vietne ir droša, noklikšķiniet uz Drošība opcija DevTools augšdaļā.
The Drošība cilne sniedz pārskatu par jūsu vietnes drošības informāciju un norāda visus iespējamos draudus.
Auditējiet savu vietni
Chrome DevTools ir funkcija, kas ļauj pārbaudīt vietnes vispārējo veiktspēju, pamatojoties uz konkrētiem parametriem.
Lai piekļūtu šai funkcijai, izvēlieties Bāka opcija loga DevTools augšdaļā. Pēc tam atlasiet parametrus, kurus vēlaties pārbaudīt, pēc tam atzīmējiet vai nu Mobilais vai Darbvirsma iespējas, lai redzētu, kā jūsu tīmekļa lapa darbojas dažādās platformās.
Tālāk noklikšķiniet uz Ģenerēt pārskatu lai veiktu jūsu tīmekļa lapas analīzi, pamatojoties uz iepriekš atlasītajiem parametriem.
Varat arī novērtēt vietnes darbības laiku vai ielādes veiktspēju, noklikšķinot uz Veiktspēja iespēja. Lai palaistu testu, noklikšķiniet uz ikonas blakus Noklikšķiniet uz ierakstīšanas pogas iespēja veikt izpildlaika analīzi. Varat arī noklikšķināt uz pārlādēšanas pogas zem tā, lai novērtētu ielādes laika veiktspēju. Klikšķiniet uz Apstāties lai apturētu analizatoru un parādītu rezultātus.
Izmantojiet Chrome DevTools priekšrocības
Atkarībā no tā, kam tas nepieciešams, Chrome DevTools ļauj veikt vairāk nekā vienkāršu vietņu atkļūdošanu. Par laimi, DevTools ir viegli lietojams visu prasmju līmeņu programmētājiem. Jūs pat varat uzzināt dažus vietņu priekšgala izstrādes pamatus, uzmeklējot apmeklēto vietņu avota kodu.
kā ierakstīt tālruņa sarunu iPhone
Jūs varētu arī atklāt dažas citas iespējas, kuras mēs šajā rakstā neapspriedām. Tāpēc nekautrējieties spēlēties ar pieejamajām funkcijām. Turklāt šo funkciju pielāgošana nekaitē vietnei.
Kopīgot Kopīgot Čivināt E -pasts Kā lietot Chrome OS Raspberry PiVai nevarat atļauties Chromebook datoru? Vai meklējat alternatīvu Raspbian? Tālāk ir norādīts, kā ierīcē Raspberry Pi instalēt Chrome OS versiju.
Lasīt Tālāk Saistītās tēmas- Internets
- Programmēšana
- HTML
- Web izstrāde
- JavaScript
- Google Chrome
Idowu aizraujas ar jebko gudru tehnoloģiju un produktivitāti. Brīvajā laikā viņš spēlējas ar kodēšanu un pārslēdzas uz šaha galdu, kad viņam ir garlaicīgi, taču viņam arī patīk laiku pa laikam atrauties no rutīnas. Viņa aizraušanās parādīt cilvēkiem ceļu apkārt mūsdienu tehnoloģijām motivē viņu rakstīt vairāk.
Vairāk no Idowu OmisolaAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu