Kuinka avata konsoli sivulla. Avaa javascript-konsoli selaimessa. Kuinka avata konsoli Mozillassa. Skriptien asentaminen Opera Mobileen - tabletteihin ja puhelimiin

Nykyaikaiset selaimet tarjoavat sisäänrakennettuja kehitystyökaluja JavaScriptille ja muille tekniikoille. Näihin työkaluihin kuuluu konsoli, joka on samanlainen kuin shell-käyttöliittymä, sekä työkalut DOM-tarkastukseen, virheenkorjaukseen ja verkkotoiminnan analysointiin.

Konsolia voidaan käyttää tietojen kirjaamiseen osana JavaScript-kehitysprosessia. Konsolin avulla voit myös olla vuorovaikutuksessa verkkosivun kanssa suorittamalla JavaScript-lausekkeet sivun yhteydessä. Pohjimmiltaan konsoli tarjoaa mahdollisuuden kirjoittaa JavaScript-koodi ja tarvittaessa hallita sitä.

Tämä opetusohjelma opettaa sinulle JavaScript-konsolin käyttämisen selaimessa ja esittelee muita sisäänrakennettuja kehitystyökaluja, joista voi olla hyötyä.

Työskentely JavaScript-konsolin kanssa selaimessa

Useimmat nykyaikaiset verkkoselaimet, jotka tukevat HTML:ää ja XHTML:ää, tarjoavat oletusarvoisesti pääsyn kehittäjäkonsoliin, jossa voit työskennellä JavaScriptin kanssa terminaalin kuorimäisessä käyttöliittymässä. Tässä osiossa opit käyttämään konsolia Firefoxissa ja Chromessa.

Firefox selain

Näiden työkalujen avulla voit tarkastaa ja muokata DOM-elementtejä sekä etsiä niihin liittyviä HTML-objekteja tietty sivu. DOM voi osoittaa, onko tekstillä tai kuvalla ID-attribuutti, ja se voi määrittää tämän attribuutin arvon.

Lisäksi löydät sivupalkista tai DOM-paneelin alta CSS-tyylejä, joita käytetään HTML-dokumentti tai tyylilehti.

Voit muokata DOM:ia reaaliajassa kaksoisnapsauttamalla valittua elementtiä. Voit esimerkiksi yrittää kääntää tagia

V

.

Jälleen, päivityksen jälkeen sivu saa entisen ulkoasunsa.

Verkko-välilehti

Verkko-välilehden avulla voit seurata ja tallentaa verkkopyyntöjä. Tämä välilehti näyttää selaimen verkkopyynnöt, mukaan lukien pyynnöt ladata sivu, pyyntöjen käsittelyyn kulunut aika ja tiedot kustakin pyynnöstä. Näitä tietoja voidaan käyttää sivun lataustehokkuuden optimointiin ja virheenkorjauskyselyihin.

Voit käyttää Verkko-välilehteä JavaScript-konsolin kanssa. Voit esimerkiksi aloittaa sivun virheenkorjauksen konsolin avulla ja avata sitten Verkko-välilehden ja tarkastella verkon toimintaa lataamatta sivua uudelleen.

Responsiivinen muotoilu

Responsiivisella suunnittelulla varustetut verkkosivut mukauttavat nopeasti ulkoasunsa ja toiminnallisuutensa eri laitteisiin: matkapuhelimiin, tabletteihin, pöytätietokoneisiin ja kannettaviin tietokoneisiin. Näytön koko, pikselitiheys ja kosketusvaste ovat tekijöitä, jotka on otettava huomioon suunniteltaessa responsiivisia verkkosivustoja. On myös tärkeää ottaa huomioon responsiivisen suunnittelun periaatteet sen varmistamiseksi, että verkkosivusto on saavutettavissa ja toimiva riippumatta siitä, millä laitteilla se avataan.

Nykyaikaiset selaimet (mukaan lukien Firefox ja Chrome) tarjoavat malleja responsiivisten suunnitteluperiaatteiden noudattamiseen verkkosivustoja ja sovelluksia kehitettäessä. Nämä mallit jäljittelevät tietyn laitteen toimintaa, minkä ansiosta voit testata ja analysoida kaikkia sivuston toimintoja.

Saat lisätietoja tästä selaimen oppaista:

Responsiivinen suunnittelutila Firefoxissa

Johtopäätös

Tämä opas esittelee lyhyt arvostelu työskentelee JavaScript-konsolin kanssa nykyaikaiset verkkoselaimet. Löydät myös tietoa muista hyödyllisiä työkaluja kehitystä.

Käännös

Kuinka käyttää kehittäjäkonsolia kääntämiseen Google Chrome kuten tekstieditori? Minkä merkityksen monille jQuerysta tuttu kuvake saa? $ ? Kuinka voin näyttää joukon arvoja konsolissa muotoiltuna melko kunnolliseksi taulukoksi? Jos vastaukset näihin kysymyksiin eivät heti tule mieleen, välilehti Konsoli työkaluista Chromen kehittäjä ei ole vielä ilmestynyt sinulle kaikessa loistossaan.

Ensi silmäyksellä edessämme on täysin tavallinen JavaScript-konsoli, joka soveltuu vain palvelimen vastauslokien tai muuttujien arvojen näyttämiseen. Muuten, niin käytin sitä, kun aloitin ohjelmoinnin. Ajan myötä sain kuitenkin kokemusta, opin vähän lisää ja huomasin yllättäen, että Chrome-konsoli pystyy tekemään monia asioita, joista minulla ei ollut aavistustakaan. Haluan puhua tästä tänään. Kyllä, jos et lue nyt matkapuhelimella, voit kokeilla kaikkea tätä heti.

1. DOM-elementtien valinta

Jos olet perehtynyt jQueryyn, ei ole minun asiani kertoa sinulle sellaisten konstruktien tärkeydestä kuin $('.class') Ja $('id'). Niille, jotka eivät tiedä, voit valita DOM-elementtejä määrittämällä niille määritetyt luokat ja tunnisteet. Kehittäjäkonsolissa on samanlaiset toiminnot. Tässä "$":lla ei kuitenkaan ole mitään tekemistä jQueryn kanssa, vaikka se tekee olennaisesti saman asian. Tämä on toiminnon alias document.querySelector().

