Kif għandek tuża għodod għall-iżvilupp tal-Web Browser

Għodod integrati għall-disinjaturi tal-Web, l-iżviluppaturi u l-eżaminaturi

Minbarra dawk li jfasslu l-brawżers li jiffokaw fuq l-utent ta 'kuljum li qed ifittxu tisserfja l-Internet, huma wkoll jaqdu lill-iżviluppaturi tal-Web, disinjaturi u professjonisti tal-assigurazzjoni tal-kwalità li jgħinu biex jibnu l-apps u s-siti li dawk l-utenti qed jaċċessaw billi jintegraw għodod b'saħħithom fil-browsers. infushom.

Għaddew il-ġranet fejn l-uniċi għodda ta 'pprogrammar u ttestjar misjuba fi ħdan il-browser ppermettew li tara l-kodiċi tas-sors ta' paġna u xejn aktar. Il-browsers tal-lum jippermettulek tieħu adsa ħafna aktar profonda billi tagħmel affarijiet bħal eżekuzzjoni u debugging ta 'siltiet ta' JavaScript, spezzjonar u editjar ta 'elementi DOM, monitoraġġ tat-traffiku tan-netwerk f'ħin reali bħala tagħbija tal-app jew paġna tiegħek biex tidentifika ostakli, tanalizza l-prestazzjoni CSS, tiżgura li l-kodiċi tiegħek ma tużax wisq memorja jew wisq ċikli ta ' CPU , u ħafna aktar. Mill-perspettiva tal-ittestjar, tista 'tirriproduċi kif app jew paġna tal-Web tirrendi f'varjaturi differenti kif ukoll fuq apparati u pjattaformi differenti permezz tal-maġija ta' disinn li jirrispondi u simulaturi integrati. L-aħjar parti hija li tista 'tagħmel dan kollu mingħajr ma tħalli l-browser tiegħek!

Il-tutorials hawn taħt jimxu miegħek kif tista 'taċċessa dawn l-għodod ta' żvilupp f'diversi browsers popolari tal-Web.

Google Chrome

L-għodod ta 'żvilupp ta' Chrome jippermettulek teditja u tneħħi l-kodiċi, tivverifika komponenti individwali biex tesponi kwistjonijiet ta 'prestazzjoni, tissimula skrijns differenti ta' apparat inklużi dawk li jmorru fuq Android jew iOS , u twettaq bosta funzjonijiet oħra utli.

1. Ikklikkja fuq il-buttuna tal-menu prinċipali ta 'Chrome, immarkata bi tliet linji orizzontali u li tinsab fir-rokna ta' fuq tal-lemin tal-browser.
2. Meta tidher il-menu drop-down, aqla 'l-mouse cursor fuq l-Għażla Aktar għodda .
3. Sottomenu issa għandu jidher. Agħżel l-għażla għodda ta 'Żviluppatur imsejħa. Tista 'wkoll tuża d-shortcut tal-keyboard li ġejja minflok din l-oġġett tal-menu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. L-interface Chrome Developer Tools issa għandha tintwera, kif muri f'dan il-screenshot ta 'l-eżempju. Skont il-verżjoni tiegħek ta 'Chrome, it-tqassim inizjali li tara jista' jkun kemmxejn differenti minn dak ippreżentat hawn. Il-buttun prinċipali tal-għodod tal-iżviluppatur, li tipikament jinsabu fuq in-naħa tal-qiegħ jew fuq il-lemin tal-iskrin, fih it-tabelli li ġejjin.
   Elementi: Tipprovdi l-abbiltà li tispezzjona CSS u kodiċi HTML kif ukoll teditja CSS fuq il-fly, tara l-effetti tal-bidliet tiegħek f'ħin reali.
   Console: il -console JavaScript ta 'Chrome jippermetti dħul dirett mill-kmand kif ukoll debugging dijanjostiku.
   Sorsi: Tippermettilek tiddefferixxi l-kodiċi JavaScript permezz ta 'interface grafika qawwija.
   Netwerk: Ikkategorizza u juri informazzjoni dettaljata dwar kull operazzjoni relatata fuq l-applikazzjoni jew il-paġna attiva, inklużi titoli kompluti ta 'talba u rispons kif ukoll metriċi ta' ħin avvanzati.
   Skeda ta 'żmien: Tippermetti analiżi profonda ta' kull attività li sseħħ fi ħdan il-browser malli tinbeda talba għal tagħbija ta 'paġna jew app.
