{"id":2202,"date":"2020-11-18T00:00:00","date_gmt":"2020-11-18T00:00:00","guid":{"rendered":"https:\/\/megnyitasa.com\/blog\/a-webbongeszo-fejlesztoi-eszkozok-hasznalata\/"},"modified":"2020-11-18T00:00:00","modified_gmt":"2020-11-18T00:00:00","slug":"a-webbongeszo-fejlesztoi-eszkozok-hasznalata","status":"publish","type":"post","link":"https:\/\/megnyitasa.com\/blog\/a-webbongeszo-fejlesztoi-eszkozok-hasznalata\/","title":{"rendered":"A webb\u00f6ng\u00e9sz\u0151 fejleszt\u0151i eszk\u00f6z\u00f6k haszn\u00e1lata"},"content":{"rendered":"

\nA legt\u00f6bb b\u00f6ng\u00e9sz\u0151gy\u00e1rt\u00f3 mellett, akik a mindennapi internetez\u00e9sre t\u00f6rekszenek, a webfejleszt\u0151knek, a tervez\u0151knek \u00e9s a min\u0151s\u00e9gbiztos\u00edt\u00e1si szakembereknek is gondoskodnak, akik nagyszer\u0171 eszk\u00f6z\u00f6ket k\u00f6zvetlen\u00fcl a b\u00f6ng\u00e9sz\u0151kbe integr\u00e1lva seg\u00edtenek fel\u00e9p\u00edteni az alkalmaz\u00e1sokat \u00e9s webhelyeket, amelyekhez a felhaszn\u00e1l\u00f3k hozz\u00e1f\u00e9rnek. maguk.\n<\/p>\n

\nElm\u00faltak azok az id\u0151k, amikor a b\u00f6ng\u00e9sz\u0151ben tal\u00e1lhat\u00f3 egyetlen programoz\u00e1si \u00e9s tesztel\u0151 eszk\u00f6z lehet\u0151v\u00e9 tette az oldal forr\u00e1sk\u00f3dj\u00e1nak megtekint\u00e9s\u00e9t, \u00e9s semmi m\u00e1st. A mai b\u00f6ng\u00e9sz\u0151k lehet\u0151v\u00e9 teszik egy sokkal m\u00e9lyebb mer\u00fcl\u00e9st az\u00e1ltal, hogy olyan dolgokat hajtanak v\u00e9gre, mint a JavaScript-kivonatok v\u00e9grehajt\u00e1sa \u00e9s hibakeres\u00e9se, a DOM-elemek ellen\u0151rz\u00e9se \u00e9s szerkeszt\u00e9se, az alkalmaz\u00e1s vagy az oldal bet\u00f6lt\u00e9sekor val\u00f3s idej\u0171 h\u00e1l\u00f3zati forgalom figyelemmel k\u00eds\u00e9r\u00e9se a sz\u0171k keresztmetszetek azonos\u00edt\u00e1s\u00e1ra, a CSS-teljes\u00edtm\u00e9ny elemz\u00e9se, a k\u00f3d megfelel\u0151 nem haszn\u00e1l t\u00fal sok mem\u00f3ri\u00e1t vagy t\u00fal sok CPU-ciklust, \u00e9s m\u00e9g sok minden m\u00e1st.\n<\/p>\n

\nTesztel\u00e9si szempontb\u00f3l az adapt\u00edv tervez\u00e9s \u00e9s a be\u00e9p\u00edtett szimul\u00e1torok var\u00e1zslata r\u00e9v\u00e9n reproduk\u00e1lhatja, hogy egy alkalmaz\u00e1s vagy weboldal hogyan jelenik meg a k\u00fcl\u00f6nb\u00f6z\u0151 b\u00f6ng\u00e9sz\u0151kben, valamint a k\u00fcl\u00f6nb\u00f6z\u0151 eszk\u00f6z\u00f6k\u00f6n \u00e9s platformokon. A legjobb az eg\u00e9szben, hogy mindezt megteheti an\u00e9lk\u00fcl, hogy el kellene hagynia a b\u00f6ng\u00e9sz\u0151t!\n<\/p>\n

\nAz al\u00e1bbi oktat\u00f3anyagok bemutatj\u00e1k, hogyan \u00e9rheti el ezeket a fejleszt\u0151i eszk\u00f6z\u00f6ket sz\u00e1mos n\u00e9pszer\u0171 webb\u00f6ng\u00e9sz\u0151ben.\n<\/p>\n

Google Chrome <\/h2>\n

\nA Chrome fejleszt\u0151i eszk\u00f6zei lehet\u0151v\u00e9 teszik a k\u00f3d szerkeszt\u00e9s\u00e9t \u00e9s hibakeres\u00e9s\u00e9t, az egyes \u00f6sszetev\u0151k audit\u00e1l\u00e1s\u00e1t a teljes\u00edtm\u00e9nyprobl\u00e9m\u00e1k felt\u00e1r\u00e1sa \u00e9rdek\u00e9ben, k\u00fcl\u00f6nb\u00f6z\u0151 eszk\u00f6zk\u00e9perny\u0151k szimul\u00e1l\u00e1s\u00e1t, bele\u00e9rtve az Android vagy iOS rendszert futtat\u00f3 k\u00e9perny\u0151ket is, \u00e9s sz\u00e1mos m\u00e1s hasznos funkci\u00f3t is elv\u00e9gezhet.\n<\/p>\n

    \n
  1. \n

    \nV\u00e1lassza a Chrome-ot f\u0151men\u00fc<\/strong>, h\u00e1rom v\u00edzszintes vonallal jel\u00f6lt \u00e9s a b\u00f6ng\u00e9sz\u0151 jobb fels\u0151 sark\u00e1ban tal\u00e1lhat\u00f3.\n<\/p>\n<\/li>\n

  2. \n

    \nAmikor megjelenik a leg\u00f6rd\u00fcl\u0151 men\u00fc, vigye az eg\u00e9rmutat\u00f3t a T\u00f6bb eszk\u00f6z<\/strong> opci\u00f3t.\n<\/p>\n

    <\/p>\n<\/li>\n

  3. \n

    \nEkkor megjelenik egy almen\u00fc. V\u00e1lassza ki a felirat\u00fa opci\u00f3t Fejleszt\u0151i eszk\u00f6z\u00f6k<\/strong>. A men\u00fcpont helyett a k\u00f6vetkez\u0151 billenty\u0171parancsot is haszn\u00e1lhatja: Chrome OS \/ Windows (CTRL + SHIFT + I<\/strong>), Mac OS X (ALT (OPCI\u00d3) + COMMAND + I<\/strong>)\n<\/p>\n

    <\/p>\n<\/li>\n

  4. \n

    \nMostant\u00f3l meg kell jelen\u00edteni a Chrome Developer Tools fel\u00fcletet, amint az a k\u00e9perny\u0151k\u00e9pen l\u00e1that\u00f3. A Chrome verzi\u00f3j\u00e1t\u00f3l f\u00fcgg\u0151en a kezdeti elrendez\u00e9s kiss\u00e9 elt\u00e9rhet az itt bemutatott elrendez\u00e9st\u0151l. A fejleszt\u0151i eszk\u00f6z\u00f6k f\u0151 k\u00f6zpontja, amely \u00e1ltal\u00e1ban a k\u00e9perny\u0151 als\u00f3 vagy jobb oldal\u00e1n tal\u00e1lhat\u00f3, a k\u00f6vetkez\u0151 f\u00fcleket tartalmazza.\n<\/p>\n<\/li>\n

  5. \n

    \nEzen szakaszok mellett a k\u00f6vetkez\u0151 eszk\u00f6z\u00f6ket is el\u00e9rheti a >><\/strong> ikonra, amely a teljes\u00edtm\u00e9ny<\/strong> Tab.\n<\/p>\n

      \n
    • Memory design<\/strong>: <\/strong>Figyelje \u00e9s r\u00f6gz\u00edtse a mem\u00f3ria haszn\u00e1lat\u00e1t egy weboldalon. L\u00e1thatja, hogy mennyire neh\u00e9z a JavaScript a webhely\u00e9n.<\/li>\n
    • Biztons\u00e1g<\/strong>: Kiemeli a tan\u00fas\u00edtv\u00e1nyprobl\u00e9m\u00e1kat \u00e9s m\u00e1s, az akt\u00edv oldal vagy alkalmaz\u00e1s biztons\u00e1g\u00e1val kapcsolatos probl\u00e9m\u00e1kat.<\/li>\n
    • Alkalmaz\u00e1s<\/strong>: <\/strong>Ellen\u0151rizze a webalkalmaz\u00e1s \u00e1ltal haszn\u00e1lt er\u0151forr\u00e1sokat. N\u00e9zze meg teljes k\u00f6r\u0171en a haszn\u00e1lt inform\u00e1ci\u00f3kat.<\/li>\n
    • Audit<\/strong>: Lehet\u0151s\u00e9geket k\u00edn\u00e1l az oldal vagy az alkalmaz\u00e1s bet\u00f6lt\u00e9si idej\u00e9nek \u00e9s \u00e1ltal\u00e1nos teljes\u00edtm\u00e9ny\u00e9nek optimaliz\u00e1l\u00e1s\u00e1ra.<\/li>\n<\/ul>\n

      <\/p>\n<\/li>\n

    • \n

      \nEszk\u00f6z m\u00f3d<\/strong> lehet\u0151v\u00e9 teszi az akt\u00edv oldal megtekint\u00e9s\u00e9t egy szimul\u00e1torban, amely szinte pontosan \u00fagy jelen\u00edti meg, ahogyan a t\u00f6bb mint egy tucat eszk\u00f6z egyik\u00e9n megjelenik, k\u00f6zt\u00fck sz\u00e1mos j\u00f3l ismert Android \u00e9s iOS modellen, p\u00e9ld\u00e1ul iPaden, iPhone-on \u00e9s Samsung Galaxy-on. Azt is megadhatja, hogy egyedi k\u00e9perny\u0151felbont\u00e1sokat ut\u00e1nozzon, hogy megfeleljen az \u00d6n fejleszt\u00e9si vagy tesztel\u00e9si ig\u00e9nyeinek.\n<\/p>\n

      \nV\u00e1lt\u00e1s Eszk\u00f6z m\u00f3d<\/strong> be \u00e9s ki, v\u00e1lassza a ikont mobiltelefon ikonra<\/strong> k\u00f6zvetlen\u00fcl a Elemek<\/strong> Tab.\n<\/p>\n

      <\/p>\n<\/li>\n

    • \n

      \nA fejleszt\u0151eszk\u00f6z\u00f6k megjelen\u00e9s\u00e9t \u00e9s hangulat\u00e1t is testreszabhatja, ha el\u0151sz\u00f6r kiv\u00e1lasztja a men\u00fc gombot <\/strong>k\u00e9pviseli h\u00e1rom f\u00fcgg\u0151legesen elhelyezett pont<\/strong> \u00e9s a fent eml\u00edtett f\u00fclek jobb sz\u00e9l\u00e9n tal\u00e1lhat\u00f3.\n<\/p>\n

      \nEbben a leg\u00f6rd\u00fcl\u0151 men\u00fcben \u00e1thelyezheti a dokkol\u00f3t, megmutathatja vagy elrejtheti a k\u00fcl\u00f6nb\u00f6z\u0151 eszk\u00f6z\u00f6ket, valamint elind\u00edthat fejlettebb elemeket, p\u00e9ld\u00e1ul egy eszk\u00f6zellen\u0151rt. Meg fogja tal\u00e1lni, hogy maga a dev eszk\u00f6z\u00f6k fel\u00fclete nagyon testreszabhat\u00f3 az ebben a szakaszban tal\u00e1lhat\u00f3 be\u00e1ll\u00edt\u00e1sokkal.\n<\/p>\n

      <\/p>\n<\/li>\n<\/ol>\n

      Mozilla Firefox <\/h2>\n

      \nA Firefox webfejleszt\u0151i r\u00e9sze olyan eszk\u00f6z\u00f6ket tartalmaz a tervez\u0151knek, a fejleszt\u0151knek \u00e9s a tesztel\u0151knek, mint p\u00e9ld\u00e1ul a st\u00edlusszerkeszt\u0151 \u00e9s a pixel c\u00e9lz\u00f3 szemcsepp. \n<\/p>\n

        \n
      1. \n

        \nV\u00e1lassza a Firefox elemet f\u0151men\u00fc<\/strong>, k\u00e9pviseli h\u00e1rom v\u00edzszintes vonal<\/strong> \u00e9s a b\u00f6ng\u00e9sz\u0151ablak jobb fels\u0151 sark\u00e1ban tal\u00e1lhat\u00f3.\n<\/p>\n<\/li>\n

      2. \n

        \nAmikor megjelenik a leg\u00f6rd\u00fcl\u0151 men\u00fc, v\u00e1lassza a lehet\u0151s\u00e9get Web Developer<\/strong>.\n<\/p>\n

        <\/p>\n<\/li>\n

      3. \n

        \nA Webfejleszt\u0151 men\u00fc<\/strong> most a k\u00f6vetkez\u0151 opci\u00f3kat tartalmaznia kell. \u00c9szre fogja venni, hogy a legt\u00f6bb men\u00fcelemhez billenty\u0171parancsok vannak t\u00e1rs\u00edtva.\n<\/p>\n

          \n
        • Toggle Tools<\/strong>: Megjelen\u00edti vagy elrejti a fejleszt\u0151i eszk\u00f6z\u00f6k fel\u00fclet\u00e9t, \u00e1ltal\u00e1ban a b\u00f6ng\u00e9sz\u0151ablak alj\u00e1n helyezkedik el. Billenty\u0171parancs: Mac OS X (ALT (OPCI\u00d3) + COMMAND + I<\/strong>), Ablakok (CTRL + SHIFT + I<\/strong>)<\/li>\n
        • Ellen\u0151r<\/strong>: Lehet\u0151v\u00e9 teszi a CSS \u00e9s a HTML k\u00f3d ellen\u0151rz\u00e9s\u00e9t \u00e9s \/ vagy m\u00f3dos\u00edt\u00e1s\u00e1t az akt\u00edv oldalon, valamint egy hordozhat\u00f3 eszk\u00f6z\u00f6n t\u00e1voli hibakeres\u00e9s r\u00e9v\u00e9n. Billenty\u0171parancs: Mac OS X (ALT (OPCI\u00d3) + COMMAND + C<\/strong>), Ablakok (CTRL + SHIFT + C<\/strong>)<\/li>\n
        • Web Console<\/strong>: Lehet\u0151v\u00e9 teszi a JavaScript-kifejez\u00e9sek v\u00e9grehajt\u00e1s\u00e1t az akt\u00edv oldalon, valamint a napl\u00f3zott adatok sokf\u00e9les\u00e9g\u00e9nek \u00e1ttekint\u00e9s\u00e9t, bele\u00e9rtve a biztons\u00e1gi figyelmeztet\u00e9seket, a h\u00e1l\u00f3zati k\u00e9relmeket, a CSS-\u00fczeneteket \u00e9s egyebeket. Billenty\u0171parancs: Mac OS X (ALT (OPCI\u00d3) + COMMAND + K<\/strong>), Ablakok (CTRL + SHIFT + K<\/strong>)<\/li>\n
        • Debugger<\/strong>: A JavaScript hibakeres\u0151 seg\u00edts\u00e9g\u00e9vel pontosan meghat\u00e1rozhatja \u00e9s kijav\u00edthatja a hib\u00e1kat t\u00f6r\u00e9spontok be\u00e1ll\u00edt\u00e1s\u00e1val, a DOM-csom\u00f3pontok, a fekete boksz k\u00fcls\u0151 forr\u00e1sainak ellen\u0151rz\u00e9s\u00e9vel \u00e9s m\u00e9g sok m\u00e1ssal. Az Inspectorhoz hasonl\u00f3an ez a funkci\u00f3 t\u00e1mogatja a t\u00e1voli hibakeres\u00e9st is. Billenty\u0171parancs: Mac OS X (ALT (OPCI\u00d3) + COMMAND + S<\/strong>), Ablakok (CTRL + SHIFT + S<\/strong>)<\/li>\n
        • St\u00edlusszerkeszt\u0151<\/strong>: Lehet\u0151v\u00e9 teszi \u00faj st\u00edluslapok l\u00e9trehoz\u00e1s\u00e1t \u00e9s be\u00e9p\u00edt\u00e9s\u00e9t az akt\u00edv weboldalba, vagy a megl\u00e9v\u0151 munkalapok szerkeszt\u00e9s\u00e9t, \u00e9s csak egy kattint\u00e1ssal tesztelheti a v\u00e1ltoztat\u00e1sok megjelen\u00edt\u00e9s\u00e9t egy b\u00f6ng\u00e9sz\u0151ben. Billenty\u0171parancs: Mac OS X, Windows (SHIFT + F7<\/strong>)<\/li>\n
        • teljes\u00edtm\u00e9ny<\/strong>: R\u00e9szletesen bemutatja az akt\u00edv oldal h\u00e1l\u00f3zati teljes\u00edtm\u00e9ny\u00e9t, a k\u00e9pkockasebess\u00e9g-adatokat, a JavaScript v\u00e9grehajt\u00e1si idej\u00e9t \u00e9s \u00e1llapot\u00e1t, a fest\u00e9kvillan\u00e1st \u00e9s m\u00e9g sok minden m\u00e1st. Billenty\u0171parancs: Mac OS X, Windows (SHIFT + F5<\/strong>)<\/li>\n
        • h\u00e1l\u00f3zat<\/strong>: Felsorolja a b\u00f6ng\u00e9sz\u0151 \u00e1ltal kezdem\u00e9nyezett minden h\u00e1l\u00f3zati k\u00e9relmet a megfelel\u0151 m\u00f3dszerrel, eredettartom\u00e1nysal, t\u00edpussal, m\u00e9retgel \u00e9s az eltelt id\u0151vel egy\u00fctt. Billenty\u0171parancs: Mac OS X (ALT (OPCI\u00d3) + COMMAND + Q<\/strong>), Ablakok (CTRL + SHIFT + Q<\/strong>)<\/li>\n
        • T\u00e1rol\u00e1si ellen\u0151r<\/strong>: <\/strong>Vessen egy pillant\u00e1st a weboldal \u00e1ltal t\u00e1rolt gyors\u00edt\u00f3t\u00e1rra \u00e9s s\u00fctikre. Billenty\u0171parancs: (SHIFT + F9)<\/strong><\/li>\n
        • Fejleszt\u0151i eszk\u00f6zt\u00e1r<\/strong>: Megnyit egy interakt\u00edv parancssori tolm\u00e1csot. Bel\u00e9p seg\u00edt<\/strong> a tolm\u00e1csba az \u00f6sszes rendelkez\u00e9sre \u00e1ll\u00f3 parancs \u00e9s megfelel\u0151 szintaxisuk felsorol\u00e1s\u00e1hoz. Billenty\u0171parancs: Mac OS X, Windows (SHIFT + F2<\/strong>)<\/li>\n
        • WebIDE<\/strong>: Lehet\u0151s\u00e9get ny\u00fajt webalkalmaz\u00e1sok l\u00e9trehoz\u00e1s\u00e1ra \u00e9s futtat\u00e1s\u00e1ra a Firefox OS-t futtat\u00f3 t\u00e9nyleges eszk\u00f6z\u00f6n vagy a Firefox OS Simulator seg\u00edts\u00e9g\u00e9vel. Billenty\u0171parancs: Mac OS X, Windows (SHIFT + F8<\/strong>)<\/li>\n
        • B\u00f6ng\u00e9sz\u0151 konzol<\/strong>: Ugyanazt a funkci\u00f3t biztos\u00edtja, mint a webkonzol (l\u00e1sd fent). Mindazon\u00e1ltal minden visszak\u00fcld\u00f6tt adat a teljes Firefox alkalmaz\u00e1sra vonatkozik (bele\u00e9rtve a kiterjeszt\u00e9seket \u00e9s a b\u00f6ng\u00e9sz\u0151 szint\u0171 funkci\u00f3kat is), nem csak az akt\u00edv weboldal. Billenty\u0171parancs: Mac OS X (SHIFT + COMMAND + J<\/strong>), Ablakok (CTRL + SHIFT + J<\/strong>)<\/li>\n
        • Reszponz\u00edv tervez\u00e9si n\u00e9zet<\/strong>: Lehet\u0151v\u00e9 teszi, hogy azonnal megn\u00e9zzen egy weboldalt k\u00fcl\u00f6nb\u00f6z\u0151 felbont\u00e1sban, elrendez\u00e9sben \u00e9s k\u00e9perny\u0151m\u00e9retben, hogy ut\u00e1nozza t\u00f6bb eszk\u00f6zt, k\u00f6zt\u00fck t\u00e1blag\u00e9peket \u00e9s okostelefonokat. Billenty\u0171parancs: Mac OS X (ALT (OPCI\u00d3) + COMMAND + M<\/strong>), Ablakok (CTRL + SHIFT + M<\/strong>)<\/li>\n
        • eyedropper<\/strong>: Megjelen\u00edti az egyenk\u00e9nt kiv\u00e1lasztott pixelek hexadecim\u00e1lis sz\u00ednk\u00f3dj\u00e1t.<\/li>\n
        • Jegyzetf\u00fczet<\/strong>: <\/strong>A Scratchpad seg\u00edts\u00e9g\u00e9vel egy el\u0151ugr\u00f3 Firefox ablakb\u00f3l \u00edrhat, szerkeszthet, integr\u00e1lhat \u00e9s futtathat JavaScript k\u00f3dr\u00e9szleteket. Nyisson meg egy interakt\u00edv JavaScript-dokumentumot, amely lehet\u0151v\u00e9 teszi a k\u00f3dba t\u00f6rt\u00e9n\u0151 be\u00edr\u00e1st, \u00e9s tesztelheti azt egy webhelyen. Billenty\u0171parancs: (SHIFT + F4)<\/strong><\/li>\n
        • Szolg\u00e1ltat\u00e1si dolgoz\u00f3k<\/strong>: <\/strong>Hibakeres\u00e9si szolg\u00e1ltat\u00e1s a webes alkalmaz\u00e1sban dolgoz\u00f3k sz\u00e1m\u00e1ra. R\u00e9szletes inform\u00e1ci\u00f3kat kaphat teljes\u00edtm\u00e9ny\u00fckr\u0151l \u00e9s hib\u00e1ikr\u00f3l.<\/li>\n
        • Oldal forr\u00e1sa<\/strong>: Az eredeti b\u00f6ng\u00e9sz\u0151alap\u00fa fejleszt\u0151i eszk\u00f6z, ez az opci\u00f3 egyszer\u0171en megjelen\u00edti az akt\u00edv oldal el\u00e9rhet\u0151 forr\u00e1sk\u00f3dj\u00e1t. Billenty\u0171parancs: Mac OS X (COMMAND + U<\/strong>), Ablakok (CTRL + U<\/strong>)<\/li>\n
        • Tov\u00e1bbi eszk\u00f6z\u00f6k beszerz\u00e9se<\/strong>: Megnyitja a Webfejleszt\u0151 Eszk\u00f6zt\u00e1r<\/strong> gy\u0171jtem\u00e9ny a Mozilla hivatalos kieg\u00e9sz\u00edt\u0151 webhely\u00e9n, amely k\u00f6r\u00fclbel\u00fcl egy tucat n\u00e9pszer\u0171 kiterjeszt\u00e9st tartalmaz, mint p\u00e9ld\u00e1ul a Firebug \u00e9s a Greasemonkey.<\/li>\n<\/ul>\n

          <\/p>\n<\/li>\n<\/ol>\n

          Microsoft Edge \/ Internet Explorer <\/h2>\n

          \n\u00c1ltal\u00e1nosan a F12 Fejleszt\u0151i eszk\u00f6z\u00f6k<\/strong>, tisztelg\u00e9s annak a billenty\u0171parancsnak, amely az Internet Explorer kor\u00e1bbi verzi\u00f3i, az IE11 \u00e9s a Microsoft Edge fejleszt\u0151i eszk\u00f6zk\u00e9szlete \u00f3ta elind\u00edtotta a kezel\u0151fel\u00fcletet, megalakul\u00e1sa \u00f3ta hossz\u00fa utat tett meg azzal, hogy nagyon hasznos monitorok, hibakeres\u0151k, emul\u00e1torok csoportj\u00e1t k\u00edn\u00e1lta -a l\u00e9gy ford\u00edt\u00f3k.\n<\/p>\n

            \n
          1. \n

            \nv\u00e1laszt Tov\u00e1bbi m\u0171veletek<\/strong>, k\u00e9pviseli h\u00e1rom pont<\/strong> \u00e9s a b\u00f6ng\u00e9sz\u0151ablak jobb fels\u0151 sark\u00e1ban tal\u00e1lhat\u00f3.\n<\/p>\n

            <\/p>\n<\/li>\n

          2. \n

            \nAmikor megjelenik a leg\u00f6rd\u00fcl\u0151 men\u00fc, v\u00e1lassza a felirat\u00fa opci\u00f3t Fejleszt\u0151i eszk\u00f6z\u00f6k<\/strong>.\n<\/p>\n

            <\/p>\n<\/li>\n

          3. \n

            \nA fejleszt\u0151i fel\u00fcletet most meg kell jelen\u00edteni, \u00e1ltal\u00e1ban a b\u00f6ng\u00e9sz\u0151ablak alj\u00e1n. A k\u00f6vetkez\u0151 eszk\u00f6z\u00f6k \u00e1llnak rendelkez\u00e9sre, amelyek mindegyike a megfelel\u0151 f\u00fcl fejl\u00e9c\u00e9re kattintva vagy a hozz\u00e1 tartoz\u00f3 billenty\u0171parancs seg\u00edts\u00e9g\u00e9vel \u00e9rhet\u0151 el.\n<\/p>\n

            <\/p>\n

              \n
            • DOM Explorer<\/strong>: Lehet\u0151v\u00e9 teszi a st\u00edluslapok \u00e9s a HTML szerkeszt\u00e9s\u00e9t az akt\u00edv oldalon, \u00edgy a m\u00f3dos\u00edtott eredm\u00e9nyeket menet k\u00f6zben jelen\u00edtheti meg. Adott esetben az IntelliSense funkci\u00f3t haszn\u00e1lja a k\u00f3d automatikus kit\u00f6lt\u00e9s\u00e9re. Billenty\u0171parancs: (CTRL + 1<\/strong>)<\/li>\n
            • Konzol<\/strong>: Lehet\u0151s\u00e9get ny\u00fajt hibakeres\u00e9si inform\u00e1ci\u00f3k, k\u00f6zt\u00fck sz\u00e1ml\u00e1l\u00f3k, id\u0151z\u00edt\u0151k, nyomk\u00f6vet\u00e9sek \u00e9s testreszabott \u00fczenetek bek\u00fcld\u00e9s\u00e9re integr\u00e1lt API-n kereszt\u00fcl. Ezenk\u00edv\u00fcl lehet\u0151v\u00e9 teszi, hogy k\u00f3dot injekt\u00e1ljon egy akt\u00edv weboldalra, \u00e9s val\u00f3s id\u0151ben m\u00f3dos\u00edtsa az egyes v\u00e1ltoz\u00f3khoz rendelt \u00e9rt\u00e9keket. Billenty\u0171parancs: (CTRL + 2<\/strong>)<\/li>\n
            • Debugger<\/strong>: Lehet\u0151v\u00e9 teszi t\u00f6r\u00e9spontok be\u00e1ll\u00edt\u00e1s\u00e1t \u00e9s a k\u00f3d v\u00e9grehajt\u00e1sa k\u00f6zbeni hibakeres\u00e9s\u00e9t, sz\u00fcks\u00e9g szerint soronk\u00e9nt. Billenty\u0171parancs: (CTRL + 3<\/strong>)<\/li>\n
            • h\u00e1l\u00f3zat<\/strong>: Felsorolja a b\u00f6ng\u00e9sz\u0151 \u00e1ltal az oldal bet\u00f6lt\u00e9se \u00e9s v\u00e9grehajt\u00e1sa sor\u00e1n kezdem\u00e9nyezett h\u00e1l\u00f3zati k\u00e9relmeket, bele\u00e9rtve a protokoll r\u00e9szleteit, a tartalom t\u00edpus\u00e1t, a s\u00e1vsz\u00e9less\u00e9g-felhaszn\u00e1l\u00e1st \u00e9s m\u00e9g sok minden m\u00e1st. Billenty\u0171parancs: (CTRL + 4<\/strong>)<\/li>\n
            • teljes\u00edtm\u00e9ny<\/strong>: R\u00e9szletek a k\u00e9pkockasebess\u00e9gekr\u0151l, a CPU-kihaszn\u00e1lts\u00e1gr\u00f3l \u00e9s a teljes\u00edtm\u00e9nyhez kapcsol\u00f3d\u00f3 egy\u00e9b mutat\u00f3kr\u00f3l, amelyek seg\u00edtenek az oldal bet\u00f6lt\u00e9si idej\u00e9nek \u00e9s egy\u00e9b tev\u00e9kenys\u00e9geinek felgyors\u00edt\u00e1s\u00e1ban. Billenty\u0171parancs: (CTRL + 5<\/strong>)<\/li>\n
            • Memory design<\/strong>: Seg\u00edt az aktu\u00e1lis weboldal lehets\u00e9ges mem\u00f3riasziv\u00e1rg\u00e1sainak elk\u00fcl\u00f6n\u00edt\u00e9s\u00e9ben \u00e9s kijav\u00edt\u00e1s\u00e1ban az\u00e1ltal, hogy megjelen\u00edti a mem\u00f3riahaszn\u00e1lati id\u0151vonalat \u00e9s a k\u00fcl\u00f6nb\u00f6z\u0151 id\u0151intervallumokban tal\u00e1lhat\u00f3 pillanatk\u00e9peket. Billenty\u0171parancs: (CTRL + 6<\/strong>)<\/li>\n
            • Emul\u00e1ci\u00f3<\/strong>: Megmutatja, hogyan jelenne meg az akt\u00edv oldal k\u00fcl\u00f6nf\u00e9le felbont\u00e1sokban \u00e9s k\u00e9perny\u0151m\u00e9retekben, emul\u00e1lva az okostelefonokat, t\u00e1blag\u00e9peket \u00e9s m\u00e1s eszk\u00f6z\u00f6ket. Lehet\u0151v\u00e9 teszi a felhaszn\u00e1l\u00f3i \u00fcgyn\u00f6k \u00e9s az oldal t\u00e1jol\u00e1s\u00e1nak m\u00f3dos\u00edt\u00e1s\u00e1t, valamint a k\u00fcl\u00f6nb\u00f6z\u0151 f\u00f6ldrajzi helyek szimul\u00e1l\u00e1s\u00e1t sz\u00e9less\u00e9g \u00e9s hossz\u00fas\u00e1g megad\u00e1s\u00e1val. Billenty\u0171parancs: (CTRL + 7<\/strong>)<\/li>\n<\/ul>\n<\/li>\n
            • \n

              \nA Konzol<\/strong> mik\u00f6zben b\u00e1rmely m\u00e1s eszk\u00f6z\u00f6n bel\u00fcl nyomja meg a gombot n\u00e9gyzet gomb<\/strong> benne egy jobb oldali konzollal, amely a fejleszt\u0151i eszk\u00f6z\u00f6k fel\u00fclet\u00e9nek jobb fels\u0151 sark\u00e1ban tal\u00e1lhat\u00f3.\n<\/p>\n

              <\/p>\n<\/li>\n

            • \n

              \nA fejleszt\u0151i eszk\u00f6z\u00f6k kezel\u0151fel\u00fclet\u00e9nek kikapcsol\u00e1s\u00e1hoz, hogy k\u00fcl\u00f6n ablak legyen bel\u0151le, v\u00e1lassza a ikont k\u00e9t l\u00e9pcs\u0151zetes t\u00e9glalap<\/strong> vagy haszn\u00e1lja a k\u00f6vetkez\u0151 billenty\u0171parancsot: CTRL + P<\/strong>. Az eszk\u00f6z\u00f6ket visszahelyezheti eredeti hely\u00e9re a CTRL + P m\u00e1sodik megnyom\u00e1s\u00e1val.\n<\/p>\n

              <\/p>\n<\/li>\n<\/ol>\n

              Apple Safari (csak OS X) <\/h2>\n

              \nA Safari v\u00e1ltozatos fejleszt\u0151i eszk\u00f6zk\u00e9szlete t\u00fckr\u00f6zi azt a nagy fejleszt\u0151i k\u00f6z\u00f6ss\u00e9get, amely Mac-et haszn\u00e1l tervez\u00e9si \u00e9s programoz\u00e1si ig\u00e9nyeikhez. Az er\u0151teljes konzol, valamint a hagyom\u00e1nyos napl\u00f3z\u00e1si \u00e9s hibakeres\u00e9si funkci\u00f3k mellett egy k\u00f6nnyen haszn\u00e1lhat\u00f3 adapt\u00edv tervez\u00e9si m\u00f3d \u00e9s egy eszk\u00f6z a saj\u00e1t b\u00f6ng\u00e9sz\u0151b\u0151v\u00edtm\u00e9nyek l\u00e9trehoz\u00e1s\u00e1hoz is rendelkez\u00e9sre \u00e1ll.\n<\/p>\n

                \n
              1. \n

                \nv\u00e1laszt szafari <\/strong>a b\u00f6ng\u00e9sz\u0151 men\u00fcj\u00e9ben, amely a k\u00e9perny\u0151 tetej\u00e9n tal\u00e1lhat\u00f3. Amikor megjelenik a leg\u00f6rd\u00fcl\u0151 men\u00fc, v\u00e1lassza a lehet\u0151s\u00e9get preferenci\u00e1k<\/strong>. A men\u00fcpont helyett a k\u00f6vetkez\u0151 billenty\u0171parancsot is haszn\u00e1lhatja: COMMAND + COMMA<\/strong>(,)\n<\/p>\n

                <\/p>\n<\/li>\n

              2. \n

                \nSzafari preferenci\u00e1k<\/strong> kezel\u0151fel\u00fcletet kell megjelen\u00edteni, \u00e1tfedve a b\u00f6ng\u00e9sz\u0151 ablak\u00e1t V\u00e1laszd ki a Halad\u00f3 ikonra<\/strong>, a fejl\u00e9c jobb sz\u00e9l\u00e9n tal\u00e1lhat\u00f3.\n<\/p>\n

                <\/p>\n<\/li>\n

              3. \n

                \nA R\u00e9szletes<\/strong> a be\u00e1ll\u00edt\u00e1soknak most l\u00e1that\u00f3nak kell lenni\u00fck. A k\u00e9perny\u0151 alj\u00e1n egy opci\u00f3 van felc\u00edmk\u00e9zve A Fejleszt\u00e9s men\u00fc megjelen\u00edt\u00e9se<\/strong> a men\u00fcsorban, egy jel\u00f6l\u0151n\u00e9gyzet k\u00eds\u00e9ret\u00e9ben. Ha nincs jel\u00f6l\u0151n\u00e9gyzet a mez\u0151ben, kattintson r\u00e1 egyszer, hogy elhelyezzen egyet.\n<\/p>\n

                <\/p>\n<\/li>\n

              4. \n

                \nCsukja be a preferenci\u00e1k<\/strong> fel\u00fclet.\n<\/p>\n<\/li>\n

              5. \n

                \nMost \u00e9szre kell vennie egy \u00faj lehet\u0151s\u00e9get a b\u00f6ng\u00e9sz\u0151 men\u00fcben Fejleszteni<\/strong>k\u00f6z\u00f6tt tal\u00e1lhat\u00f3 K\u00f6nyvjelz\u0151k \u00e9s ablak<\/strong>. Kattintson erre a men\u00fcpontra. Most egy leg\u00f6rd\u00fcl\u0151 men\u00fct kell megjelen\u00edteni, amely a k\u00f6vetkez\u0151 lehet\u0151s\u00e9geket tartalmazza.\n<\/p>\n

                  \n
                • Nyissa meg az oldalt a k\u00f6vetkez\u0151vel:<\/strong>: Lehet\u0151v\u00e9 teszi az akt\u00edv weboldal megnyit\u00e1s\u00e1t a Mac sz\u00e1m\u00edt\u00f3g\u00e9p\u00e9re jelenleg telep\u00edtett t\u00f6bbi b\u00f6ng\u00e9sz\u0151 egyik\u00e9ben.<\/li>\n
                • B\u00f6ng\u00e9sz\u0151<\/strong>: Lehet\u0151v\u00e9 teszi, hogy t\u00f6bb mint egy tucat el\u0151re meghat\u00e1rozott felhaszn\u00e1l\u00f3i \u00fcgyn\u00f6k-\u00e9rt\u00e9k k\u00f6z\u00fcl v\u00e1lasszon, bele\u00e9rtve a Chrome, a Firefox \u00e9s az Internet Explorer t\u00f6bb verzi\u00f3j\u00e1t, valamint meghat\u00e1rozhatja saj\u00e1t egy\u00e9ni karakterl\u00e1nc\u00e1t.<\/li>\n
                • L\u00e9pjen be az adapt\u00edv tervez\u00e9si m\u00f3dba<\/strong>: Az aktu\u00e1lis oldalt \u00fagy jelen\u00edti meg, ahogyan az k\u00fcl\u00f6nb\u00f6z\u0151 eszk\u00f6z\u00f6k\u00f6n \u00e9s k\u00fcl\u00f6nb\u00f6z\u0151 k\u00e9perny\u0151felbont\u00e1sokkal jelenik meg.<\/li>\n
                • Webellen\u0151r megjelen\u00edt\u00e9se<\/strong>: Elind\u00edtja a Safari fejleszt\u0151i eszk\u00f6zeinek f\u0151 fel\u00fclet\u00e9t, amelyet \u00e1ltal\u00e1ban a b\u00f6ng\u00e9sz\u0151 k\u00e9perny\u0151j\u00e9nek alj\u00e1n helyeznek el, \u00e9s amely a k\u00f6vetkez\u0151 szakaszokat tartalmazza: Elemek, H\u00e1l\u00f3zat, Er\u0151forr\u00e1sok, Id\u0151vonalak, Hibakeres\u0151, T\u00e1rol\u00e1s, Konzol.<\/li>\n
                • Hiba konzol megjelen\u00edt\u00e9se<\/strong>: Elind\u00edtja a dev eszk\u00f6z\u00f6k fel\u00fclet\u00e9t is, k\u00f6zvetlen\u00fcl a Konzol f\u00fcl<\/strong> amely hib\u00e1kat, figyelmeztet\u00e9seket \u00e9s egy\u00e9b kereshet\u0151 napl\u00f3adatokat jelen\u00edt meg.<\/li>\n
                • Oldalforr\u00e1s megjelen\u00edt\u00e9se<\/strong>: Megnyitja a Forr\u00e1sok f\u00fclre<\/strong>, amely megjelen\u00edti a dokumentum \u00e1ltal kategoriz\u00e1lt akt\u00edv oldal forr\u00e1sk\u00f3dj\u00e1t.<\/li>\n
                • Oldalforr\u00e1sok megjelen\u00edt\u00e9se<\/strong>: Ugyanazt a funkci\u00f3t l\u00e1tja el, mint az Oldalforr\u00e1s megjelen\u00edt\u00e9se lehet\u0151s\u00e9g.<\/li>\n
                • Snippet Editor megjelen\u00edt\u00e9se<\/strong>: Megnyit egy \u00faj ablakot, ahol megadhatja a CSS \u00e9s a HTML k\u00f3dot, \u00e9s k\u00f6zben megtekintheti annak kimenet\u00e9t.<\/li>\n
                • Show Extension Builder<\/strong>: Lehet\u0151s\u00e9get ny\u00fajt Safari kiterjeszt\u00e9sek l\u00e9trehoz\u00e1s\u00e1ra vagy szerkeszt\u00e9s\u00e9re CSS, HTML \u00e9s JavaScript haszn\u00e1lat\u00e1val.<\/li>\n
                • Id\u0151vonal-felv\u00e9tel megjelen\u00edt\u00e9se<\/strong>: Megnyitja az Id\u0151vonalak lapot, \u00e9s elkezd val\u00f3s id\u0151ben megjelen\u00edteni a h\u00e1l\u00f3zati k\u00e9r\u00e9seket, az elrendez\u00e9si \u00e9s megjelen\u00edt\u00e9si inform\u00e1ci\u00f3kat, valamint a JavaScript v\u00e9grehajt\u00e1s\u00e1t.<\/li>\n
                • \u00dcres gyors\u00edt\u00f3t\u00e1rak<\/strong>: T\u00f6rli a merevlemezen jelenleg t\u00e1rolt teljes gyors\u00edt\u00f3t\u00e1rat.<\/li>\n
                • Tiltsa le a gyors\u00edt\u00f3t\u00e1rakat<\/strong>: Meg\u00e1ll\u00edtja a Safari gyors\u00edt\u00f3t\u00e1r \u00e1ltali t\u00e1rol\u00e1s\u00e1t, \u00edgy minden tartalom lek\u00e9rhet\u0151 a szerverr\u0151l minden oldal bet\u00f6lt\u00e9sekor.<\/li>\n
                • K\u00e9pek letilt\u00e1sa<\/strong>: Megakad\u00e1lyozza a k\u00e9pek megjelen\u00edt\u00e9s\u00e9t az \u00f6sszes weboldalon.<\/li>\n
                • St\u00edlusok letilt\u00e1sa<\/strong>: Az oldal bet\u00f6lt\u00e9sekor figyelmen k\u00edv\u00fcl hagyja a CSS tulajdons\u00e1gokat.<\/li>\n
                • Letiltja a JavaScriptet<\/strong>: Korl\u00e1tozza a JavaScript futtat\u00e1s\u00e1t az \u00f6sszes oldalon.<\/li>\n
                • Letiltja a kiterjeszt\u00e9seket<\/strong>: Megtiltja az \u00f6sszes telep\u00edtett kiterjeszt\u00e9s futtat\u00e1s\u00e1t a b\u00f6ng\u00e9sz\u0151ben.<\/li>\n
                • Tiltsa le a webhelyspecifikus hackel\u00e9seket<\/strong>: Ha a Safari \u00fagy lett m\u00f3dos\u00edtva, hogy kifejezetten kezelje az akt\u00edv weboldal probl\u00e9m\u00e1it, ez a lehet\u0151s\u00e9g blokkolja ezeket a v\u00e1ltoz\u00e1sokat, \u00edgy az oldal \u00fagy t\u00f6lt\u0151dik be, mint a m\u00f3dos\u00edt\u00e1sok bevezet\u00e9se el\u0151tt.<\/li>\n
                • Tiltsa le a helyi f\u00e1jlkorl\u00e1toz\u00e1sokat<\/strong>: Lehet\u0151v\u00e9 teszi a b\u00f6ng\u00e9sz\u0151 sz\u00e1m\u00e1ra a helyi lemezeken l\u00e9v\u0151 f\u00e1jlokhoz val\u00f3 hozz\u00e1f\u00e9r\u00e9st, ez a m\u0171velet biztons\u00e1gi okokb\u00f3l alap\u00e9rtelmez\u00e9s szerint korl\u00e1tozott.<\/li>\n
                • Tiltsa le az eredetre vonatkoz\u00f3 korl\u00e1toz\u00e1sokat<\/strong>: Ezeket a korl\u00e1toz\u00e1sokat alap\u00e9rtelmez\u00e9s szerint az XSS \u00e9s m\u00e1s potenci\u00e1lis vesz\u00e9lyek megel\u0151z\u00e9se \u00e9rdek\u00e9ben alkalmazz\u00e1k. Fejleszt\u00e9si c\u00e9lokb\u00f3l azonban gyakran \u00e1tmenetileg le kell tiltani \u0151ket.<\/li>\n
                • Enged\u00e9lyezze a JavaScript haszn\u00e1lat\u00e1t az intelligens keres\u00e9si mez\u0151b\u0151l<\/strong>: Ha enged\u00e9lyezve van, akkor lehet\u0151v\u00e9 teszi az URL-ek javascript: beilleszt\u00e9s\u00e9vel t\u00f6rt\u00e9n\u0151 be\u00edr\u00e1s\u00e1t k\u00f6zvetlen\u00fcl a c\u00edmsorba.<\/li>\n
                • Az SHA-1 tan\u00fas\u00edtv\u00e1nyokat bizonytalank\u00e9nt kezelje<\/strong>: Az SHA-1 algoritmust haszn\u00e1l\u00f3 SSL-tan\u00fas\u00edtv\u00e1nyokat sz\u00e9les k\u00f6rben elavultnak \u00e9s sebezhet\u0151nek tartj\u00e1k.<\/li>\n<\/ul>\n

                  <\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                  A legt\u00f6bb b\u00f6ng\u00e9sz\u0151gy\u00e1rt\u00f3 mellett, akik a mindennapi internetez\u00e9sre t\u00f6rekszenek, a webfejleszt\u0151knek, a tervez\u0151knek \u00e9s a min\u0151s\u00e9gbiztos\u00edt\u00e1si szakembereknek is gondoskodnak, akik nagyszer\u0171 eszk\u00f6z\u00f6ket k\u00f6zvetlen\u00fcl a b\u00f6ng\u00e9sz\u0151kbe integr\u00e1lva seg\u00edtenek fel\u00e9p\u00edteni az alkalmaz\u00e1sokat \u00e9s webhelyeket, amelyekhez a felhaszn\u00e1l\u00f3k hozz\u00e1f\u00e9rnek. maguk. Elm\u00faltak azok az id\u0151k, amikor a b\u00f6ng\u00e9sz\u0151ben tal\u00e1lhat\u00f3 egyetlen programoz\u00e1si \u00e9s tesztel\u0151 eszk\u00f6z lehet\u0151v\u00e9 tette az oldal forr\u00e1sk\u00f3dj\u00e1nak … Olvass tov\u00e1bb<\/a><\/p>\n","protected":false},"author":1028,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-2202","post","type-post","status-publish","format-standard","hentry","category-wiki"],"_links":{"self":[{"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/posts\/2202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/users\/1028"}],"replies":[{"embeddable":true,"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/comments?post=2202"}],"version-history":[{"count":0,"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/posts\/2202\/revisions"}],"wp:attachment":[{"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/media?parent=2202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/categories?post=2202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/megnyitasa.com\/blog\/wp-json\/wp\/v2\/tags?post=2202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}