Kā izmantot tīmekļa pārlūkprogrammas izstrādātāja rīkus

2024 Autors: Abigail Brown | [email protected]. Pēdējoreiz modificēts: 2024-01-07 19:05

Papildus tam, ka lielākā daļa pārlūkprogrammu veidotāju koncentrējas uz ikdienas lietotājiem, kuri vēlas sērfot tīmeklī, tie rūpējas arī par tīmekļa izstrādātājiem, dizaineriem un kvalitātes nodrošināšanas profesionāļiem, kuri palīdz veidot lietotnes un vietnes, kurām šie lietotāji piekļūst, integrējot jaudīgu rīki pašās pārlūkprogrammās.

Ir pagājuši laiki, kad vienīgie pārlūkprogrammā atrodamie programmēšanas un testēšanas rīki ļāva skatīt lapas avota kodu un neko vairāk. Mūsdienu pārlūkprogrammas ļauj izmantot daudz dziļāku informāciju, piemēram, izpildot un atkļūdot JavaScript fragmentus, pārbaudot un rediģējot DOM elementus, pārraugot reāllaika tīkla trafiku lietotnes vai lapas ielādes laikā, lai noteiktu vājās vietas, analizējot CSS veiktspēju un nodrošinot, ka jūsu kods ir neizmanto pārāk daudz atmiņas vai pārāk daudz CPU ciklu un daudz ko citu.

No testēšanas viedokļa varat reproducēt, kā lietotne vai tīmekļa lapa tiks renderēta dažādās pārlūkprogrammās, kā arī dažādās ierīcēs un platformās, izmantojot adaptīvā dizaina burvību un iebūvētos simulatorus. Labākā daļa ir tāda, ka varat to visu izdarīt, neizejot no pārlūkprogrammas!

Tālāk sniegtajās pamācībās ir sniegta informācija par to, kā piekļūt šiem izstrādātāja rīkiem vairākās populārās tīmekļa pārlūkprogrammās.

Google Chrome

Chrome izstrādātāja rīki ļauj rediģēt un atkļūdot kodu, pārbaudīt atsevišķus komponentus, lai atklātu veiktspējas problēmas, simulēt dažādus ierīču ekrānus, tostarp tos, kuros darbojas Android vai iOS, un veikt vairākas citas noderīgas funkcijas.

1. Atlasiet Chrome galveno izvēlni, kas atzīmēta ar trim horizontālām līnijām un atrodas pārlūkprogrammas augšējā labajā stūrī.

2. Kad tiek parādīta nolaižamā izvēlne, novietojiet peles kursoru virs opcijas Vairāk rīku.

   

3. Tagad vajadzētu parādīties apakšizvēlnei. Atlasiet opciju ar nosaukumu Izstrādātāja rīki. Šī izvēlnes vienuma vietā varat izmantot arī šādu īsinājumtaustiņu: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Tagad ir jāparāda Chrome izstrādātāja rīku saskarne, kā parādīts šajā ekrānuzņēmuma piemērā. Atkarībā no jūsu pārlūkprogrammas Chrome versijas sākotnējais izkārtojums var nedaudz atšķirties no šeit redzamā. Izstrādātāja rīku galvenajā centrā, kas parasti atrodas ekrāna apakšējā vai labajā pusē, ir šādas cilnes.

5. Papildus šīm sadaļām varat piekļūt arī tālāk norādītajiem rīkiem, izmantojot ikonu >>, kas atrodas pa labi no Performance cilne.

   • Atmiņa: pārraugiet un ierakstiet atmiņas lietojumu tīmekļa lapā. Varat redzēt, cik smags ir JavaScript jūsu vietnē.
   • Drošība: izceļ sertifikāta problēmas un citas ar drošību saistītas problēmas ar aktīvo lapu vai lietojumprogrammu.
   • Application: pārbaudiet resursus, ko izmanto tīmekļa lietojumprogramma. Iegūstiet pilnīgu informāciju par to, kas tiek izmantots.
   • Audits: piedāvā veidus, kā optimizēt lapas vai lietojumprogrammas ielādes laiku un vispārējo veiktspēju.

   

