Zouti entegre Integrated pou konsèpteur entènèt, devlopè ak Tester
Anplis de sa nan pi fò mizisyen navigatè ki konsantre sou itilizatè a chak jou kap navige entènèt la, yo menm tou yo founi nan devlopè entènèt yo, konsèpteur ak bon jan kalite pwofesyonèl asirans ki ede bati apps yo ak sit ke moun itilizatè yo aksè pa entegre zouti pwisan dwa nan navigatè yo tèt yo.
Gone yo se jou yo kote pwogram yo sèlman ak zouti tès yo te jwenn nan yon navigatè pèmèt ou wè kòd sous yon paj la e pa gen anyen plis. Navigatè jodi a kite ou pran yon pli lwen pi fon nan fè bagay sa yo tankou egzekite ak debogaj JavaScript snippets, enspekte ak koreksyon eleman DOM, siveyans an tan reyèl trafik rezo kòm app ou a oswa charj paj yo idantifye obstak, analyse pèfòmans CSS, asire ke kòd ou a pa itilize memwa twòp oswa twòp CPU sik, ak plis ankò. Soti nan yon pèspektiv tès, ou ka repwodui ki jan yon app oswa paj entènèt pral rann nan navigatè diferan kòm byen ke sou aparèy diferan ak tribin atravè majik la nan konsepsyon reponn ak simulateur bati-an. Pati ki pi bon se ke ou ka fè tout bagay sa yo san yo pa gen kite navigatè ou a!
Leson patikilye ki anba a mache ou nan kòman yo jwenn aksè nan zouti sa yo pwomotè nan plizyè navigatè entènèt popilè.
Google Chrome
Zouti pwomotè Chrome la pèmèt ou modifye ak debug kòd, odit eleman endividyèl ekspoze pwoblèm pèfòmans, simulation ekran aparèy diferan ki gen ladan moun ki kouri android oswa iOS , ak fè plizyè lòt fonksyon itil.
- Klike sou bouton meni prensipal Chrome la, ki make ak twa liy orizontal ak ki sitiye nan kwen anwo men dwat nan navigatè a.
- Lè meni an gout-desann parèt, hover kurseur sourit ou a sou opsyon ki pi plis zouti .
- Yon sub-meni ta dwe kounye a parèt. Chwazi opsyon ki make zouti Developer yo . Ou ka itilize tou chemen klavye sa a nan plas atik sa a meni: Chrome OS / Windows ( ktrl + chanjman + mwen ), Mac OS X ( ALT (OPSYON) + COMMAND + mwen )
- Chrome Developer Zouti koòdone ta dwe kounye a ap parèt, jan yo montre nan egzanp sa a D. Tou depan de vèsyon ou nan Chrome, Layout inisyal la ke ou wè ka yon ti kras diferan de youn nan prezante isit la. Sant prensipal la nan zouti yo pwomotè, anjeneral ki sitiye sou swa bò anba oswa bò dwat nan ekran an, gen onglè sa yo.
Eleman: Bay kapasite nan enspekte CSS ak Kòd HTML kòm byen ke modifye CSS sou-a-vole, wè efè chanjman ou nan tan reyèl.
Konsole: Konsole JavaScript Chrome la pèmèt pou antre dirèk dirèk kòm byen ke debogaj dyagnostik.
Sous: pèmèt ou debogaj JavaScript kòd atravè yon koòdone pwisan grafik.
Rezo: Kategori epi montre detaye enfòmasyon sou chak operasyon ki gen rapò sou aplikasyon an aktif oswa paj, ki gen ladan demann konplè ak repons tèt kòm byen ke mesures timing avanse.
Timeline: Pèmèt pou an pwofondè analiz de tout aktivite ki pran plas nan navigatè a le pli vit ke se yon paj oswa chaj demand chaje inisye. - Anplis de seksyon sa yo, ou ka tou jwenn aksè nan zouti sa yo atravè icon a, ki chita sou bò dwat la nan tab la Timeline .
Profile: Broken desann nan pwofil CPU ak seksyon pwofil Haul , bay leman konplè memwa ak tan ekzekisyon an jeneral nan aplikasyon an aktif oswa paj.
Sekirite: Mete aksan sou pwoblèm sètifika ak lòt pwoblèm sekirite ki gen rapò avèk paj aktif oswa aplikasyon.
Resous: Sa a se kote ou ka enspekte bonbon, depo lokal, kachèt app, ak lòt sous done lokal itilize pa paj wèb la aktyèl oswa aplikasyon.
Odit: Ofri fason pou optimize yon paj tan oswa aplikasyon chaj la ak pèfòmans jeneral. - Aparèy Mode pèmèt ou wè paj la aktif nan yon similatè ki rann li prèske egzakteman jan li ta parèt sou youn nan plis pase yon douzèn aparèy, ki gen ladan plizyè byen li te ye-android ak iOS modèl tankou iPad a, iPhone, ak Samsung Galaksi. Ou ba yo kapasite tou pou rimatism rezolisyon ekran koutim pou anfòm devlopman patikilye ou oswa bezwen tès yo. Itilize Mode Aparèy sou ak sou, chwazi icon nan telefòn mobil ki sitiye dirèkteman nan bò gòch la nan tab eleman yo .
- Ou kapab tou Customize gade nan ak santi nan zouti pwomotè ou pa premye klike sou bouton an meni reprezante pa twa pwen vètikal mete-yo ak ki sitiye sou bò la byen lwen bò gòch la onglè yo susmansyone. Soti nan meni sa a gout-desann, ou ka reposition waf la, montre oswa kache zouti diferan kòm byen ke lanse bagay ki pi avanse tankou yon enspektè aparèy. Ou ap jwenn ke koòdone nan dev zouti tèt li se trè customizable atravè anviwònman yo te jwenn nan seksyon sa a.
Mozilla Firefox
Seksyon Web Developer Firefox a gen ladan zouti pou konsèpteur, devlopè, ak tester sanble tankou yon editè style ak pixel-vize eyouteur.
Rekòmande Lekti: Top 25 Greasemonkey ak Tampermonkey Itilizatè Scripts
- Klike sou bouton meni prensipal Firefox a, reprezante pa twa liy orizontal ak ki sitiye nan kwen anwo men dwat nan fenèt navigatè a.
- Lè meni an gout-desann parèt, chwazi icon ki make Developer la . Meni sitwèb Developer la ta dwe parèt kounyeya, ki gen opsyon sa yo. Ou pral remake ke atik ki pi meni gen rakoursi klavye ki asosye avèk yo.
Baskil Zouti: Montre oswa kache zouti pwomotè a koòdone, tipikman positionné nan pati anba a nan fenèt navigatè a. Klavye klavye: Mac OS X ( ALT (OPSYON) + COMMAND + mwen ), Windows ( ktrl + chanjman + mwen )
Enspektè: Pèmèt ou enspekte ak / oswa tweak CSS ak HTML kòd sou paj la aktif kòm byen ke sou yon aparèy pòtab via debogaj aleka. Klavye klavye: Mac OS X ( ALT (OPSYON) + COMMAND + C ), Fenèt ( ktrl + chanjman + C )
Konsole Web: Pèmèt ou egzekite ekspresyon JavaScript nan paj aktif la kòm byen ke revize yon seri divès nan done louvri sesyon ki gen ladan avètisman sekirite, demann rezo, mesaj CSS, ak plis ankò. Klavye klavye: Mac OS X ( ALT (OPSYON) + COMMAND + K ), Windows ( ktrl + chanjman + K )
Debugger: Debugger a JavaScript pèmèt ou idantifye ak ranje domaj pa mete repo, enspekte nœuds DOM, nwa boksè sous ekstèn, ak plis ankò. Kòm se ka a ak Enspektè a , karakteristik sa a sipòte tou debogaj aleka. Klavye klavye: Mac OS X ( ALT (OPSYON) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Style Editè: Pèmèt ou kreye Styles nouvo ak enkòpore yo ak paj wèb la aktif, oswa edite dra ki deja egziste epi teste ki jan chanjman ou rann nan yon navigatè ki gen yon sèl klike sou. Klavye klavye: Mac OS X, Windows ( Shift + F7 )
Pèfòmans: Bay yon pann detaye sou pèfòmans rezo paj aktif la, done pousantaj ankadreman, JavaScript ekzekisyon tan ak leta, penti kap flache, ak plis ankò. Klavye klavye: Mac OS X, fenèt ( SHIFT + F5 )
Rezo: Lis chak demann rezo inisye pa navigatè a ansanm ak metòd ki koresponn lan, domèn orijin, kalite, gwosè, ak tan pase. Klavye klavye: Mac OS X ( ALT (OPSYON) + COMMAND + Q ), Fenèt ( ktrl + SHIFT + Q )
Developer Toolbar: Louvri yon entèprèt entèaktif liy entèaktif. Mete èd nan entèprèt la pou yon lis tout kòmandman ki disponib yo ak sentaks apwopriye yo. Klavye klavye: Mac OS X, fenèt ( SHIFT + F2 )
WebIDE: Bay kapasite nan kreye ak egzekite app entènèt nan yon aparèy aktyèl kouri Firefox eksplwatasyon oswa atravè similatè nan OS OS. Klavye klavye: Mac OS X, fenèt ( SHIFT + F8 )
Konsole Navigatè: Bay fonksyonalite a menm jan ak Konsole Web la (al gade pi wo a). Sepandan, tout done retounen se pou aplikasyon an Firefox tout (ki gen ladan ekstansyon ak fonksyon navigatè nivo) kòm opoze a jis paj la aktif entènèt. Klavye klavye: Mac OS X ( chanjman + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Repons Design View: Pèmèt ou imedyatman wè yon paj entènèt nan rezolisyon diferan, kouman, ak gwosè ekran imite aparèy miltip ki gen ladan tablèt ak smartphones. Klavye klavye: Mac OS X ( ALT (OPSYON) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyatropper: Montre Kòd koulè hex a pou piksèl chwazi endividyèlman.
Scratchpad : pèmèt ou ekri, modifye, entegre ak egzekite koupe nan JavaScript Kòd soti nan yon fenèt pop-out Firefox. Klavye rakoursi: Mac OS X, Windows ( SHIFT + F4 )
Sous Page: Zouti pwomotè orijinal navigatè ki baze sou navigatè a, opsyon sa a tou senpleman montre kòd sous la disponib pou paj aktif la. Klavye klavye: Mac OS X ( COMMAND + U ), Windows ( Ctrl + U )
Jwenn Plis Zouti: Louvri koleksyon Toolbox Developer a sou Mozilla ofisyèl ajoute-ons sit la, prezante sou yon douzèn ekstansyon popilè tankou Firebug ak greasemonkey.
Microsoft Edge / Internet Explorer
Souvan refere yo kòm zouti yo Developer F12 , yon omaj nan chemen kout klavye a ki te lanse koòdone a depi vèsyon pi bonè nan Internet Explorer, devyeur a dev nan IE11 ak Microsoft Edge te vini yon fason lontan depi kreyasyon li pa ofri yon gwoup trè sou la men nan monitè, debugè, emulateur, ak sou-vole konpilateur yo.
- Klike sou meni an Plis aksyon , reprezante pa twa pwen ak ki sitiye nan kwen anwo men dwat nan fenèt navigatè a. Lè meni gout-desann a parèt, chwazi opsyon ki make F12 Developer Tools . Kòm mwen deja mansyone, ou ka tou jwenn aksè nan zouti yo atravè klavye a klavye F12 .
- Koòdone devlopman an ta dwe kounye a ap parèt, tipikman nan pati anba a nan fenèt navigatè a. Zouti sa yo ki disponib, chak aksesib pa klike sou tit respektif yo tit oswa lè l sèvi avèk chemen kout klavye a akonpaye.
DOM Explorer: Pèmèt ou modifye Styles ak HTML nan paj la aktif, rann rezilta yo modifye jan ou ale. Itilize fonctionnalités IntelliSense pou autocomplete kòd kote sa aplikab. Klavye klavye: (Ctrl + 1)
Konsole: Bay kapasite nan soumèt enfòmasyon debogaj ki gen ladan kontè, time, tras, ak mesaj Customized atravè yon API entegre. Epitou, pèmèt ou enjekte kòd nan yon paj wèb aktif epi modifye valè yo asiyen nan varyab endividyèl nan tan reyèl. Klavye klavye: (ktrl 2)
Debugger: pèmèt ou fikse repo ak debri kòd ou pandan li ègzekutra, liy pa liy si sa nesesè. Klavye klavye: (ktrl + 3)
Rezo: Lis chak demann rezo inisye pa navigatè a pandan chaj paj ak ekzekisyon ki gen ladan detay pwotokòl, kalite kontni, itilizasyon bandwidth, ak plis ankò. Klavye klavye: (Ctrl + 4)
Pèfòmans: Detay pousantaj ankadreman, itilizasyon CPU, ak lòt mesures pèfòmans ki gen rapò ak ede ou pi vit fwa chaj paj ak lòt aktivite. Klavye klavye: (Ctrl + 5)
Memwa: Ede ou izole ak korije fwit memwa potansyèl nan paj entènèt aktyèl la lè w montre yon delè itilizasyon memwa ansanm ak snapshots ki soti nan diferan entèval tan. Klavye klavye: (Ctrl + 6)
Emulation: Montre ou ki jan paj la aktif ta rann nan divès kalite rezolisyon ak gwosè ekran, emulating smartphones, tablèt, ak lòt aparèy. Epitou bay kapasite nan modifye ajan itilizatè a ak oryantasyon paj, osi byen ke simulation diferan jeolokasyon pa k ap antre nan yon latitid ak lonjitid. Klavye klavye: (Ctrl + 7) - Pou montre konsole la pandan ke nan nenpòt nan lòt zouti yo klike sou bouton an kare ak yon bracket dwa andedan nan li, ki chita nan kwen anwo men dwat-zouti nan devlopman zouti koòdone.
- Dezole, koòdone nan zouti pwomotè pou li vin tounen yon fenèt separe, klike sou bouton an reprezante pa de rektang kaskad oswa itilize chemen kout klavye sa yo: CTRL + P. Ou ka mete zouti yo tounen nan kote orijinal yo lè yo peze CTRL + P yon dezyèm fwa.
Apple Safari (OS X sèlman)
Safari divès dev toolset reflete kominote a pwomotè gwo ki itilize yon Mac pou bezwen yo konsepsyon ak pwogramasyon. Anplis de sa nan yon konsole pwisan ak tradisyonèl antre ak karakteristik debogaj, yon fasil-a-itilize mòd konsepsyon reponn ak yon zouti yo kreye ekstansyon navigatè pwòp ou yo tou bay.
- Klike sou Safari nan meni navigatè a, ki chita nan tèt ekran an. Lè meni an gout-desann parèt, chwazi Preferences . Ou ka itilize tou chemen klavye sa a nan plas atik sa a meni: COMMAND + COMMA (,)
- Preferans Preferences Safari a ta dwe kounye a ap parèt, kouvri fenèt navigatè ou a. Klike sou icon nan avanse , ki chita sou bò la byen lwen bò gòch nan header la.
- Preferans avanse yo ta dwe kounye a dwe vizib. Nan pati anba a nan ekran an se yon opsyon ki make Montre Devlope meni nan ba meni , akonpaye pa yon bwat chèk. Si pa gen mak chèk yo montre nan bwat la, klike sou li yon fwa pou mete yon sèl la.
- Fèmen koòdone nan Preferences pa klike sou 'x' wouj la yo te jwenn nan kwen siperyè agòch.
- Ou ta dwe kounye a remake yon nouvo opsyon nan meni navigatè yo te rele Devlope , ki chita ant Bookmarks ak fenèt . Klike sou atik meni sa a. Yon meni gout-desann ta dwe kounye a ap parèt, ki gen opsyon sa yo.
Open Page Avèk: Pèmèt ou louvri paj wèb la aktif nan youn nan lòt navigatè yo kounye a enstale sou Mac ou.
Itilizatè Ajan: pèmèt ou chwazi soti nan plis pase yon douzèn pre-defini valè ajan itilizatè ki gen ladan vèsyon plizyè nan Chrome, Firefox ak Internet Explorer, osi byen ke defini pwòp ou koutim fisèl.
Antre nan Repons Design Mode : Rann paj aktyèl la jan li ta parèt sou divès kalite aparèy ak nan rezolisyon ekran diferan.
Montre entènèt enspektè a: Lanse koòdone prensipal la pou zouti devè Safari a, tipikman mete nan pati anba ekran navigatè ou a epi ki gen seksyon sa yo: Eleman , Network , Resous , Timelines , Debugger , Depo , Konsole .
Montre erè konsole: Epitou lanse koòdone nan zouti dev, dirèkteman nan tab la Konsole ki montre erè, avètisman, ak lòt done boutèy demann rechèch.
Montre Sous Page la: Louvri tab Resous la , ki montre kòd sous pou paj aktif ki nan dokiman an.
Montre Resous Page: Fè menm fonksyon an kòm opsyon Sous Page Montre .
Montre Editè Snippet: Louvri yon fenèt nouvo kote ou ka antre kòd CSS ak HTML, previewing pwodiksyon li yo sou-a-vole.
Montre Ekstansyon Builder: Bay kapasite nan kreye oswa modifye ekstansyon Safari ak CSS, HTML, ak JavaScript.
Montre Timeline Anrejistreman: Louvri tablèt yo Timelines epi kòmanse montre demann rezo, Layout ak rann enfòmasyon kòm byen ke JavaScript ekzekisyon nan tan reyèl.
Vide Caches: Delet tout kachèt la kounye a ke yo te estoke sou kondwi difisil ou.
Enfim Caches: Sispann Safari soti nan caching pou ke se tout kontni soti nan sèvè a sou chak chaj paj.
Enfim Imaj: Anpeche imaj soti nan rann sou tout paj entènèt.
Styles enfim: Ignores CSS pwopriyete lè yon paj chaje.
Enfim JavaScript: Mete restriksyon sou JavaScript ekzekisyon sou tout paj.
Enfim ekstansyon: Entèdi tout ekstansyon enstale soti nan kouri nan navigatè a.
Enfim antay espesifik antye: Si Safari te modifye pou eksplike pwoblèm espesyal (espesifik) nan paj wèb aktif la, opsyon sa a pral bloke chanjman sa yo pou paj charj yo menm jan li ta genyen anvan modifikasyon sa yo te prezante.
Enfim Restriksyon File: pèmèt navigatè a gen aksè a dosye sou disk lokal ou a, yon aksyon ki limite pa default pou rezon sekirite.
Enfim Restriksyon Lakwa: Yo mete restriksyon sa yo nan plas pa anpeche XSS ak lòt danje potansyèl yo. Sepandan, yo souvan bezwen pou yon ti tan enfim pou rezon devlopman.
Pèmèt JavaScript soti nan Smart Search Field: Lè pèmèt, bay kapasite nan antre URL ak javascript: enkòpore dirèkteman nan ba a adrès.
Trete SHA-1 sètifika kòm anksyeu: sètifika SSL lè l sèvi avèk algorithm nan SHA-1 yo lajman konsidere yo dwe out-of-dat ak vilnerab.