Lomakkeen komennot $('tagName'), $('.class'), $('#id') Ja $('.class #id') palauttaa ensimmäisen valitsinta vastaavan DOM-elementin. Lisäksi, jos jQuery on saatavilla asiakirjassa, tämä konsolitoiminto ohittaa sen "$".

Täällä on toinen malli: $$ . Sen käyttö näyttää $$('tagName') tai $$('.luokka'). Sen avulla voit valita kaikki valitsinta vastaavat DOM-elementit ja sijoittaa ne taulukkoon. Työskentely sen kanssa ei eroa muista matriiseista. Jos haluat valita tietyn elementin, voit käyttää sitä indeksin avulla.

Esimerkiksi komento $$('.className') tarjoaa meille joukon kaikkia sivuelementtejä, joiden luokan nimi on määritetty sitä kutsuttaessa. Joukkueet $$('.className') Ja $$('.className') antaa pääsyn tuloksena olevan taulukon ensimmäiseen ja toiseen elementtiin.

Kokeilu komentojen kanssa $ Ja $$

2. Muuta selain tekstieditoriksi

Oletko koskaan saanut itsesi ajattelemaan, että olisi mukavaa muokata virheenkorjauksen kohteena olevan verkkosivun tekstiä suoraan selaimessa? Jos kyllä, pidät alla esitetystä komennosta.

Document.body.contentEditable=true
Konsolissa suorituksen jälkeen selaimessa avattua dokumenttia voidaan muokata ilman hakua haluttu fragmentti HTML-koodissa.

3. Elementtiin sidottujen tapahtumakäsittelijöiden etsiminen

Viankorjauksen aikana saatat joutua etsimään elementteihin sidottuja tapahtumakäsittelijöitä. Tämä on erittäin helppo tehdä konsolin avulla. Sinun tarvitsee vain käyttää tätä komentoa:

GetEventListeners($('valitsin'))
Sen suorittamisen tuloksena tuotetaan joukko objekteja, jotka sisältävät luettelon tapahtumista, joihin elementti voi vastata.

Tapahtumanjärjestäjät

Löytääksesi ohjaajan tietylle tapahtumalle, voit käyttää seuraavaa rakennetta:

GetEventListeners($('valitsin')).eventName.listener
Tämä komento tulostaa tapahtumakäsittelijän toimintokoodin. Tässä tapahtuman nimi on taulukko, joka sisältää kaikki tapahtumat tietty tyyppi. Käytännössä se voi näyttää esimerkiksi tältä:

GetEventListeners($('#firstName')).click.listener
Tämän seurauksena saamme tapahtumaan liittyvän toiminnon koodin klikkaus elementti tunnuksella etunimi.

4. Tapahtumavalvonta

Jos haluat tarkkailla tapahtumien esiintymistä tietty elementti DOM, konsoli auttaa tässä. Tässä on joitain komentoja, joilla voit seurata tapahtumia.