6. Ierīces režīms ļauj skatīt aktīvo lapu simulatorā, kas atveido to gandrīz tieši tādu, kāda tā parādītos vienā no vairāk nekā desmit ierīcēm, tostarp vairākām labi zināmām Android ierīcēm. un iOS modeļiem, piemēram, iPad, iPhone un Samsung Galaxy. Jums tiek dota arī iespēja atdarināt pielāgotas ekrāna izšķirtspējas, lai tās atbilstu jūsu īpašajām izstrādes vai testēšanas vajadzībām.

   Lai ieslēgtu un izslēgtu Ierīces režīmu, atlasiet mobilā tālruņa ikonu, kas atrodas tieši pa kreisi no Elementi cilne.

   

7. Varat arī pielāgot savu izstrādātāja rīku izskatu un darbību, vispirms atlasot izvēlnes pogu, ko attēlo trīs vertikāli izvietoti punkti un atrodas iepriekšminēto ciļņu labajā malā.

   Šajā nolaižamajā izvēlnē varat pārvietot doku, parādīt vai paslēpt dažādus rīkus, kā arī palaist sarežģītākus vienumus, piemēram, ierīces inspektoru. Jūs atklāsiet, ka pati izstrādātāja rīku saskarne ir ļoti pielāgojama, izmantojot šajā sadaļā atrodamos iestatījumus.

   

Mozilla Firefox

Firefox tīmekļa izstrādātāju sadaļā ir iekļauti rīki gan dizaineriem, gan izstrādātājiem un testētājiem, piemēram, stila redaktors un pikseļu mērķauditorijas pilinātājs.

1. Atlasiet Firefox galveno izvēlni, ko attēlo trīs horizontālas līnijas un atrodas pārlūkprogrammas loga augšējā labajā stūrī.

2. Kad tiek parādīta nolaižamā izvēlne, atlasiet Web Developer.

   

