Nzira Yokushandisa Nayo Web Browser Developer Tools

Akabatanidza zvigwaro zvekugadzira weWeb design, vashanduri uye vanoedza

Mukuwedzera kune vashanduri vakawanda vanofunga nezvevashandisi vemazuva ose vachitarisa kuti vafambe paWebhu, vanobatanidzawo vashandisi veWebhu, vanogadzirisa uye vashandi vehutano hwehutano vanobatsira kuvaka mapurogiramu nemasiti ayo avo vashandisi vari kuwana kuburikidza nekubatanidza zvishandiso zvine simba mukati mamashure ivo pachavo.

Yakave iyo mazuva apo purogiramu chete nekugadzirisa zvishandiso zvakawanikwa mukati mekutsvaga zvakakubvumira kuti uone peji yepaji yekodhi uye hapana chimwezve. Nhasi mabheji anotendera iwe kutora dive yakadzama nokuita zvinhu zvakadai sekuita nekugadzirisa JavaScript snippets, kuongorora nekugadzirisa zvinhu zveDOM, kutarisa real-time network network sezvo sangano rako kana peji rinotakura kuziva zvirwere, kuongorora CSS, nekuita kuti code yako kusashandisa mhemberero yakawandisa kana kuti yakawandisa CPU maitiro, nezvimwe zvakawanda. Kubva pane maonero ekuedza, unogona kuburitsa kuti imwe purogiramu kana peji yepaIndaneti ichapa sei mumapurogiramu akasiyana-siyana uye pamasikirwo akasiyana-siyana nemapuratifomu kuburikidza nemashiripiti ekuteerera nekugadzirisa mukati mokuenzanisa. Chinhu chakanakisisa ndechokuti iwe unogona kuita zvose izvi usingabve uchisiya browser yako!

Vadzidzisi vari pasi vari kufamba newe kuburikidza nekuwana sei mavashandi ekugadzira matsva mumavhuna anoverengeka anobudiswa paWebhu.

google Chrome

Maikirwo ekugadzirwa kweC Chrome anokubvumira kuchinja nekugadzirisa kodeji, kugadzirisa zvikamu zvega munhu kuti aratidze nheyo dzekushanda, fungidzira zvakasiyana-siyana zvikwangwani zvekadhi kusanganisira izvo zvinoshandisa Android kana iOS , uye kuita mamwe mabasa anoverengeka anobatsira.

1. Dzvanya paKicheni yemenu ye menu, yakaridzwa nemitsara mitatu yakakosha uye iri muchokumusoro-kuruoko rwekona yekombiki.
2. Apo iyo inodonha imenyu inowoneka, shandisai mouse yako chitubu pamusoro peMamwe masarudzo.
3. A sub-menu inofanira kuonekwa zvino. Sarudza chisarudzo chakanyorwa maDhina ekuvandudza . Iwe unogonawo kushandisa kamberi kadikiyo inotevera pane nzvimbo yemuchina wezvinhu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Ichinobudiriro yeC Chrome Developer Tools inofanira kuonekwa zvino, sezvinoratidzwa mumufananidzo uyu wemafirimu. Zvichienderana neshanduro yako yeChrome, urongwa hwokutanga hwaunoona hunogona kunge hwakasiyana nehuyo huri pano. Nzvimbo huru yevashanduri vashandisi, inowanikwa iri pasi kana kuruoko rworudyi rwekona, rine ma tate anotevera.
   Zvinhu: Zvinopa kukwanisa kuongorora CSS ne HTML code pamwe nekugadzira CSS pane-inofamba, kuona migumisiro yekuchinja kwako munguva chaiyo.
   Console: Chrome's JavaScript console inobvumira kupinda murairo pamwe chete nekutsvaga kwekutsvaga.
   Zvinyorwa: Zvinokubvumira kubvisa JavaScript code kuburikidza nechinhu chinonyadzisira chinowanikwa.
   Sangano: Rinosarudza uye rinoratidza ruzivo rwakazara pamusoro pebasa rimwe nerimwe rakabatana pane kushanda kushanda kana peji, kusanganisira zvikumbiro zvakakwana uye zvinyorwa zvinopindura uye pamwe chete nemamatriki emazuva.
   Nguva yemazuva ano: Inobvumira zvakadzama kuongororwa kwebasa rose rinoitika mukati mekutsvaga nokukurumidza apo chikumbiro chepaji kana kuti chekushandisa chinotangwa.
