Integrēti rīku komplekti Web dizaineriem, izstrādātājiem un testētājiem
Papildus lielākajai daļai pārlūkprogrammu veidotāju, kas koncentrējas uz ikdienas lietotāju, kurš vēlas sērfot internetā, viņi arī rūpējas par tīmekļa izstrādātājiem, dizaineriem un kvalitātes nodrošināšanas speciālistiem, kuri palīdz veidot lietotnes un vietnes, kuras šiem lietotājiem piekļūst, integrējot efektīvus rīkus tieši pārlūkprogrammās paši.
Ir pagājuši tie laiki, kad pārlūkprogrammā atrastie vienīgie programmēšanas un pārbaudes rīki ļāva jums skatīt lapas pirmkodu un neko vairāk. Šodienas pārlūkprogrammas ļauj veikt daudz dziļāku nirt, veicot tādas darbības kā JavaScript dzēšanas izpilde un atkļūdošana, DOM elementu pārbaude un rediģēšana, reāllaika tīkla trafika uzraudzība, kad jūsu lietotne vai lapa tiek ielādēta, lai noteiktu vājās vietas, analizējot CSS veiktspēju, nodrošinot, ka jūsu kods ir nevis izmantojot pārāk daudz atmiņas vai pārāk daudz CPU ciklu, un vēl daudz vairāk. Testēšanas perspektīvā varat atveidot, kā lietotne vai tīmekļa lapa tiks attēlota dažādās pārlūkprogrammās, kā arī dažādās ierīcēs un platformās, izmantojot atsaucīgu dizainu un iebūvēto simulatoru maģiju. Vislabāk ir tas, ka jūs varat visu to paveikt, nepametot savu pārlūkprogrammu!
Tālāk sniegtie konsultācijas palīdzēs jums piekļūt šiem izstrādātāju rīkiem vairākās populārās tīmekļa pārlūkprogrammās.
Google Chrome
Chrome izstrādātāju rīki ļauj rediģēt un atkļūdot kodu, veikt atsevišķu komponentu auditu, lai parādītu veiktspējas problēmas, simulētu dažādus ierīces ekrānus, tostarp tos, kuros darbojas operētājsistēma Android vai iOS , un veikt vairākas citas noderīgas funkcijas.
- Noklikšķiniet uz Chrome galvenās izvēlnes pogas, kas apzīmēta ar trim horizontālajām līnijām un atrodas pārlūkprogrammas augšējā labajā stūrī.
- Kad parādās nolaižamā izvēlne, novietojiet peles kursoru virs opcijas Vairāk rīki .
- Tagad ir jāparādās apakšizvēlne. Atlasiet opciju ar nosaukumu Izstrādātāju rīki . Šajā izvēlnes vietā varat izmantot šo īsinājumtaustiņu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Tagad ir jāizveido Chrome izstrādātāju rīku saskarne, kā parādīts ekrānuzņēmuma ekrānuzņēmumā. Atkarībā no jūsu Chrome versijas sākotnējais izkārtojums, ko jūs redzat, var nedaudz atšķirties no šeit redzamā. Izstrādātāju rīku galvenais centrs, kas parasti atrodas ekrāna apakšdaļā vai labajā pusē, satur šādas cilnes.
Elementi: nodrošina iespēju pārbaudīt CSS un HTML kodu, kā arī rediģēt CSS tiešraidē, redzot jūsu izmaiņu ietekmi reālajā laikā.
Konsole: pārlūkprogrammas Chrome JavaScript konsole ļauj tieši ievadīt komandu, kā arī diagnosticēt atkļūdošanu.
Avoti: ļauj atkļūdot JavaScript kodu, izmantojot jaudīgu grafisko saskarni.
Tīkls: kategorizē un parāda detalizētu informāciju par katru saistīto darbību aktīvā lietojumprogrammā vai lapā, ieskaitot pilnu pieprasījuma un atbildes galvenes, kā arī uzlabotas laika metriku.
Laika skala: ļauj veikt padziļinātu analīzi par katru darbību, kas notiek pārlūkprogrammā, tiklīdz ir uzsākta lapas vai lietotnes ielādes pieprasījuma sākšana. - Papildus šīm sadaļām varat arī piekļūt šādiem rīkiem, izmantojot >> ikonu, kas atrodas cilnē Laika posms labajā pusē.
Profils: sadalīts CPU profilieratorā un profila profilā , nodrošina visaptverošu atmiņas izmantošanu un aktīvās programmas vai lapas vispārējo izpildes laiku.
Drošība: izceļ sertifikāta problēmas un citus ar drošību saistītus jautājumus ar aktīvo lapu vai lietojumprogrammu.
Resursi: šeit varat pārbaudīt sīkdatnes, vietējo krātuvi, lietotņu kešatmiņu un citus vietējos datu avotus, ko izmanto pašreizējā tīmekļa lapā vai lietojumprogrammā.
Audits: piedāvā iespējas, kā optimizēt lapu vai lietojumprogrammas ielādes laiku un vispārējo veiktspēju. - Ierīces režīms ļauj skatīties aktīvo lapu simulatorā, kas to gandrīz piešķir tieši tā, kā tas būtu redzams vairāk nekā desmit ierīcēs, ieskaitot vairākus pazīstamus Android un iOS modeļus, piemēram, iPad, iPhone un Samsung Galaxy. Jums tiek dota iespēja pielāgot pielāgoto ekrāna izšķirtspēju atbilstoši jūsu 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 cilnē Elements kreisajā pusē.
- Varat arī pielāgot izstrādātāja rīku izskatu un noskaņojumu, vispirms noklikšķinot uz izvēlnes pogas, ko attēlo trīs vertikāli novietoti punkti un kas atrodas iepriekš minēto ciļņu labajā pusē. Šajā nolaižamajā izvēlnē varat pārvietot doku, rādīt vai slēpt dažādus rīkus, kā arī palaist vairāk uzlabotus vienumus, piemēram, ierīces inspektoru. Jūs atradīsit, ka dev rīku saskarne pati par sevi ir ļoti pielāgojama, izmantojot šajā sadaļā aprakstītos iestatījumus.
Mozilla Firefox
Firefox Web izstrādātāju sadaļa ietver tādus instrumentus kā dizaineriem, izstrādātājiem un testētājiem, piemēram, stila redaktoru un pikseļu orientējošo eyedropper.
Ieteicamie lasījumi : Top 25 Greasemonkey un Tampermonkey lietotāja skripti
- Noklikšķiniet uz Firefox galvenās izvēlnes pogas, kuru attēlo trīs horizontālas līnijas un kas atrodas pārlūka loga augšējā labajā stūrī.
- Kad parādās nolaižamā izvēlne, atlasiet ikonu ar nosaukumu Izstrādātājs . Tagad ir jāizveido izvēlne Web Developer , kurā ir šādas opcijas. Jūs ievērosiet, ka lielākajā daļā izvēlnes vienumu ir saistīti ar tiem īsinājumtaustiņi.
Pārslēgt rīkus: parāda vai slēpj izstrādātāju rīku saskarni, parasti novietota pārlūka loga apakšā. Tastatūras saīsne: 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ī pārnēsājamā ierīcē, izmantojot attālo atkļūdošanu. Tastatūras saīsne: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web konsole: ļauj aktīvajā lapā izpildīt JavaScript izteiksmes, kā arī pārskatīt dažādus reģistrētos datus, tostarp drošības brīdinājumus, tīkla pieprasījumus, CSS ziņojumus un citus. Tastatūras saīsne: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript atkļūdotājs ļauj precīzi noteikt un novērst defektus, nosakot pārtraukuma punktus, pārbaudot DOM mezglus, melnā boksa ārējos avotus un daudz ko citu. Tāpat kā inspektora gadījumā , šī funkcija atbalsta arī attālināto atkļūdošanu. Tastatūras saīsne: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Stilu redaktors: ļauj izveidot jaunas stilu lapas un iekļaut tos aktīvā tīmekļa lapā vai rediģēt esošās lapas un pārbaudīt, kā izmaiņas tiek padarītas pārlūkprogrammā ar vienu klikšķi. Tastatūras saīsne: Mac OS X, Windows ( SHIFT + F7 )
Veiktspēja: Sniedz detalizētu informāciju par aktīvās lapas tīkla darbību, kadru ātruma datiem, JavaScript izpildes laiku un stāvokli, krāsu mirgošanu un daudz ko citu. Tastatūras saīsne: Mac OS X, Windows ( SHIFT + F5 )
Tīkls: norāda visus pārlūkprogrammas uzsāktos tīkla pieprasījumus kopā ar atbilstošo metodi, izcelsmes domēnu, veidu, lielumu un pagājušo laiku. Tastatūras saīsne: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Izstrādātāju rīkjosla: atver interaktīvu komandrindas tulku. Ievadiet palīdzību tulkotāja sarakstā par visām pieejamām komandām un to pareizu sintaksi. Tastatūras saīsne: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: nodrošina iespēju izveidot un izpildīt Web lietotnes, izmantojot faktisko ierīci, kurā darbojas Firefox OS, vai izmantojot Firefox OS Simulator. Tastatūras saīsne: Mac OS X, Windows ( SHIFT + F8 )
Browser Console: nodrošina tādu pašu funkcionalitāti kā Web Console (skatiet iepriekš). Tomēr visi atdotie dati attiecas uz visu Firefox lietojumprogrammu (ieskaitot paplašinājumus un pārlūkprogrammas līmeņa funkcijas), nevis tikai uz aktīvo Web lapu. Tastatūras saīsne: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Atbildīgā dizaina skats: ļaus jums uzreiz apskatīt Web lapu ar dažādām izšķirtspējām, izkārtojumiem un ekrāna izmēriem, lai atdarinātu vairākas ierīces, tostarp planšetdatorus un viedtālruņus. Tastatūras saīsne: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: parāda sešsezonas krāsu kodu individuāli izvēlētiem pikseļiem.
Scratchpad : ļauj rakstīt, rediģēt, integrēt un izpildīt JavaScript koda fragmentus no loga Firefox. Tastatūras saīsne: Mac OS X, Windows ( SHIFT + F4 )
Lapas avots: sākotnējais pārlūkprogrammas izstrādātāju rīks, šī opcija vienkārši parāda aktīvās lapas pieejamo avotu kodu. Tastatūras saīsne: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Saņemiet vairāk rīku: atver Web izstrādātāja rīkjoslas kolekciju Mozilla oficiālajā papildinājumu vietnē, kurā ir apmēram duci populāru paplašinājumu, piemēram, Firebug un Greasemonkey.
Microsoft Edge / Internet Explorer
Kopš tā sauktais F12 izstrādātāju rīks , pateicoties tastatūras saīsnei, ar kuru ir izveidots interfeiss kopš iepriekšējām Internet Explorer versijām, devllesetu skaits IE11 un Microsoft Edge jau kopš tā izveides ir paveicis daudz, piedāvājot ļoti ērtu grupu monitori, atkļūdotāji, emulatori un lidojuma kompilatori.
- Noklikšķiniet uz izvēlnes Citas darbības , kuru veido trīs punkti un kas atrodas pārlūka loga augšējā labajā stūrī. Kad parādās nolaižamā izvēlne, atlasiet opciju ar nosaukumu F12 Izstrādes rīki . Kā jau minēju, jūs varat piekļūt rīkiem, izmantojot F12 īsinājumtaustiņu.
- Tagad ir jāizveido izstrādes saskarne, parasti pārlūka loga apakšdaļā. Pieejami sekojoši rīki, no kuriem katrs ir pieejams, noklikšķinot uz attiecīgās cilnes pozīcijas vai izmantojot pievienoto īsinājumtaustiņu.
DOM Explorer: Ļauj rediģēt stilu lapas un HTML aktīvā lapā, padarot modificētos rezultātus pēc iespējas ātrāk. Izmanto IntelliSense funkcionalitāti, lai automātiski aizpildītu kodu, ja tas ir piemērojams. Tastatūras saīsne: (CTRL + 1)
Konsole: nodrošina iespÄ "ju ar atkļauto informÄ ciju, tostarp skaitÄ tus, taimerus, izsekotÄ s un personalizÄ" tÄ s ziÅ † as, izmantojot integrÄ "tu API. Arī ļauj ievadīt kodu aktīvai tīmekļa lapai un rediģēt izmaiņas atsevišķām mainīgajām vērtībām. Tastatūras saīsne: (CTRL + 2)
Atkļūdotājs: ļauj iestatīt pārtraukuma punktus un atkļūdot kodu, kad tas tiek izpildīts, pēc vajadzības pēc līnijas. Tastatūras saīsne: (CTRL + 3)
Tīkls. Tiek uzskaitīts katrs tīkla pieprasījums, kuru pārlūkprogramma sākusi, ielādes un izpildes laikā, tostarp protokola detaļas, satura veids, joslas platuma lietojums un daudz kas cits. Tastatūras saīsne: (CTRL + 4)
Veiktspēja: detalizēta informācija par kadru ātrumu, CPU izmantošanu un citiem rādītājiem, kas saistīti ar veiktspēju, lai palīdzētu jums paātrināt lapas ielādes laiku un citas darbības. Tastatūras saīsne: (CTRL + 5)
Atmiņa: palīdz izolēt un novērst potenciālo atmiņas noplūdi pašreizējā Web lapā, parādot atmiņas izmantošanas laika skalu kopā ar momentuzņēmumiem no dažādiem laika intervāliem. Tastatūras saīsne: (CTRL + 6)
Emulācija: parāda, kā aktīva lapa veidos dažādas izšķirtspējas un ekrāna izmērus, emulējot viedtālruņus, planšetdatorus un citas ierīces. Arī nodrošina iespēju mainīt lietotāja aģentu un lapas orientāciju, kā arī simulēt dažādas ģeogrāfiskās atrašanās vietas, ievadot platumu un garumu. Tastatūras saīsne: (CTRL + 7) - Lai konsole būtu redzama kādā no citiem instrumentiem, noklikšķiniet uz kvadrātveida pogas ar labo kronšteinu tā iekšpusē, kas atrodas attīstības rīku saskarnes augšējā labajā stūrī.
- Lai atdalītu izstrādātāju rīku saskarni, lai tas kļūtu par atsevišķu logu, noklikšķiniet uz pogas, ko attēlo divi kaskādes taisnstūri, vai izmantojiet šādu īsinājumtaustiņu: CTRL + P. Jūs varat ievietot instrumentus to sākotnējā atrašanās vietā, otrreiz nospiežot CTRL + P.
Apple Safari (tikai OS X)
Safari daudzveidīgais dev rīku komplekts atspoguļo lielo izstrādātāju kopienu, kas izmanto Mac dizainu un programmēšanas vajadzībām. Papildus spēcīgai konsolei un tradicionālajām mežizstrādes un atkļūdošanas funkcijām tiek piedāvāts ērti izmantojams reaģējošs dizaina režīms un rīks, lai izveidotu savus pārlūka paplašinājumus.
- Noklikšķiniet uz Safari pārlūka izvēlnē, kas atrodas jūsu ekrāna augšdaļā. Kad parādās nolaižamā izvēlne, atlasiet Preferences . Šīs izvēlnes vienuma vietā varat izmantot šo īsinājumtaustiņu: COMMAND + COMMA (,)
- Tagad jāparādās Safari preferenču saskarne, pārklājot pārlūkprogrammas logu. Noklikšķiniet uz ikonas Advanced , kas atrodas galējā labajā pusē.
- Tagad ir jābūt redzamām papildu preferencēm. Šī ekrāna apakšdaļā ir izvēles rūtiņa, kas tiek parādīta izvēlnē Rādīt jaunizveidot , pievienojot izvēles rūtiņu. Ja lodziņā nav redzama atzīme, noklikšķiniet uz tā vienu reizi, lai to ievietotu tur.
- Aizveriet preferenču saskarni, noklikšķinot uz sarkanā krāsa "x", kas atrodas augšējā kreisajā stūrī.
- 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āizveido nolaižamā izvēlne, kurā ir šādas opcijas.
Atvērto lapu ar: Ļauj atvērt aktīvo Web lapu vienā no citām pārlūkprogrammām, kas pašlaik ir instalētas jūsu Mac datorā.
Lietotāja aģents: ļauj atlasīt vairāk nekā desmit iepriekš noteiktas lietotāja aģentu vērtības, tostarp vairākas Chrome, Firefox un Internet Explorer versijas, kā arī noteikt savu pielāgoto virkni.
Ievadiet reaģējošo dizainparaugu režīmu : tiek parādīta pašreizējā lapa, jo tā parādīsies dažādās ierīcēs un dažādās ekrāna izšķirtspējās.
Rādīt tīmekļa inspektoru: palaiž Safari dev rīku galveno saskarni, kuru parasti novieto pārlūka ekrāna apakšdaļā un kurā ir šādas sadaļas: elementi , tīkls , resursi , laika grafiki , atkļūdotājs , krātuve , konsoli .
Rādīt kļūdas konsoli: Arī tiek atvērts Dev rīku saskarne tieši cilnē Konsole, kurā tiek parādītas kļūdas, brīdinājumi un citi meklējami žurnāla dati.
Rādīt lapas avotu: atver cilni Resursi , kurā parādīts avota kods aktīvajai lapai, kas iedalīta kategorijās pēc dokumenta.
Rādīt lapu resursus: veic tādu pašu funkciju kā opcija Rādīt lapas avotu .
Rādīt fragmenta redaktoru: atver jaunu logu, kurā varat ievadīt CSS un HTML kodu, priekšskatot tā izvadi tiešraidē.
Rādīt paplašinājumu veidotāju: nodrošina iespēju izveidot vai rediģēt Safari paplašinājumus ar CSS, HTML un JavaScript.
Rādīt laikposma ierakstīšanu: atver cilnes Laika posteņi un sāk rādīt tīkla pieprasījumus, izkārtojumu un informācijas atveidošanu, kā arī JavaScript izpildi reālajā laikā.
Tukšs kešatmiņas: dzēš visu cietajā diskā saglabāto kešatmiņu.
Atspējot kešatmiņā: apturēšana Safari no kešdarbiem, lai visu saturu no servera ielādētu pēc katras lapas ielādes.
Atspējot attēlus: novērš attēlu pārveidošanu visās tīmekļa lapās.
Atspējot stilus: ignorē CSS rekvizītus, kad tiek ielādēta lapa.
Atspējot JavaScript: ierobežo JavaScript izpildi visās lapās.
Atspējot paplašinājumus: aizliedz visu instalēto paplašinājumu darbību pārlūkprogrammā.
Atspējot portālam paredzētos hacks: ja Safari ir modificēts, lai tieši apskatītu aktīvajai Web lapai raksturīgus jautājumus, šī opcija bloķēs šīs izmaiņas, lai lapa tiktu ielādēta, kā tas būtu pirms šo izmaiņu ieviešanas.
Atspējot vietējo failu ierobežojumus: ļauj pārlūkprogrammai piekļūt vietējo disku failiem - darbībai, kas drošības apsvērumu dēļ ir ierobežota pēc noklusējuma.
Disable Cross-Origin Restrictions: šie ierobežojumi pēc noklusējuma tiek ieviesti, lai novērstu XSS un citas iespējamās briesmas. Tomēr attīstības nolūkos tiem bieži vien ir jābūt īslaicīgi invalīdiem.
Atļaut JavaScript no viedās meklēšanas lauka: ja tas ir iespējots, nodrošina iespēju ievadīt vietrāžus URL ar javascript: tieši pievienots adrešu joslai.
Apskatiet SHA-1 sertifikātus kā nedrošus: SSL sertifikātus, izmantojot SHA-1 algoritmu , plaši uzskata par novecojušiem un neaizsargātiem.