3. Tagad ir jāparāda Web Developer izvēlne, kurā ir šādas opcijas. Jūs ievērosiet, ka lielākajai daļai izvēlnes vienumu ir saistīti īsinājumtaustiņi.

   • Pārslēgt rīkus: parāda vai paslēpj izstrādātāja rīku saskarni, kas parasti atrodas pārlūkprogrammas loga apakšā. Tastatūras īsinājumtaustiņš: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspektors: ļauj pārbaudīt un/vai pielāgot CSS un HTML kodu aktīvajā lapā, kā arī portatīvajā ierīcē, izmantojot attālo atkļūdošanu. Tastatūras īsinājumtaustiņš: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: ļauj izpildīt JavaScript izteiksmes aktīvajā lapā, kā arī pārskatīt dažādu reģistrēto datu kopu, tostarp drošības brīdinājumus, tīkla pieprasījumus, CSS ziņojumus un citus datus.. Tastatūras īsinājumtaustiņš: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Atkļūdotājs: JavaScript atkļūdotājs ļauj precīzi noteikt un labot defektus, iestatot pārtraukuma punktus, pārbaudot DOM mezglus, melnboksu ārējos avotus un daudz ko citu. Tāpat kā Inspector gadījumā, šī funkcija atbalsta arī attālo atkļūdošanu. Tastatūras īsinājumtaustiņš: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stila redaktors: ļauj izveidot jaunas stila lapas un iekļaut tās aktīvajā tīmekļa lapā vai rediģēt esošās lapas un pārbaudīt, kā jūsu izmaiņas tiek renderētas pārlūkprogrammā tikai ar vienu klikšķi.. Tastatūras īsinājumtaustiņš: Mac OS X, Windows (SHIFT+F7)
   • Performance: sniedz detalizētu aktīvās lapas tīkla veiktspējas sadalījumu, kadru ātruma datus, JavaScript izpildes laiku un stāvokli, krāsas mirgošanu un daudz ko citu. Tastatūras īsinājumtaustiņš: Mac OS X, Windows (SHIFT+F5)
   • Tīkls: uzskaita katru tīkla pieprasījumu, ko ierosinājusi pārlūkprogramma, kopā ar atbilstošo metodi, izcelsmes domēnu, veidu, lielumu un pagājušo laiku. Tastatūras īsinājumtaustiņš: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: apskatiet vietnes saglabāto kešatmiņu un sīkfailus. Tastatūras īsinājumtaustiņš: (SHIFT+F9)
   • Izstrādātāja rīkjosla: atver interaktīvu komandrindas tulku. Tulkā ievadiet help, lai iegūtu visu pieejamo komandu sarakstu un to pareizo sintaksi. Tastatūras īsinājumtaustiņš: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: nodrošina iespēju izveidot un izpildīt tīmekļa lietotnes, izmantojot faktisko ierīci, kurā darbojas operētājsistēma Firefox, vai izmantojot Firefox OS simulatoru. Tastatūras īsinājumtaustiņš: Mac OS X, Windows (SHIFT+F8)
   • Pārlūka konsole: nodrošina tādu pašu funkcionalitāti kā tīmekļa konsole (skatiet iepriekš). Tomēr visi atgrieztie dati attiecas uz visu Firefox lietojumprogrammu (tostarp paplašinājumiem un pārlūkprogrammas līmeņa funkcijām), nevis tikai aktīvajai tīmekļa lapai. Tastatūras īsinājumtaustiņš: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Atsaucīga dizaina skats: ļauj uzreiz skatīt tīmekļa lapu dažādās izšķirtspējās, izkārtojumos un ekrāna izmēros, lai atdarinātu vairākas ierīces, tostarp planšetdatorus un viedtālruņus. Tastatūras īsinājumtaustiņš: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: parāda heksadecimālo krāsu kodu atsevišķi atlasītiem pikseļiem.
   • Scratchpad: Scratchpad ļauj rakstīt, rediģēt, integrēt un izpildīt JavaScript koda fragmentus no uznirstošā Firefox loga. Atveriet interaktīvu JavaScript dokumentu, kas ļauj ierakstīt kodu un pārbaudīt to saistībā ar vietni. Tastatūras īsinājumtaustiņš: (SHIFT+F4)
   • Service Workers: atkļūdojiet pakalpojumu darbiniekus jūsu tīmekļa lietojumprogrammā. Iegūstiet detalizētu informāciju par to veiktspēju un kļūdām.
   • Lapas avots: sākotnējais pārlūkprogrammas izstrādātāja rīks, šī opcija vienkārši parāda aktīvās lapas pieejamo avota kodu. Tastatūras īsinājumtaustiņš: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Iegūstiet vairāk rīku: Mozilla oficiālajā pievienojumprogrammu vietnē tiek atvērta Web Developer's Toolbox kolekcija, kurā ir aptuveni ducis populāru paplašinājumu, piemēram, kā Firebug un Greasemonkey.

   

Microsoft Edge/Internet Explorer

Parasti saukts par F12 izstrādātāja rīkiem - tas ir cieņa pret īsinājumtaustiņu, kas ir palaidis saskarni kopš iepriekšējām Internet Explorer versijām, izstrādātāja rīku kopa IE11 un Microsoft Edge. Kopš tās izveides ir nogājusi garu ceļu, piedāvājot ļoti ērtu monitoru, atkļūdotāju, emulatoru un tūlītēju kompilatoru grupu.

Microsoft vairs neatbalsta Internet Explorer un iesaka atjaunināt pārlūkprogrammu Edge uz jaunāku versiju. Dodieties uz viņu vietni, lai lejupielādētu jaunāko versiju.

1. Atlasiet Citas darbības, ko attēlo trīs punkti un atrodas pārlūkprogrammas loga augšējā labajā stūrī.

   

2. Kad tiek parādīta nolaižamā izvēlne, atlasiet opciju ar nosaukumu Izstrādātāja rīki.

   