5. Minbarra dawn it-taqsimiet, tista 'wkoll ikollok aċċess għall-għodod li ġejjin permezz tal-ikona >> , li tinsab fuq il-lemin tat-tab Timeline .
   Profil: Imqassam fis-sezzjonijiet tal- profil CPU u tal- profil tal - Heap , jipprovdi użu tal-memorja komprensiv u l-ħin ta 'eżekuzzjoni ġenerali tal-applikazzjoni attiva jew tal-paġna.
   Sigurtà: Jenfasizza l-problemi taċ-ċertifikati u kwistjonijiet oħra relatati mas-sigurtà mal-paġna attiva jew l-applikazzjoni.
   Riżorsi: Dan huwa fejn tista 'tispezzjona cookies, ħażna lokali, app cache, u sorsi tad-dejta lokali oħra użati mill-paġna jew applikazzjoni kurrenti.
   Verifiki: Jipprovdi modi biex itejjeb il-ħin tat-tagħbija tal-paġna jew l-applikazzjoni u l-prestazzjoni ġenerali.
6. Modalità tad-Displej jippermettilek li tara l-paġna attiva f'simulatur li jagħmilha kważi eżattament kif jidher fuq waħda minn aktar minn tużżana apparati, inklużi bosta mudelli magħrufa sew Android u iOS bħall-iPad, iPhone, u Samsung Galaxy. Int qed tingħata wkoll il-ħila li emulati r-riżoluzzjonijiet ta 'l-iskrin tad-dwana biex taqdi l-ħtiġijiet partikolari ta' l-iżvilupp jew l-ittestjar tiegħek. Biex tpartit Modalità tad-Dispaċċ fuq u barra, agħżel l-ikona tal-mowbajl li tinsab direttament fuq ix-xellug tat-tab Elementi .
7. Tista 'wkoll tippersonalizza d-dehra ta' l-għodod ta 'l-iżviluppatur billi tagħmel l-ewwel tikklikkja fuq il-buttuna tal-menu rappreżentata minn tliet tikek imqiegħda vertikalment u li tinsab fuq in-naħa leminija tal-lenti tal-tabs imsemmijin hawn fuq. Minn dan il-menu drop-down inti tista 'terġa' tpoġġi l-baċir, turi jew taħbi għodda differenti kif ukoll tniedi oġġetti aktar avvanzati bħal spettur ta 'mezz. Int issib li l-għodda tal-għodod dev fiha nnifisha hija ferm customizable permezz tas-settings misjuba f'din it-taqsima.

Mozilla Firefox

Is-sezzjoni tal-Developer tal-Web ta 'Firefox tinkludi għodod għal disinjaturi, żviluppaturi u eżaminaturi bl-istess mod bħal editur tal-istil u eyedropper li jidentifika l-pixels.

Qari Rakkomandat: L-iskripts ta 'l-Utent Top 25 ta' Greasemonkey u Tampermonkey

