Weboldal hiba a hibakereséshez. Szkripthibák az Internet Explorerben. Az eltávolítás okai és módjai. SQL-lekérdezések profilozása Weboldal hibakeresése
Internet böngészés közben internet böngésző Az Explorer üzeneteket jeleníthet meg arról, hogy az oldal hibákat tartalmaz, és előfordulhat, hogy nem jelenik meg megfelelően. Nézzünk meg néhány módszert a probléma megoldására.
Utasítás
Vannak persze mások is – ezeket mindenképpen megemlítem.
Firebug Firefoxhoz
Nem tudom biztosan, hogy szentjánosbogár más fejlesztői eszközök elődje, de határozottan a legnépszerűbb, legkényelmesebb és legfunkcionálisabb.
A Firebug a Firefox kiegészítője, ami azt jelenti, hogy le kell tölteni a Firefox kiegészítők webhelyéről, és telepíteni kell.
A firebug hívásához nyomja meg az F12 billentyűt.
Ennek a kiegészítőnek a jellemzői:
- Dinamikusan változó HTML ellenőrzése és szerkesztése;
- CSS szerkesztés menet közben;
- JavaScript hibakeresés parancs sor szkriptek végrehajtására;
- Hálózati kérések figyelése - láthatja a fájlok és szkriptek méretét és letöltési idejét, a kérések fejléceit;
- DOM elemző.
Ezekről a tulajdonságokról még sokáig lehet részletesen beszélni, de úgy gondolom, hogy minden olvasónk ismeri őket, és ha nem - részletes információk van a Firebug kezdőlapján vagy ugyanez Kantor Ilja fordításában.
Magán a firebug-on kívül szükség lehet hasznos lotion neki - tűzi süti, amellyel (meglepetés:-) megtekintheti és módosíthatja a sütiket.
WEB fejlesztői eszköztár Firefoxhoz
Egy másik hasznos kiegészítés az Ognelishez. Ez így néz ki:
Menjünk végig a pontokon.
Letiltás
Lehetővé teszi a JavaScript kikapcsolását, a gyorsítótár használatának letiltását, ami nagyon hasznos a fejlesztés során (lehetővé teszi, hogy az oldal be legyen töltve legújabb frissítések), törölje az oldalon használt színeket és cserélje le szabványosra, tiltsa le a küldést a hivatkozó fejlécben (az oldal, amelyről az áttérés történt).
Cookie-k
Hasznos lehetőség a cookie-kkal való munkához: megtekinthetők, törölhetők, blokkolhatók és hozzáadhatók.
css
Ez a menü tartalmazza a Fejlesztői Eszköztár legmenőbb funkcióját – a menet közbeni CSS-szerkesztést. Ezen kívül lehetőség van css megtekintésére, letiltására stb., stb. Véleményem szerint a billentyűparancsok jelenléte nagyon hasznos itt (a CTRL + SHIFT + C például lehetővé teszi, hogy azonnal lépjen az oldalstílusok megtekintéséhez)
Űrlapok
Minden az űrlapokkal való munkához: jelszavak megjelenítése, űrlapokkal kapcsolatos információk megjelenítése, űrlapmódszerek konvertálása (GET » POST és fordítva) és még sok más. Hasznos „Űrlapmezők kitöltése” funkció az űrlapmezők automatikus kitöltéséhez (például egy webhely tesztelésekor, amikor a jelszóemlékezési funkció le van tiltva. Egyébként nem látok semmi hasznosat ebben a bekezdésben.
Képek
Van egy hasznos funkció a képek kikapcsolására – megtekintheti, hogyan néz ki webhelye képek nélkül. A képek körbeírhatók, méretük, alt-attribútumok megjelenítése.
Információ
Ebben a menüben rengeteg lehetőség van. Hasznos lehet az osztály és az id attribútumok megjelenítése az oldalon. Ezenkívül érdekes a „Színinformáció megtekintése” elem - hogy gyorsan tájékozódjon az oldalon használt színekről. "Nézet dokumentumméret" - oldalméret megtekintése. „Válaszfejlécek megtekintése” – az oldalfejlécek megtekintése.
Vegyes
A leggyakrabban használt funkció a gyorsítótár törlése. Ezen kívül itt érhető el az "Oldalvonalzó" - vonalzó, "Oldalnagyító" - nagyító és "Vonalvezetők" - néhány sor, amelyek hasznosak lehetnek a sablon kivágásához.
vázlat
Különféle oldalelemek kiválasztása - táblázatok, címsorok, hivatkozások, keretek, blokkok. Az Átméretezés lehetővé teszi a böngészőablak átméretezését, hogy illeszkedjen bármely szabványos képernyőbővítményhez. Az itt található eszközök az oldal ellenőrzéséhez tárolt funkciók. Helyi és külső egyaránt. Kényelmes és gyors hozzáférés HTML, CSS és egyebek érvényesítése. Használhatja a CTRL+SHIFT+H billentyűparancsot a HTML érvényesítéséhez.
Forrás megtekintése
Kilátás forráskód. Képes megtekinteni egy külső alkalmazásban, megtekintheti a generált kódot.
A jobb oldali a kedvencem. Ez egy gyors HTML, CSS érvényesítő és JavaScript hibajelző. Ha nincs probléma, az ikon zöld, ha pedig probléma van, akkor piros.
Internet Explorer fejlesztői eszköztár
A 8.0-tól kezdődően a hibakeresés már be van építve ebbe a böngészőbe. Könnyen hívják F12 billentyű. Igaz, a 90-es évek programjaként nyomorult.
De ehhez a böngészőhöz van egy sokkal menőbb eszköz, a linkről letölthető az úgynevezett Internet Explorer Developer Toolbar.
Kinézetre ez az eszköztár természetesen úgy néz ki, mint a firebug, de sajnos még nem nőtt fel hozzá. Bár másrészt van néhány olyan funkciója, amivel a firebug nem rendelkezik. Az Internet Explorer fejlesztői eszköztárát a Firebug és a Firebug hibridjének nevezném firefox webfejlesztő Eszköztár.
A firebughoz hasonlóan itt is lehetőség van elem vizsgálatára egy egyszerű kattintással. De ha azonnal látjuk a párnázást és a margókat, akkor itt nincs ilyen lehetőség.
Ezenkívül az Internet Explorer fejlesztői eszköztára nem frissíti dinamikusan az elemfát, ahogy a Firebug teszi. Vagyis ha valamit megváltoztatunk az oldalon js segítségével, akkor ezen az eszköztáron nem fogunk látni semmit.
Abból, amit élvezhet – menet közbeni CSS módosítása (egyszerű módja annak, hogy megtalálja, mit kell feltörnie :), a CSS és a képek letiltása, a gyorsítótár gyors törlése és a sütikkel való játék, gyors hozzáférés az érvényesítéshez.
A legfinomabb: van egy beépített színválasztó, amely lehetővé teszi, hogy egy szemcseppentő segítségével bármilyen színt hozzon ki az oldalról. (az ff-hez külön ColorZilla plugin van).
Debug Debug Bar Internet Explorerhez
A DebugBar for Internet Explorer letölthető a megadott linkről.
Önmagában is érdekes bővítmény. A böngésző kiegészítő paneljeként telepítve:
Valamiért van beépített kereső, szemcseppentő, átméretezhető az ablak, és megint valamiért az a lehetőség, hogy egy oldalt elküldhetsz egy barátnak szappanért. Bár hasznos lehet. De nem sikerült kihasználnom ezt a lehetőséget.
Ezen kívül van egy ellenőr:
A kattintással, mutogatással történő ellenőrzés módszere nem jött be a fejlesztőknek: érdekesebb dolgot találtak ki. A DebugBar-ban a célt a kívánt elemre kell húznia, hogy láthassa a fában. A CSS szerkesztésére nincs lehetőség. De van egy validátor és egy beépített js konzol.
És ha belemélyedsz a beállításokba, ezt találod:
Egyszerre vicces és szomorú.
Ismeretes, hogy a Fejlesztői Eszköztár beépül a nyolcadik felfedezőbe. Hasonló lesz a harmadik bekezdésben leírtakhoz, de reméljük, hogy jobb lesz.
A DragonFly hibakeresése az Operához
A DragonFly a 9.5-ös verzió óta be van építve az Operába, így nem kell telepíteni. A Dragonfly aktiválásához lépjen az Eszközök → Speciális → Fejlesztői eszközök menüpontra. És ha angolul, akkor Tools → Advanced → Developer Tools.
Azonnal figyelmeztetem, hogy a DragonFly Alpha2 stádiumban van, ez magyarázza sok hibáját.
Jellemzők listája:
- DOM ellenőr;
- Kattintson az Ellenőrzés elemre (ismét nem fogunk olyan kitöltést látni, mint a FireFoxban);
- Szerkesztés;
- Gyors hozzáférés a hibakonzolhoz.
A DF olyan, mint egy külön oldal egy keretben. Ha megnyitod, akkor minden lapra nyitva lesz (ellentétben a firebug-gal). Ezért egy elem vizsgálata előtt ki kell választanunk a listából a megtekinteni kívánt oldalt.
Sajnos itt, akárcsak az Internet Explorerben, a Dav Toolbar nem jeleníti meg a dinamikusan létrehozott elemeket. És általában, amikor megvizsgáljuk az oldalt, nem fut JavaScript: a hivatkozásokra és gombokra nem kattintanak. Reméljük, hogy a DragonFly megjelenéséhez közeledve látni fogjuk ezeket a funkciókat.
Debug WEB Inspector a Safariban
Azonnal elmondom a böngészőről szafari Kifütyültem az információt, ezért, ahogy mondani szokták, nem vállalok felelősséget az anyag megfelelőségéért.
A „Fejlesztés” elem engedélyezéséhez a Safari menüben engedélyeznie kell a megfelelő elemet a beállításokban (az „Speciális” lapon):
A „Fejlesztés” menüben a következő funkciók állnak rendelkezésünkre:
Nézzük meg közelebbről a WEB ellenőrt:
Alapértelmezés szerint az ellenőr HTML nézet módban nyílik meg. De át lehet kapcsolni DOM nézet módba. Ehhez a felső lapon van egy kapcsoló. Ha az ellenőrzőben egy elem fölé viszi az egérmutatót, az magán az oldalon lesz kiemelve. Nem láthatja menet közben a kitöltést, nem módosíthatja a jelölést vagy a CSS-t, és nem láthatja a DOME dinamikus változásait menet közben, ahogyan a FireBugban sem. De látod, nagyon jól néz ki.
Ha böngészőablakban szeretne dolgozni az ellenőrrel, kattintson a bal alsó sarokban található gombra.
Még a safariban is elérhető egy olyan funkció, mint a „Network Timeline” (a „Hálózat” gomb az ellenőrzőben):
Jól láthatja, hogy mikor és mennyi ideig töltődnek be a fájlok. A kérés fejléceit is megtekintheti, de magát a tartalmat sajnos nem.
Hibakeresés fejlesztőknek a Google Chrome-ban
Lame haladó formában született, és azonnal megvannak, bár egyelőre ferdén, de még mindig eszközei a fejlesztőknek.
- DOM-felügyelő;
- javascript hibakereső;
- JavaScript konzol.
Egy elem vizsgálatához kattintson rá a jobb gombbal, majd helyi menü válassza az "Elemkód megtekintése" lehetőséget:
A funkcionalitás ugyanaz, mint a Safariban: az elemek kiemelve vannak, de a CSS és HTML szerkesztés nem érhető el, a DOM változásait nem követi nyomon. Csak a bal alsó sarokban lévő gomb, amely az ellenőrt a böngészőablakhoz kell csatolnia, nem működik.
Az "Erőforrások" lapon a következőket láthatjuk:
Kicsit eltér a szafari méretétől. Az áttetsző ábrán a relatív fájlméretek láthatók, a teljes szín pedig a letöltési idő. Így vagy úgy, de nyilvánvaló, hogy a Chrome ezen része még messze van a befejezéstől.
Ebben a cikkben áttekintettem a böngészők leghíresebb bővítményeit és beépített eszközeit.
Vannak mások is, pl.
- Az Internet Explorer WEB Development Helper jó segítő az ASP.NET fejlesztők számára (Internet Explorer);
- WEB Developer Toolbar – eszköztár az Internet Explorer és a FireFox számára. Számos hasznos funkció van;
- WEB-kisegítő lehetőségek eszköztár – eszköztár az Internet Explorerhez. Semmi érdekes.
Ha vannak olyan kiegészítők, amiket nem említettem, de érdemes lenne, vagy az említett bővítményekhez vannak olyan funkciók, amiket kihagytam, írj.
Használd egészségre!
HTML-t írni nagyszerű, de honnan tudod, hol van a hiba, ha valami nem működik? Ez a cikk számos olyan eszközt ismertet, amelyek segítenek megtalálni és kijavítani a HTML-hibákat.
A hibakeresés nem ijesztő
A kód írása közben általában minden jól megy egészen addig a pillanatig, amikor hibát követ el. Tehát a kódja nem működik, vagy nem úgy működik, ahogyan azt szerette volna. Ha nem működő Rust programot próbál meg lefordítani, a fordító hibát jelez:
Ebben az esetben a hibaüzenet viszonylag könnyen érthető - "unterminated double quote string". Ha figyelmesen megnézed a println!(Hello, world!"); , észre fogod venni, hogy nincs kettős idézet. Természetesen a hibaüzenetek sokkal nehezebbé válhatnak a kód növekedésével, és még a legegyszerűbb esetek is megfélemlíthetik azokat, akik semmit sem tudnak a Rustról.
De ne félj a hibakereséstől! Bármely kód kényelmes írásához és hibakereséséhez meg kell értenie a nyelvet és annak eszközeit.
HTML és hibakeresés
A HTML-t nem olyan nehéz megérteni, mint a Rust. A HTML-t nem fordítják le semmilyen más formára, mielőtt a böngésző elemzi, és megjeleníti az eredményt (értelmezik, nem fordítják le). Szintaxis HTML elemek sokkal világosabb, mint az "igazi programozási nyelvek", mint például a Rust, a JavaScript vagy a Python. A böngészők HTML-olvasási módja több toleráns mint a kódjukat szigorúbban értelmező programnyelvek. Ez egyszerre rossz és jó.
toleráns kód
Mit jelent tehát a toleráns? Általánosságban elmondható, hogy amikor elrontja a kódot, kétféle hiba léphet fel:
- Szintaktikai hibák: Ezek helyesírási hibák, mint fentebb a Rust példában. Ezek általában könnyen javíthatók, feltéve, hogy ismeri a nyelv szintaxisát, és tudja, mit jelentenek a hibaüzenetek.
- Logikai hibák: Ezek olyan hibák, amelyek akkor jelennek meg, ha a szintaxis helyes, de a kód nem teljesíti a célját, vagyis a program nem fut megfelelően. Ezeket nehezebb kijavítani, mint a szintaktikaiakat, mivel nem jelenik meg a hiba helyére utaló üzenet.
A HTML nem szenved szintaktikai hibáktól, mivel a böngésző toleránsan olvassa be a kódot, abban az értelemben, hogy az oldalak akkor is renderelhetők, ha szintaktikai hibák vannak jelen. A böngészők beépített szabályokkal rendelkeznek a rosszul megírt jelölések értelmezésére, és akkor is futtathat valamit, ha másra gondolt. Ez valódi probléma lehet!
Egy megjegyzésre: A HTML azért olvasható, mert a web létrejöttekor úgy döntöttek, hogy az emberek akkor is közzétehetnek tartalmat, ha a kód hibás, mivel ez sokkal fontosabb, mint a szintaxis abszolút helyességének biztosítása. A web most nem lenne olyan népszerű, ha szigorúan bánna az újoncokkal.
Aktív tanulás: Toleráns kód bevezetése
Ideje felfedezni a toleráns kód természetét a HTML-ben.
HTML érvényesítés
A fenti példából jól látszik, hogy érdemes ellenőrizni a HTML érvényességét. A fenti egyszerű példában végignézheti az összes kódot, és hibákat találhat, de mi a helyzet a hatalmas, összetett oldalakkal?
A legjobb, ha az oldalt a jelölésellenőrzési szolgáltatásban nézi meg. A W3C hozta létre és tartja karban, a HTML, CSS és egyéb webes technológiák specifikációjáért felelős szervezet. A szolgáltatás ellenőrzi a HTML-kódot, és jelenteni fogja a benne lévő hibákat.
A HTML a címen ellenőrizhető a fájl feltöltésével vagy egyszerűen az oldalra másolásával.
Aktív tanulás: HTML-dokumentum érvényesítése
- Nyissa meg a jelölésérvényesítési szolgáltatást a böngészőjében.
- Váltson Érvényesítés közvetlen bevitellel módra.
- Másolja ki a dokumentum teljes kódját (nem csak a törzsét), és illessze be a beviteli mezőbe.
- nyomja meg Ellenőrzés (ellenőrzés).
Megjelenik a hibák és egyéb információk listája.
Munka a hibaüzenetekkel
Általában azonnal világos, hogy mit jelentenek az üzenetek, de néha meg kell próbálni megérteni, hogy mi az. Most végigmegyünk az összes hibán, és elemezzük, mit jelentenek. Vegye figyelembe, hogy az üzenetek tartalmaznak egy sort és egy kódoszlopot a hibák könnyebb megtalálása érdekében.
- "A li végcímke utal, de voltak nyitott elemek" (2 példány): Nincs kifejezett végcímke, bár a böngésző kitalálja, hol kell lennie. Az üzenet a végcímke utáni sorra mutat, de megtalálja a megfelelő helyet.
- "Nyitott elem erős": Ez nagyon egyszerű hiba- elem) azt jelzi, hogy annak tartalma nagy jelentőségű, súlyos vagy sürgős. A böngészők általában tartalmat jelenítenek meg kiemelten."> nincs bezárva, és az üzenet közvetlenül a kezdő címkére mutat.
- „Az erős végcímke megsérti a beágyazási szabályokat”: Az elem helytelenül van beágyazva – ezen a szinten nincs egyező nyitócímke.
- "Elérte a fájl végét egy attribútumértéken belül. Címke figyelmen kívül hagyása": Titokzatos üzenet. Az a baj, hogy valahol (valószínűleg a dokumentum végén) egy elem tulajdonsága hibásan van bejegyezve, és ebben a tulajdonságban jelent meg a fájl vége. A hivatkozás nem látható a böngészőben - valószínűleg mellette van a probléma.
- "A fájl vége látható és nyitott elemek voltak": A fájl véget ért, de egyes elemek nincsenek bezárva. Az üzenet a fájl végét jelzi, ebben az esetben az elem nincs lezárva példa: link a Mozilla kezdőlapjára ↩
A felhasználók gyakran megfigyelhetnek olyan helyzetet, amikor a böngészőben (IE) script hibaüzenet jelenik meg. Ha a helyzet elszigetelt, akkor nem kell aggódnia, de amikor az ilyen hibák rendszeressé válnak, akkor el kell gondolkodnia a probléma természetén.
Az Internet Explorer szkripthibáit általában az okozza, hogy a böngésző nem megfelelően kezeli a HTML-oldal kódját, ideiglenes internetes fájlok jelenléte, fiókbeállítások és sok más ok, meg lesz beszélve ebben az anyagban. A probléma megoldására szolgáló módszereket is figyelembe kell venni.
Mielőtt folytatná az Internet Explorer szkripthibákat okozó problémák diagnosztizálásának általános módszereit, meg kell győződnie arról, hogy a hiba nem csak egy adott webhelyen, hanem egyszerre több weboldalon is előfordul. Ellenőriznie kell azt a weboldalt is, ahol a probléma előfordul, egy másik alatt fiókot, egy másik böngészőben és egy másik számítógépen. Ez leszűkíti a hiba okának keresését, és kizárja vagy megerősíti azt a hipotézist, hogy az üzenetek bizonyos fájlok vagy beállítások miatt jelennek meg a számítógépen.
Az Internet Explorer aktív szkriptjei, az ActiveX és a Java blokkolása
Az aktív szkriptek, az ActiveX-vezérlők és a Java befolyásolják az információk létrehozásának és megjelenítésének módját a webhelyen, és a korábban leírt probléma valódi okai lehetnek, ha ezek blokkolva vannak a felhasználó számítógépén. Annak érdekében, hogy megbizonyosodjon arról, hogy emiatt szkripthibák fordulnak elő, csak vissza kell állítania a böngésző biztonsági beállításait. Ehhez kövesse az alábbi irányelveket.
- Nyissa meg az Internet Explorer 11-et
- Szolgáltatás
- Az ablakban lépjen a lapra Biztonság
- Ezután kattintson a gombra Alapértelmezett majd a gombot rendben
Internet Explorer ideiglenes fájlok
Minden alkalommal, amikor megnyit egy weboldalt, az Internet Explorer elmenti a weboldal helyi másolatát a számítógépére úgynevezett ideiglenes fájlokban. Ha túl sok ilyen fájl van, és az ezeket tartalmazó mappa mérete eléri a több gigabájtot, akkor problémák léphetnek fel a weboldal megjelenítésével, vagyis egy script hibaüzenet jelenik meg. Az ideiglenes fájlok mappájának rendszeres törlése segíthet a probléma megoldásában.
Az ideiglenes internetes fájlok törléséhez kövesse az alábbi lépéseket.
- Nyissa meg az Internet Explorer 11-et
- Szolgáltatás
- Az ablakban lépjen a lapra Gyakoriak
- fejezetben Böngészőelőzmények nyomja meg a gombot Töröl…
- Az ablakban Böngészési előzmények törlése jelölje be a tételek melletti négyzeteket Ideiglenes fájlok az internetről és webhelyekről, Cookie-kés a webhely adatait, Magazin
- Kattintson a gombra Töröl
Víruskereső szoftver működése
A munka során szkripthibák lehetségesek víruskereső program amikor blokkolja az aktív szkripteket, ActiveX- és Java-vezérlőket az oldalon, vagy mappákat az ideiglenes böngészőfájlok mentéséhez. Ebben az esetben olvassa el a telepített víruskereső termék dokumentációját, és tiltsa le a mappák vizsgálatát az ideiglenes internetes fájlok mentéséhez, valamint az interaktív objektumok blokkolásához.
A HTML-oldal kódjának helytelen feldolgozása
Általában egy adott webhelyen jelenik meg, és azt jelzi, hogy az oldal kódja nincs teljesen adaptálva az Internet Explorer használatához. Ebben az esetben a legjobb, ha letiltja a szkriptek hibakeresését a böngészőben. Ehhez kövesse az alábbi lépéseket.
- Nyissa meg az Internet Explorer 11-et
- A böngésző jobb felső sarkában kattintson a ikonra Szolgáltatás fogaskerék formájában (vagy az Alt + X billentyűkombinációval). Ezután a megnyíló menüben válassza ki a lehetőséget
- Az ablakban lépjen a lapra Továbbá
- Ezután törölje a jelölést a négyzetből Értesítés megjelenítése minden szkripthibárólés nyomja meg a gombot rendben.
Ez egy lista a legtöbbről gyakori okok, amelyek szkripthibákat okoznak az Internet Explorerben, ezért ha eleged van az ilyen üzenetekből, figyelj egy kicsit és oldd meg végleg a problémát.
Tovább Ebben a pillanatban nagyszámú különféle böngésző létezik, amelyek bizonyos mértékig támogatják a meglévő HTML szabványokat. Én személy szerint a Mozilla Corporation böngészőjét részesítem előnyben. Ennek a böngészőnek hosszú története van (a híres Netscape Navigator böngészőn alapul). Azért is szeretem ezt a böngészőt, mert támogatja a beépülő modulok rendszerét - külön terjesztett kiegészítőket, amelyek csatlakoztatásakor módosíthatja a funkcionalitást és testreszabhatja az igényeinek megfelelően. És végül, ez a böngésző szabadon terjeszthető nyílt forráskóddal, ami szintén fontos. Ezért úgy döntöttem, hogy leírom, milyen lehetőségeket nyújt ez a böngésző nemcsak a felhasználónak, hanem a weblapok fejlesztőjének is, mennyire egyszerű és kényelmes lehet az írott termékek hibakeresésének folyamata.
Mozilla Firefox az egyik legnépszerűbb böngésző a fejlesztők és webfejlesztők körében. Felkelti a figyelmüket, mert ez a böngésző lehetőséget biztosít a létrehozott projektek hibakeresésére, a hibák kijavítására és fejlesztésére. A böngésző alapfelszereltségéhez tartozik egy java konzol (vagy "hibakonzol"). Ez a segédprogram lehetővé teszi a beágyazott java-scriptek hibakeresését. A harmadik féltől származó beépülő modulok azonban sokkal több funkciót biztosítanak a böngészőnek, amely letölthető és telepíthető a Mozilla Foundation hivatalos webhelyéről. Most kettőt szeretnék megnézni ezek közül a beépülő modulok közül – a Web Developer és a Firebug. Mindkét kiegészítő letölthető a fenti hivatkozásokról a hivatalos kiegészítő webhelyről. Telepítésük és a böngésző újraindítása után a fejlesztőnek bőséges lehetőségei vannak, amelyeket az alábbiakban ismertetek az egyes bővítmények esetében.
firebug plugin
A hivatalos oldalon olvasható: „A Firebug integrálódik a Firefox böngészővel, hogy nagymértékben gazdagítsa a fejlesztői eszköztárat. Bármely weboldalon élőben szerkesztheti, hibakeresheti és felfedezheti a CSS-t, a HTML-t és a Javascriptet." És valóban az. Tekintsük ennek a bővítménynek néhány funkcióját, nevezetesen:
- HTML megtekintése és szerkesztése.
- CSS építése.
- Hálózati kérések figyelése
- JavaScript hibakeresés
- JavaScript kutatás
- Naplózás a JavaScripthez
Ez nem az összes funkció teljes listája. Mivel a projekt nyílt forráskódú, bárki módosíthat és hozzáadhat funkciókat.
A bővítmény használatához meg kell nyomnia az F12 billentyűt (a Ctrl-F12 külön ablakban történő kezeléséhez). Sikeres indítás után a következőket kapjuk - 1a, 1b ábra.
1a. ábra. A firebug beépülő modul kezdeti ablaka.
1b. ábra. A firebug beépülő modul kezdeti ablaka.
Ezután kezdődik a tényleges munka a bővítménnyel. Tegyük fel, hogy meg kell találnunk ezt vagy azt az objektumot a HTML kódban, vagy meg kell határoznunk, hogy pontosan hogyan valósul meg CSS használatával jelenlegi töredéke. Ehhez csak az egérrel kell kiválasztania a szükséges beállításokat a beépülő ablak menüjében. Az alábbi példában ez a HTML Ellenőrzés módban. Most a dokumentum oldalára lépve az egérkurzor alatt egy téglalap alakú területet fogunk látni, amely itt illusztrálja azt a területet, amellyel dolgozunk. A beépülő modul ablakában látni fogjuk a használt HTML és CSS paramétereket. Ezenkívül mindegyikre kattintva módosításokat hajthat végre, és nyomon követheti azokat a dinamikában. A leírt műveleteket a 2., 3., 4. ábra szemlélteti.
A projekt fejlesztése során a fent leírt plugint pontosan erre a célra használták. Bár itt nem használtunk java-scriptet, a firebug beépülő modul is használható a hibakereséshez. A hibakeresési példa az 5. ábrán látható.
A fentiekben leírtak szerint ennek a bővítménynek a funkcionalitása nincs korlátozva. A Mozilla Firefox telepítése után a megadott hivatkozásokról letöltve teljesen áttanulmányozhatja és felhasználhatja igényei szerint.
webfejlesztői bővítmény
Web Developer – a második bővítmény a számára Mozilla böngésző Firefox, nagyon erős és funkcionális, amely gyors és hatékony hibakeresést tesz lehetővé. A telepítés után egy további eszköztár jelenik meg a böngészőablakban, a 6. ábrán látható módon.A bővítménnyel végzett további munka intuitív. Például, ha CSS-munkát kell végeznünk (bár nem teljesen működőképes, mint a Firebug beépülő modulnál), akkor a CSS menüre kattintva letilthatjuk, engedélyezhetjük vagy letilthatjuk.
Nagyon kényelmes egy fejlesztő számára, ha láthatja, hogyan fog kinézni a projektje a különböző felbontású monitorokon. Ehhez használja az Átméretezés lapot. Itt manuálisan lehet beállítani szükséges engedélyeket képernyő (800x600, 1024x768 stb.), majd szabadon válthat közöttük, nagyíthat vagy kicsinyíthet a tartalomból. Ez a funkció a 7. ábrán látható.
Ez a bővítmény gazdag funkciókkal is rendelkezik, amelyek mindegyike megtalálható és elérhető a hivatalos webhelyeken.
A felhasznált források listája
- 1. www.getfirebug.com
A kiegészítő hivatalos weboldala. - 2. http://addons.mozilla.org
A Mozilla hivatalos webhelyének bővítményei Firefox böngésző, információk fejlesztőknek, információk a bővítmények használatáról. - 3. http://chrispederick.com/work/web-developer/
A WebDeveloper beépülő modul fejlesztőjének hivatalos webhelye.
Az Internet böngészése közben az Internet Explorer üzeneteket jeleníthet meg arról, hogy az oldal hibákat tartalmaz, és előfordulhat, hogy nem jelenik meg megfelelően. Nézzünk meg néhány módszert a probléma megoldására.
Utasítás
A felhasználók gyakran megfigyelhetnek olyan helyzetet, amikor egy parancsfájl-hibaüzenet jelenik meg az Internet Explorer (IE) böngészőjében. Ha a helyzet elszigetelt, akkor nem kell aggódnia, de amikor az ilyen hibák rendszeressé válnak, akkor el kell gondolkodnia a probléma természetén.
Az Internet Explorer szkripthibáit általában az okozza, hogy a böngésző nem megfelelően dolgozza fel a HTML-oldal kódját, ideiglenes internetes fájlok jelenléte, fiókbeállítások és sok más ok, amelyekről ebben az anyagban lesz szó. A probléma megoldására szolgáló módszereket is figyelembe kell venni.
Mielőtt folytatná az Internet Explorer szkripthibákat okozó problémák diagnosztizálásának általános módszereit, meg kell győződnie arról, hogy a hiba nem csak egy adott webhelyen, hanem egyszerre több weboldalon is előfordul. Azt is meg kell néznie azt a weboldalt, amelyen ez a probléma jelentkezik egy másik fiókban, egy másik böngészőben és egy másik számítógépen. Ez leszűkíti a hiba okának keresését, és kizárja vagy megerősíti azt a hipotézist, hogy az üzenetek bizonyos fájlok vagy beállítások miatt jelennek meg a számítógépen.
Az Internet Explorer aktív szkriptjei, az ActiveX és a Java blokkolása
Az aktív szkriptek, az ActiveX-vezérlők és a Java befolyásolják az információk létrehozásának és megjelenítésének módját a webhelyen, és a korábban leírt probléma valódi okai lehetnek, ha ezek blokkolva vannak a felhasználó számítógépén. Annak érdekében, hogy megbizonyosodjon arról, hogy emiatt szkripthibák fordulnak elő, csak vissza kell állítania a böngésző biztonsági beállításait. Ehhez kövesse az alábbi irányelveket.
- Nyissa meg az Internet Explorer 11-et
- Szolgáltatás
- Az ablakban lépjen a lapra Biztonság
- Ezután kattintson a gombra Alapértelmezett majd a gombot rendben
Internet Explorer ideiglenes fájlok
Minden alkalommal, amikor megnyit egy weboldalt, az Internet Explorer elmenti a weboldal helyi másolatát a számítógépére úgynevezett ideiglenes fájlokban. Ha túl sok ilyen fájl van, és az ezeket tartalmazó mappa mérete eléri a több gigabájtot, akkor problémák léphetnek fel a weboldal megjelenítésével, vagyis egy script hibaüzenet jelenik meg. Az ideiglenes fájlok mappájának rendszeres törlése segíthet a probléma megoldásában.
Az ideiglenes internetes fájlok törléséhez kövesse az alábbi lépéseket.
- Nyissa meg az Internet Explorer 11-et
- A böngésző jobb felső sarkában kattintson a ikonra Szolgáltatás fogaskerék formájában (vagy az Alt + X billentyűkombinációval). Ezután a megnyíló menüben válassza ki a lehetőséget
- Az ablakban lépjen a lapra Gyakoriak
- fejezetben Böngészőelőzmények nyomja meg a gombot Töröl…
- Az ablakban Böngészési előzmények törlése jelölje be a tételek melletti négyzeteket Ideiglenes fájlok az internetről és webhelyekről, Cookie-k és webhelyadatok, Magazin
- Kattintson a gombra Töröl
Víruskereső szoftver működése
Szkripthibák egy víruskereső program működésén keresztül lehetségesek, amikor blokkolja az aktív szkripteket, az ActiveX- és Java-vezérlőket az oldalon, vagy mappákat az ideiglenes böngészőfájlok mentéséhez. Ebben az esetben olvassa el a telepített víruskereső termék dokumentációját, és tiltsa le a mappák vizsgálatát az ideiglenes internetes fájlok mentéséhez, valamint az interaktív objektumok blokkolásához.
A HTML-oldal kódjának helytelen feldolgozása
Általában egy adott webhelyen jelenik meg, és azt jelzi, hogy az oldal kódja nincs teljesen adaptálva az Internet Explorer használatához. Ebben az esetben a legjobb, ha letiltja a szkriptek hibakeresését a böngészőben. Ehhez kövesse az alábbi lépéseket.
- Nyissa meg az Internet Explorer 11-et
- A böngésző jobb felső sarkában kattintson a ikonra Szolgáltatás fogaskerék formájában (vagy az Alt + X billentyűkombinációval). Ezután a megnyíló menüben válassza ki a lehetőséget
- Az ablakban lépjen a lapra Továbbá
- Ezután törölje a jelölést a négyzetből Értesítés megjelenítése minden szkripthibárólés nyomja meg a gombot rendben.
Ez a leggyakoribb okok listája, amelyek az Internet Explorer programban szkripthibákat okoznak, ezért ha elege van az ilyen üzenetekből, fordítson egy kis figyelmet, és oldja meg a problémát egyszer s mindenkorra.
Vannak persze mások is – ezeket mindenképpen megemlítem.
Firebug Firefoxhoz
Nem tudom biztosan, hogy szentjánosbogár más fejlesztői eszközök elődje, de határozottan a legnépszerűbb, legfelhasználóbarátabb és funkciókkal teli .
A Firebug a Firefox kiegészítője, ami azt jelenti, hogy le kell tölteni a Firefox kiegészítők webhelyéről, és telepíteni kell.
A firebug hívásához nyomja meg az F12 billentyűt.
Ennek a kiegészítőnek a jellemzői:
- Dinamikusan változó HTML ellenőrzése és szerkesztése;
- CSS szerkesztés menet közben;
- JavaScript hibakeresés, parancssor a szkriptek végrehajtásához;
- Hálózati kérések figyelése - láthatja a fájlok és szkriptek méretét és letöltési idejét, a kérések fejléceit;
- DOM elemző.
Ezekről a funkciókról még sokáig lehet részletesen beszélni, de úgy gondolom, hogy minden olvasónk ismeri őket, és ha nem, akkor részletes információk a Firebug kezdőlapján, vagy ugyanezt Kantor Ilya fordítja.
Magán a firebug-on kívül szükséged lehet egy hasznos krémre is - tűzi süti, amellyel (meglepetés:-) megtekintheti és módosíthatja a sütiket.
WEB fejlesztői eszköztár Firefoxhoz
Egy másik hasznos kiegészítés az Ognelishez. Ez így néz ki:
Menjünk végig a pontokon.
Letiltás
Lehetővé teszi a JavaScript kikapcsolását, a gyorsítótár használatának letiltását, ami nagyon hasznos a fejlesztés során (lehetővé teszi, hogy az oldal a legfrissebb frissítésekkel legyen betöltve), törölje az oldalon használt színeket és helyettesítse azokat szabványosra, tiltsa le a küldést a hivatkozó fejlécben (az oldal, amelyről az átmenet történt).
Cookie-k
Hasznos lehetőség a cookie-kkal való munkához: megtekinthetők, törölhetők, blokkolhatók és hozzáadhatók.
css
Ez a menü tartalmazza a Fejlesztői Eszköztár legmenőbb funkcióját – a menet közbeni CSS-szerkesztést. Ezen kívül lehetőség van css megtekintésére, letiltására stb., stb. Véleményem szerint a billentyűparancsok jelenléte nagyon hasznos itt (a CTRL + SHIFT + C például lehetővé teszi, hogy azonnal lépjen az oldalstílusok megtekintéséhez)
Űrlapok
Minden az űrlapokkal való munkához: jelszavak megjelenítése, űrlapokkal kapcsolatos információk megjelenítése, űrlapmódszerek konvertálása (GET » POST és fordítva) és még sok más. Hasznos „Űrlapmezők kitöltése” funkció az űrlapmezők automatikus kitöltéséhez (például egy webhely tesztelésekor, amikor a jelszóemlékezési funkció le van tiltva. Egyébként nem látok semmi hasznosat ebben a bekezdésben.
Képek
Van egy hasznos funkció a képek kikapcsolására – megtekintheti, hogyan néz ki webhelye képek nélkül. A képek körbeírhatók, méretük, alt-attribútumok megjelenítése.
Információ
Ebben a menüben rengeteg lehetőség van. Hasznos lehet az osztály és az id attribútumok megjelenítése az oldalon. Ezenkívül érdekes a „Színinformáció megtekintése” elem - hogy gyorsan tájékozódjon az oldalon használt színekről. "Nézet dokumentumméret" - oldalméret megtekintése. „Válaszfejlécek megtekintése” – az oldalfejlécek megtekintése.
Vegyes
A leggyakrabban használt funkció a gyorsítótár törlése. Ezen kívül itt érhető el az "Oldalvonalzó" - vonalzó, "Oldalnagyító" - nagyító és "Vonalvezetők" - néhány sor, amelyek hasznosak lehetnek a sablon kivágásához.
vázlat
Különféle oldalelemek kiválasztása - táblázatok, címsorok, hivatkozások, keretek, blokkok. Az Átméretezés lehetővé teszi a böngészőablak átméretezését, hogy illeszkedjen bármely szabványos képernyőbővítményhez. Az itt található eszközök az oldal ellenőrzéséhez tárolt funkciók. Helyi és külső egyaránt. Kényelmes és gyors hozzáférés a HTML, CSS és egyebek érvényesítéséhez. Használhatja a CTRL+SHIFT+H billentyűparancsot a HTML érvényesítéséhez.
Forrás megtekintése
Forráskód megtekintése. Képes megtekinteni egy külső alkalmazásban, megtekintheti a generált kódot.
A jobb oldali a kedvencem. Ez egy gyors HTML, CSS érvényesítő és JavaScript hibajelző. Ha nincs probléma, az ikon zöld, ha pedig probléma van, piros.
Internet Explorer fejlesztői eszköztár
A 8.0-tól kezdődően a hibakeresés már be van építve ebbe a böngészőbe. Könnyen hívják F12 billentyű. Igaz, a 90-es évek programjaként nyomorult.
De ehhez a böngészőhöz van egy sokkal menőbb eszköz, a linkről letölthető az úgynevezett Internet Explorer Developer Toolbar.
Kinézetre ez az eszköztár természetesen úgy néz ki, mint a firebug, de sajnos még nem nőtt fel hozzá. Bár másrészt van néhány olyan funkciója, amivel a firebug nem rendelkezik. Az Internet Explorer fejlesztői eszköztárát a Firebug és a Firebug hibridjének nevezném firefox webfejlesztő Eszköztár.
A firebughoz hasonlóan itt is egy kattintással meg lehet vizsgálni egy elemet. De ha azonnal látjuk a párnázást és a margókat, akkor itt nincs ilyen lehetőség.
Ezenkívül az Internet Explorer fejlesztői eszköztára nem frissíti dinamikusan az elemfát, ahogy a Firebug teszi. Vagyis ha valamit megváltoztatunk az oldalon js segítségével, akkor ezen az eszköztáron nem fogunk látni semmit.
Abból, amit élvezhet – menet közbeni CSS módosítása (egyszerű módja annak, hogy megtalálja, mit kell feltörnie :), a CSS és a képek letiltása, a gyorsítótár gyors törlése és a sütikkel való játék, gyors hozzáférés az érvényesítéshez.
A legfinomabb: van egy beépített színválasztó, amely lehetővé teszi, hogy egy szemcseppentő segítségével bármilyen színt hozzon ki az oldalról. (az ff-hez külön ColorZilla plugin van).
Debug Debug Bar Internet Explorerhez
A DebugBar for Internet Explorer letölthető a megadott linkről.
Önmagában is érdekes bővítmény. A böngésző kiegészítő paneljeként telepítve:
Valamiért van beépített kereső, szemcseppentő, átméretezhető az ablak, és megint valamiért az a lehetőség, hogy egy oldalt elküldhetsz egy barátnak szappanért. Bár hasznos lehet. De nem sikerült kihasználnom ezt a lehetőséget.
Ezen kívül van egy ellenőr:
A kattintással, mutogatással történő ellenőrzés módszere nem jött be a fejlesztőknek: érdekesebb dolgot találtak ki. A DebugBar-ban a célt a kívánt elemre kell húznia, hogy láthassa a fában. A CSS szerkesztésére nincs lehetőség. De van egy validátor és egy beépített js konzol.
És ha belemélyedsz a beállításokba, ezt találod:
Egyszerre vicces és szomorú.
Ismeretes, hogy a Fejlesztői Eszköztár beépül a nyolcadik felfedezőbe. Hasonló lesz a harmadik bekezdésben leírtakhoz, de reméljük, hogy jobb lesz.
A DragonFly hibakeresése az Operához
A DragonFly a 9.5-ös verzió óta be van építve az Operába, így nem kell telepíteni. A Dragonfly aktiválásához lépjen az Eszközök → Speciális → Fejlesztői eszközök menüpontra. És ha angolul, akkor Tools → Advanced → Developer Tools.
Azonnal figyelmeztetem, hogy a DragonFly Alpha2 stádiumban van, ez magyarázza sok hibáját.
Jellemzők listája:
- DOM ellenőr;
- Kattintson az Ellenőrzés elemre (ismét nem fogunk olyan kitöltést látni, mint a FireFoxban);
- Szerkesztés ;
- Gyors hozzáférés a hibakonzolhoz.
A DF olyan, mint egy külön oldal egy keretben. Ha megnyitod, akkor minden lapra nyitva lesz (ellentétben a firebug-gal). Ezért egy elem vizsgálata előtt ki kell választanunk a listából a megtekinteni kívánt oldalt.
Sajnos itt, akárcsak az Internet Explorerben, a Dav Toolbar nem jeleníti meg a dinamikusan létrehozott elemeket. És általában, amikor megvizsgáljuk az oldalt, nem fut JavaScript: a hivatkozásokra és gombokra nem kattintanak. Reméljük, hogy a DragonFly megjelenéséhez közeledve látni fogjuk ezeket a funkciókat.
Debug WEB Inspector a Safariban
Azonnal elmondom a böngészőről szafari Kifütyültem az információt, ezért, ahogy mondani szokták, nem vállalok felelősséget az anyag megfelelőségéért.
A „Fejlesztés” elem engedélyezéséhez a Safari menüben engedélyeznie kell a megfelelő elemet a beállításokban (az „Speciális” lapon):
A „Fejlesztés” menüben a következő funkciók állnak rendelkezésünkre:
Nézzük meg közelebbről a WEB ellenőrt:
Alapértelmezés szerint az ellenőr HTML nézet módban nyílik meg. De át lehet kapcsolni DOM nézet módba. Ehhez a felső lapon van egy kapcsoló. Ha az ellenőrzőben egy elem fölé viszi az egérmutatót, az magán az oldalon lesz kiemelve. Nem láthatja menet közben a kitöltést, nem módosíthatja a jelölést vagy a CSS-t, és nem láthatja a DOME dinamikus változásait menet közben, ahogyan a FireBugban sem. De látod, nagyon jól néz ki.
Ha böngészőablakban szeretne dolgozni az ellenőrrel, kattintson a bal alsó sarokban található gombra.
Még a safariban is elérhető egy olyan funkció, mint a „Network Timeline” (a „Hálózat” gomb az ellenőrzőben):
Jól láthatja, hogy mikor és mennyi ideig töltődnek be a fájlok. A kérés fejléceit is megtekintheti, de magát a tartalmat sajnos nem.
Hibakeresés fejlesztőknek a Google Chrome-ban
Lame haladó formában született, és azonnal megvannak, bár egyelőre ferdén, de még mindig eszközei a fejlesztőknek.
- DOM-felügyelő;
- javascript hibakereső;
- JavaScript konzol.
Egy elem vizsgálatához kattintson rá jobb gombbal, és válassza a helyi menüben az "Elemkód megtekintése" lehetőséget:
A funkcionalitás ugyanaz, mint a Safariban: az elemek kiemelve vannak, de a CSS és HTML szerkesztés nem érhető el, a DOM változásait nem követi nyomon. Csak a bal alsó sarokban lévő gomb, amely az ellenőrt a böngészőablakhoz kell csatolnia, nem működik.
Az "Erőforrások" lapon a következőket láthatjuk:
Kicsit eltér a szafari méretétől. Az áttetsző ábrán a relatív fájlméretek láthatók, a teljes szín pedig a letöltési idő. Így vagy úgy, de nyilvánvaló, hogy a Chrome ezen része még messze van a befejezéstől.
Ebben a cikkben áttekintettem a böngészők leghíresebb bővítményeit és beépített eszközeit.
Vannak mások is, pl.
- Az Internet Explorer WEB Development Helper jó segítő az ASP.NET fejlesztők számára (Internet Explorer);
- WEB Developer Toolbar – eszköztár az Internet Explorer és a FireFox számára. Számos hasznos funkció van;
- WEB-kisegítő lehetőségek eszköztár – eszköztár az Internet Explorerhez. Semmi érdekes.
Ha vannak olyan kiegészítők, amiket nem említettem, de érdemes lenne, vagy az említett bővítményekhez vannak olyan funkciók, amiket kihagytam, írj.
Használd egészségre!
Az Internet Explorer 11 Windows 8.1 és Windows 7 rendszerben a böngészőbe épített, teljesen újratervezett és továbbfejlesztett fejlesztői eszközökkel rendelkezik, amelyek segítenek a fejlesztőknek modern webhelyek és alkalmazások létrehozásában, diagnosztizálásában és optimalizálásában számos eszközön. Az új eszközök, amelyeket a rövidség kedvéért egyszerűen F12-nek nevezünk, lehetővé teszik a webfejlesztők számára, hogy gyorsan és hatékonyan dolgozzanak.
A Visual Studio és az Internet Explorer munkacsoportjai együtt dolgoztak az F12 eszközök létrehozásán, amelyek azon az elven alapulnak, hogy értelmes adatok felhasználásával segítik a fejlesztőket abban, hogy gyorsan haladjanak a problémától a megoldásig. Az új F12 programcsomag gyors és rugalmas webes élményt biztosít a teljesítményproblémák diagnosztizálására és kijavítására szolgáló eszközökkel, valamint olyan eszközökkel, amelyek segítenek jobban megérteni, hogy az Internet Explorer hogyan tervezi és jeleníti meg a webalkalmazásokat. Az F12 eszközök támogatják a mai webfejlesztők által használt gyors, interaktív munkafolyamatot.
Univerzális szerszámkészlet
Az új F12 készlet segít a fejlesztőknek gyorsan haladni a problémától a megoldásig. Néhány izgalmas új funkció:
- UI válaszelemző és memóriaprofilozó eszközök, amelyek segítenek a fejlesztőknek gyors és rugalmas webalkalmazások létrehozásában.
- Az élő DOM Explorer és a CSS-ellenőrző frissítve az oldallal, így a fejlesztők interaktívan felfedezhetik, hogyan befolyásolja a dinamikus tartalom az elrendezést és a stílust
- Lehetőség az oldal frissítése nélkül gyorsan elinduló JavaScript hibakeresésére, így a fejlesztők gyorsabban hozzáláthatnak a munkához
Az F12 eszközök használata során számos további fejlesztést is észre fog venni, amelyek elősegítik a gyors, interaktív munkafolyamat elérését:
- Gyorsan hozzáférhet ezekhez az eszközökhöz, ha jobb gombbal rákattint egy menüelemre az "ellenőrzési elemmel"
- Hatékony billentyűzet interakció
- Széleskörű lehetőség elemek és összetevők másolására az eszközökből, így azok bármilyen szerkesztőbe beilleszthetők további formázás nélkül
A legfontosabb, hogy ezek az eszközök a rendelkezésre álló legteljesebb és legpontosabb információkat jelenítik meg, a DOM Explorer @media and!important szabályaitól kezdve az UI Response Profiler elemenkénti költségstruktúrájáig. Ezek az eszközök közvetlenül is értelmes adatokat szolgáltatnak; például a memóriaprofilozó azonosítja azokat a DOM-csomópontokat, amelyek "élőek", de nem hivatkoznak rájuk a jelölésből vagy a leképezési fából.
Az új F12 programcsomag képességei a Visual Studióban is elérhetők, így a fejlesztők egységes és zökkenőmentes élményben részesülnek minden webfejlesztő eszközünkön és platformunkon.
Vessünk most egy gyors pillantást ezekre az eszközökre működés közben.
Alkalmazások profilozása a felhasználói felület reagálóképesség-elemzőjével
A felhasználói felület reagálási eszköze segít megérteni, hogy hol tölti a CPU-időt, így az alkalmazás teljes teljesítménypotenciálját ki tudja használni. Ez az eszköz betekintést nyújt az Internet Explorer belső működésének megértéséhez, futásidejű megjelenítést biztosít a HTML-, CSS- és JavaScript-kódokhoz, valamint olyan fontos mellékhatásokhoz, mint a jelölés és a szemétgyűjtés. Egy pillantással pontosan láthatja, milyen gyorsan reagál az alkalmazás, és hogyan jelenik meg. Ez lehetővé teszi a konkrét források azonosítását szűk keresztmetszetekés intelligensebb megközelítés az optimalizálásához.
Weboldal profilalkotás
Elemezze az alkalmazás memóriahasználatát a memóriaprofilozóval
Ez a memóriaelemző segít elkerülni a memóriaszivárgást vagy a túlzott memóriafelhasználást. Olyan webalkalmazások létrehozása, amelyek éjjel-nappal vagy komplexen működnek az ügyfelek számára interaktív alkalmazások gyakran azt jelenti, hogy a fejlesztőknek különös figyelmet kell fordítaniuk a memóriahasználati problémákra.
Míg a JavaScript egy szemétgyűjtő környezet, az alkalmazások általában több memóriát fogyasztanak egyszerűen azért, mert az objektumhivatkozások nem szabadulnak fel (és nem is szabadíthatók fel). A memóriaelemző segít azonosítani ezeket a problémákat azáltal, hogy információkat nyújt az oldalon lévő összes objektumról, legyen az JavaScript objektum vagy DOM. Ezzel az információval például megtekintheti, hogy egy elem mennyi memóriát tartalmaz és milyen tárgyak támogatják annak fennmaradását. De ami a legfontosabb, összehasonlíthat két pillanatképet, és megnézheti, mi változott. Ez lehetővé teszi, hogy megértse, miért használ az alkalmazás több memóriát, és kijavítja ezt a helyzetet.
A letiltott DOM-elemeket bemutató halom-pillanatkép
A Performance Dashboard segítségével gyorsan megértheti az alkalmazások teljesítményét
Az oldal teljesítményét befolyásoló problémák gyors azonosítása érdekében az Internet Explorer 11 tartalmaz egy "oldal" modult, a Teljesítmény irányítópultot, amely a Ctrl+Shift+U billentyűparancs vagy a megfelelő Eszközök menüelem (Alt+T) használatával érhető el. ). Ez a panel dinamikusan jeleníti meg az Internet Explorerben a legfontosabb teljesítménymutatók statisztikáit, például a renderelési időt, a memóriát, a másodpercenkénti képkockákat (fps) és a processzorhasználatot. A Performance Dashboard nem igényli az F12 eszközök használatát, és modern böngészőkben is használható.
A Performance Dashboard segítségével gyorsan azonosíthatja azokat az oldalinterakciókat, amelyek képkockasebesség-csökkenést vagy magas CPU-használatot okoznak. Ezután átválthat az F12-re a probléma reprodukálásához és a megoldás megtalálásához.
Elemek ellenőrzése, jelölések és stílusok módosítása a DOM Explorer segítségével
A DOM Explorer megkönnyíti a @media lekérdezések és CSS-szabályok és tulajdonságaik interaktív beállítását. Ezért felhasználói felület az alkalmazás egy rendkívül érzékeny, többeszközös felületté válik. Gyorsan elindulhat egy weboldalon, ha jobb gombbal kattint és megvizsgálja a kívánt elemet, amely elindítja az F12 eszközöket a DOM Explorerben kiválasztott elemmel együtt, dinamikusan megjelenítve a DOM-ot és az alkalmazott CSS-szabályokat. A megjelenített DOM- és CSS-táblák dinamikusak, lehetővé téve annak megértését, hogyan értelmezi az Internet Explorer a jelölések, a CSS-stílusok és -szabályok sajátosságait. Amikor a DOM Explorer használatával interakcióba lép vagy módosítja az oldalt, az elvégzett módosítások azonnal megjelennek.
Ellenőrizze a jelöléseket és a stílusokat
A DOM Explorer megkönnyíti a tulajdonság vagy tulajdonságok helyes értékének megállapítását az IntelliSense segítségével, amikor módosítja a CSS-táblázatot. Könnyen megtekintheti, hogy mely tulajdonságok hibásak vagy fel nem ismertek, majd másolja a szabályt, hogy újra alkalmazza azt a forrásban.
JavaScript hibakeresése a hibakeresővel és a konzollal
Az új JavaScript hibakereső eszközöket biztosít a nem megbízható kódok megkereséséhez és gyors javításához. A JavaScript hibakereső több fájlt is megnyithat és megtekinthet akkor is, ha a szkriptkönyvtár kicsinyített, beállíthat töréspontokat és nyomkövetési pontokat, megvizsgálhatja a JavaScript objektumokat, értékeket, hatókör-láncokat, és megtekintheti a verem tartalmát. Az F12 eszközök futtatása azonnal elindítja a JavaScript hibakeresőt is, így azonnal elkezdheti
Hibakeresés közben valószínűleg kapcsolatba szeretne lépni a webhelyével. A konzol a legfontosabb eszköz ehhez a feladathoz. Bármikor hozzáférhet a konzolhoz, így az IntelliSense és az objektumrendererek segítségével hatékonyan használhatja ezt az interaktív környezetet. A konzol speciális API-k széles skáláját kínálja, amelyek lehetővé teszik a kimenetek naplózását, az adott kódban eltöltött idő elemzését, és objektummegjelenítőket biztosítanak, amikor a JavaScript-objektumok mélyreható vizsgálatára van szükség.
Összegezve
Ez a blogbejegyzés egyszerűen egy vázlatot tartalmaz az F12 eszközök új elemeinek leírásáról. megtalálhatod teljes listaúj funkcionalitás Az Internet Explorer 11 fejlesztői számára elérhető az "Az F12 eszközök újdonságai" című cikkben és az "Internet Explorer 11 előnézeti fejlesztői útmutatójában" című cikkben. További információkat az Internet Explorer „F12 Adventure” tesztbemutatójából is megtudhat.
Várjuk visszajelzését, és hosszú együttműködésre számítunk a fejlesztői közösséggel. Ossza meg javaslatait az Internet Explorer 11 Visszajelzés és javaslat eszközén vagy a Connect webhelyen.
P. J. Hough
, a Visual Studio alelnöke