5. Mukuwedzera kunezvikamu izvi, unogonawo kuwana zvishandiso zvinotevera kuburikidza ne >> icon, iri kurudyi rweTimeti yebhu.
   Nhoroondo: Yakaputsirwa muC CPU profiler uye Heap profiler sections, inopa kushandiswa kwemusoro nekushandiswa kwenguva yakazara yekushanda kwekushanda kana peji.
   Chengetedzo: Pfungwa dzepamusoro dzehutano matambudziko uye mamwe matambudziko ane chokuita nekuchengeteka ne peji rinoshanda kana kushandiswa.
   Zvinyorwa: Apa ndipo paunogona kuongorora makiki, nzvimbo yekuchengetedza, cache yemapurogiramu, uye mamwe magwaro emunharaunda yemunharaunda anoshandiswa neWebhu yepaji peji kana kushandiswa.
   Kuongorora: Inopa nzira dzekugadzirisa peji kana nguva yekushandiswa kwekushanda uye kushanda kwose.
6. Chigadzirwa Mode chinokubvumira kuti uone peji rinoshingaira mune simulator rinoita kuti rive sezvarinogona kuonekwa pane imwe yezvigadzirwa gumi nemaviri, kusanganisira mazita anozivikanwa akawanda eIndaneti neIOS akadai seIdad, iPhone, uye Samsung Galaxy. Iwe unopiwawo mano ekutevedzera tsika dzekwenyasi mazano ekugadzirisa kukanganisa kwako kana kuedza. Kuti ushandise Purogiramu yeChijoni kubva uye yavhara, sarudza iyo foni yefoni yakananga iri kuruboshwe rweTe Elements .
7. Iwe unogonawo kutarisa kutarisa uye kunzwa kwemashandisi ekugadzira matanho nekutanga pakananga bhodhi yemimiriri inomiririrwa nematatu akadzika-akaiswa uye ari kurutivi rworudyi-kuruoko rwemashoko ataurwa pamusoro apa. Kubva mukati memo iri pasi-pasi, unogona kugadzirisa dhigirii, kuratidza kana kuvanza matanho akasiyana-siyana uye kutanga zvinhu zvakanyanya kufanana zvakadai semuchina wekushandisa. Iwe uchaona kuti mavhariyoni emadhoni anoshandiswa pachake ari anonyanya kugadziriswa kuburikidza nezvirongwa zvinowanika mune chikamu chino.

Mozilla Firefox

Chikwata Chevhenekeri cheMuFirefox chinosanganisira zvigadziri zvevakagadziri, vakugadzira, uye vatsva zvakafanana zvakadai semutauro wesita uye piyel-targeting eyedropper.

Inokurudzirwa Kuverenga: The Top 25 Greasemonkey uye Tampermonkey User Scripts