1. Ikklikkja fuq il-buttuna prinċipali tal-menu ta 'Firefox, irrappreżentata minn tliet linji orizzontali u li tinsab fir-rokna ta' fuq tal-lemin tat-tieqa tal-browser.
2. Meta jidher il-menu drop-down, agħżel l-ikona ttikkettjata Developer . Il - menu tal- Web Developer issa għandu jintwera, li fih l-għażliet li ġejjin. Int ser tinnota li l-biċċa l-kbira tal-oġġetti tal-menu għandhom shortcuts tal-keyboard assoċjati magħhom.
   Għodod tal-Toggle: Juri jew jaħbi l-għodda tal-iżviluppatur interface, tipikament pożizzjonat fil-qiegħ tat-tieqa tal-browser. Shortcut tas-keyboard: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Spettur: Tippermetti li tispezzjona u / jew tweak kodiċi CSS u HTML fuq il-paġna attiva kif ukoll fuq apparat portabbli permezz ta 'debugging remot. Shortcut tas-keyboard: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Web Console: Tippermetti li tesegwixxi espressjonijiet JavaScript fi ħdan il-paġna attiva kif ukoll tirrevedi sett divers ta 'dejta reġistrata inkluż twissijiet ta' sigurtà, talbiet għal netwerk, messaġġi CSS, u aktar. Shortcut tas-keyboard: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: Il- Debugger ta 'JavaScript ihallik jindika u jiffissa d-difetti billi jiffissa punti ta' waqfien, jispezzjona nodes tad-DOM, sorsi ta 'boki tal-iswed iswed, u ħafna aktar. Bħal fil-każ tal- Ispettur , din il-karatteristika tappoġġja wkoll id-debugging remot. Shortcut tas-keyboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Editur tal-Style: Tippermetti li toħloq stili ta 'stili ġodda u tinkorporahom bil-paġna tal-Web attiva, jew tbiddel folji eżistenti u tittestja kif il-bidliet tiegħek jagħmlu f'bastru b'wieħed klikk waħda biss. Shortcut tas-keyboard: Mac OS X, Windows ( SHIFT + F7 )
   Prestazzjoni: Tipprovdi tqassim dettaljat tal-prestazzjoni tan-netwerk tal-paġna attiva, data tar-rata tal-qafas, ħin u stat ta 'eżekuzzjoni ta' JavaScript, żebgħa li tteptep, u ħafna aktar. Shortcut tas-keyboard: Mac OS X, Windows ( SHIFT + F5 )
   Netwerk: Iniżżel kull talba ta 'netwerk mibdija mill-browser flimkien mal-metodu korrispondenti, dominju ta' oriġini, tip, daqs, u ħin li għadda. Shortcut tas-keyboard: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Toolbar għall-iżviluppatur: Jibera interpretu interattiv tal-linja ta 'kmand. Daħħal l- għajnuna fl-interpretu għal-lista tal-kmandi kollha disponibbli u s-sintassi xierqa tagħhom. Shortcut tas-keyboard: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Tipprovdi l-abbiltà li toħloq u tesegwixxi l-apps tal-Web permezz ta 'apparat attwali li jmexxi Firefox OS jew permezz tal-Firefox OS Simulator. Shortcut tas-keyboard: Mac OS X, Windows ( SHIFT + F8 )
   Browser Console: Tipprovdi l-istess funzjonalità bħall- Web Console (ara hawn fuq). Madankollu, id-data kollha mibgħuta lura hija għall-applikazzjoni sħiħa ta 'Firefox (inklużi estensjonijiet u funzjonijiet fil-livell tal-browser) għall-kuntrarju biss tal-paġna tal-Web attiva. Shortcut tas-keyboard: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   View ta 'Disinn Responsiv: Tippermettilek tara istantanjament paġna tal-Web f'riżoluzzjonijiet, taqsim, u daqsijiet differenti tal-iskrin li jimitaw apparati multipli inkluż pilloli u smartphones. Shortcut tas-keyboard: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Eyedropper: Juri l-kodiċi tal-kulur hex għal pixels magħżula individwalment.
   Scratchpad : Tippermetti tikteb, teditja, tintegra u tesegwixxi snippeti tal-kodiċi JavaScript minn ġewwa tieqa pop-out Firefox. Shortcut tas-keyboard: Mac OS X, Windows ( SHIFT + F4 )
   Paġna ta 'Page: L-għodda oriġinali tal-iżviluppatur ibbażata fuq il-browser, din l-għażla sempliċement turi l-kodiċi tas-sors disponibbli għall-paġna attiva. Shortcut tas-keyboard: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Aktar Għodda: Tinfetaħ il - ġabra ta ' Toolbox tal - Web Developer fuq is-sit uffiċjali tal-Mozilla's add-ons , li fiha madwar tużżana estensjonijiet popolari bħal Firebug u Greasemonkey.

