Offerynnau integredig ar gyfer dylunwyr Gwe, datblygwyr a phrofwyr
Yn ogystal â'r rhan fwyaf o wneuthurwyr porwyr sy'n canolbwyntio ar y defnyddiwr bob dydd sy'n ceisio syrffio'r We, maent hefyd yn darparu ar gyfer datblygwyr, dylunwyr a gweithwyr proffesiynol sicrhau ansawdd y We sy'n helpu i adeiladu'r apps a'r safleoedd y mae'r defnyddwyr hynny yn eu defnyddio trwy integreiddio offer pwerus i mewn i'r porwyr eu hunain.
Wedi dod yn y dyddiau lle'r unig offer rhaglennu a phrofi a ddarganfuwyd o fewn porwr yn caniatáu i chi weld cod ffynhonnell tudalen a dim mwy. Mae porwyr heddiw yn gadael i chi gymryd plymio llawer mwy dwfn trwy wneud pethau fel gweithredu a dadfygio clipiau JavaScript, archwilio a golygu elfennau DOM, monitro traffig rhwydwaith amser real wrth i'ch app neu'ch tudalen lwythi i adnabod dyluniadau, dadansoddi perfformiad CSS, gan sicrhau bod eich cod yn heb ddefnyddio gormod o gof neu gormod o gylchoedd CPU , a llawer mwy. O safbwynt profi, gallwch atgynhyrchu sut y bydd app neu dudalen We yn gwneud mewn gwahanol borwyr yn ogystal ag ar ddyfeisiau a llwyfannau gwahanol trwy gyfrwng dyluniad dylunio ymatebol ac efelychwyr adeiledig. Y rhan orau yw y gallwch chi wneud hyn i gyd heb orfod gadael eich porwr!
Mae'r tiwtorialau isod yn eich cerdded trwy sut i gael mynediad i'r offer datblygwyr hyn mewn sawl porwyr gwe poblogaidd.
Google Chrome
Mae offer datblygwr Chrome yn caniatáu ichi olygu a dadbennu cod, archwilio cydrannau unigol i ddatgelu materion perfformiad, efelychu gwahanol sgriniau dyfais gan gynnwys y rhai sy'n rhedeg Android neu iOS , ac yn perfformio nifer o swyddogaethau defnyddiol eraill.
- Cliciwch ar y botwm prif ddewislen Chrome, wedi'i farcio â thair llinellau llorweddol ac wedi'u lleoli yng nghornel dde uchaf y porwr.
- Pan fydd y ddewislen yn disgyn, trowch eich cyrchwr llygoden dros yr opsiwn Offer Mwy .
- Dylai is-ddewislen ymddangos yn awr. Dewiswch yr opsiynau a ddatblygwyd yn y labeli Datblygwr . Gallwch hefyd ddefnyddio'r llwybr byr bysellfwrdd canlynol yn lle'r eitem ddewislen hon: OS OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Erbyn hyn, dylai'r rhyngwyneb Offer Datblygwr Chrome gael ei arddangos, fel y dangosir yn y sgrin enghraifft hon. Yn dibynnu ar eich fersiwn o Chrome, gall y cynllun cychwynnol a welwch fod ychydig yn wahanol i'r un a gyflwynir yma. Mae prif ganol offer y datblygwr, a leolir yn nodweddiadol ar y gwaelod neu'r ochr dde o'r sgrin, yn cynnwys y tabiau canlynol.
Elfennau: Yn darparu'r gallu i archwilio cod CSS a HTML yn ogystal â golygu CSS ar-y-hedfan, gan weld effeithiau eich newidiadau mewn amser real.
Consol: mae consol JavaScript Chrome yn caniatįu mynediad gorchymyn uniongyrchol yn ogystal â dadfeddiannu diagnostig.
Ffynonellau: Yn gadael i chi ddadbennu cod JavaScript trwy ryngwyneb graffigol pwerus.
Rhwydwaith: Yn categoreiddio ac yn dangos gwybodaeth fanwl am bob gweithrediad cysylltiedig ar y cais neu'r dudalen weithgar, gan gynnwys penawdau cais cyflawn a ymateb yn ogystal â metrigau amseru uwch.
Llinell Amser: Yn caniatáu dadansoddiad manwl o bob gweithgaredd sy'n digwydd yn y porwr cyn gynted ag y caiff tudalen neu gais llwyth app ei gychwyn. - Yn ogystal â'r adrannau hyn, gallwch hefyd gael mynediad i'r offer canlynol trwy'r eicon >> , sydd ar ochr dde'r tab Llinell Amser .
Proffil: Wedi'i dorri i mewn i adrannau proffiliau UC ac Adolygydd Cynffon , yn darparu defnydd cof cynhwysfawr ac amser gweithredu cyffredinol y cais neu'r dudalen weithgar.
Diogelwch: Amlygu problemau tystysgrif a materion eraill sy'n gysylltiedig â diogelwch gyda'r dudalen weithredol neu'r cais.
Adnoddau: Dyma ble y gallwch chi archwilio cwcis, storio lleol, cache app, a ffynonellau data lleol eraill a ddefnyddir gan y dudalen We neu'r cais presennol.
Archwiliadau: Mae'n cynnig ffyrdd i wneud y gorau o amser llwyth tudalen neu gais a pherfformiad cyffredinol. - Mae Modd y Dyfais yn eich galluogi i weld y dudalen weithgar mewn efelychydd sy'n ei wneud bron yn union fel y byddai'n ymddangos ar un o dros dwsin o ddyfeisiadau, gan gynnwys sawl modelau Android a iOS adnabyddus megis y iPad, iPhone a Samsung Galaxy. Rydych chi hefyd yn gallu efelychu penderfyniadau sgrin arferol i gyd-fynd â'ch anghenion datblygu neu brofi penodol. I droi Modd y Dyfais ar ac i ffwrdd, dewiswch yr eicon ffôn symudol sydd wedi'i leoli yn uniongyrchol i'r chwith o'r tab Elfennau .
- Gallwch hefyd addasu golwg a theimlad eich offerydd datblygwr trwy glicio gyntaf ar y botwm dewislen a gynrychiolir gan dri dotiau wedi'u gosod yn fertigol ac wedi'u lleoli ar ochr ddeheuol y tabiau uchod. O fewn y ddewislen hon, gallwch chi ailosod y doc, dangos neu guddio gwahanol offer yn ogystal â lansio eitemau mwy datblygedig fel arolygydd dyfais. Fe welwch fod y rhyngwyneb offer dev ei hun yn addas iawn drwy'r gosodiadau a geir yn yr adran hon.
Mozilla Firefox
Mae adran Datblygwr Gwe Firefox yn cynnwys offer ar gyfer dylunwyr, datblygwyr, a thestwyr fel ei gilydd, fel olygydd arddull a eyedropper sy'n targedu picsel.
Darlleniad a Argymhellir: Y 25 Sgript Defnyddiwr Greasemonkey a'r Tampermonkey Top
- Cliciwch ar y botwm prif ddewislen Firefox, a gynrychiolir gan dair llinellau llorweddol ac sydd wedi'u lleoli yng nghornel uchaf dde'r ffenestr porwr.
- Pan fydd y ddewislen yn disgyn, dewiswch yr eicon Datblygwr wedi'i labelu. Erbyn hyn, dylid dangos y ddewislen Gwe Datblygwr Gwe , sy'n cynnwys yr opsiynau canlynol. Fe welwch fod gan y rhan fwyaf o eitemau bwydlen lwybrau byr bysellfwrdd sy'n gysylltiedig â nhw.
Toggle Tools: Yn arddangos neu'n cuddio rhyngwyneb offer y datblygwr, sydd fel arfer wedi'i leoli ar waelod ffenestr y porwr. Llwybr byr bysellfwrdd: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Arolygydd: Yn eich galluogi i arolygu a / neu tweak CSS a chod HTML ar y dudalen weithredol yn ogystal ag ar ddyfais gludadwy drwy ddadleuon o bell. Llwybr byr bysellfwrdd: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Conssole: Mae'n caniatáu ichi weithredu mynegiadau JavaScript yn y dudalen weithredol yn ogystal ag adolygu set amrywiol o ddata cofrestredig gan gynnwys rhybuddion diogelwch, ceisiadau rhwydwaith, negeseuon CSS, a mwy. Llwybr byr bysellfwrdd: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Diddymwr: Mae'r Ddefnyddiwr JavaScript yn eich galluogi i bennu a datrys diffygion trwy osod setiau torri, gan archwilio nodau DOM, ffynonellau allanol bocsio du, a llawer mwy. Fel sy'n wir gyda'r Arolygydd , mae'r nodwedd hon hefyd yn cefnogi dadfeddiannu o bell. Llwybr byr bysellfwrdd: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Golygydd Arddull: Yn eich galluogi i greu arddulliau arddull newydd a'u hymgorffori gyda'r dudalen We weithredol, neu olygu'r taflenni presennol a phrofi sut mae'ch newidiadau yn rendro mewn porwr gyda dim ond un clic. Llwybr byr bysellfwrdd: Mac OS X, Windows ( SHIFT + F7 )
Perfformiad: Yn darparu dadansoddiad manwl o berfformiad rhwydwaith y dudalen weithredol, data cyfradd ffrâm, amser gweithredu a chyflwr JavaScript, fflachio paent, a llawer mwy. Llwybr byr bysellfwrdd: Mac OS X, Windows ( SHIFT + F5 )
Rhwydwaith: Rhestrwch bob cais am rwydwaith a gychwynnwyd gan y porwr ynghyd â'r dull cyfatebol, y parth tarddiad, y math, y maint a'r amser sy'n mynd heibio. Llwybr byr bysellfwrdd: Mac OS X ( ALT (OPSIWN) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Bar Offer Datblygwr: Yn agor cyfieithydd llinell gorchymyn rhyngweithiol. Rhowch gymorth i'r cyfieithydd ar gyfer rhestr o'r holl orchmynion sydd ar gael a'u cystrawen briodol. Llwybr byr bysellfwrdd: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Yn darparu'r gallu i greu a gweithredu apps gwe trwy ddyfais wirioneddol sy'n rhedeg Firefox OS neu trwy Firefox OS Simulator. Llwybr byr bysellfwrdd: Mac OS X, Windows ( SHIFT + F8 )
Porwr Consol: Yn darparu'r un swyddogaeth â'r Consol Gwe (gweler uchod). Fodd bynnag, mae'r holl ddata a ddychwelir ar gyfer yr holl gais Firefox (gan gynnwys estyniadau a swyddogaethau lefel porwr) yn hytrach na dim ond y dudalen We weithgar. Llwybr byr bysellfwrdd: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Gweld Dyluniad Ymatebol: Yn eich galluogi i weld tudalen We yn syth mewn gwahanol benderfyniadau, gosodiadau a meintiau sgrîn i ddynwared dyfeisiau lluosog gan gynnwys tabledi a ffonau smart. Llwybr byr bysellfwrdd: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Yn dangos y cod lliw hecs ar gyfer picseli a ddewiswyd yn unigol.
Scratchpad : Yn eich galluogi i ysgrifennu, golygu, integreiddio a gweithredu clipiau o god JavaScript o fewn ffenestr Firefox pop-out. Llwybr byr bysellfwrdd: Mac OS X, Windows ( SHIFT + F4 )
Tudalen Ffynhonnell: Yr offeryn datblygwr sy'n seiliedig ar porwr, mae'r dewis hwn yn dangos y cod ffynhonnell sydd ar gael ar gyfer y dudalen weithredol. Llwybr byr bysellfwrdd: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Get More Tools: Yn agor casgliad y Blwch Offer Datblygwr Gwe ar wefan addysgol swyddogol Mozilla, sy'n cynnwys tua dwsin o estyniadau poblogaidd megis Firebug a Greasemonkey.
Microsoft Edge / Internet Explorer
Fel arfer cyfeirir ato fel Offer F12 Datblygwr , yn gartref i'r llwybr byr bysellfwrdd sydd wedi lansio'r rhyngwyneb ers fersiynau cynharach o Internet Explorer, mae'r offeryn dev yn IE11 a Microsoft Edge wedi dod yn bell ers ei sefydlu trwy gynnig grŵp defnyddiol iawn o monitors, debuggers, emulators, a compilers ar-y-hedfan.
- Cliciwch ar y ddewislen Mwy o gamau gweithredu , a gynrychiolir gan dri dot ac wedi'i leoli yng nghornel uchaf dde'r ffenestr porwr. Pan fydd y ddewislen yn disgyn, dewiswch yr opsiwn sydd wedi'i labelu ar F12 Developer Tools . Fel y soniais eisoes, gallwch hefyd gael mynediad i'r offer drwy'r llwybr byr bysellfwrdd F12 .
- Dylai'r rhyngwyneb datblygu gael ei harddangos, yn nodweddiadol ar waelod ffenestr y porwr. Mae'r offer canlynol ar gael, pob un yn hygyrch trwy glicio ar eu pennawd tabiau priodol neu ddefnyddio'r llwybr byr bysellfwrdd cysylltiedig.
DOM Explorer: Yn eich galluogi i olygu arddulliau arddull a HTML yn y dudalen weithredol, gan ddangos y canlyniadau a addaswyd wrth i chi fynd. Yn defnyddio ymarferoldeb IntelliSense i gôd awtomplegedig lle bo'n berthnasol. Llwybr byr bysellfwrdd: (CTRL + 1)
Consol: Yn darparu'r gallu i gyflwyno gwybodaeth dadgwyddo gan gynnwys cyfrifyddion, amseryddion, olion, a negeseuon wedi'u customized trwy API integredig. Hefyd, mae'n gadael i chi chwistrellu cod i mewn i dudalen We weithredol ac addasu'r gwerthoedd a neilltuwyd i newidynnau unigol mewn amser real. Llwybr byr bysellfwrdd: (CTRL + 2)
Diddymwr: Yn gadael i chi osod pwyntiau torri a dadfygwth eich cod wrth iddo esgusodi, llinell wrth-lein os oes angen. Llwybr byr bysellfwrdd: (CTRL + 3)
Rhwydwaith: Rhestrwch bob cais am rwydwaith a ddechreuwyd gan y porwr yn ystod llwyth a gweithrediad tudalen, gan gynnwys manylion y protocol, y math o gynnwys, y defnydd o led band, a llawer mwy. Llwybr byr bysellfwrdd: (CTRL + 4)
Perfformiad: Cyfraddau ffrâm manylion, defnyddio CPU, a metrigau eraill sy'n gysylltiedig â pherfformiad i'ch helpu i gyflymu amser llwytho'r dudalen a gweithgareddau eraill. Llwybr byr bysellfwrdd: (CTRL + 5)
Cof: Yn eich helpu i ynysu a chywiro gollyngiadau cof posibl ar y dudalen We gyfredol trwy ddangos llinell amser defnydd cof ynghyd â chipolwg o wahanol gyfnodau. Llwybr byr bysellfwrdd: (CTRL + 6)
Emulation: Yn eich dangos sut y byddai'r dudalen weithredol yn gwneud mewn amryw o benderfyniadau a maint sgrin, gan efelychu ffonau smart, tabledi a dyfeisiau eraill. Hefyd yn darparu'r gallu i addasu'r asiant defnyddiwr a thueddiad tudalen, yn ogystal ag efelychu gwahanol geolocations trwy fynd i mewn i lledred a hydred. Llwybr byr bysellfwrdd: (CTRL + 7) - I arddangos y Consol tra o fewn unrhyw un o'r offerynnau eraill, cliciwch ar y botwm sgwâr gyda braced cywir y tu mewn iddo, wedi'i leoli yng nghornel uchaf dde'r rhyngwyneb offer datblygu.
- Er mwyn tanseilio, mae'r rhyngwyneb arfau'r datblygwr felly mae'n dod yn ffenestr ar wahân, cliciwch ar y botwm a gynrychiolir gan ddau petryal rhaeadru neu defnyddiwch y llwybr byr bysellfwrdd canlynol: CTRL + P. Gallwch osod yr offer yn ôl yn eu lleoliad gwreiddiol trwy wasgu CTRL + P yr ail dro.
Apple Safari (OS X yn unig)
Mae offeryn dev amrywiol y Safari yn adlewyrchu'r gymuned ddatblygwr mawr sy'n defnyddio Mac am eu hanghenion cynllunio a rhaglenni. Yn ychwanegol at gysur pwerus a nodweddion logio a dadfeddiannu traddodiadol, mae modd dylunio dull ymatebol hawdd ei ddefnyddio ac offeryn i greu eich estyniadau porwr eich hun hefyd.
- Cliciwch ar Safari yn y ddewislen porwr, a leolir ar frig eich sgrin. Pan fydd y ddewislen yn disgyn, dewiswch Dewisiadau . Gallwch hefyd ddefnyddio'r llwybr byr bysellfwrdd canlynol yn lle'r eitem ddewislen hon: COMMAND + COMMA (,)
- Erbyn hyn, dylid dangos rhyngwyneb Dewisiadau Safari, sy'n gorbwyso ffenestr eich porwr. Cliciwch ar yr eicon Uwch , a leolir ar ochr ddeheuol y pennawd.
- Dylai'r dewisiadau Uwch fod yn weladwy erbyn hyn. Ar waelod y sgrin hon mae opsiwn wedi'i labelu Show Develop menu yn y bar dewislen , ynghyd â blwch siec. Os nad oes marc siec yn y blwch, cliciwch arno unwaith i osod un yno.
- Caewch y rhyngwyneb Dewisiadau trwy glicio ar y 'x' coch a geir yn y gornel chwith uchaf.
- Dylech nawr roi sylw i opsiwn newydd yn y ddewislen porwr a enwir Development , wedi'i leoli rhwng Bookmarks a Window . Cliciwch ar yr eitem ddewislen hon. Bellach, dylid dangos dewislen syrthio, sy'n cynnwys yr opsiynau canlynol.
Tudalen Agored Gyda: Yn eich galluogi i agor y dudalen We weithredol yn un o'r porwyr eraill a osodir ar eich Mac ar hyn o bryd.
Asiant Defnyddiwr: Yn caniatáu i chi ddewis o fwy na dwsin o werthoedd asiant defnyddiwr a ddiffiniwyd ymlaen llaw, gan gynnwys sawl fersiwn o Chrome, Firefox a Internet Explorer, yn ogystal â diffinio'ch llinyn arfer eich hun.
Rhowch Ddull Dylunio Ymatebol : Yn cyflwyno'r dudalen bresennol fel y byddai'n ymddangos ar wahanol ddyfeisiadau ac ar wahanol benderfyniadau sgrin.
Dangos Arolygydd Gwe: Yn lansio'r prif ryngwyneb ar gyfer offer Dev Safari, a osodir fel arfer ar waelod sgrin eich porwr ac yn cynnwys yr adrannau canlynol: Elfennau , Rhwydwaith , Adnoddau , Amserlenni , Diddymwr , Storio , Consol .
Dangos Gwall Chysur: Hefyd yn lansio'r rhyngwyneb offer dev, yn uniongyrchol i'r tab Chysur sy'n dangos gwallau, rhybuddion a data cofnodi chwiliadwy eraill.
Dangos Ffynhonnell Tudalen: Opens the Resources tab, sy'n dangos cod ffynhonnell y dudalen weithgar sydd wedi'i gategoreiddio yn ôl dogfen.
Dangos Adnoddau'r Tudalen: Yn cyflawni'r un swyddogaeth â'r opsiwn Ffynhonnell Tudalen Dangos .
Dangos Golygydd Snippet: Yn agor ffenestr newydd lle gallwch chi roi cod CSS a HTML, gan ragweld ei allbwn ar-y-hedfan.
Dangos Adeilad Estyniad: Yn darparu'r gallu i greu neu olygu estyniadau Safari gyda CSS, HTML a JavaScript.
Dangos Cofnodi Llinell Amser: Yn agor y tab Timelines ac yn dechrau arddangos ceisiadau rhwydwaith, gosodiad a rendro gwybodaeth yn ogystal â gweithredu JavaScript mewn amser real.
Caches Gwag: Yn dileu'r cache cyfan sy'n cael ei storio ar eich disg galed ar hyn o bryd.
Analluoga Caches: Yn atal Safari rhag caching fel bod yr holl gynnwys yn cael ei adfer o'r gweinydd ar bob llwyth tudalen.
Analluogi Delweddau: Yn atal delweddau rhag rendro ar bob tudalen We.
Analluoga Arddulliau: Anwybyddu eiddo CSS pan fydd tudalen wedi'i lwytho.
Analluogi JavaScript: Cyfyngu ar weithredu JavaScript ar bob tudalen.
Analluoga Estyniadau: Gwahardd yr holl estyniadau a osodwyd rhag rhedeg o fewn y porwr.
Analluoga Hacks sy'n benodol i'r Safle: Os yw Safari wedi'i addasu i ymdrin â phwnc (au) penodol yn benodol i'r dudalen We weithredol, bydd yr opsiwn hwn yn rhwystro'r newidiadau hynny fel bod y dudalen yn llwythi ag y byddai'n rhaid iddo gael ei gyflwyno cyn i'r addasiadau hyn gael eu cyflwyno.
Analluoga Cyfyngiadau Ffeiliau Lleol: Yn caniatáu i'r porwr gael mynediad i ffeiliau ar eich disgiau lleol, gweithred sydd wedi'i gyfyngu yn ddiofyn am resymau diogelwch.
Analluoga Cyfyngiadau Trawsdreiddiad: Mae'r cyfyngiadau hyn yn cael eu rhoi yn eu lle yn ddiofyn er mwyn atal XSS a pheryglon posibl eraill. Fodd bynnag, yn aml mae'n rhaid iddynt fod yn anabl dros dro at ddibenion datblygu.
Caniatáu JavaScript o'r Maes Chwilio Smart: Pan gaiff ei alluogi, rhowch y gallu i nodi URLau gyda javascript: wedi'i ymgorffori yn uniongyrchol i'r bar cyfeiriad.
Trin Tystysgrifau SHA-1 yn Aneglur: ystyrir bod tystysgrifau SSL sy'n defnyddio'r algorithm SHA-1 yn eang ac yn agored i niwed.