|

Moderné prehliadače poskytujú vstavané vývojové nástroje pre JavaScript a ďalšie technológie. Tieto nástroje zahŕňajú konzolu, ktorá vyzerá ako rozhranie shellu, ako aj nástroje na kontrolu DOM, ladenie a analýzu sieťovej aktivity.

Konzolu možno použiť na zaznamenávanie informácií ako súčasť procesu vývoja JavaScriptu. Konzola vám tiež umožňuje interagovať s webovou stránkou spustením JavaScript výrazy v kontexte stránky. V skutočnosti konzola poskytuje možnosť zápisu JavaScript kód a v prípade potreby ho aj spravovať.

Táto príručka vás naučí, ako s ňou pracovať konzola JavaScript v prehliadači a predstaví vám ďalšie vstavané vývojové nástroje, ktoré by sa vám mohli hodiť.

Práca s konzolou JavaScript v prehliadači

Väčšina moderných webových prehliadačov, ktoré podporujú HTML a XHTML, poskytuje štandardne prístup ku konzole pre vývojárov, kde môžete pracovať s JavaScriptom v rozhraní podobnom shellu terminálu. V tejto časti sa dozviete, ako získať prístup ku konzole v prehliadačoch Firefox a Chrome.

prehliadač Firefox

Tieto nástroje vám umožňujú kontrolovať a upravovať prvky DOM, ako aj vyhľadávať HTML objekty, Súvisiace konkrétnu stránku. DOM môže indikovať, či má časť textu alebo obrázku atribút ID, a môže určiť hodnotu tohto atribútu.

Môžete tiež nájsť na bočnom paneli alebo pod panelom DOM css štýly, ktoré sa používajú v HTML dokument alebo štýlový list.

Ak chcete upraviť DOM v reálnom čase, dvakrát kliknite na vybraný prvok. Môžete sa napríklad pokúsiť otočiť značku

v

.

Po obnovení sa stránka opäť vráti do predchádzajúcej podoby.

Karta Sieť

Karta Sieť vám umožňuje sledovať a zaznamenávať sieťové požiadavky. Na tejto karte sa zobrazujú sieťové požiadavky prehliadača vrátane požiadaviek na načítanie stránky, časov poskytovania služieb a podrobností o každej požiadavke. Tieto údaje môžete použiť na optimalizáciu výkonu načítania stránky a ladenie dotazov.

Kartu Network môžete použiť spolu s konzolou JavaScript. Môžete napríklad začať ladiť stránku pomocou konzoly a potom otvoriť kartu Sieť a zobraziť aktivitu siete bez opätovného načítania stránky.

Responzívny dizajn

Responzívne webové stránky rýchlo prispôsobujú svoj vzhľad rôznym zariadeniam: mobilným telefónom, tabletom, stolným počítačom a notebookom. Veľkosť obrazovky, hustota pixelov a odozva na dotyk sú faktory, ktoré treba zvážiť pri navrhovaní responzívnych webových stránok. Dôležité je brať do úvahy aj princípy responzívneho dizajnu, aby bol web dostupný a produktívny bez ohľadu na zariadenie, na ktorom je otvorený.

Moderné prehliadače (vrátane Firefoxu a Chrome) poskytujú modely na dodržiavanie princípov responzívneho dizajnu pri vývoji webových stránok a aplikácií. Tieto modely napodobňujú správanie konkrétneho zariadenia, čo vám umožňuje testovať a analyzovať všetky funkcie stránky.

Viac sa o tom môžete dozvedieť v príručkách prehliadača:

• Režim responzívneho dizajnu vo Firefoxe

Záver

Táto príručka predstavuje krátka recenzia pracovať s konzolou JavaScript v moderné webové prehliadače. Môžete tiež nájsť informácie o iných užitočné nástroje rozvoj.

Na našej stránke je už publikovaných veľa rôznych Java skriptov sociálne siete. A v popise každého skriptu popíšte podrobné pokyny pri ich spustení... Je to zbytočné. Rozhodli sme sa napísať plnohodnotný manuál popisujúci inštaláciu skriptov vo všetkých prehliadačoch a tiež vziať do úvahy prítomnosť niekoľkých spôsobov inštalácie na jeden konkrétny prehliadač a opísať ich všetky.