1. Dzvanya pamutsetse wemenu weFirefox, unomirirwa nemitsara mitatu yakanyanyisa uye uri muchokumusoro-kuruoko rwekona yewindaneti.
2. Apo iyo inodonha imenyu inowanikwa, sarudza chiratidzo chakanyorwa mubusiki . Mushanduri weWebuniti yemenyu inofanira kuonekwa zvino, ine zvinyorwa zvinotevera. Iwe uchaona kuti zvinhu zvakawanda zvemenyu zvine zvidzitiro zve keyboard zvinosangana navo.
   Toggle Tools: Ratidza kana kuvanza mishanduri ekushandura zvishandiso, zvinowanzoiswa pasi pebhundaneti. Kushandura kechibhobho: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Muongorori: Anokubvumira kuti uongorore uye / kana kugadzirisa CSS neHTML code pane peji rinoshanda uyewo pane imwe nhare inoshandiswa kuburikidza nekutsemuka kwekude kure. Kushandura kwekboardboard: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Web Console: Inokubvumira kuti uite maJavaScript mukati mejiji inoshanda uye nekuongorora imwe yakasiyana yedheji yakachengetedzwa kusanganisira kunyeverwa kwekuchengeteka, zvikumbiro zvepaneti, maCSS messages, nezvimwewo. Kushandura kwekboardboard: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: IJavaScript Debugger inokubvumira kuona uye kugadzirisa kukanganisa kuburikidza nekuisa mapoka, kuongorora DOM nodes, black boxing kunze kwemhepo, nezvimwe zvakawanda. Sezvakangoitika kune Inspector , iyi nhengo inotsigirawo kudengesa kure kure. Kushandura kwekboardboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Muparidzi Wemaitiro : Anokubvumira kuumba matsva emashiripiti matsva uye kuatora nawo neIndaneti yakashanda, kana kuchinja mapepa aripo uye kuongorora kuti kuchinja kwako kunopa sei mushandisi kamwe chete. Kushandura khibhodibhokisi: Mac OS X, Windows ( SHIFT + F7 )
   Basa Rokushanda: Inopa kuparara kwakadzama kwebasa rinobata rekushanda kwepurogiramu, ruzivo rwekufungidzira kwemashoko, JavaScript execution nguva nehurumende, kupisa kupenya, nezvimwe zvakawanda. Kushandura kechibhobho: Mac OS X, Windows ( SHIFT + F5 )
   Mutezo: Rongedza mvumo yega yega yekutengesa yakatangwa nechokushandura pamwe neyo nzira inobvumirana nayo, inotangira nzvimbo, chikwata, usayizi, uye nguva yakapera. Kushandura kechibhobho: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Dhiyabhorosi Chekushandura: Inotanga muturikiri wemutsara wemutauriri. Pinda rubatsiro kune muturikiri wezita remirairo yose iripo uye syntax yavo yakakodzera. Kushandura kechibhobho: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Inopa kukwanisa kugadzira nekuita mapurogiramu eWebhu kuburikidza nedhidhiyo chaiyo inoshandisa Firefox OS kana kuburikidza neFirefox OS Simulator. Kushandura kechibhobho: Mac OS X, Windows ( SHIFT + F8 )
   Browser Console: Inopa basa rakafanana neWeb Console (ona pamusoro). Zvisinei, data yose yakadzorerwa ndeyekushandisa yose Firefox (kusanganisira upanduri uye yevashandisi-yepamusoro mabasa) zvinopesana neIndaneti yakashanda peji. Kushandura khibhobhodi: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Responsive Design View: Inokubvumira kuti uone purogiramu yeWebhu padzidziso dzakasiyana-siyana, maitiro, uye masikirwo emakiromita kuti uedze mafaira akawanda zvinosanganisira mapiritsi nemafoni. Kushandura kechibhobho: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Eyedropper: Inoratidza mhete yekomba ye hex ye pixels yakasarudzwa.
   Scratchpad : Ita kuti iwe unyore, sarudza, shandisa uye shandisa majekiti eJavaScript code kubva mukati mewindo reFirefox. Kushandurwa kwekboardboard: Mac OS X, Windows ( SHIFT + F4 )
   Tsamba Cheji: Yepakutanga-browser-based developer tool, sarudzo iyi inongoratidzira iyo inowanikwa code code ye peji inoshanda. Kushandura kechibhobho: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Tora Matriki Akawanda: Inotanga Muchina weWebunonweki weBhokisi rekushandisa pakunzvimbo yeMozilla yekuwedzera- site web site, inenge ine zvikamu gumi nemaviri zvakakurumbira zvakadai seFirebug neGerasemonkey.

Microsoft Edge / Internet Explorer

Inowanzozivikanwa seyo F12 Developer Tools , kunamata kunotsinhanisa keyboard iyo yakatanga kushandiswa kubva pane zvekare mapeji eInternet Explorer, iyo toolset dev muIE11 uye Microsoft Edge yakasvika nzira yakareba kubva pakatanga kwayo nekupa boka rakakura chaizvo vataridzi, vanokonzera madhimoni, emulator, uye-on-the-fly compilers.