Tiimi monitorEvents($('valitsin')) voit järjestää kaikkien tapahtumien seurannan, jotka liittyvät valitsinta vastaavaan elementtiin. Kun tapahtuma tapahtuu, konsoliin tehdään merkintä. Esimerkiksi komento monitorEvents($('#firstName')) voit kirjata kaikki tapahtumat, jotka liittyvät elementtiin, jonka tunniste on etunimi.
Tiimi monitorEvents($('valitsin'),'tapahtumannimi') samanlainen kuin edellinen, mutta se on suunnattu tiettyyn tapahtumaan. Tässä elementin valitsimen lisäksi funktiolle välitetään myös tapahtuman nimi. Tämän komennon avulla voit näyttää konsolille tiedot yhden tapahtuman esiintymisestä. Esimerkiksi komento monitorEvents($('#firstName'),'click') näyttää tiedot vain tapahtumasta klikkaus elementti tunnuksella etunimi.
Tiimi monitorEvents($('valitsija'),['tapahtumannimi1','tapahtumannimi3",….]) voit seurata useita valittuja tapahtumia. Tässä funktiolle välitetään merkkijonotaulukko, joka sisältää tapahtumien nimet. Esimerkiksi tämä komento: monitorEvents($('#firstName'),['click', 'focus']) tulostaa tapahtumatiedot konsoliin klikkaus Ja keskittyä elementille, jolla on id etunimi.
Tiimi unmonitorEvents($('valitsin')) voit lopettaa tapahtumien seurannan ja kirjaamisen konsolissa.

5. Koodikappaleen suoritusajan mittaaminen

Katselutoiminto on käytettävissä Chrome-konsolissa console.time('labelName'), joka ottaa tunnisteen argumenttina ja käynnistää ajastimen. Vielä yksi toiminto console.timeEnd('labelName'), pysäyttää ajastimen, jolle sille välitetty tarra on määritetty. Tässä on esimerkki näiden toimintojen käytöstä:

Console.time("myTime"); //Käynnistää ajastimen, jonka nimi on myTime console.timeEnd("myTime"); //Pysäyttää myTime-tunnisteen //Output: myTime:123.00 ms
Yllä olevan esimerkin avulla voit selvittää ajastimen käynnistämisen ja pysäyttämisen välisen ajan. Voit tehdä saman JavaScript-ohjelman sisällä ja löytää koodinpalan suoritusajan.

Oletetaan, että minun on selvitettävä silmukan kesto. Voit tehdä sen näin:

Console.time("myTime"); // Käynnistää ajastimen, jonka nimi on myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Muuttujien arvojen näyttäminen taulukoiden muodossa

Oletetaan, että meillä on joukko objekteja, kuten tämä:

Muutt myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]
Jos näytät sen konsolissa, se tulee näkyviin hierarkinen rakenne itse asiassa joukon esineitä muodossa. Tämä - hyödyllinen tilaisuus, rakenteen haaroja voi laajentaa tarkastelemalla objektien sisältöä. Tällä lähestymistavalla on kuitenkin vaikea ymmärtää, miten samankaltaisten elementtien ominaisuudet liittyvät toisiinsa. Jotta tällaisten tietojen kanssa työskentely olisi mukavampaa, ne voidaan muuntaa taulukkonäkymä. Voit tehdä tämän käyttämällä seuraavaa komentoa:

Console.table(muuttujanNimi)
Sen avulla voit näyttää muuttujan ja kaikki sen ominaisuudet taulukon muodossa. Tältä se näyttää.

Objektijoukon näyttäminen taulukona

7. Tarkastele elementtikoodia

Pääset nopeasti elementtikoodiin konsolista seuraavilla komennoilla:

Tiimi tarkasta($('valitsin')) voit avata paneelin valitsinta vastaavan elementin koodin Elementit työkaluja Googlen kehittäjä Kromi. Esimerkiksi komento tarkastaa($('#etunimi')) avulla voit tarkastella elementin koodia tunnisteella etunimi. Tiimi tarkastaa($$('a')) avaa koodin neljännelle linkille, joka on DOM:ssa.
Lomakkeen komennot $0 , $1 , $2 Voit siirtyä nopeasti viimeksi katsottuihin kohteisiin. Esimerkiksi, $0 avaa viimeksi katsotun elementin koodin ja niin edelleen.

8. Elementin ominaisuuksien luettelon näyttäminen

Jos haluat tarkastella elementin ominaisuuksien luetteloa, konsoli auttaa myös tässä. Tässä käytetään seuraavaa komentoa:

Dir($('valitsin'))
Se palauttaa objektin, joka sisältää tiettyyn DOM-elementtiin liittyviä ominaisuuksia. Kuten muissakin vastaavissa tapauksissa, tämän objektin sisältöä voidaan tutkia tarkastelemalla sen puurakennetta.

9. Viimeisimmän vastaanotetun tuloksen kutsuminen

Konsolia voidaan käyttää laskimena, kuten kaikki varmaan tietävät. Mutta harvat tietävät, että siinä on sisäänrakennetut työkalut, joiden avulla voit käyttää aikaisempien laskelmien tuloksia komentoissa. Suunnittelultaan $_ voit hakea edellisen lausekkeen tuloksen muistista. Tältä se näyttää:

2+3+4 9 //- Summauksen tulos on 9 $_ 9 // Viimeinen saatu tulos näytetään $_ * $_ 81 // Koska viimeinen tulos on 9, saadaan 81 Math.sqrt($ _) 9 // Neliöjuuri viimeisestä tuloksesta, joka oli 81 $_ 9 // Saamme jälleen 9 - tulos edellinen laskelma

10. Konsolin ja muistin puhdistaminen

Jos sinun on tyhjennettävä konsoli ja muisti, käytä tätä yksinkertaista komentoa:

Asia selvä()
Enter-näppäimen painamisen jälkeen puhdas konsoli on valmis uusiin kokeiluihin.
Siinä kaikki.

11, 12, 13, 14…

Suoraan sanottuna tässä ei vielä kaikki. Näytin niistä vain muutaman ei-ilmeisiä mahdollisuuksia Google Chrome -konsoli. Itse asiassa he

Google Chrome,

HTML,

JavaScript,

Verkkosivujen kehitys

Käännös

Miten Google Chromesta tulee eräänlainen tekstieditori kehittäjäkonsolin avulla? Minkä merkityksen monille jQuerysta tuttu kuvake saa? $ ? Kuinka voin näyttää joukon arvoja konsolissa muotoiltuna melko kunnolliseksi taulukoksi? Jos vastaukset näihin kysymyksiin eivät heti tule mieleen, välilehti Konsoli Chromen kehittäjätyökalut eivät ole vielä paljastaneet itseään sinulle kaikessa loistossaan.

1. DOM-elementtien valinta

Kokeilu komentojen kanssa $ Ja $$

2. Muuta selain tekstieditoriksi

Oletko koskaan saanut itsesi ajattelemaan, että olisi mukavaa muokata virheenkorjauksen kohteena olevan verkkosivun tekstiä suoraan selaimessa? Jos kyllä, pidät alla esitetystä komennosta.

Document.body.contentEditable=true
Konsolissa suorituksen jälkeen selaimessa avattua dokumenttia voidaan muokata ilman, että haluttua fragmenttia tarvitsee etsiä HTML-koodista.

3. Elementtiin sidottujen tapahtumakäsittelijöiden etsiminen

Viankorjauksen aikana saatat joutua etsimään elementteihin sidottuja tapahtumakäsittelijöitä. Tämä on erittäin helppo tehdä konsolin avulla. Sinun tarvitsee vain käyttää tätä komentoa:

GetEventListeners($('valitsin'))
Sen suorittamisen tuloksena tuotetaan joukko objekteja, jotka sisältävät luettelon tapahtumista, joihin elementti voi vastata.

Tapahtumanjärjestäjät

Löytääksesi ohjaajan tietylle tapahtumalle, voit käyttää seuraavaa rakennetta:

GetEventListeners($('valitsin')).eventName.listener
Tämä komento tulostaa tapahtumakäsittelijän toimintokoodin. Tässä tapahtuman nimi on taulukko, joka sisältää kaikki tietyn tyyppiset tapahtumat. Käytännössä se voi näyttää esimerkiksi tältä:

GetEventListeners($('#firstName')).click.listener
Tämän seurauksena saamme tapahtumaan liittyvän toiminnon koodin klikkaus elementti tunnuksella etunimi.

4. Tapahtumavalvonta

Jos haluat tarkkailla tiettyyn DOM-elementtiin sidottujen tapahtumien esiintymistä, konsoli voi auttaa tässä. Tässä on joitain komentoja, joilla voit seurata tapahtumia.

Tiimi monitorEvents($('valitsin')) voit järjestää kaikkien tapahtumien seurannan, jotka liittyvät valitsinta vastaavaan elementtiin. Kun tapahtuma tapahtuu, konsoliin tehdään merkintä. Esimerkiksi komento monitorEvents($('#firstName')) voit kirjata kaikki tapahtumat, jotka liittyvät elementtiin, jonka tunniste on etunimi.
Tiimi monitorEvents($('valitsin'),'tapahtumannimi') samanlainen kuin edellinen, mutta se on suunnattu tiettyyn tapahtumaan. Tässä elementin valitsimen lisäksi funktiolle välitetään myös tapahtuman nimi. Tämän komennon avulla voit näyttää konsolille tiedot yhden tapahtuman esiintymisestä. Esimerkiksi komento monitorEvents($('#firstName'),'click') näyttää tiedot vain tapahtumasta klikkaus elementti tunnuksella etunimi.
Tiimi monitorEvents($('valitsija'),['tapahtumannimi1','tapahtumannimi3",….]) voit seurata useita valittuja tapahtumia. Tässä funktiolle välitetään merkkijonotaulukko, joka sisältää tapahtumien nimet. Esimerkiksi tämä komento: monitorEvents($('#firstName'),['click', 'focus']) tulostaa tapahtumatiedot konsoliin klikkaus Ja keskittyä elementille, jolla on id etunimi.
Tiimi unmonitorEvents($('valitsin')) voit lopettaa tapahtumien seurannan ja kirjaamisen konsolissa.

5. Koodikappaleen suoritusajan mittaaminen

Oletetaan, että minun on selvitettävä silmukan kesto. Voit tehdä sen näin:

6. Muuttujien arvojen näyttäminen taulukoiden muodossa

Oletetaan, että meillä on joukko objekteja, kuten tämä:

Muutt myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]
Jos näytät sen konsolissa, saat hierarkkisen rakenteen itse asiassa objektijoukon muodossa. Tämä on hyödyllinen ominaisuus, jota voidaan laajentaa tarkastelemalla objektien sisältöä. Tällä lähestymistavalla on kuitenkin vaikea ymmärtää, miten samankaltaisten elementtien ominaisuudet liittyvät toisiinsa. Tällaisten tietojen käsittelyn helpottamiseksi ne voidaan muuntaa taulukkomuotoon. Voit tehdä tämän käyttämällä seuraavaa komentoa:

Console.table(muuttujanNimi)
Sen avulla voit näyttää muuttujan ja kaikki sen ominaisuudet taulukon muodossa. Tältä se näyttää.

Objektijoukon näyttäminen taulukona

7. Tarkastele elementtikoodia

Pääset nopeasti elementtikoodiin konsolista seuraavilla komennoilla:

Tiimi tarkasta($('valitsin')) voit avata paneelin valitsinta vastaavan elementin koodin Elementit Google Chrome -kehittäjätyökalut. Esimerkiksi komento tarkastaa($('#etunimi')) avulla voit tarkastella elementin koodia tunnisteella etunimi. Tiimi tarkastaa($$('a')) avaa koodin neljännelle linkille, joka on DOM:ssa.
Lomakkeen komennot $0 , $1 , $2 Voit siirtyä nopeasti viimeksi katsottuihin kohteisiin. Esimerkiksi, $0 avaa viimeksi katsotun elementin koodin ja niin edelleen.

8. Elementin ominaisuuksien luettelon näyttäminen

Jos haluat tarkastella elementin ominaisuuksien luetteloa, konsoli auttaa myös tässä. Tässä käytetään seuraavaa komentoa:

9. Viimeisimmän vastaanotetun tuloksen kutsuminen

10. Konsolin ja muistin puhdistaminen

Jos sinun on tyhjennettävä konsoli ja muisti, käytä tätä yksinkertaista komentoa:

Asia selvä()
Enter-näppäimen painamisen jälkeen puhdas konsoli on valmis uusiin kokeiluihin.
Siinä kaikki.

11, 12, 13, 14…

Suoraan sanottuna tässä ei vielä kaikki. Näytin vain osan Google Chrome -konsolin ei-ilmeisistä ominaisuuksista. Itse asiassa he

Command API Chrome-langat DevTools sisältää suuri määrä käteviä toimintoja suorittaa yksinkertaisia tehtäviä: valita ja tarkistaa DOM-elementtejä, näyttää tietoja luettavassa muodossa, käytä ja tarkasta profiloijaa ja valvontaa DOM-tapahtumat.

Huomautus: tämä API on saatavilla vain konsolin sisällä. Hanki pääsy komentorivi Sivun skriptien API ei ole mahdollista.

$_

$_ palauttaa viimeisen suoritetun lausekkeen arvon.

Alla oleva esimerkki laskee yksinkertaisen lausekkeen (2 + 2). Sitten $_ suoritetaan ja sille annetaan sama arvo:

Tässä esimerkissä suoritettu lauseke sisälsi joukon nimiä. $_.length:n suorittaminen antaa taulukon pituuden, ja itse $_ lauseke ottaa viimeksi suoritetun lausekkeen arvon, joka on 4:

$0 – $4

Komennot $0 , $1 , $2 , $3 ja $4 toimivat viittauksina viiteen viimeiseen DOM-elementtiin, joita tarkasteltiin Elementit-paneelissa, tai viiteen viimeiseen JS-objektiin kasosta, jotka on valittu Profiilit-paneelissa. $0 palauttaa viimeksi valitun elementin tai objektin, $1 palauttaa sitä edeltävän ja niin edelleen.

Alla olevassa esimerkissä luokan median elementti valitaan Elementit-paneelista. Konsolissa $0 sai saman arvon:

Alla olevassa kuvassa on valittu toinen elementti samalla sivulla. $0 viittaa nyt tähän elementtiin ja $1 edelliseen:

$(valitsin)

$(selector) palauttaa viittauksen ensimmäiseen DOM-elementtiin määritetyllä CSS-valitsimella. Tämä funktio on lyhenne document.querySelector()-funktiosta.

Klikkaus oikealla painikkeella vie hiiren osoitin tuloksen päälle ja valitse "Näytä elementit-paneelissa" etsiäksesi elementtiä DOM:sta tai "Scroll in to View" nähdäksesi sen sivulla.

Huomautus: Jos käytät kirjastoja, kuten jQuery, jotka käyttävät $-symbolia, käytetään kyseisen kirjaston toimintoja.

$$(valitsin)

$$(valitsin) palauttaa joukon elementtejä, jotka sisältävät määritetyn valitsimen. Tämä komento vastaa kutsumista document.querySelectorAll() .

Seuraava esimerkki käyttää $$()-funktiota taulukon luomiseen kaikista elementeistä asiakirjassa ja palauttaa kunkin elementin src-ominaisuuden:

Muuttuva kuvat = $$("img"); for (jokainen kuvissa) ( console.log(images.src); )

Huomautus: Siirry konsolissa painamalla Shift + Enter uusi rivi ilman komentosarjaa.

$x(polku)

$x(polku) palauttaa joukon elementtejä, jotka täyttävät tämä ilmaus XPath.

Tämä esimerkki palauttaa kaikki elementit

$x("//p")

Ja tämä on kaikki elementit

Sisältää elementin :

$x("//p[a]")

dirxml(objekti)

dirxml(object) tulostaa XML-esityksen määritetty objekti. Tämä menetelmä vastaa menetelmää console.dirxml().

tarkastaa (objekti/toiminto)

inspect(objekti/funktio) avautuu ja valitsee määritetty elementti tai objekti vastaavassa paneelissa: Elementit tai Profiilit.

Tämä esimerkki avaa document.body Elements-paneelissa:

Tarkista(asiakirja.runko);

Kun ohitat funktion, se avaa asiakirjan Lähteet-paneelissa.

getEventListeners (objekti)

getEventListeners(object) palauttaa kaikki määritettyyn objektiin sidotut tapahtumaseuraajat. Palautusarvo on objekti, joka sisältää taulukoita kaikille löydetyille tapahtumatyypeille (esimerkiksi "click" tai "keydown"). Kunkin taulukon elementit ovat objekteja, jotka kuvaavat kunkin tyypin kuuntelijaa. Esimerkiksi seuraava esimerkki tulostaa kaikki dokumenttiobjektin tapahtumaseuraajat:

GetEventListeners(asiakirja);

Jos objektiin on liitetty useampi kuin yksi kuuntelija, matriisi sisältää elementtejä jokaiselle niistä. Tässä on esimerkiksi kaksi "mousedown" -tapahtuman kuuntelijaa, jotka on liitetty #scrollingList-elementtiin:

Voit tarkastella kunkin kohteen ominaisuuksia:

avaimet (objekti)

keys(object) palauttaa joukon objektin ominaisuuksien nimiä. Saadaksesi ominaisuuksien arvon, käytä arvot() .

Oletetaan, että sovelluksesi ilmoittaa seuraavan objektin:

Var player1 = ( "nimi": "Ted", "taso": 42 )

Anna pelaaja1 ilmoittaa globaalisti, jolloin avaimet (pelaaja1) ja arvot (pelaaja1) tulostavat seuraavan:

monitori (toiminto)

Kun soitat määritetty toiminto Konsolissa näkyy viesti, jossa kerrotaan, että tämä funktio on kutsuttu asianmukaisin argumentein.

Funktio summa(x, y) ( paluu x + y; ) monitor(sum);

Peruuta käyttämällä unmonitor(function) -toimintoa.

valvoTapahtumia (objekti, )

Kun jokin määritetyistä tapahtumista tapahtuu määritetyssä objektissa, Tapahtuma-objekti kirjoitetaan konsoliin. Voit määrittää tietyn tapahtuman, joukon tapahtumia tai yhden tapahtuman "tyypeistä". Esimerkkejä alla.

Seuraava kysely tarkkailee kaikkia kokomuutoksia ikkunaobjekti.

MonitorEvents(ikkuna, "muuta kokoa");

Tämä kysely tarkkailee kaikkia "muuta kokoa" ja "vieritä" tapahtumia ikkunaobjektissa:

MonitorEvents(ikkuna, ["muuta kokoa", "vieritä"])

Voit myös määrittää yhden käytettävissä olevista tapahtuma "tyypeistä" alla olevasta taulukosta:

Tämä kysely valvoo esimerkiksi kaikkia "avain"-tyypin tapahtumia valitussa elementissä Elementit-paneelissa:

MonitorEvents($0, "avain");

Tässä on esimerkki tulosteesta merkkien kirjoittamisen jälkeen tekstikenttään:

profiili() ja profileEnd()

Profiloinnin suorittaminen:

Profiili ("Oma profiili")

Saada valmiiksi:

ProfileEnd("Oma profiili")

Profiilit voidaan myös sisäkkäin:

Profiili ("A"); profiili ("B"); profileEnd("A"); profileEnd("B");

Tulos:

Huomautus: Profilers voivat toimia samanaikaisesti, eikä niitä tarvitse sulkea luomisjärjestyksessä.

taulukko (data, )

Tulosta objektitiedot taulukkomuodossa. Jos haluat esimerkiksi näyttää nimiluettelon, sinun on toimittava seuraavasti:

Muuttujien nimet = ( 0: ( etunimi: "John", sukunimi: "Smith" ), 1: ( etunimi: "Jane", sukunimi: "Doe" ) ); taulukko(nimet);

virheenkorjaus (funktio)

undebug(function) lopettaa määritetyn funktion virheenkorjauksen.

Virheenkorjaus(getData);

unmonitor (toiminto)

unmonitor(function) lopettaa määritetyn toiminnon valvonnan.

Unmonitor(getData);

unmonitorEvents(objekti, )

unmonitorEvents(object, ) lopettaa määritetyn objektin ja tapahtumien seurannan:

UnmonitorEvents(ikkuna);

Voit myös lopettaa yksittäisten tapahtumien seurannan:

MonitorEvents($0, "hiiri"); unmonitorEvents($0, "mousemove");

arvot (objekti)

Values(object) palauttaa taulukon, joka sisältää määritetyn objektin kaikkien ominaisuuksien arvot.

» » »

Selaimen virhekonsoli

1. Valitse valikkoriviltä "Tools" → "Error Console" (Ctrl+Shift+J).

2. Siirry näkyviin tulevassa ikkunassa "Virheet"-välilehteen.

3. Napsauta hiiren kakkospainikkeella virhetekstiä kontekstivalikko Valitse "Kopioi" ja liitä teksti sähköpostiin tai keskustelupalstalle.

Avaa virheenkorjaus napsauttamalla valikkokuvaketta → " Lisätyökalut» → "Kehittäjätyökalut" (Ctrl+Shift+I).

Skriptien asentaminen älypuhelimiin Dolphin-selaimessa

Sen pitäisi tarjota viitteitä työkaluihin, apuvälineisiin ja temppuihin, jotka helpottavat koodin virheenkorjausta. Tämä on ensimmäinen paikka, kun suoritat Web-sivun virheenkorjausta, avaa verkkokonsoli käyttämällä "Web Developer" -valikon "Web Console" -vaihtoehtoa. Käytä sen sijaan verkko- tai selainkonsolia. Huomaa, että sinun on hyväksyttävä saapuva yhteys.

Selaimen työkalupalkki näyttää sitten käytettävissä olevat vianetsintätyökalut. Näiden työkalujen käyttö on samanlaista kuin sisäänrakennettujen työkalujen käyttö. Voit nollata selainkonsolin muuttujat lisäosakoodista lisäämällä tämän rivin tuodaksesi konsoliapuohjelman.

Kopioi tai ota kuvakaappaus virhetekstistä.

1. Jotta pääset Opera-selaimen virhekonsoliin, sinun on ensin avattava työkalupalkki. Voit tehdä tämän napsauttamalla punaista "Valikko" -painiketta vasemmalla yläkulma selain ja valitse näkyviin tulevasta luettelosta "Näytä valikko".

Virheenkorjauskoontiversioissa tämä poistaa myös pinon jäljen konsoliin, vaikka debuggeri ei olisi käynnissä. Voit kirjoittaa, suorittaa ja analysoida verkkosivun kanssa vuorovaikutuksessa olevan koodin tuloksia. Reboot and Run -vaihtoehto on käytettävissä vain Suorita-valikossa. Se lataa ensin sivun uudelleen ja suorittaa sitten koodin, kun sivun lataustapahtuma tapahtuu. Tämä on hyödyllistä ajaessasi koodia koskemattomassa ympäristössä.

Kun olet tehnyt tämän, valikossa " Ympäristö On "Selain"-vaihtoehto: kun olet valinnut tämän laajuuden, laajuutesi koskee koko selainta, ei vain sivun sisältöä, kuten näet joidenkin globaalien muuttujien tarkastelusta. Tässä taulukossa luetellaan editorin oletuspikakuvakkeet.

2. Selaimen yläosaan ilmestyy työkalupalkki, jossa sinun on valittava "Työkalut" → "Lisäasetukset" → "Virhekonsoli".

3. Avautuvassa ikkunassa näkyvät kaikki tiedot sivujen lataamiseen liittyvistä ongelmista. Jos haluat valita vain virheet yleisestä luettelosta, napsauta sanaa "Viestit" ikkunan alareunassa ja valitse "Virheet" avattavasta luettelosta.

Jos teet tämän, valittuja sidoksia käytetään kaikissa editoria käyttävissä kehittäjätyökaluissa lähdekoodi. Sinun on avattava editori uudelleen, jotta muutokset tulevat voimaan.

Tukitietojen tarjoaminen. Joskus meidän on pyydettävä kopio näistä tiedoista, jotta voimme tarkistaa ne. Voit tehdä tämän siirtymällä seuraavaan. Samankaltaisen näkymän saat katsomalla Verkko-välilehteä yllä luetelluissa asiaankuuluvissa selaimissa.

4. Valitse virheteksti - napsauta virheen ensimmäistä riviä hiiren vasemmalla painikkeella, pidä alhaalla Vaihtopainike, ja napsauta lopputulos virheitä. Kopioi seuraavaksi teksti ja liitä se sähköpostiin tai keskusteluryhmään.

Debuggerin käynnistäminen Safarissa on jaettu kahteen vaiheeseen: kehitysvalikon käyttöönotto ja verkkotarkistusohjelman käynnistäminen.

Analyysivaiheet ovat hyvin suoria, kun seuraava määritelmä on ymmärretty selvästi. Etsi viivevastauspyyntö. Selvitä, mikä on pisin odotusaika ja kuinka kauan hän odotti. Tarkista, mikä on viivästyksen pääasiallinen syy. Pyydä apua tukitiimiltä saatujen tietojen kanssa, jos palvelimen tunnistaminen vaikuttaa viiveeseen. Kerättyjen tietojen pitäisi olla riittäviä tämän havainnon osoittamiseksi.

Tavallisissa tapauksissa, joissa sivu ei hahmonnu oikein, syy tulee kirjata Developer Toolsin Konsoli-välilehdelle. Jos syytä ei kirjata lokiin, yritä poistaa selaimen välimuisti käytöstä valitsemalla "Poista välimuisti käytöstä" -valintaruutu. Tämä pakottaa selaimen renderöimään sivun alusta alkaen välimuistitietojen käyttämisen sijaan. Ongelmien karttoittaminen. . Alla on esimerkkejä.

Kehittäjävalikon käyttöönotto

1. Napsauta selaimen oikeassa yläkulmassa olevaa rataskuvaketta ja valitse "Asetukset" (Ctrl+b).

2. Siirry "Lisäosat"-välilehteen ja valitse "Näytä valikkopalkissa kehitysvalikko" -kohdan vieressä oleva valintaruutu.

Kun olet saavuttanut johdonmukaisen toiminnan, anna nämä tiedot tukitiimille sekä toimenpiteet, joita tukitiimi voi työstää mahdollinen syy havainnot. Jos valitset Konsoli-, Komentosarja- tai Verkko-paneelit, näet, että välilehti on harmaana ja paneeli on poistettu käytöstä.

Mene ulos hengittämään

Jokaisella paneelin välilehdellä on pieni valikkosäädin paneelin käyttöön ottamiseksi. Harjoittele tämän näppäimen painamista, kun on virheenkorjauksen aika. Haluat todennäköisesti ottaa konsolin käyttöön virheiden etsimisen. Ota käyttöön yksi sivusto kerrallaan tai ota konsoli käyttöön kaikille sivustoille ja poista se sitten valikoivasti käytöstä sivustoilla, kuten sähköpostiosoitteellasi. Voit myös ajaa näiden paneelien ollessa täysin käytössä. Käytämme tässä artikkelissa uusimpia versioita. Alla on koodinpätkä -.

3. Sulje Lisäosat-välilehti.

Web Inspectorin käynnistäminen

1. Valitse valikosta kohta "Kehitys" → "Näytä verkkotarkistus" (Ctrl+Alt+w).

2. Valitse "Skriptit"-välilehti ja napsauta "Ota virheenkorjaus käyttöön" -painiketta.

Sen sijaan näet alla olevan virheilmoituksen. Katsotaan kuinka tämä voidaan tehdä. Tämä voidaan tehdä kahdella tavalla, kuten alla olevassa kuvassa näkyy. Tämä päättää latausprosessin. Katsotaan nyt, kuinka voit käyttää sitä projektissasi. Voit määrittää tämän ohjaimen projektissasi kahdella tavalla. Voit käyttää mitä tahansa näistä menetelmistä.

Tällä menetelmällä sinun on lisättävä ylimääräinen rivi koodi testiesimerkiksi. Käytä tätä menetelmää suorittamalla seuraavat toimet. Tärkeä huomautus 1: Alla olevan koodin kansiopoluissa olemme käyttäneet kaksoiskenoviivaa. Siksi sinun on käytettävä kaksoiskenoviivaa aina, kun lisäät kansiopolun. Suorita tämä koodi varmistaaksesi, että kaikki toimii hyvin.

3. Oikeassa alakulmassa oleva kuvake osoittaa virheiden määrän. Napsauttamalla kuvaketta avaat konsolin, jossa on tietoja tapahtuneista virheistä. Korosta konsolissa koko virheteksti(tämä tulee tehdä hiiren vasemmalla painikkeella alhaalta ylös). Kopioi ja liitä teksti sähköpostiin tai keskustelupalstalle napsauttamalla hiiren kakkospainikkeella taustatekstiä (ei linkkejä!).

Tapa 2: Aseta ominaisuus ympäristömuuttujiin

Avaa Lisäasetukset-välilehti Järjestelmän ominaisuudet -ikkunassa alla olevan kuvan mukaisesti. Testikoodisi näyttää tältä. Suorita koodi varmistaaksesi, että se toimii hyvin. Siirry Lisäasetukset-paneeliin ja ota käyttöön Näytä kehitysvalikko valikkorivillä -vaihtoehto. Avaa konsolipaneeli seuraavasti:

Avaa verkkokonsoli seuraavasti: Verkkokonsolin avaaminen -osiossa. Kyselyt näkyvät Verkko-paneelin kyselytaulukossa. Verkkomonitori saadakseen lisäinformaatio. Avaa sitten Verkko-paneeli. "Verkko"-osiossa. Lue lisää.

1. Virheen sattuessa selaimen vasempaan alakulmaan ilmestyy varoituskuvake tai sama varoitus näkyy avautuvassa ikkunassa.

2. Valitse valikkokohta "Työkalut" → "Kehittäjätyökalut" (F12) ja siirry "Skripti"-välilehteen.

3. Napsauta "Skripti"-välilehdellä "Aloita virheenkorjaus" -painiketta.

Vuorovaikutus palvelutyöntekijöiden kanssa selaimessa

Voit tarkistaa lisäyksen etusivulle tästä paneelista. Sinun pitäisi nähdä viesti "Lisää tämä sivusto hyllyllesi". Jos palvelutyöntekijä on asetettu tällä hetkellä avoimelle sivulle, näet sen tässä paneelissa. Avaamiseen on useita tapoja: virheenkorjaus.

Pakota huoltotyöntekijän päivitys

Jos haluat pakottaa palvelutyöntekijän päivittämään automaattisesti, kun sivu ladataan uudelleen, valitse Päivitä latauksen yhteydessä -valintaruutu. Jos haluat olla täysin varma, että päivitystyöntekijä päivitetään, voit siirtyä Debug-sivulle ja päivittää sovelluksen selaimessasi. Uusi Service Worker asennetaan sivun uudelleenlatauksen yhteydessä.

4. Kaikki virheet näkyvät konsoliikkunan oikealla puolella. Valitse ja kopioi virheteksti ja liitä se sähköpostiin tai keskusteluryhmään.

Mozilla Firefox on kätevä ja mukava selain. Mutta siitä voi tehdä hieman kätevämpää. Kun käynnistämme selaimen, voimme varmistaa, että vain tarvitsemamme välilehdet ja ikkunat avataan. Voimme myös nopeuttaa ensimmäisen Firefox-käynnistyksen lataamista. Miten? Puhumme tästä tässä artikkelissa.

Tarkistetaan ilmoituksia

Muista käyttää uusi kohde tilaukset, jos poistat työntekijän rekisteröinnin. Aseta ilmoitusten käyttöoikeustila avattavasta Ilmoitukset-valikosta. Aseta ilmoitusten käyttöoikeustila avattavasta Hanki ilmoituksia -valikosta.

Tarkista huoltohenkilön välimuisti

Ja valitse Sovellus-paneeli. Avaa Tallennus-paneeli ja laajenna Välimuisti. Valitse välimuisti nähdäksesi sen sisällön.

Tyhjennä palvelutyöntekijöiden välimuisti

Laajenna Sovellus-paneelissa Välimuisti. Laajenna Tallennus-paneelissa Välimuisti ja sen toimialue.

Asetukset selaimen sisällä

Voit valita käynnistyksen yhteydessä avautuvat sivut seuraavasti:

Se on erittäin mukava. Jos esimerkiksi haluat työskennellä usealla välilehdellä kerralla, asettamalla "näytä viime kerralla avatut ikkunat" -vaihtoehdon sinun ei tarvitse kirjoittaa verkkosivustojen osoitteita uudelleen. Firefox muistaa ikkunat, kun se suljetaan.

Kuinka avata konsoli Chrome-selaimessa

Useimmissa verkkoselaimissa on sisäänrakennettu virhekonsoli tai kehittäjätyökalut, jotka on ehkä aktivoitava ennen käyttöä. Alla on lueteltu joitain eniten suositut selaimet ja tapoja päästä käsiksi työkaluihin. Kehittäjätyökaluja voi käyttää useilla tavoilla.

On suositeltavaa käyttää jotakin muuta selainta virheiden etsimiseen. Se on kuitenkin edelleen hyödyllinen muihin diagnostisiin syihin. Osoittaakseen, että konsoli toimii täällä, on kolme linkkiä, joista jokaisessa on virhe.

Tiedostopolussa käytetään kenoviivaa kenoviivan sijaan.
Error_3 on yksinkertainen virhe isoilla kirjaimilla.

Kun Error Console avautuu ensimmäisen kerran, varmista, että Konsoli ja Kaikki on valittu konsolin valikkoriviltä. On myös suositeltavaa päivittää sivu.

Jos tarkastelet ensin sähköpostiviestejä, esimerkiksi Mail.ru:ssa tai Yandex.ru:ssa, voit avata ne selaimen avaamisen yhteydessä. Tee tämä valitsemalla "Näytä kotisivu" -vaihtoehto ja kirjoittamalla osoite kenttään. Esimerkiksi www.yandex.ru.

Neuvoja! "Näytä tyhjä sivu" -vaihtoehdon valitseminen on hankalaa ja liian banaalia. Joka kerta sinun on syötettävä haluamasi sivuston osoite tai etsittävä kirjanmerkki.
Mutta mikä on välimuistisi, ja miksi sinun pitäisi tyhjentää se?
Paikalliset hotspotit eivät erota kirjainkokoa testattaessa, vaikka ne ajettaisiin verkkopalvelimen kautta, vaan niiden lataamisen jälkeen. Asiakaspalvelumme käyttää myös tätä kykyä tarjota paras suoritus. Ohjaamme sinut aiheeseen liittyviin suosittuihin opetusohjelmiin, katsomme muutamia laajennuksia prosessin nopeuttamiseksi ja joitain vaihtoehtoja sen tekemiseen kehittäjäkonsolin kautta. Vaikka yllä olevissa linkeissä kuvattuja menetelmiä käytetään yleisesti, laajennuksen lisääminen voi tehdä prosessista nopean ja helpon.

Valintaikkunaan voit kirjoittaa kotisivun osoitteen. Tässä tapauksessa voit valita joko jo avoimen välilehden tai jonkin tallennetuista kirjanmerkeistä. Alla on kaksi painiketta tätä varten.

Konfigurointi Prefetch-ohjelman avulla

Jos selain avautuu liian hitaasti, voit nopeuttaa asetuksia käynnistä Firefox(lue Firefoxin nopeuttamisesta). Tätä varten käännymme Prefetch-ohjelmaan. Se on jo sisäänrakennettu Windowsiin. Sen avulla muokkaamme joitain pikakuvakeparametreja.

Tämä laajennus tallentaa tietosi ja kirjautumistietosi kaikilta verkkosivustoilta, joille olet kirjautunut. Tämä tarkoittaa, että välimuistin tyhjentämisen jälkeen sinun ei tarvitse kirjautua uudelleen jokaiselle verkkosivustolle. Voit optimoida tämän laajennuksen asettamalla toimintojen pikanäppäimiä. Sivun alareunassa näet "Pikanäppäimet" -vaihtoehdon.

Tämä prosessi on yleensä nopeampi kuin selaimen suosittelema prosessi, vaikka se ei useinkaan ole yhtä nopeaa kuin laajennusten käyttäminen.

Tämä näkyy yleensä selainikkunan alaosassa.
Tämä tyhjentää välimuistisi.

Valitse pääikkunassa Asetukset.

Tärkeä! Ennen kuin alat työskennellä tämän ohjelman kanssa, sinun on suljettava selain. Koska sillä on oma sovellus ja lisäosien hallinta, ja niin kauan kuin ne ovat käynnissä, muutoksia ei tapahdu.

Seuraavien vaiheiden avulla voit muuttaa monia ominaisuuksia:

Pikakuvakkeen löytäminen Mozilla Firefox. Napsauta sitä hiiren kakkospainikkeella. Näyttöön tulee valikko, josta löydämme Ominaisuudet-vaihtoehdon ja napsautamme sitä.
Etsi avautuvasta valintaikkunasta Objekti-välilehti. Se sisältää rivin, joka osoittaa polun tähän tiedostoon.
Kirjoita rivin loppuun manuaalisesti ”/Prefetch:1”. Tämän jälkeen Firefox avautuu erilliseen hakemistoon, mikä nopeuttaa merkittävästi sen käynnistymistä.
Napsauta ensin Käytä ja sitten OK.

Salli tietojen liittäminen kopioimalla ja liittämällä edistyneelle tekstieditorille

Valitse selaimen valikon "Työkalut"-osiosta "Asetukset". Ota Sisältö-osiossa käyttöön Estä ponnahdusikkuna -vaihtoehto.

Suoritus liitännäisenä ja itsenäisenä

Järjestelmävaatimukset ja saatavuus. Nyt laajennettu tekstieditori pitäisi toimia ilman ongelmia. . Ohjelmat, joita ei voida suorittaa, ovat haitaksi. Jos haluat surffata Internetissä, mutta selaimesi ei halua toimia, voimme auttaa sinua.

Tärkeä! Hakemistojen vaihtamisen jälkeen Mozilla Firefoxin ensimmäinen käynnistys saattaa olla hidasta. Älä pelkää, näin sen pitäisi olla. Myöhemmät julkaisut avautuvat paljon nopeammin.

Yhteenvetona haluan sanoa, että nämä asetukset tämän tyyppistä eivät ole rajoitettuja. Voit myös siirtyä konfigurointitilaan ja muuttaa mitä tahansa. Mutta jos et ole verkkoteknologioiden asiantuntija, on parempi olla tekemättä tätä. Toivottavasti kaikesta yllä olevasta oli hyötyä sinulle, onnea kaikille!

Ja jos selain lakkaa vastaamasta eikä tee mitään, kun napsautat ohjelman kuvaketta, monet ihmiset ovat epätoivon partaalla. Se kuulostaa oudolta, mutta joskus voi tapahtua, että prosessia ei päätetä kunnolla ohjelman päätyttyä ja siksi se on edelleen käynnissä tausta. Ratkaisu tähän on lopettaa prosessi manuaalisesti. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella tehtäväpalkkia näytön alareunassa ja valitsemalla "Task Manager".

Tehtävienhallinta avaa ja näyttää kaikki käynnissä olevat ohjelmat Prosessit-välilehdessä. Jos se on luettelossa, tarkista se ja napsauta "Lopeta prosessi" -painiketta. Taidegallerian perustaminen. Jos haluat poistaa tällaiset laajennukset, valitse valikosta "Lisäosat". Tässä on luettelo kaikista asennetuista laajennuksista. Tarpeettomat selainlaajennukset tulisi periaatteessa poistaa käytöstä.