Hvernig á að nota forritara fyrir vefskoðarar

Innbyggt verkfæri fyrir vefhönnuðir, verktaki og prófanir

Til viðbótar við flestar vafraframleiðendur sem einbeita sér að daglegu notandanum sem leitar að vafra á vefnum, koma þeir einnig til móts við vefhönnuði, hönnuðir og gæðatryggingafólk sem hjálpa til við að byggja upp forritin og síðurnar sem þeir notendur hafa aðgang að með því að samþætta öflugt verkfæri beint inn í vafrana sjálfir.

Farin eru dagar þar sem eina forritun og prófunarverkfæri sem finnast í vafra gerðu þér kleift að skoða kóðann á síðunni og ekkert meira. Í vafra í dag gerirðu þér kleift að taka dýpra kafa með því að gera hluti eins og að framkvæma og kemba JavaScript-sneiðum, skoða og breyta DOM-einingum, fylgjast með rauntíma netumferðum þar sem forritið eða blaðsíðan er hlaðið til að greina flöskuháls, greina CSS árangur, tryggja að kóðinn þinn sé ekki nota of mikið minni eða of margar CPU hringrásir og margt fleira. Frá prófunarhorni er hægt að endurskapa hvernig app eða vefsíðu muni koma fram í mismunandi vöfrum og á mismunandi tækjum og vettvangi í gegnum töfra móttækilegrar hönnunar og innbyggða herma. Það besta er að þú getur gert allt þetta án þess að þurfa að fara í vafrann þinn!

Námskeiðin hér að neðan ganga í gegnum hvernig þú getur fengið aðgang að þessum forritara í nokkrum vinsælum vöfrum.

Google Chrome

Verkfæri Chrome forritara leyfa þér að breyta og kemba kóða, endurskoða einstaka hluti til að afhjúpa flutningsvandamál, líkja eftir mismunandi skjái á skjánum, þar á meðal þeim sem keyra Android eða IOS , og framkvæma nokkrar aðrar gagnlegar aðgerðir.

1. Smelltu á aðalvalmyndartakkann Króm, merkt með þremur láréttum línum og er staðsett efst í hægra horninu í vafranum.
2. Þegar fellivalmyndin birtist skaltu sveima músarbendlinum yfir valkostinn Fleiri verkfæri .
3. A undirvalmynd ætti nú að birtast. Veldu valkostinn sem merktur er Hönnunarverkfæri . Þú getur einnig notað eftirfarandi flýtileið í stað þessa valmyndar: Króm OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Krómhönnuður Verkfæri tengi ætti nú að birtast, eins og sýnt er í þessu dæmi skjámynd. Það fer eftir útgáfu þínum af Chrome að upphafleg skipulag sem þú sérð kann að vera örlítið frábrugðin því sem birtist hér. Helstu miðstöð verktaki verkfæri, venjulega staðsett á annað hvort neðst eða hægri hlið skjásins, inniheldur eftirfarandi flipa.
   Elements: Veitir getu til að skoða CSS og HTML kóða sem og breyta CSS á fluginu, sjá áhrif breytinga á rauntíma.
   Hugga: Króm JavaScript Console gerir ráð fyrir beinni stjórnfærslu og greiningu á kembiforriti.
   Heimildir: Leyfir þér að kemba JavaScript kóða í gegnum öflugt grafískt viðmót.
   Netkerfi: Flokkar og birtir nákvæmar upplýsingar um hverja tengda aðgerð á virku forritinu eða síðunni, þar með talið heill beiðni og svarhausum auk háþróaðrar tímasetningar.
   Tímalína: Leyfir til ítarlegri greiningu á öllum verkefnum sem eiga sér stað innan vafrans um leið og beiðni um síðu eða umsókn er hafin.
5. Auk þessara hluta geturðu einnig fengið aðgang að eftirfarandi tækjum með >> tákninu, sem staðsett er til hægri á flipanum Tímalína .
   Prófíll: brotinn niður í CPU profiler og Heap profiler köflum, veitir alhliða minni notkun og heildar framkvæmd tíma virka umsókn eða síðu.
   Öryggi: Leggur áherslu á vottorðsvandamál og önnur öryggisvandamál með virku síðunni eða forritinu.
   Resources: Þetta er þar sem þú getur skoðað vefkökur, staðbundin geymsla, app skyndiminni og aðrar staðbundnar gagnasöfn sem notaðar eru af núverandi vefsíðu eða forriti.
   Endurskoðanir: Býður upp á leiðir til að hámarka hleðslutíma síðu eða umsóknar og almennar afköst.