1. Dzvanya pane Zvimwe zviito zvemenyu, zvinomiririrwa nematatu matatu uye zviri muchokumusoro-kuruoko rwekona yewindo rekushandura. Apo iyo inodonha imenyu inowanikwa, sarudza sarudzo yakanyorwa mazita F12 Developer Tools . Sezvandatozvitaura, unogonawo kuwana zvishandiso kuburikidza nekutsvaga kweF12 keyboard.
2. Ikushandiswa kwekufanirwa kwekufanirwa inofanira kuonekwa zvino, kazhinji pazasi kwewindo rekushandura. Matanho aya anotevera anowanika, imwe neimwe inowanikwa kuburikidza nekutarisa pamisoro yavo yepamusoro kana kushandisa shanduro yekutsvaira keyboard.
   DOM Explorer: Inokubvumira kuti uchinje mafashita ewebhu ne HTML mune peji rinoshanda, uchipa mhinduro yakagadziriswa sezvaunoenda. Inoshandisa IntelliSense kushandiswa kwekudzidzira chikwata chepamutemo kana zvinoshanda. Kushandura kwekboardboard: (CTRL + 1)
   Nyaradzo: Inopa mano ekutumira mashoko ekutsauka kwekutengesa kusanganisira mabhuku, nguva, maitiro, uye mifananidzo yakagadzirirwa kuburikidza ne-integrated API. Uyewo, inokubvumira kuvhara kadhi yepaIndaneti yepaIndaneti uye kugadzirisa maitiro anogoverwa kumarudzi ega ega munguva chaiyo. Kushandura kwekboardboard: (CTRL + 2)
   Debugger: Anokutendera iwe kuti uise breakpoints uye usagadzire code yako paunenge uchiita, tara nomurongo kana zvichidiwa. Kushandura kwekboardboard: (CTRL + 3)
   Mutezo: Rongedza imwe nhandare yekukumbira yakatangwa neyo browser pane peji kutakura nekuita kusanganisira mashoko epa protocol, zvinyorwa zvorudzi, kushandiswa kwegwidhi, uye zvimwe zvakawanda. Kushandura kwekboardboard: (CTRL + 4)
   Maitiro: Zero romufaro, CPU kushandiswa, uye mamwe maitiro ehutano anoenderana nekushanda kuti akubatsire kukurumidza nguva yekutakura peji nemamwe mabasa. Kushandura kwekboardboard: (CTRL + 5)
   Chiyeuchidzo: Inobatsira iwe woga uye unogadzirisa kukanganisa kwekuyeuka kwepamusoro peji yeWebhu iripo nekuratidzira nguva yekushandiswa kwepamusoro pamwe neshoko kubva panguva dzakasiyana-siyana. Kushandura kwekboardboard: (CTRL + 6)
   Kuteterera: Inokuratidza kuti peji inoshandiswa inobatsira sei mumasangano akasiyana-siyana uye masikirwo emavhura, kubudisa mafoni, mahwendefa, nezvimwe zvigadzirwa. Uyewo inopa kukwanisa kugadzirisa vashandi vekushandura uye mararamiro epaji, uyewo kuenzanisa maitiro ega ega kuburikidza nekupinda rutivi uye longitude. Kushandura kwekboardboard: (CTRL + 7)
3. Kuti uone iyo Console apo mukati meimwe yezvimwe zvishandise tsvaga pane bhokisi rekona nekodzero yakarurama mukati maro, iri kumusoro kwepamusoro-kona yezvigadzirwa zvekuvandudza zvishandiso.
4. Kuti uchinje, unyanzvi wemashandisi ekugadzira zvinyorwa kuitira kuti ive firiji yakasiyana, tanga pane bhodhi rinomiririrwa nekombikiti rekatekesa kana kushandisa kamberi yekutsvaga keyboard: CTRL + P. Iwe unogona kuisa zvishandise kumashure munzvimbo yavo yepakutanga nokudhinda CTRL + P kechipiri.

Apple Safari (OS X chete)

Safari's diverse dev toolset inoratidza hurukuro yemusangano inoshandisa Mac nokuda kwekugadzira uye chirongwa chazvo. Pamusoro pekunyaradza kwakasimba uye zvigadzirwa zvekugadzira uye kugadzirisa zvichemo, zviri nyore kushandisa maitiro ekugadzirisa mafaira uye chigadziro chekugadzira rako rekutsvaga tsvakurudzo inopiwawo.