Microsoft Edge / Internet Explorer

Komunement imsejħa l- Għodod tal-Iżvilupp F12 , li nilqgħu l-keyboard shortcut li nediet l-interfaċċja peress li l-verżjonijiet preċedenti ta 'l-Internet Explorer, l-għodda ta' dev fil-IE11 u Microsoft Edge mxiet ħafna 'l quddiem billi offrew grupp ta' moniters, debuggers, emulaturi, u kompilaturi fuq il-fly.

1. Ikklikkja fuq il-menu Aktar azzjonijiet , rappreżentat minn tliet tikek u li jinsab fir-rokna ta 'fuq tal-lemin tat-tieqa tal-browser. Meta jidher il-menu drop-down, agħżel l-għażla mmarkata F12 Developer Tools . Kif diġà semmejt, tista 'wkoll ikollok aċċess għall-għodod permezz tal-buttuna tal-buttuna F12 .
2. L-interface għall-iżvilupp issa għandu jintwera, tipikament fil-qiegħ tat-tieqa tal-browser. L-għodod li ġejjin huma disponibbli, kull wieħed aċċessibbli billi tikklikkja fuq l-intestatura rispettiva tagħhom jew billi tuża l-buttuna shortcut li takkumpanjaha.
   DOM Explorer: Tippermetti li tbiddel stili ta 'l-istil u HTML fil-paġna attiva, u tirrendi r-riżultati modifikati kif tmur. Juża l-funzjonalità ta 'IntelliSense biex jimlew il-kodiċi awtomatikament fejn applikabbli. Shortcut tas-keyboard: (CTRL + 1)
   Console: Tipprovdi l-abbiltà li tissottometti informazzjoni ta 'debugging inklużi counters, timers, traċċi, u messaġġi personalizzati permezz ta' API integrata. Ukoll, ihallik tinjetta l-kodiċi f'waħda web attiva u timmodifika l-valuri assenjati għal varjabbli individwali f'ħin reali. Shortcut tas-keyboard: (CTRL + 2)
   Debugger: Tippermettilek tissettja breakpoints u debug your code waqt li tesegwixxi, linja b'linja jekk ikun meħtieġ. Shortcut tas-keyboard: (CTRL + 3)
   Netwerk: Jelenka kull talba ta 'netwerk mibdija mill-browser matul it-tagħbija u l-eżekuzzjoni tal-paġna inklużi d-dettalji tal-protokoll, it-tip tal-kontenut, l-użu tal-bandwidth, u ħafna aktar. Shortcut tas-keyboard: (CTRL + 4)
   Prestazzjoni: Rati ta 'qafas tad-dettalji, utilizzazzjoni tas-CPU, u metriċi oħra relatati mal-prestazzjoni biex jgħinuk tħaffef il-ħinijiet tat-tagħbija tal-paġna u attivitajiet oħra. Shortcut tas-keyboard: (CTRL + 5)
   Memorja: Jgħinek tiżola u tikkoreġi tnixxijiet ta 'memorja potenzjali fuq il-paġna tal-Web kurrenti billi turi l-kronoloġija tal-użu tal-memorja flimkien ma' snapshots minn intervalli ta 'ħin differenti. Shortcut tas-keyboard: (CTRL + 6)
   Emulazzjoni: Turi kif il-paġna attiva tirrendi f'diversi riżoluzzjonijiet u daqsijiet ta 'skrin, emulazzjoni ta' smartphones, pilloli u tagħmir ieħor. Tipprovdi wkoll il-ħila li timmodifika l-aġent ta 'l-utent u l-orjentazzjoni tal-paġna, kif ukoll tissimula ġeolokazzjonijiet differenti billi tidħol latitudni u lonġitudni. Shortcut tas-keyboard: (CTRL + 7)