6. Tækihamur gerir þér kleift að skoða virka síðu í hermir sem gerir það næstum nákvæmlega eins og það virðist á einum af yfir tugi tækjum, þar á meðal nokkrum þekktum Android og IOS gerðum eins og iPad, iPhone og Samsung Galaxy. Þú færð einnig hæfileika til að líkja eftir sérsniðnum skermupplausnum til að passa sérstaklega við þróunina eða prófunarþörfina. Til að kveikja og slökkva á tækjabúnaði skaltu velja táknið fyrir farsíma sem er staðsett beint til vinstri á flipanum Elements .
7. Þú getur einnig sérsniðið útlit og verkfæri verktaki tækjanna með því að smella fyrst á valmyndartakkann sem táknað er með þremur lóðréttum punktum og er staðsett hægra megin við áðurnefndar flipa. Frá innan þessara fellilistans geturðu sett upp bryggjuna, sýnt eða falið mismunandi verkfæri auk þess að ræsa fleiri háþróaða hluti eins og tækjaskoðara. Þú munt komast að því að dev tólin tengi sig er mjög sérhannaðar með stillingunum sem finnast í þessum kafla.

Mozilla Firefox

Vefur verktaki í Firefox inniheldur verkfæri fyrir hönnuði, forritara og prófunartæki eins og stíl ritstjóri og pixel-targeting eyedropper.

Mælt er með lestur: Top 25 Greasemonkey og Tampermonkey User Scripts

1. Smelltu á aðalvalmynd hnappsins, táknuð með þremur láréttum línum og staðsett í efra hægra horninu í vafranum.
2. Þegar fellivalmyndin birtist skaltu velja táknið sem heitir Hönnuður . Valmynd Vefur Verktaki ætti nú að birtast með eftirfarandi valkostum. Þú munt taka eftir því að flestir valmyndaratriði hafa flýtivísanir sem tengjast þeim.
   Víxlaverkfæri: Sýnir eða felur tengimöguleika verktaki, venjulega staðsett neðst í vafraglugganum. Flýtileið lyklaborðs: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Eftirlitsmaður: Leyfir þér að skoða og / eða klíra CSS og HTML kóða á virku síðunni sem og á flytjanlegur tæki með fjarlægri kembiforrit. Flýtileið lyklaborðs: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Vefur Console: Leyfir þér að framkvæma JavaScript tjáning á virku síðunni auk endurskoða fjölbreytt safn af innskráðum gögnum, þ.mt öryggisviðvaranir, netbeiðnir, CSS-skilaboð og fleira. Flýtileið lyklaborðs: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: The JavaScript Debugger gerir þér kleift að ákvarða og laga galla með því að setja bilanir, skoða DOM hnúður, svarta box utanaðkomandi heimildir og margt fleira. Eins og raunin er með skoðunarmanni , styður þessi eiginleiki einnig fjarlægur kembiforrit. Flýtileið lyklaborðs: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Style Editor: Gerir þér kleift að búa til nýjan stílblöð og fella þau inn með virka vefsíðu eða breyta núverandi blöðum og prófa hvernig breytingar þínar gerast í vafra með einum smelli. Flýtileið lyklaborðs: Mac OS X, Windows ( SHIFT + F7 )
   Afköst: Gefur nákvæma sundurliðun á netafköstum virku síðunnar, gagnaflutningsgögn, framkvæmdartíma JavaScript og ástand, mála blikkandi og margt fleira. Flýtileið lyklaborðs: Mac OS X, Windows ( SHIFT + F5 )
   Net: Listi yfir hverja símkerfisbeiðni sem vafrinn hefur hafið ásamt samsvarandi aðferð, uppruna léni, gerð, stærð og tíma sem liðinn er. Flýtileið lyklaborðs: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Hönnuður Tækjastikan: Opnar gagnvirka skipanalínu túlka. Sláðu inn hjálp í túlkann fyrir lista yfir allar tiltækar skipanir og rétt setningafræði þeirra. Flýtileið lyklaborðs: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Gefur möguleika á að búa til og framkvæma vefforrit í gegnum raunverulegt tæki sem keyrir á Firefox OS eða með því að nota Firefox OS Simulator. Flýtileið lyklaborðs: Mac OS X, Windows ( SHIFT + F8 )
   Browser Console: Veitir sömu virkni og Web Console (sjá hér að framan). Hins vegar eru öll gögn sem eru skilað fyrir alla Firefox forritið (þ.mt viðbætur og aðgerðir vafrans) í stað þess að aðeins virka vefsíðu. Flýtileið lyklaborðs: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Móttækileg hönnunarsýn: Leyfir þér strax að skoða vefsíðu í mismunandi upplausnum, uppsetningum og skjástærð til að líkja eftir mörgum tækjum, þ.mt töflur og smartphones. Flýtileið lyklaborðs: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Eyedropper: Sýnir sex litakóða fyrir valin pixlar sem eru valdar fyrir sig.
   Scratchpad : Gerir þér kleift að skrifa, breyta, samþætta og framkvæma sneiðar af JavaScript kóða úr sprettiglugga Firefox glugga. Flýtileið lyklaborðs: Mac OS X, Windows ( SHIFT + F4 )
   Page Source: Upprunalega vafra-undirstaða verktaki tól, þessi valkostur birtir einfaldlega fyrirliggjandi uppspretta kóða fyrir virka síðu. Flýtileið lyklaborðs: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Fáðu fleiri verkfæri: Opnar verkfærasafn vefhönnuðar á opinberu viðbótarsvæðinu Mozilla, sem sýnir um tugi vinsæl eftirnafn eins og Firebug og Greasemonkey.