3. Tagad vajadzētu parādīt izstrādes saskarni, parasti pārlūkprogrammas loga apakšā. Ir pieejami šādi rīki, no kuriem katrs var piekļūt, noklikšķinot uz attiecīgās cilnes virsraksta vai izmantojot pievienoto īsinājumtaustiņu.

   

   • DOM Explorer: ļauj rediģēt stila lapas un HTML aktīvajā lapā, atveidojot modificētos rezultātus. Izmanto IntelliSense funkcionalitāti, lai vajadzības gadījumā automātiski pabeigtu kodu. Tastatūras īsinājumtaustiņš: (CTRL+1)
   • Console: nodrošina iespēju iesniegt atkļūdošanas informāciju, tostarp skaitītājus, taimerus, izsekošanas un pielāgotus ziņojumus, izmantojot integrētu API. Ļauj arī ievadīt kodu aktīvā tīmekļa lapā un reāllaikā mainīt vērtības, kas piešķirtas atsevišķiem mainīgajiem. Tastatūras īsinājumtaustiņš: (CTRL+2)
   • Atkļūdotājs: ļauj iestatīt pārtraukuma punktus un atkļūdot kodu, kamēr tas tiek izpildīts, ja nepieciešams, rindiņu pa rindiņai. Tastatūras īsinājumtaustiņš: (CTRL+3)
   • Tīkls: uzskaita katru tīkla pieprasījumu, ko pārlūkprogramma ierosinājusi lapas ielādes un izpildes laikā, tostarp protokola informāciju, satura veidu, joslas platuma lietojumu un daudz ko citu. Tastatūras īsinājumtaustiņš: (CTRL+4)
   • Performance: sniedziet detalizētu informāciju par kadru nomaiņas ātrumu, CPU izmantošanu un citiem ar veiktspēju saistītiem rādītājiem, lai palīdzētu paātrināt lapas ielādes laiku un citas darbības. Tastatūras īsinājumtaustiņš: (CTRL+5)
   • Atmiņa: palīdz izolēt un labot iespējamās atmiņas noplūdes pašreizējā tīmekļa lapā, parādot atmiņas izmantošanas laika skalu kopā ar momentuzņēmumiem no dažādiem laika intervāliem. Tastatūras īsinājumtaustiņš: (CTRL+6)
   • Emulācija: parāda, kā aktīvā lapa tiktu renderēta dažādās izšķirtspējās un ekrāna izmēros, emulējot viedtālruņus, planšetdatorus un citas ierīces. Tas nodrošina arī iespēju modificēt lietotāja aģentu un lapas orientāciju, kā arī simulēt dažādas ģeogrāfiskās atrašanās vietas, ievadot platuma un garuma grādus. Tastatūras īsinājumtaustiņš: (CTRL+7)

4. Lai parādītu Console, vienlaikus izmantojot jebkuru citu rīku, nospiediet kvadrātpogu ar labo iekava tās iekšpusē, kas atrodas izstrādes rīku saskarnes augšējā labajā stūrī.

   

5. Lai atvienotu izstrādātāja rīku saskarni un tas kļūtu par atsevišķu logu, atlasiet divi kaskādes taisnstūri vai izmantojiet šādu īsinājumtaustiņu: CTRL+P. Varat ievietot rīkus atpakaļ to sākotnējā vietā, otrreiz nospiežot taustiņu kombināciju CTRL+P.

   

Apple Safari (tikai Mac)

Safari daudzveidīgais izstrādes rīku komplekts atspoguļo lielo izstrādātāju kopienu, kas savām dizaina un programmēšanas vajadzībām izmanto Mac datorus. Papildus jaudīgai konsolei un tradicionālajām reģistrēšanas un atkļūdošanas funkcijām tiek nodrošināts arī viegli lietojams adaptīva dizaina režīms un rīks, lai izveidotu savus pārlūkprogrammas paplašinājumus.

1. Pārlūkprogrammas izvēlnē, kas atrodas ekrāna augšdaļā, atlasiet Safari. Kad tiek parādīta nolaižamā izvēlne, atlasiet Preferences. Šī izvēlnes vienuma vietā varat izmantot arī šādu īsinājumtaustiņu: COMMAND+COMMA(,)

   

2. Safari Preferences interfeiss tagad ir jāparāda, pārklājot pārlūkprogrammas logu. Atlasiet ikonu Papildu, kas atrodas galvenes labajā malā.

   

3. Tagad ir jābūt redzamām preferencēm Advanced. Šī ekrāna apakšā izvēļņu joslā ir opcija ar nosaukumu Rādīt izstrādes izvēlni, kurai pievienota izvēles rūtiņa. Ja lodziņā nav redzama atzīme, noklikšķiniet uz tās vienreiz, lai to ievietotu.

   

4. Aizvērt saskarni Preferences.