Spustenie skriptov Java cez konzolu prehliadača:

Teraz, ako viete, spúšťanie skriptov cez konzolu je najobľúbenejší a najjednoduchší, a čo je najdôležitejšie, pracovný spôsob ich použitia. Preto tu začneme - spôsobmi, ako sa dostať do konzoly pre každý prehliadač.

Konzola v Mozilla Firefox:

Najjednoduchší spôsob, ako sa dostať do webovej konzoly v prehliadači Mozilla Firefox, je pomocou klávesovej skratky. ctrl + Shift + K. Kliknite a konzola sa zobrazí.

Konzola v Google Chrome a ďalšie prehliadače založené na prehliadači Chromium:

Google Chrome, Opera 15+, Amigo, Orbitum a ďalšie prehliadače založené na prehliadači Chromium majú tiež spôsob, ako spustiť webovú konzolu pomocou klávesových skratiek. Ak to chcete urobiť, súčasne stlačte ctrl + Shift + J.

Konzola v Opere 12:

Spustenie webovej konzoly v prehliadači Stará opera generácie (nie staršie ako 12. verzia), je potrebné použiť klávesovú skratku ctrl + Shift + ja. Tým sa spustí Opera Dragonfly, panel nástrojov pre vývojárov. Po jej otvorení prejdite na kartu Konzola.

Konzola v internet Explorer:

Na otvorenie konzoly v Internetový webový prehliadač Prieskumník, musíte najprv kliknúť na tlačidlo F12 a potom stlačte kombináciu ctrl + 2 (dve na stredovom paneli, nie v časti Num).

Konzola v Safari:

V Safari pred otvorením konzoly nezabudnite zadať nastavenia prehliadača ( výbava v pravom horný roh » Nastavenie… » Doplnky) a pripojte možnosť Zobrazte ponuku Develop na paneli s ponukami. Potom je možné konzolu vyvolať klávesovou skratkou ctrl + alt + C.

Všetky skripty sa zadávajú do konzoly do špeciálne určeného poľa vedľa ikony šípky (pozri snímky obrazovky, oblasti na zadávanie skriptov sú zvýraznené červenou farbou). Skripty sa spúšťajú stlačením tlačidla Zadajte. Po zadaní a spustení ľubovoľného skriptu uvidíte pri spustení všetky komentáre alebo chyby.

Spúšťanie skriptov Java z panela s adresou prehliadača:

Metóda spúšťania skriptov z adresného riadku prehliadača je staršia, ale skôr tradičná metóda. Spočiatku boli všetky skripty spúšťané týmto spôsobom. Ale trendy sa menia, svet sa vyvíja. Vo väčšine prehliadačov po vložení kódu skriptu do adresný riadok na spustenie je potrebné pridať kód ručne a v niektorých prehliadačoch riadok s adresou vôbec nespracováva java skripty.

Panel s adresou v prehliadači Mozilla Firefox:

Žiaľ, ani jeden z nich najnovšie verzie Prehliadač Mozilla Firefox nepodporuje skriptovanie cez panel s adresou. Aj keď vo viac skoré verzie podobná možnosť bola prítomná v modernom Vývojári Firefoxu rozhodol sa to vzdať.

Panel s adresou v prehliadači Google Chrome a ďalších prehliadačoch založených na prehliadači Chromium:

AT Prehliadač Google Chrome a akýkoľvek iný prehliadač, ktorý je na ňom postavený zdrojové kódy, ako je Opera 15+, Amigo , Orbitum a ďalšie, môžete spúšťať skripty v paneli s adresou. Ale! Po vložení skriptu musíte pred neho pridať slovo javascript:(spolu s dvojbodkou), inak (vďaka takému fenoménu, akým je omnibox) namiesto spustenia skriptu, presmerovanie na vyhľadávač.

Panel s adresou v Opere 12:

AT Prehliadač Opera 12 je oveľa lepšie. Ak chcete skript spustiť, stačí ho vložiť do panela s adresou a spustiť. S tým by nemali byť žiadne problémy.