Microsoft Edge / Internet Explorer

Algengt er nefnt F12 Developer Tools , heiður á lyklaborðsstýringunni sem hefur hleypt af stokkunum viðmótinu frá fyrri útgáfum af Internet Explorer, dev tólastikan í IE11 og Microsoft Edge hefur komið langt frá upphafi með því að bjóða upp á mjög vel hóp af fylgist með, debuggers, emulators, og á-flugi þýðenda.

1. Smelltu á valmyndina Fleiri aðgerðir , táknuð með þremur punktum og staðsett í efra hægra horninu í vafraglugganum. Þegar fellivalmyndin birtist skaltu velja valkostinn sem merktur er F12 þróunarverkfæri . Eins og ég hef áður getið, getur þú einnig fengið aðgang að tækjunum með F12 flýtilyklinum.
2. Þróunarviðmótið ætti nú að birtast, venjulega neðst í vafranum. Eftirfarandi verkfæri eru tiltækar, hver aðgengileg er með því að smella á viðkomandi flipa yfirskrift eða með því að nota meðfylgjandi flýtileið.
   DOM Explorer: Leyfir þér að breyta stíllblöðum og HTML á virku síðunni, sem gerir breytta niðurstöðuna eins og þú ferð. Nýtir IntelliSense virkni til að fylla út sjálfkrafa kóða þar sem það á við. Flýtileið lyklaborðs: (CTRL + 1)
   Hugga: Veitir möguleika á að senda inn kembiforrit, þ.mt gegn, tímamælum, ummerkjum og sérsniðnum skilaboðum með samþættri API. Einnig leyfir þér að sprauta kóða inn í virka vefsíðu og breyta gildunum sem úthlutað er til einstakra breytur í rauntíma. Flýtileið lyklaborðs: (CTRL + 2)
   Kembiforrit: Leyfir þér að stilla punktar og kemba kóðann á meðan það líður út, lína eftir línu ef þörf krefur. Flýtileið lyklaborðs: (CTRL + 3)
   Net: Listi yfir hverja símkerfisbeiðni sem vafrinn byrjar á meðan á hleðslu og framkvæmd er að ræða, þar á meðal upplýsingar um samskiptareglur, gerð efnis, notkun bandbreiddar og margt fleira. Flýtileið lyklaborðs: (CTRL + 4)
   Frammistaða: Upplýsingar um rammahlutfall, notkun CPU og aðrar mælikvarða á árangri sem hjálpa þér að flýta fyrir hleðslutímum og öðrum aðgerðum. Flýtileið lyklaborðs: (CTRL + 5)
   Minni: Hjálpar þér að einangra og leiðrétta hugsanlega minni leka á núverandi vefsíðu með því að birta tímalínu minni notkun ásamt skyndimyndum frá mismunandi tímabilum. Flýtileið lyklaborðs: (CTRL + 6)
   Emulation: Sýnir þér hvernig virka síðunni myndi gera í ýmsum ályktunum og skjástærðum, emulating smartphones, töflur og önnur tæki. Einnig veitir hæfni til að breyta notanda umboðsmanni og síðu stefnumörkun, eins og heilbrigður eins og líkja mismunandi geolocations með því að slá inn breiddar og lengdargráðu. Flýtileið lyklaborðs: (CTRL + 7)
3. Til að birta stjórnborðið meðan á einhverjum öðrum verkfærum stendur smellirðu á ferningshnappinn með hægri festingu inni í henni, sem staðsett er í efra hægra horninu á tengitækinu við þróunartólið.
4. Til að undanskilja, þá er verktakaviðmótið þannig að það verður sérstakt gluggi, smelltu á hnappinn sem táknað er með tveimur cascading rétthyrningum eða notaðu eftirfarandi flýtileið: CTRL + P. Þú getur sett tækin aftur á upprunalegu staðinn með því að ýta á CTRL + P annað sinn.

Apple Safari (aðeins OS X)

Safari fjölbreytt tól verkfæri endurspeglar stór verktaki samfélag sem nýtur Mac fyrir hönnun og forritun þörfum. Til viðbótar við öflugan hugga og hefðbundna skógarhögg og kembiforrit, er einnig þægilegur til notkunar móttækilegur hönnunarhamur og tól til að búa til eigin viðbætur í vafranum þínum.