1. Dzvanya paS Safari mune mhinduro ye menu, iri kumusoro kwekrini chako. Kana mapoka ekudurusa achioneka, sarudza Mafaira . Unogonawo kushandisa katsinhanisi kemikicha inotevera panzvimbo yezvinhu izvi zvemenyu: COMMAND + COMMA (,)
2. Safari's Preferences interface inofanira kuonekwa zvino, kuvhara firiji rako. Dzvanya paIndaneti yakadzama , iri kuruboshwe rworudyi-rutivi rwemusoro.
3. Izvo zvakasarudzwa zvinofanirwa zvino zvinofanira kuonekwa. Pasi pechirongwa ichi pane sarudzo yakaratidzirwa Kuratidza Shandisa menyu mumubhadha wemamita , pamwe chete nebhokisi cheko. Kana pasina chekucherechedza chinoratidzwa mubhokisi, chengetera kamwechete kuti uise imwe ipapo.
4. Vhura neZvinyorwa zvinoshandiswa kuburikidza nekukwira pa 'x' tsvuku yakawanikwa muchokumusoro-kuruboshwe-kona.
5. Iwe zvino unofanirwa kuona chisarudzo chitsva mumushanduri wemenu unonzi Develop , iri pakati pe Bookmarks ne Window . Dzvanya pane chinhu ichi chemenu. Drop-down menu inofanira kuiswa zvino, ine zvinyorwa zvinotevera.
   Vhura peji ne: Inokubvumira kuti uzarure peji yeWebhu irikushanda mune imwe yezvimwe zvikwata zvino zvaiswa pa Mac yako.
   Mushandi Wemagetsi: Anokubvumira kubva pane gumi nevaviri vasati vatsanangurwa vashandisi vemajeri mazano anosanganisira maBhaibheri akawanda, Chromefox neInternet Explorer, uyewo tsanangudzo yako pachako tsamba.
   Pinda Mhinduro yekugadzirisa Mode : Inopa peji iripo sezvainozoonekwa pane zvakasiyana-siyana uye pane zvakasiyana-siyana zvesarudzo.
   Ratidza Muwepeti weWebhu: Anotanga hurukuro huru yezvigadzirwa zveS Safari's dev, inowanzoiswa pasi pechikwereti che browser yako uye ine zvikamu zvinotevera: Zvikamu , Network , Resources , Timelines , Debugger , Storage , Console .
   Ratidza Error Console: Uyewo inotanga zvishandiso zvemashoni ekushandisa, zvakananga kuTable Console iyo inoratidza zvikanganiso, nyevero, nedzimwe nhepfenyuro yekutsvaga.
   Ratidza Peji Yacho: Inozarura Resources Resources , iyo inoratidza maikorodhe ekusimbisa peji rinoshanda riri muchikwata.
   Ratidza Page Zvinyorwa: Inoita basa rakafanana seChiratidzo cheKuratidza Peji .
   Ratidza Snippet Editor: Inovhura firiji idzva apo iwe unogona kupinda CSS neHTML code, uchiona zviri kuitika pa-in-fly.
   Ratidza Muvakidzani Wokuwedzera: Inopa kukwanisa kugadzira kana kuchinja Safari extensions neCSS, HTML, uye JavaScript.
   Ratidza Nguva yekudzokorora: Inotanga tab Timeline uye inotanga kuratidza mapepa emunzvimbo, maitiro uye kupa ruzivo pamwe chete neJavaScript execution munguva chaiyo.
   Empty Caches: Inobvisa cache yose iri kuchengetedzwa padzimba yako.
   Dzvitsa Caches: Inodzika Safari kubva ku caching kuitira kuti zvose zviripo zvigadziriswe kubva pane sevha pane rimwe rega rega rega.
   Dzinga Zvimifananidzo : Kudzivirira mifananidzo kubva pakushandura pamapeji ose eWebhu.
   Dzvamisa Matetheni : Anorega CSS zvinhu kana peji iri kutakurwa.
   Dzvitsa JavaScript: Inoita JavaScript execution pamapeji ose.
   Dzora Zwedzero: Inorambidza zvose zvakanyanyiswa zvakagadzirirwa kubva mumhepo mukati mekushandura.
   Deredza nzvimbo yeHack-specific Hacks: Kana Safari yakashandurwa kuti ijekese nyaya (s) yakananga kune webhusaiti yeWebhu peji, izvi zvingavhiringidza kuchinja uku kuitira kuti peji iite sezvaizova nayo kutanga kwekushandurwa kwekuiswa.
   Dzvidza Dhigirii Zemunharaunda Yenharaunda: Inobvumira browser kuti iwane mahwindo pama disks ako epamba, chiito chinoregererwa nekusavapo nekuda kwekuchengeteka.
   Dzvidzivirira Zvibvumirano Zvitsva-Kubva: Izvi zvipingamupinyi zvinoshandiswa kuburikidza nekudzivisa kuchengetedza XSS nezvimwe zvinogona kuisa njodzi. Zvisinei, ivo vanowanzoda kuve vasina kukwana kwenguva pfupi nekuda kwekutsvaga.
   Rega JavaScript kubva paStar Search Field: Kana yakagadzirwa, inopa kukwanisa kupinda maIndaneti ne javascript: inowanikwa zvakananga kubhadha rekero.
   Bata SHA-1 Zvitatimiti seInsecure: Zitifiketi zve SSL uchishandisa SHA-1 algorithm zvinowanzoonekwa sokuti hazvisi zvezuva uye zvinotambura.