5. Tagad jums vajadzētu pamanīt jaunu opciju pārlūkprogrammas izvēlnē ar nosaukumu Izstrādāt, kas atrodas starp Grāmatzīmēm un Logu. Noklikšķiniet uz šī izvēlnes vienuma. Tagad ir jāparāda nolaižamā izvēlne, kurā ir šādas opcijas.

   • Atvērt lapu ar: ļauj atvērt aktīvo tīmekļa lapu vienā no citām pārlūkprogrammām, kas pašlaik ir instalētas jūsu Mac datorā.
   • User Agent: ļauj atlasīt no vairāk nekā duci iepriekš definētu lietotāja aģenta vērtību, tostarp vairākas Chrome, Firefox un Internet Explorer versijas, kā arī definēt savu pielāgoto vērtību. string.
   • Ievadiet adaptīvā noformējuma režīmu: atveido pašreizējo lapu, kā tā būtu redzama dažādās ierīcēs un dažādās ekrāna izšķirtspējās.
   • Rādīt tīmekļa inspektoru: palaiž galveno Safari izstrādātāju rīku saskarni, kas parasti atrodas pārlūkprogrammas ekrāna apakšā un satur šādas sadaļas: Elements, Network, Resources, Timelines, Atkļūdotājs, Krātuve, Konsole.
   • Rādīt kļūdu konsoli: palaiž arī izstrādātāju rīku saskarni tieši konsole, kurā tiek parādītas kļūdas, brīdinājumi un citas meklēšanas iespējas žurnāla dati.
   • Rādīt lapas avotu: tiek atvērta cilne Resursi, kurā tiek parādīts dokumentā klasificētās aktīvās lapas avota kods.
   • Rādīt lapas resursus: veic to pašu funkciju kā opcija Rādīt lapas avotu.
   • Show Snippet Editor: tiek atvērts jauns logs, kurā varat ievadīt CSS un HTML kodu, priekšskatot tā izvadi lidojumā.
   • Show Extension Builder: nodrošina iespēju izveidot vai rediģēt Safari paplašinājumus, izmantojot CSS, HTML un JavaScript.
   • Rādīt laika skalas ierakstu: atver cilni Laika skalas un sāk rādīt tīkla pieprasījumus, izkārtojumu un renderēšanas informāciju, kā arī JavaScript izpildi reāllaikā.
   • Iztukšot kešatmiņas: dzēš visu kešatmiņu, kas pašlaik tiek glabāta jūsu cietajā diskā.
   • Atspējot kešatmiņas: aptur Safari no kešatmiņas saglabāšanas, lai viss saturs tiktu izgūts no servera katras lapas ielādes reizē.
   • Atspējot attēlus: neļauj attēliem renderēt visās tīmekļa lapās.
   • Atspējot stilus: tiek ignorēti CSS rekvizīti, kad lapa tiek ielādēta.
   • Atspējot JavaScript: ierobežo JavaScript izpildi visās lapās.
   • Atspējot paplašinājumus: aizliedz visiem instalētajiem paplašinājumiem darboties pārlūkprogrammā.
   • Atspējot vietnei specifiskus uzlauzumus: ja Safari ir modificēts, lai tieši risinātu problēmas, kas raksturīgas aktīvajai tīmekļa lapai, šī opcija bloķēs šīs izmaiņas, lai lapa ielādes, kā tas bija pirms šo modifikāciju ieviešanas.
   • Atspējot vietējo failu ierobežojumus: ļauj pārlūkprogrammai piekļūt failiem jūsu lokālajos diskos. Šī darbība drošības apsvērumu dēļ ir ierobežota pēc noklusējuma.
   • Atspējot vairāku izcelsmju ierobežojumus: šie ierobežojumi tiek ieviesti pēc noklusējuma, lai novērstu XSS un citas iespējamās briesmas. Tomēr attīstības nolūkos tie bieži ir īslaicīgi jāatspējo.
   • Atļaut JavaScript no viedās meklēšanas lauka: kad tas ir iespējots, tas nodrošina iespēju ievadīt vietrāžus URL ar JavaScript: iekļautu tieši adreses joslā.
   • Uzskatiet SHA-1 sertifikātus kā nedrošus: SSL sertifikāti, kas izmanto SHA-1 algoritmu, tiek plaši uzskatīti par novecojušiem un neaizsargātiem.