Panel s adresou v programe Internet Explorer:

AT tento prehliadač, ako v prehliadači Google Chrome a podobne, po vložení skriptu do panela s adresou je potrebné na začiatku pridať javascript:(spolu s dvojbodkou), inak skript nebude fungovať.

Panel s adresou v Safari:

V Safari sú veci rovnako dobré ako v Opere 12. Stačí vložiť existujúci skript do panela s adresou a spustiť ho.

Používanie doplnkov prehliadača na ukladanie a spúšťanie skriptov:

Ak treba skripty používať neustále, tak sa s nimi treba popasovať, kopírovať zo stránky resp textový súbor, prilepte zakaždým do panela s adresou alebo konzoly. Súhlasíte, nie je to pohodlné. Preto boli vynájdené špeciálne rozšírenia(pluginy) pre prehliadače určené na ukladanie a spúšťanie skriptov. Hovoríme o dvoch doplnkoch: Greasemonkey pre Mozilla Firefox a Tampermonkey pre Google Chrome.

Doplnok Greasemonkey pre Mozilla Firefox:

Doplnok Greasemonkey pre Mozilla Firefox vám umožňuje vytvárať, ukladať a spúšťať skripty pridané používateľom. Buď opatrný! Pri použití skriptov na odstránenie alebo zmenu niečoho sa ihneď po pridaní do pluginu automaticky spustia. Dôrazne neodporúčame pridávať skripty do doplnku, napríklad na odstránenie príspevkov zo steny VKontakte, keď otvorte stránku VKontakte (nikdy neviete).

Používateľská príručka:

Doplnok Tampermonkey pre Google Chrome:

Doplnok Tampermonkey je podobný doplnku Greasemonkey pre Firefox a umožňuje vytvárať, ukladať a spúšťať vlastné skripty rovnakým spôsobom. Buď opatrný! Pri použití skriptov na odstránenie alebo zmenu niečoho sa ihneď po pridaní do pluginu automaticky spustia. Dôrazne neodporúčame pridávať skripty do doplnku, napríklad na odstránenie príspevkov zo steny VKontakte, keď je otvorená stránka VKontakte (nikdy neviete).

Používateľská príručka:


Takto fungujú doplnky Greasemonkey a Tampermonkey. Všetko je rýchle a jednoduché. Pridané skripty nikde nemiznú, dajú sa tiež kedykoľvek zapnúť a vypnúť. vhodný čas.

Záver:

Všetky metódy opísané na spustenie Javascriptu sú založené na najnovších verziách populárnych webových prehliadačov. Ak používate iný prehliadač alebo viac zastaraná verzia prehliadač a spôsoby spúšťania skriptov v ňom sa líšia od spôsobov popísaných v tomto článku, nahláste to v komentároch.

Hľadať všade Hľadať v nadpisoch nadpisov Hľadať v texte sekcií

» » »

Konzola chýb prehliadača

1. Na paneli s ponukami vyberte „Nástroje“ → „Chybová konzola“ (Ctrl+Shift+J).

2. V zobrazenom okne sa prepnite na kartu „Chyby“.

3. Kliknite pravým tlačidlom myši na text chyby, v obsahové menu vyberte "Kopírovať" a vložte text do e-mailu alebo príspevku vo fóre.

Ak chcete otvoriť debugger, kliknite na ikonu ponuky → " Ďalšie nástroje» → «Nástroje pre vývojárov» (Ctrl+Shift+I).

Skopírujte alebo urobte snímku obrazovky s textom chyby.

1. Ak chcete získať prístup k chybovej konzole v prehliadači Opera, musíte najskôr prejsť na panel nástrojov. Ak to chcete urobiť, kliknite na červené tlačidlo „Menu“ v ľavom hornom rohu prehliadača a v zobrazenom zozname vyberte položku „Zobraziť ponuku“.

2. V hornej časti prehliadača sa zobrazí panel s nástrojmi, kde musíte vybrať „Nástroje“ → „Rozšírené“ → „Konzola chýb“.

