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 pāri kursoram Vairāk rīku iespēja.
- Tagad ir jāparādās apakšizvēlne. Atlasiet opciju, kas apzīmēta ar Izstrādātāju rīki . Šī izvēlnes punkta 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 izmaiņu ietekmi reālajā laikā.Konsole: Chrome JavaScript konsole ļauj tieši ievadīt komandu, kā arī diagnosticēt atkļūdošanu.Avoti: Ļauj jums atkļūdot JavaScript kodu, izmantojot jaudīgu grafisko saskarni.Tīkls: Kategorijas 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 sākta lapas vai lietotnes ielādes pieprasīšana.
- Papildus šīm sadaļām varat arī piekļūt šādiem rīkiem, izmantojot >> ikona, kas atrodas labajā pusē no Laika skala tab.Profils: Saplīsis uz CPU profilētājs un Kuģa profilētājs sadaļās, nodrošina visaptverošu atmiņas izmantošanu un aktīvās programmas vai lapas vispārējo izpildes laiku.Drošība: Izceļ sertifikātu problēmas un citus ar drošību saistītus jautājumus ar aktīvo lapu vai programmu.Resursi: Šeit varat pārbaudīt sīkfailus, vietējo krātuvi, lietotņu kešatmiņu un citus vietējos datu avotus, ko izmanto pašreizējā tīmekļa lapa vai lietojumprogramma.Revīzijas: Piedāvā veidus, kā optimizēt lapu vai lietojumprogrammas ielādes laiku un vispārējo veiktspēju.
- Ierīces režīms ļauj apskatīt aktīvo lapu simulatorā, kas to gandrīz pilnveido tā, kā tas būtu redzams vairāk nekā divpadsmit 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. Pārslēgt Ierīces režīms ieslēdziet un izslēdziet, izvēlieties mobilā tālruņa ikonu, kas atrodas tieši no kreisās puses Elementi tab.
- 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.
Lifewire ieteicamais lasījums: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 . The Web izstrādātājs Tagad ir jāizveido izvēlne, 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, kas parasti atrodas 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ī portatīvajā 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īvai lapai 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 )Atkļūdotājs: The JavaScript atkļūdotājs ļauj precīzi noteikt un novērst defektus, iestatot slēgšanas punktus, pārbaudot DOM mezglus, melnā boksa ārējos avotus un daudz ko citu. Tāpat kā gadījumā ar Inspektors , šī funkcija atbalsta arī attālinātu atkļūdošanu. Tastatūras saīsne: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Stila redaktors: Ļauj izveidot jaunu stilu tabulu un iekļaut to 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 )Izpildījums: 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: Saraksta katram tīkla pieprasījumam, kuru uzsāka pārlūks, 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ība par tulkiem visu pieejamo komandu sarakstu un to pareizo 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 )Pārlūkprogrammas konsoles: Nodrošina tādu pašu funkcionalitāti kā Web konsole (Skatīt 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īga dizaina skats: Ļauj uzreiz skatīt tīmekļa 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 heksa 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 )Avota lapa: Oriģināls pārlūkprogrammas izstrādātāju rīks, šī opcija vienkārši parāda pieejamo avota kodu aktīvai lapai. Tastatūras saīsne: Mac OS X ( KOMANDA + U ), Windows ( CTRL + U )Iegūt vairāk rīku: Atveras Web izstrādātāja rīkjosla kolekcija Mozilla oficiālajā papildinājumā, kurā ir apmēram 12 populāru paplašinājumu, piemēram, Firebug un Greasemonkey.
Microsoft Edge / Internet Explorer
Parasti to sauc par F12 Izstrādes rīki , pateicība par tastatūras īsinājumtaustiņu, kas ir sācis saskarni kopš iepriekšējām Internet Explorer versijām, Dev rīku kopums IE11 un Microsoft Edge jau kopš tā izveides ir paveicis daudz, piedāvājot ļoti ērtu monitoru, atkļūdotāju, emulatoru grupu un -plūsmas kompilatori.
- Noklikšķiniet uz Vairāk darbību izvēlne, ko attēlo 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, kas apzīmēta ar F12 Izstrādes rīki . Kā es jau minēju, jūs varat arī piekļūt rīkiem, izmantojot F12 tastatūras īsceļš.
- 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ā lappusē, padarot grozī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 integrētas API palīdzību iesniegt atkļūdošanas informāciju, tostarp skaitītājus, taimerus, pēdas un pielāgotus ziņojumus. 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: Sarakstā tiek parādīts katrs tīkla pieprasījums, ko pārlūkprogramma sākusi lapas ielādes un izpildes laikā, tostarp protokola detaļas, satura veids, joslas platuma lietojums un daudz kas cits. Tastatūras saīsne: (CTRL + 4) Izpildījums: 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ādīs, 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 parādītu Konsole bet jebkurā 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ā, nospiežot CTRL + P otro reizi.
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.
- Klikšķ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 elementa vietā varat izmantot šo īsinājumtaustiņu: COMMAND + COMMA (,)
- Safari's Preferences Tagad ir jāparādās saskarne, pārklājot pārlūkprogrammas logu. Noklikšķiniet uz Progresīvs ikona, kas atrodas galvas labajā pusē.
- The Progresīvs preferences tagad ir redzamas. Šī ekrāna apakšdaļā ir opcija ar marķējumu Parādīt izvēlnes joslā izvēlni Izstrādāt , kopā ar izvēles rūtiņu. Ja lodziņā nav redzama atzīme, noklikšķiniet uz tā vienu reizi, lai to ievietotu tur.
- Aizveriet Preferences interfeisu, noklikšķinot uz sarkanā "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īmes un Logu . Noklikšķiniet uz šī izvēlnes vienuma. Tagad ir jāizveido nolaižamā izvēlne, kurā ir šādas opcijas.Atvērt 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 izvēlēties vairāk nekā divpadsmit iepriekš definētu lietotāju aģentu vērtībām, tostarp vairākām Chrome, Firefox un Internet Explorer versijām, kā arī definēt savu pielāgoto virkni.Ievadiet atbildes dizaina 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ž galveno saskarni Safari dev rīkos, kas parasti tiek novietoti pārlūka ekrāna apakšdaļā un satur šādas sadaļas: Elementi , Tīkls , Resursi , Laika grafiki , Atkļūdotājs , Uzglabāšana , Konsole .Rādīt kļūdas konsoli: Arī tiek atvērta Dev rīku saskarne, tieši uz Konsole kas parāda kļūdas, brīdinājumus un citus meklējamus log datus.Rādīt lapas avotu: Atveras Resursi cilne, kurā tiek parādīts avota kods aktīvajai lapai, kuru klasificē pēc dokumenta.Rādīt lapu resursus: Veic tādu pašu funkciju kā Rādīt lapas avotu iespēja.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 laika ierakstu: Atveras Laika grafiki cilne un sāk parādīt tīkla pieprasījumus, izkārtojumu un informācijas atveidošanu, kā arī JavaScript izpildi reālajā laikā.Tukši kešatmiņas: Dzēš visu cietajā diskā saglabāto kešatmiņu.Atspējot kešatmiņas: Apturēšana Safari no kešdarbiem, lai visu saturu ielādētu no servera pēc katras lapas ielādes.Atspējot attēlus: Novērš attēlu atveidošanu visās tīmekļa lapās.Atspējot stilus: Ignorē CSS īpašības, kad lapa tiek ielādēta.Atspējot JavaScript: Ierobežo JavaScript izpildi visās lapās.Atspējot paplašinājumus: Aizliegts visus instalētos paplašinājumus darboties pārlūkprogrammā.Atspējot vietnes īpašos 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ējā diska failiem - darbībai, kas drošības apsvērumu dēļ ir ierobežota pēc noklusējuma.Izslēgt šķērsošanas ierobežojumus: Pēc noklusējuma šie ierobežojumi 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 iespējots, nodrošina iespēju ievadīt vietrāžus URL ar javascript: tieši ievietota adrešu joslā.Apskatiet SHA-1 sertifikātus kā nedrošus: SSL sertifikāti, izmantojot SHA-1 algoritmu, tiek plaši uzskatīti par novecojušiem un neaizsargātiem.