3. Biex turi l- Console waqt li fi ħdan kwalunkwe għodda oħra ikklikkja fuq il-buttuna kwadra b'partaġġa dritt ġewwaha, li tinsab fir-rokna ta 'fuq tal-lemin ta' l-interface ta 'l-għodod ta' żvilupp.
4. Biex tegħleb, l-għodod tal-iżviluppatur jgħaqqdu hekk issir tieqa separata, ikklikkja fuq il-buttuna rrappreżentata minn żewġ rettangoli cascading jew uża d-shortcut tal-keyboard li ġejja: CTRL + P. Tista 'tpoġġi l-għodda lura fil-post oriġinali tagħha billi tagħfas it- CTRL + P għat-tieni darba.

Apple Safari (OS X biss)

L-għodda ta 'għodda diversa ta' Safari tirrifletti l-komunità tal-iżviluppaturi l-kbar li tutilizza Mac għad-disinn u l-ħtiġijiet tal-programmazzjoni tagħhom. Minbarra l-konsola b'saħħitha u l-karatteristiċi tradizzjonali tal-qtugħ u l-qtugħ tas-siġar, mod ta 'disinn li jirrispondu faċli biex jintuża u għodda biex jinħolqu estensjonijiet tal-browser tiegħek stess huma pprovduti wkoll.