1. Smelltu á Safari í vafranum valmyndinni, sem staðsett er efst á skjánum þínum. Þegar fellivalmyndin birtist skaltu velja Stillingar . Þú getur einnig notað eftirfarandi flýtileið í stað þessa valmyndar: COMMAND + COMMA (,)
2. Preferences tengi Safari verður nú að birtast, yfirborðs glugga. Smelltu á Advanced táknið, sem er staðsett hægra megin við hausinn.
3. Ítarlegu stillingarnar ættu nú að vera sýnilegar. Neðst á þessari skjá er valkostur merktur Sýna þróunarvalmynd í valmyndastiku ásamt fylgiboxi. Ef ekki er sýnt merkt í kassanum skaltu smella á það einu sinni til að setja einn þarna.
4. Lokaðu Preferences tenglinum með því að smella á rauða 'x' sem finnast í efra vinstra horninu.
5. Þú ættir nú að taka eftir nýjan valkost í vafranum valmyndinni Þróun , staðsett á milli bókamerkja og glugga . Smelltu á þetta valmyndaratriði. Núna verður að birta fellilistann sem inniheldur eftirfarandi valkosti.
   Opna síðu með: Leyfir þér að opna virka vefsíðu í einum af öðrum vafrum sem eru settar upp á Mac þinn.
   Notendaviðmót: Leyfir þér að velja úr meira en tugum fyrirfram skilgreindum notanda umboðsmanni, þar á meðal nokkrar útgáfur af Chrome, Firefox og Internet Explorer, svo og skilgreina eigin sérsniðna streng þinn.
   Sláðu inn Móttækileg Hönnunarhamur : Gerir núverandi síðu eins og það virðist á mismunandi tækjum og á mismunandi skjáupplausn.
   Sýna vefur eftirlitsmaður: Sækir aðalviðmótið fyrir dev tólum Safari, venjulega sett neðst á skjánum þínum og inniheldur eftirfarandi hluta: Element , Network , Resources , Timelines , Debugger , Storage , Console .
   Sýna Villa Console: Einnig ræst dev verkfæri tengi beint til Console flipann sem sýnir villur, viðvaranir og aðrar leitar þig inn gögn.
   Sýna síðu uppspretta: Opnar flipann Resources , sem birtir kóðann fyrir virkan síðu flokkað eftir skjali.
   Sýna síðu auðlindir: Framkvæmir sömu aðgerð og valkosturinn Sýna síðu uppspretta .
   Sýna ritstjóri: Opnar nýja glugga þar sem þú getur slegið inn CSS og HTML kóða, forsýning framleiðsla þess á flugi.
   Show Extension Builder: Veitir möguleika á að búa til eða breyta Safari viðbótum með CSS, HTML og JavaScript.
   Sýna tímalína Upptaka: Opnar flipann Tímalínur og byrjar að birta netbeiðnir, skipulag og flutningsupplýsingar auk JavaScript framkvæmd í rauntíma.
   Empty Caches: Eyðir öllum skyndiminni sem er geymt á harða diskinum þínum.
   Slökktu á Caches: Stöðvar Safari frá flýtiminni svo að allt efni sé sótt frá miðlara á hverri síðu hlaða.
   Slökktu á myndum: Hindrar myndir frá flutningi á öllum vefsíðum.
   Slökkva á stílum: Hunsa CSS eiginleika þegar blaðsíða er hlaðið inn.
   Slökkva á JavaScript: Takmarkar JavaScript framkvæmd á öllum síðum.
   Slökkva á eftirnafn: Bannar öllum uppsettum viðbótum frá því að birtast í vafranum.
   Slökktu á sérsniðnum hackum: Ef Safari hefur verið breytt til að höndla vandamál sem eru sérstaklega tilteknar fyrir virka vefsíðu, mun þessi valkostur loka þeim breytingum þannig að blaðið hleðst eins og það myndi áður en þessar breytingar voru kynntar.
   Gera óvinnufæran staðbundnar takmarkanir á skrám: Leyfir vafranum að hafa aðgang að skrám á staðbundnum diskum, aðgerð sem er sjálfgefin af öryggisástæðum.
   Gera óvinnufæran takmarkanir á upprunalegum uppruna: Þessar takmarkanir eru gerðar sjálfgefið til að koma í veg fyrir XSS og aðrar hugsanlegar hættur. Hins vegar þurfa þau oft að vera tímabundið óvirk til þróunar.
   Leyfa JavaScript frá Smart Search Field: Þegar slökkt er á, er hægt að slá inn vefslóðir með javascript: innbyggður beint inn í veffangastikuna.
   Meðhöndla SHA-1 vottorð sem óörugg: SSL vottorð sem nota SHA-1 reiknirit eru víða talin vera úrelt og viðkvæm.