3. V okne, ktoré sa otvorí, sa zobrazia všetky informácie o problémoch spojených s načítaním stránok. Ak chcete vybrať iba chyby zo všeobecného zoznamu, kliknite na slovo „Správy“ v spodnej časti okna a v rozbaľovacom zozname vyberte možnosť „Chyby“.

4. Označte text chyby - kliknite na prvý riadok chyby ľavým tlačidlom myši, podržte Tlačidlo Shift a kliknite na spodná čiara chyby. Potom skopírujte text a vložte ho do e-mailu alebo príspevku na fóre.

Spustenie debuggera v Safari je rozdelené do dvoch krokov: aktivácia ponuky vývoja a spustenie webového inšpektora.

Povolenie ponuky pre vývojárov

1. Kliknutím na ikonu ozubeného kolieska v pravom hornom rohu prehliadača vyberte „Nastavenia“ (Ctrl + b).

2. Prejdite na kartu „Doplnky“, začiarknite políčko vedľa položky „Zobraziť ponuku Vývoj v paneli s ponukami“.

3. Zatvorte kartu Doplnky.

Spustenie webového inšpektora

1. Vyberte položku ponuky „Vývoj“ → „Zobraziť nástroj Web Inspector“ (Ctrl+Alt+w).

2. Vyberte kartu "Skripty", kliknite na tlačidlo "Povoliť ladenie".

3. Ikona v pravom dolnom rohu označuje počet chýb. Kliknutím na ikonu otvoríte konzolu s informáciami o chybách, ktoré sa vyskytli. Zvýraznite v konzole úplný text chyby(urobte to ľavým tlačidlom myši zdola nahor). Kliknutím pravým tlačidlom myši na text na pozadí (nie na odkaz!), skopírujte a prilepte text do e-mailu alebo príspevku na fóre.

1. Keď sa vyskytne chyba, v ľavom dolnom rohu prehliadača sa zobrazí ikona upozornenia alebo sa rovnaké upozornenie zobrazí v okne, ktoré sa otvorí.

2. Vyberte položku ponuky „Nástroje“ → „Nástroje pre vývojárov“ (F12) a prejdite na kartu „Skript“.

3. Na karte Skript kliknite na tlačidlo Spustiť ladenie.

4. Všetky chyby sú zobrazené v pravej časti okna konzoly. Zvýraznite a skopírujte text chyby a vložte ho do e-mailu alebo príspevku na fóre.

Pomocou konzoly v prehliadači si používateľ prezerá chyby, ktoré sa vyskytujú pri načítavaní stránok. S touto stránkou vie pracovať, čo zahŕňa vykonávanie rôznych príkazových akcií na nej.

Pomocou takéhoto „nástroja“ v prehliadači sa môžete včas zbaviť zlyhaní v práci skriptov na webovej stránke. Používateľovi to ušetrí veľa času.

Aby ste mohli používať nástroj prehliadača, prvá vec, ktorú musíte urobiť, je spustiť ho. Ako otvoriť konzolu v Opere?

Typy chýb

Weboví programátori si teraz nemusia lámať hlavu nad tým, aký problém v prehliadači vznikol. Pomocou "nástroja" môžete zobraziť všetky informácie o ňom.

Po otvorení konzoly sa zobrazí okno, v ktorom sa zobrazí analýza stránky. Okno, ktoré sa otvorí, má päť kariet: JS, HTTP, CSS, About, DOM.

Inštrukcia

Sekvenovanie:

• Otvorte prehliadač Opera a prejdite do ponuky umiestnenej v ľavom hornom rohu obrazovky.
• Hľadáme sekciu "Nástroje", kliknite na ňu.
• Vyberte „Rozšírené“ a otvorte „Konzola“.

Po dokončení týchto krokov sa v prehliadači zobrazí okno, kde sa otvoria všetky chyby, ktoré sa kedy vyskytli pri spúšťaní stránok.

Je ich viac rýchly spôsob spôsobiť chyby v Opere. Mali by ste stlačiť kombináciu klávesov "Ctrl + Shift + I". Otvorí sa okno, kde by ste mali kliknúť na sekciu "Konzola".