1. Ikklikkja fuq Safari fil-menu tal-browser, li tinsab fuq in-naħa ta 'fuq ta' l-iskrin tiegħek. Meta jidher il-menu drop-down, agħżel Preferenzi . Tista 'wkoll tuża d-shortcut tal-keyboard li ġejja minflok din il-partita tal-menu: COMMAND + COMMA (,)
2. L- interface ta ' Preferenzi ta' Safari issa għandu jintwera, billi jkopri x-xejra tal-browser tiegħek. Ikklikkja fuq l - ikona Avvanzata , li tinsab fuq in-naħa leminija tal-lemin tal-intestatura.
3. Il - preferenzi Avvanzati issa għandhom ikunu viżibbli. Fil-qiegħ ta 'din l-iskrin hemm għażla mmarkata Show Develop menu fil-menu bar , flimkien ma' kaxxa ta 'kontroll. Jekk ma hemm l-ebda marka ta 'verifika murija fil-kaxxa, ikklikkja fuqha darba biex tqiegħed waħda hemm.
4. Agħlaq l-interface tal- Preferenzi billi tikklikkja fuq l-aħmar 'x' li tinsab fir-rokna tax-xellug ta 'fuq.
5. Issa għandek tinnota għażla ġdida fil-menu tal-browser bl-isem Develop , li tinsab bejn Bookmarks u Tieqa . Ikklikja fuq din l-oġġett tal-menu. Issa għandu jintwera menu drop-down li fih l-għażliet li ġejjin.
   Open Page With: Tippermetti li tiftaħ il-paġna tal-Web attiva f'wieħed mill-browsers l-oħra li bħalissa huma installati fuq il-Mac tiegħek.
   L-Aġent tal-Utent: Tagħtilek tagħżel minn aktar minn tużżana l-valuri tal-aġent ta 'l-utent iddefiniti minn qabel inklużi bosta verżjonijiet ta' Chrome, Firefox u Internet Explorer, kif ukoll tiddefinixxi s-sekwenza użata tiegħek stess.
   Daħħal il -Modalità ta 'Disinn Responsiv : Jintrendi l-paġna kurrenti kif jidher fuq diversi apparati u f'riżoluzzjonijiet differenti tal-iskrin.
   Uri l-Ispettur tal-Web: Tniedi l-interface prinċipali għall-għodod dev tal-Safari, tipikament imqiegħda fil-qiegħ tal-iskrin tal-browser tiegħek u fih is-sezzjonijiet li ġejjin: Elementi , Netwerk , Riżorsi , Timelines , Debugger , Storage , Console .
   Show Error Console: Tniedi wkoll l-għodda ta 'l-interface tad-DEV, direttament lill-tab tal- Console li turi l-iżbalji, it-twissijiet u data oħra li tista' tfittex.
   Uri s-Sors ta 'Page: Tinfetaħ it-tab Riżorsi , li turi l-kodiċi tas-sors għall-paġna attiva kategorizzata b'dokument.
   Riżorsi ta 'Paġna tal-Paġna: Tagħmel l-istess funzjoni bħall-għażla Show Source Page .
   Show Snippet Editur: Iftaħ tieqa ġdida fejn tista 'tidħol fis-CSS u l-kodiċi HTML, u tara l-output tagħha fuq il-fly.
   Show Extension Builder: Tipprovdi l-abbiltà li toħloq jew teditja estensjonijiet Safari b'CSS, HTML, u JavaScript.
   Uri r-Reġistrazzjoni tal-Kronoloġija: Jiftaħ it-tab Timelines u jibda juri t-talbiet tan-netwerk, it-tqassim u l-informazzjoni li tirrendi kif ukoll l-eżekuzzjoni ta 'JavaScript f'ħin reali.
   Caches vojta: Ħassar il-cache kollu li bħalissa qed jinħażen fuq il-hard drive tiegħek.
   Iddeskrivi ċekkijiet: Iwaqqaf Safari mill-caching sabiex il-kontenut kollu jinkiseb mis-server fuq kull tagħbija tal-paġna.
   Immaġina l-Immaġini: Tipprevjeni li l-istampi jirrendu fuq il-paġni tal-Web
   Stili li Jiddiskutu : Tinjora l-proprjetajiet tas-CSS meta titgħabba l-paġna.
   Itfi JavaScript: Tirrestrinġi l-eżekuzzjoni ta 'JavaScript fuq il-paġni kollha.
   Iddeskrivi Estensjonijiet: Jipprojbixxi l- estensjonijiet installati kollha milli joperaw fil-browser.
   Iddeskrivi Hacks speċifiċi għas-sit: Jekk Safari ġie mmodifikat biex jimmaniġġja b'mod espliċitu l-ħarġiet speċifiċi għall-paġna Web attiva, din l-għażla se timblokka dawk il-bidliet sabiex il-paġna titlef kif kien ikollha qabel ma jiġu introdotti dawn il-modifiki.
   Tneħħi r-Restrizzjonijiet tal-Fajls Lokali: Tippermetti lill-browser li jkollu aċċess għal fajls fuq id-diski lokali tiegħek, azzjoni li hija ristretta awtomatikament għal raġunijiet ta 'sigurtà.
   Iddiżbilta Restrizzjonijiet ta 'Oriġini Qarib: Dawn ir-restrizzjonijiet jiġu implimentati awtomatikament biex jipprevjenu XSS u perikli potenzjali oħra. Madankollu, ħafna drabi jeħtieġu li jkunu diżattivati ​​temporanjament għal skopijiet ta 'żvilupp.
   Ħalli JavaScript mill-Qasam ta 'Tiftix Smart: Meta jkun attivat, jipprovdi l-abbiltà li jidħol URLs b'javascript: inkorporat direttament fl-address bar.
   Ittratta ċ-Ċertifikati SHA-1 bħala mhux siguri: iċ-ċertifikati SSL li jużaw l -algoritmu SHA-1 huma ġeneralment meqjusa bħala mhux aġġornati u vulnerabbli.