Selainkonsoli koskee häntä. v. Jälleen päivityksen jälkeen sivu palaa aiempaan ulkoasuunsa. Verkko -välilehti

Selainvirhekonsoli

1. Valitse valikkoriviltä Työkalut → Virhekonsoli (Ctrl + Vaihto + J).

2. Siirry avautuvassa ikkunassa "Virheet" -välilehdelle.

3. Napsauta hiiren oikealla painikkeella virhetekstiä pikavalikosta valitse "Kopioi" ja liitä teksti sähköpostiin tai keskustelupalstaan.

Avaa virheenkorjaaja napsauttamalla valikkokuvaketta → "Lisää työkaluja" → "Kehitystyökalut" (Ctrl + Vaihto + I).

Skriptien asentaminen älypuhelimiin Dolphin -selaimessa

Sen pitäisi antaa 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 -kehittäjä -valikon Web Console -vaihtoehtoa. Käytä sen sijaan web- tai selainkonsolia. Huomaa, että sinun on hyväksyttävä tuleva yhteys.

Sitten selaimen työkalurivi tulee näkyviin käytettävissä olevat työkalut virheenkorjausta varten. Näiden työkalujen käyttö on samanlaista kuin sisäänrakennettujen työkalujen käyttö. Voit nollata muuttujat selainkonsoliin lisäosakoodista lisäämällä tämän rivin konsolin apuohjelman tuomiseksi.

Kopioi tai ota kuvakaappaus virhetekstistä.

1. Päästäksesi Opera -selaimen virhekonsoliin sinun on ensin käytettävä työkaluriviä. Voit tehdä tämän napsauttamalla punaista "Valikko" -painiketta vasemmalla yläkulma selaimessa ja valitse näkyviin tulevasta luettelosta "Näytä valikko".

Virheenkorjausrakenteissa tämä poistaa myös pinojäljen konsolista, vaikka virheenkorjaaja ei olisi käynnissä. Voit kirjoittaa, suorittaa ja analysoida verkkosivun kanssa vuorovaikutuksessa olevan koodin tuloksia. Käynnistä uudelleen ja käynnistä -vaihtoehto on käytettävissä vain Suorita -valikossa. Se lataa sivun ensin uudelleen ja suorittaa sitten koodin, kun sivun lataus tapahtuu. Tästä on hyötyä koodin suorittamisessa koskemattomassa ympäristössä.

Kun olet tehnyt tämän, valitse valikosta " Ympäristö"On olemassa" Selain "-vaihtoehto: kun olet valinnut tämän laajuuden, laajuutesi on koko selain, ei vain sivun sisältö, kuten näet tutkiessasi joitain globaaleja muuttujia. Tässä taulukossa luetellaan editorin oletusvalinnat.

2. Työkalurivi tulee näkyviin selaimen yläosaan, jossa sinun on valittava "Työkalut" → "Lisäasetukset" → "Virhekonsoli".

3. Avautuvassa ikkunassa näet kaikki tiedot sivujen lataamiseen liittyvistä ongelmista. Mistä valita yleinen luettelo vain virheitä, napsauta sanaa "Viestit" ikkunan alareunassa ja valitse avattavasta luettelosta kohta "Virheet".

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 tarkastella niitä. Voit tehdä tämän siirtymällä seuraavaan. Samankaltainen näkymä voidaan saada katsomalla Verkko -välilehteä yllä luetelluissa selaintyypeissä.

4. Valitse virheteksti - napsauta virheen ensimmäistä riviä hiiren vasemmalla painikkeella ja pidä sitä painettuna Vaihto -näppäin ja napsauta virheen alinta riviä. Kopioi seuraavaksi teksti ja liitä se sähköpostiin tai keskustelupalstaan.

Virheenkorjaimen käynnistäminen Safarissa on jaettu kahteen vaiheeseen: kehitysvalikon käyttöönotto ja web -tarkistajan käynnistäminen.

Analyysivaiheet ovat hyvin yksinkertaisia, jos seuraava määritelmä ymmärretään selvästi. Hae viivevastauspyyntö. Määritä, mikä on pisin odotusaika ja kuinka kauan se on odottanut. Tarkista, mikä on latenssin tärkein lähde. Pyydä apua tukitiimiltä saaduilla tiedoilla, jos palvelimen tunnistaminen edistää viivettä. Kerättyjen tietojen pitäisi riittää osoittamaan tämä havainto.

Tavallisissa tapauksissa, kun sivu ei näy oikein, syy on tallennettava kehittäjätyökalujen Konsoli -välilehdelle. Jos syytä ei ole rekisteröity, yritä poistaa selaimen välimuisti käytöstä valitsemalla Poista välimuisti käytöstä -valintaruutu. Tämä pakottaa selaimen muodostamaan sivun tyhjästä välimuistin käyttämisen sijaan. Häiriöiden etsiminen ja poistaminen. ... Alla on muutamia esimerkkejä.

Ota käyttöön kehittäjävalikko

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

2. Siirry "Lisäosat" -välilehdelle ja valitse kohdan "Näytä" Kehitä valikko "valikkorivillä" vieressä oleva valintaruutu.

Kun olet käyttäytynyt johdonmukaisesti, anna nämä tiedot tukitiimille sekä toimenpiteet, jotka tukiryhmä on tehnyt havainnon mahdollisen syyn selvittämiseksi. Jos valitset konsoli-, komentosarja- tai verkkopaneelit, näet, että välilehti on harmaana ja poistettu käytöstä -paneeli.

Mene ulos hengittämään

Jokaisessa paneelin välilehdessä on pieni valikkosäädin paneelin käyttöön ottamiseksi. Harjoittele painamaan tätä näppäintä, kun on aika suorittaa virheenkorjaus. Haluat todennäköisesti ottaa konsolin käyttöön etsimään virheitä. Ota käyttöön yksi sivusto kerrallaan tai ota konsoli käyttöön kaikilla sivustoilla ja poista se sitten valikoivasti käytöstä sivustoilta, kuten sähköpostiosoitteeltasi. Voit myös aloittaa näiden paneelien ollessa täysin käytössä. Uusimmat versiot, joita käytämme tässä artikkelissa. Alla on koodinpätkä -.

3. Sulje Lisäosat-välilehti.

Verkkotarkastajan käynnistäminen

1. Valitse valikkokohta "Kehitys" → "Näytä Web -tarkastaja" (Ctrl + Alt + w).

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

Sen sijaan näet alla olevan kuvan mukaisen virheilmoituksen. Katsotaanpa, miten voit tehdä tämän. Tämä voidaan tehdä kahdella tavalla, kuten alla olevassa kuvassa näkyy. Tämä viimeistelee latausprosessin. Katsotaan nyt, kuinka voit käyttää sitä projektissasi. Voit muokata ohjainta 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 testitapaukseksi. Käytä tätä menetelmää suorittamalla seuraavat toimet... Tärkeä huomautus 1: Olemme käyttäneet kaksoisviiltoja kansion poluissa alla olevassa koodissa. Siksi sinun on käytettävä kaksoisviivoja missä tahansa kansion polun lisäämisessä. Suorita tämä koodi varmistaaksesi, että kaikki toimii hyvin.

3. Kuvake oikeassa alakulmassa osoittaa virheiden määrän. Napsauttamalla kuvaketta avaat konsolin, jossa on tietoja tapahtuneista virheistä. Korosta konsolissa kaikki virhetekstit(tämä tulee tehdä hiiren vasemmalla painikkeella alhaalta ylöspäin). Kopioi ja liitä teksti sähköpostiin tai keskustelupalstaan ​​napsauttamalla hiiren kakkospainikkeella tekstin taustaa (ei linkkejä!).

Tapa 2. Aseta ominaisuus ympäristömuuttujiin

Napsauta Lisäasetukset -välilehteä Järjestelmän ominaisuudet -ikkunassa alla olevan kuvan mukaisesti. Testiskriptisi näyttää tältä. Suorita koodi varmistaaksesi, että se toimii hyvin. Siirry Lisäasetukset -paneeliin ja ota käyttöön Näytä kehitysvalikko valikkorivillä. Konsolipaneelin avaaminen:

Voit avata verkkokonsolin seuraavasti. Verkkokonsolin avaaminen -osiossa. Kyselyt näkyvät Verkko -ruudun kyselytaulukossa. Verkon valvonta saada lisäinformaatio... Avaa sitten "Verkko" -paneeli. "Verkko" -osiossa. Katso lisätietoja.

1. Jos tapahtuu virhe, selaimen vasempaan alakulmaan tulee varoituskuvake tai sama varoitus avautuu avautuvaan ikkunaan.

2. Valitse valikkokohta "Työkalut" → "Kehitystyökalut" (F12) ja siirry "Skripti" -välilehdelle.

3. Napsauta "Script" -välilehdellä "Start debugging" -painiketta.

Vuorovaikutus palvelun työntekijöiden kanssa selaimessa

Voit tarkistaa kotisivulle lisäämisen tästä paneelista. Sinun pitäisi nähdä viesti "Lisää tämä sivusto hyllylle". Jos huoltotyöntekijä on asetettu avoinna olevalle sivulle, näet sen tässä paneelissa. Voit avata useita tapoja: debug.

Pakotetun huoltotyöntekijän päivitys

Jos haluat pakottaa huoltotyöntekijän päivittämään sivut automaattisesti uudelleen, valitse Päivitä ladattaessa -valintaruutu. Jos haluat olla täysin varma, että päivitystyöntekijä on ajan tasalla, voit siirtyä sivulta: korjaa ja päivitä sovellus selaimessa. Uusi huoltotyöntekijä asennetaan sivun uudelleenlataukseen.

4. Kaikki virheet näkyvät konsoli -ikkunan oikealla puolella. Korosta ja kopioi virheteksti ja liitä se sähköpostiin tai keskustelupalstaan.

Mozilla Firefox on kätevä ja mukava selain. Mutta se voidaan tehdä hieman kätevämmäksi. Kun käynnistät selaimen, voimme tehdä sen siten, että vain tarvitsemamme välilehdet ja ikkunat avataan. Voimme myös nopeuttaa Firefoxin ensimmäisen käynnistyksen lataamista. Miten? Puhumme tästä tässä artikkelissa.

Ilmoitusten tarkistaminen

Muista käyttää uusi kohde tilaukset, jos poistat työntekijän rekisteröinnin. Määritä ilmoitusten käyttöoikeus avattavasta Ilmoitukset-valikosta. Määritä ilmoitusten käyttöoikeus avattavasta Hae ilmoitukset -valikosta.

Tarkista huoltotyöntekijän välimuisti

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

Tyhjennä huoltotyöntekijöiden välimuisti

Määrittäminen selaimen sisällä

Käynnistyksen yhteydessä avattavien sivujen valitseminen:

Se on erittäin kätevä. Jos esimerkiksi haluat työskennellä useilla välilehdillä kerralla, asettamalla parametrin "Näytä ikkunat avattu viime kerralla" sinun ei tarvitse syöttää uudelleen sivuston osoitteita. Firefox muistaa ikkunat, kun ne suljetaan.

Kuinka avata konsoli Chrome -selaimessa

Useimmissa selaimissa on sisäänrakennettu virhekonsoli tai kehittäjätyökalut, jotka sinun on ehkä aktivoitava ennen käyttöä. Alla on lueteltu joitakin niistä suosittuja selaimia ja tapoja käyttää työkaluja. Kehitystyökaluja voi käyttää useilla tavoilla.

On suositeltavaa käyttää toista selainta virheiden etsimiseen. Se on kuitenkin edelleen hyödyllinen muista diagnostisista syistä. Osoittaaksesi, että konsoli toimii täällä, on kolme linkkiä, joista jokaisessa on virhe.

• Tiedoston polku käyttää vinoviivaa vinoviivan sijaan.
• Virhe_3 on yksinkertainen virhe isot kirjaimet.

Jos katsot ensimmäisenä sähköpostia, esimerkiksi Mail.ru tai Yandex.ru, voit avata ne, kun avaat selaimen. Voit tehdä tämän valitsemalla Näytä kotisivu -parametrin ja kirjoittamalla osoitteen kenttään. Esimerkiksi www.yandex.ru.

Neuvoja! Näytä tyhjä sivu -vaihtoehdon valitseminen on hankalaa ja liian triviaalia. Joka kerta sinun täytyy ajaa haluamasi sivuston osoitteeseen tai etsiä kirjanmerkkiä.

Mutta mikä on välimuistisi ja miksi sinun pitäisi tyhjentää se?

Kun testataan paikallisia yhteyspisteitä, ne eivät erota kirjainkokoa edes verkkopalvelimen läpi, mutta niiden lataamisen jälkeen. Myös asiakaspalvelutiimimme käyttää tätä kykyä tarjota paras suoritus... Ohjaamme sinut suosittuihin tämän aiheen opetusohjelmiin, katsomme muutamia laajennuksia nopeuttaaksesi asioita ja joitain vaihtoehtoja tämän tekemiseen kehittäjäkonsolin kautta. Vaikka yllä olevissa linkeissä kuvattuja menetelmiä käytetään yleisesti, laajennuksen lisääminen voi tehdä prosessista nopean ja helpon.

Valintaikkunassa voit syöttää kotisivun osoitteen. Tässä tapauksessa voit valita sekä jo avatun välilehden että yhden tallennetuista kirjanmerkeistä. Tätä varten on kaksi painiketta alla.

Asetus Prefetch -ohjelman kautta

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

Tämä laajennus tallentaa tietosi ja kirjautumistietosi miltä tahansa sivustolta, johon kirjaudut. Tämä tarkoittaa, että välimuistin tyhjentämisen jälkeen sinun ei tarvitse rekisteröityä uudelleen jokaiseen verkkosivustoon. Voit optimoida tämän laajennuksen asettamalla toimintojen pikanäppäimet. Sivun alareunassa näet pikanäppäimet.

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

• Tämä näkyy yleensä selainikkunan alareunassa.
• Tämä tyhjentää välimuistin.

Tärkeä! Ennen kuin aloitat tämän ohjelman käytön, sinun on suljettava selain. Koska sillä on oma sovellus- ja lisäosienhallinta, ja niin kauan kuin ne ovat käynnissä, muutoksia ei tapahdu.

Voit muuttaa monia ominaisuuksia noudattamalla alla olevia ohjeita:

1. Etsi pikakuvake Mozilla Firefox... Napsauta sitä hiiren kakkospainikkeella. Näkyviin tulee valikko, josta löydämme Ominaisuudet -parametrin ja napsautamme sitä.
2. Etsi näkyviin tulevasta valintaikkunasta Objekti -välilehti. Se sisältää rivin, joka osoittaa polun tähän tiedostoon.
3. Kirjoita rivin loppuun manuaalisesti "/ Prefetch: 1". Tämän jälkeen Firefox avautuu erilliseen hakemistoon, mikä nopeuttaa merkittävästi sen käynnistämistä.
4. Napsauta ensin Käytä ja sitten OK.

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

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

Suoritus laajennuksena ja itsenäisenä

Tärkeä! Hakemistojen vaihtamisen jälkeen Mozilla Firefoxin ensimmäinen käynnistys voi olla hidasta. Älä hätäile, niin sen pitäisi olla. Seuraavat lanseeraukset avautuvat paljon nopeammin.

Yhteenvetona haluan sanoa, että nämä asetukset tämän tyyppistä eivät ole rajoitettuja. Voit myös siirtyä asetustilaan ja muuttaa mitä haluat. Mutta jos et ole verkkoteknologian asiantuntija, sinun on parempi olla tekemättä sitä. Toivottavasti kaikki edellä mainitut olivat hyödyllisiä sinulle, onnea kaikille!

Ja jos selain lakkaa vastaamasta eikä tee mitään, kun ohjelman kuvaketta napsautetaan, monet ihmiset ovat epätoivon partaalla. Se kuulostaa oudolta, mutta joskus voi tapahtua, että prosessi ei pääty kunnolla ohjelman päättymisen jälkeen ja siksi se on edelleen käynnissä tausta... Ratkaisu tähän on prosessin lopettaminen manuaalisesti. Voit tehdä tämän napsauttamalla oikealla painikkeella hiirellä näytön alareunan tehtäväpalkissa ja valitse "Tehtävienhallinta".

Tehtävienhallinta avautuu ja näyttää kaikki käynnissä olevat ohjelmat Prosessit -välilehdessä. Jos se näkyy, tarkista se ja napsauta Lopeta prosessi -painiketta. Taidegallerian käynnistäminen. Voit poistaa tällaiset laajennukset valitsemalla valikosta "Lisäosat". Tässä on luettelo kaikista asennetuista laajennuksista. Tarpeettomat laajennukset selain pitäisi periaatteessa poistaa käytöstä.

Yandex voi olla hyödyllinen paitsi kätevä haku tietoa ja mielenkiintoisten Internet -sivustojen lukemista, mutta myös näiden resurssien luomiseksi.

Näihin tarkoituksiin se on varustettu erityinen toiminto Kehitystyökalut (nyt saatavana kaikissa selaimissa). Se auttaa Yandex -käyttäjää seuraamaan verkkosivustonsa tilaa:

• katsomalla sivun HTML -koodia;
• huolehtiminen vierailijoiden pyytämien komentojen suorittamisesta;
• tarkkailla kaikkia resurssiin liittyviä toimia;
• oppiminen usein virheitä jotka syntyvät skriptien ollessa käynnissä.

Miten voin avata konsolin Yandexissä?

Konsolin avaaminen Yandexissä on helppoa. Voit tehdä tämän seuraavasti:

• Siirry selaimeesi.
• Napsauta valikkoa nopea pääsy("Yandex -selainasetukset" -painike ohjauspaneelin oikeassa yläkulmassa, kuvake kolmen vaakasuoran yhdensuuntaisen raidan muodossa).
• Tule alas viimeinen kappale otsikossa "Advanced" tai "Advanced" (englanniksi "Advanced") avautuvassa luettelossa.
• Aukeaa uusi lista, etsi siitä kohta "Lisää työkaluja" (englanniksi "Lisää työkaluja").
• Seuraavaksi sinun on valittava kolmesta toiminnosta: Näytä sivukoodi, Kehitystyökalut ja JavaScript -konsoli.

Kuinka avata konsoli nopeasti Yandexissä?

Jos haluat käyttää luetellut toiminnot selain on nopeampi, voit käyttää pikanäppäimiä:

• Voit tarkastella sivun koodia painamalla Ctrl- ja U -näppäimiä kerralla.
• Jos haluat käyttää kehittäjätyökaluja, paina Shift, Ctrl ja L yhdessä.
• Jos haluat avata konsolin ja tarkastella skriptien käytön aikana tapahtuneita virheitä, paina "Shift", "Ctrl" ja "J" -näppäimiä kerralla.

Miksi tarvitsen Java Script -konsolin?

Konsoli tarjoaa Yandex -selaimen käyttäjille mahdollisuuden seurata katseltuihin Internet -resursseihin lähetettyjen komentosarjojen työn laatua. Tämän toiminnon avulla web -kehittäjät valvovat kirjoitettujen komentosarjojen työtä, päästävät eroon syntyvistä virheistä. Konsolin avulla voit katsella askel askeleelta työtä skriptit, ohjelmakoodin jokaisen kohteen suorittaminen.

Varten tavalliset käyttäjät Avatussa konsolissa olevat Yandex -selaintiedot eivät ole erityisen hyödyllisiä (koska näitä tietoja ei tarvita heille). Mutta joissakin tapauksissa sen käyttäminen voi auttaa. Jos jokin Internet -resurssi toimii väärin, virheilmoituksia tulee usein näkyviin. Yleensä et voi käyttää sivustoa, ota yhteyttä tekniseen tukeen, jossa he selittävät ongelman syyn ja ratkaisun.

Jokaisella selaimella on oma kehittäjän työkalu- Tätä monet kutsuvat vain "konsoliksi", harkitse konsolia Chrome -selain... Se näyttää tältä:

Itse asiassa Chrome -selaimen konsoli on työkalu, jonka avulla voit nähdä selaimen näyttämän sivun sisällön lisäksi myös olemassa olevat virheet(mitä useimmiten testaajat tekevät), mutta näiden virheiden korjaaminen on paljon helpompaa ja nopeampaa (mitä useimmiten kehittäjät tekevät), mittaamalla erilaisia ​​indikaattoreita ja manipuloimalla sivua.

Konsolin avaaminen Chrome -selaimessa:

- F12 -näppäin;

- painetaan samanaikaisesti Ctrl -näppäimet+ Vaihto + I;

- RMB sivuelementissä -> Näytä koodi;

- selaimen valikko -> Muut työkalut-> Kehittäjän työkalut.

Se voi sijaita sivun alareunassa tai sivulla, voit irrottaa sen erillinen ikkuna... Katsotaanpa siis jokaisen avoimen konsolin välilehteä erikseen.

Siinä on yhteensä 8 välilehteä, joista jokaisessa näkyy tiettyjä tietoja:

1 – Elementit(sisältää kaikki sivun html / css -koodit ja voit valita elementtejä tutkimukselle sekä muokata niitä)

2 – Konsoli(näyttää koodin virheiden / varoitusten olemassaolon / puuttumisen)

3 – Lähteet(voit suorittaa toimintoja sivukoodilla)

4 – Verkko(seuraa tiettyjen pyyntöjen suoritusaikaa ja itse pyyntöjä)

5 – Aikajana(mittaa sivun latausaikaa)

6 – Profiilit(voit luoda JavaScript-, CPU -profiileja)

7 – Resurssit ( voit tarkastella tiettyjä tallennettuja tietoja)

8 – Tarkastukset(tarkistaa tietyt parametrit)

Käydään nyt jokainen niistä erikseen ja yksityiskohtaisemmin:

Paneeli Elementit

Elementit -paneeli näyttää sivun merkinnät täsmälleen sellaisina kuin ne näkyvät selaimessa. Voit muuttaa sivuston sisältöä visuaalisesti muuttamalla työkalupakin html / css -koodia. Kuten olet todennäköisesti huomannut (tai ehkä et), html -asiakirja näkyy vasemmassa ikkunassa ja css oikeassa. Suorittamalla yksinkertaisia ​​tietoja, voit muuttaa avoimen sivun sisältöä ja ulkoasua. Voit esimerkiksi muuttaa ikkunan tekstiä, jos muokkaat sitä html -tekstissä, ja muuttaa myös sivun fonttia muuttamalla sen arvoa css -kentässä. Mutta tämä ei tallenna syötettyjä tietoja, mutta auttaa sinua yksinkertaisesti visuaalisesti arvioimaan tehdyt muutokset. Lisäksi voit tarkastella tietyn sivuelementin koodia. Voit tehdä tämän napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla "Näytä koodi" -komento.

Elements -paneelissa on yksi erittäin hieno ominaisuus. Voit nähdä miltä se näyttäisi avaa sivu joissakin laitteissa, joissa on eri näyttölaajennus. Napsauttamalla Elementit -välilehden vasemmalla puolella olevaa puhelinkuvaketta avautuu ikkuna, jossa voit muuttaa aiotun näytön kokoa, emuloiden tiettyä laitetta ja ohjaamalla siinä olevan sivun näyttöä. Se näyttää tältä:

Kun napsautat Valitse malli -painiketta, näkyviin tulee pudotusvalikko valtava valinta laitteet. Valitse mitä tarvitset - ja voila! Sivu näytetään ikään kuin se olisi laite. Siten Elementit -paneelia voidaan käyttää sivun tarkasteluun tai muokkaamiseen sekä näyttölaitteiden emulointiin. Kaikki on yhtenäistä ja saatavilla Chromessa!

Paneeli Konsoli

Testaajien suosituin välilehti, koska tässä näemme koodista löydetyt virheet komentosarjaa suoritettaessa. Lisäksi tämä paneeli näyttää erilaisia ​​varoituksia ja suosituksia (kuten yllä olevassa kuvassa). Kaikki välilehdessä näkyvät viestit voidaan suodattaa. Virhe näyttää myös sen sijainnin ja napsauttamalla sitä siirryt Lähteet -välilehteen, jossa virhe näkyy sivun yleisessä rakenteessa.

Voit tyhjentää Konsoli-välilehden kentän (jos haluat poistaa viestejä aiemmista virheistä) napsauttamalla yliviivatun ympyrän kuvaketta. Voit suodattaa viestit konsolissa tyypin mukaan - virheet, varoitukset, tiedot, stdout, virheenkorjaussanomat korjattu - valitsemalla jonkin Saatavilla olevat vaihtoehdot konsoli.

Paneeli Lähteet

Ohjelmoijat vianetsivät pääsääntöisesti koodin tällä välilehdellä. Siinä on 3 ikkunaa (vasemmalta oikealle):

1. Alue lähdetiedostoja... Se sisältää kaikki sivulle liitetyt tiedostot, mukaan lukien JS / CSS.
2. Tekstialue. Se sisältää tiedostojen tekstin.
3. Tieto- ja ohjausvyöhyke.

Lähdetiedostojen vyöhykkeellä valitaan vaadittu elementti, vyöhykkeellä teksti debuggataan suoraan, ja tieto- ja ohjausvyöhykkeellä voit käynnistää / pysäyttää virheenkorjatun koodin.

Paneeli Verkko

Tämän välilehden päätehtävä on verkkolokin tallentaminen. Se tarjoaa yleiskatsauksen pyydetyistä ja ladatuista resursseista reaaliajassa. Voit tunnistaa, mitkä resurssit ladataan ja käsitellään. Suuri määrä aikaa, jotta myöhemmin tiedät missä ja missä tarkalleen voit optimoida sivun.

On myös syytä huomata, että tällä välilehdellä, Suuret pyyntörivit -tilassa, voit tarkastella palvelimelle lähetettyjä pyyntöjä sekä siitä tulevia vastauksia, niiden sisältöä ja ominaisuuksia.

Suorituskykypaneeli

Tätä välilehteä käytetään tarvittaessa koko arvostelu vietti aikaa. Mihin se käytettiin, kuinka paljon sitä tarvittiin tähän tai toiseen prosessiin. Kaikki näytetään täällä, mukaan lukien resurssien lataaminen ja Javascriptin suorittaminen.

Tämä paneeli mahdollistaa verkkosovelluksen tai -sivun suoritusajan ja muistin käytön profiilin, mikä auttaa ymmärtämään, mihin tarkalleen paljon resursseja käytetään ja miten koodi voidaan optimoida.

Prosessoriprofiloija antaa tietoa Javascriptin suorittamiseen tarvittavasta ajasta.

Kasan profiili näyttää muistin varauksen.

JavaScript -profiili tarkalleen missä kului aika komentosarjoja suoritettaessa.

Suunniteltu ladattujen elementtien tutkimiseen. Voit käyttää HTML5 -tietokantaa, paikallista tallennustilaa, evästeitä, AppCachea jne. Tällä välilehdellä voit tyhjentää evästeet avaamalla tämän välilehden ja napsauttamalla yliviivatun ympyrän kuvaketta

Paneeli Tarkastukset

Tämä paneeli toimii sivun analysaattorina latauksen aikana. Tarkastuksen tuloksena ilmestyy suosituksia sivujen lataamisen optimoimiseksi ja vastausnopeuden lisäämiseksi. Esimerkkejä optimointimenetelmistä on alla olevassa ikkunassa.

Turvapaneeli

Suojauspaneeli näyttää tietoja jokaisesta pyynnöstä ja korostaa niitä, joiden vuoksi sivusto ei saa haluttua vihreää kuvaketta tilassa.

Lisäksi voit saada seuraavat tiedot:

• varmenteen tarkistamisesta, onko sivusto vahvistanut sen aitouden TLS -varmenteella;
• TLS -yhteydet, jotka osoittavat, käyttääkö sivustosi nykyaikaisia ​​suojattuja protokollia;
• kuormitettujen toissijaisten lähteiden turvallisuus.

Itse asiassa kehittäjätyökalut (konsoli Chrome -selaimessa) on erittäin hyödyllinen asia, joka voi usein olla hyödyllinen meille, testaajille. Paljon enemmän hyödyllistä tietoa osoitteessa https://developers.google.com/web/tools/chrome-devtools/

• Käännös

Kuinka käyttää kehittäjäkonsolia muuntamiseen Google chrome muodossa tekstieditori? Mitä se tarkoittaa, hankkii monille jQuerystä tutun kuvakkeen $ ? Kuinka näyttää arvojoukko kunnollisen taulukon muodossa konsolille? Jos vastaukset näihin kysymyksiin eivät tule heti mieleen, välilehti Konsoli kehittäjätyökaluista, Chrome ei ole vielä paljastanut itsensä kaikessa loistossaan.

Ensi silmäyksellä meillä on täysin tavallinen JavaScript -konsoli, joka soveltuu vain näyttämään palvelimen vastauslokit tai muuttujien arvot siihen. Muuten käytin sitä sellaisena, kun aloitin ohjelmoinnin. Ajan myötä sain kuitenkin kokemusta, opin vähän ja huomasin yllättäen, että Chrome -konsoli voi tehdä monia asioita, joita en tiennyt. Haluan kertoa siitä tänään. Kyllä, jos et lue nyt matkapuhelimella, voit kokeilla kaikkea siellä.

1. DOM -elementtien valitseminen

Näytä komennot $ (’TagName’), $ ('. Luokka'), $ ('# Id') ja $ ('. Class #id') palauta ensimmäinen valitsinta vastaava DOM -elementti. Samaan aikaan, jos jQuery on saatavilla asiakirjassa, sen "$" ohittaa tämän konsolitoiminnon.

Täällä on vielä yksi rakenne: $$ ... Sen käyttö näyttää siltä $$ ("tagName") tai $$ (". Luokka")... Sen avulla voit valita kaikki valitsinta vastaavat DOM -elementit ja sijoittaa ne taulukkoon. Sen kanssa työskentely ei eroa muista matriiseista. Jos haluat valita tietyn kohteen, voit viitata siihen indeksin mukaan.

Esimerkiksi komento $$ ('. LuokanNimi') tarjoaa meille joukon kaikkia sivuelementtejä, joilla on määritetty luokan nimi, kun kutsumme sitä. Komennot $$ ('. LuokanNimi') ja $$ ('. LuokanNimi') antaa pääsyn tuloksena olevan taulukon ensimmäiseen ja toiseen elementtiin.

Kokeilemalla komentoja $ ja $$

2. Selaimen muuttaminen tekstieditoriksi

Document.body.contentEditable = tosi
Kun se on suoritettu konsolissa, selaimessa avattua asiakirjaa voidaan muokata tarvitsematta etsiä haluttua fragmenttia HTML -koodista.

3. Tapahtumakäsittelijöiden löytäminen elementtiin

GetEventListeners ($ (’valitsin’))
Sen suorittamisen tuloksena annetaan joukko objekteja, jotka sisältävät luettelon tapahtumista, joihin elementti voi reagoida.

Tapahtumien käsittelijät

Voit löytää käsittelijän tietylle tapahtumalle käyttämällä seuraavaa rakennetta:

GetEventListeners ($ (’valitsin’)). EventName.listener
Tämä komento näyttää tapahtumakäsittelytoiminnon koodin. Tässä tapahtuman nimi Onko taulukko, joka sisältää kaikki tietyn tyyppiset tapahtumat. Esimerkiksi käytännössä se voisi näyttää tältä:

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

4. Tapahtuman seuranta

• Komento monitorEvents ($ (’valitsin’)) voit seurata kaikkia elementtejä, jotka liittyvät valitsimeen. Kun tapahtuma tapahtuu, merkintä tehdään konsoliin. Esimerkiksi komento monitorEvents ($ (‘# firstName’)) sallii kirjata kaikki tapahtumat, jotka liittyvät elementtiin, jonka tunniste on - etunimi.
• Komento monitorEvents ($ (’valitsin’), ’eventName’) samanlainen kuin edellinen, mutta se kohdistuu tiettyyn tapahtumaan. Tässä elementtivalitsimen lisäksi tapahtuman nimi välitetään myös toiminnolle. Tällainen komento näyttää konsolille tietoja yhden tapahtuman esiintymisestä. Esimerkiksi komento monitorEvents ($ ('# firstName'), 'click') näyttää tietoja vain tapahtuman mukaan klikkaus elementti tunnuksella etunimi.
• Komento monitorEvents ($ (’valitsin’), [’eventName1’, ’eventName3”,….)) voit seurata useita valittuja tapahtumia. Tässä funktiolle välitetään merkkijono, joka sisältää tapahtumien nimet. Esimerkiksi tällainen komento: monitorEvents ($ (‘# etunimi”), [’klikkaa’, ’tarkenna’]) tulostaa tapahtumatiedot konsoliin klikkaus ja keskittyä elementille, jonka tunnus on etunimi.
• Komento unmonitorEvents ($ (’valitsin’)) voit lopettaa tapahtumien seurannan ja kirjaamisen konsolissa.

5. Koodin suoritusajan mittaaminen

Console.time ("myTime"); // Käynnistää ajastimen myTime console.timeEnd ("myTime"); // Pysäyttää ajastimen myTime // Lähtö: myTime: 123,00 ms
Yllä olevasta esimerkistä näet ajastimen käynnistyksen ja pysäytyksen välisen ajan. Voit tehdä saman JavaScript -ohjelman sisällä ja löytää koodin suoritusajan.

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

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

6. Muuttujien arvojen näyttäminen taulukoina

Var 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 objektiryhmän muodossa. Se - hyödyllinen tilaisuus, rakenteen haaraa voidaan laajentaa katsomalla objektien sisältöä. Tällä lähestymistavalla on kuitenkin vaikea ymmärtää esimerkiksi sitä, miten vastaavien elementtien ominaisuudet liittyvät toisiinsa. Tällaisten tietojen käsittelyn helpottamiseksi ne voidaan muuntaa taulukkomuodoksi. Voit tehdä tämän käyttämällä seuraavaa komentoa:

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

Objektiryhmän näyttäminen taulukkona

7. Näytä kohteen koodi

• Komento tarkastaa ($ (’valitsin’)) voit avata paneelin valitsinta vastaavan elementin koodin Elementit Google Chromen kehittäjätyökalut. Esimerkiksi komento tarkastaa ($ (’# firstName’)) voit tarkastella elementin koodia tunnuksella etunimi... Komento tarkastaa ($$ (’a’)) avaa neljännen DOM -linkin koodin.
• Näytä komennot $0 , $1 , $2 voit siirtyä nopeasti äskettäin katsottuihin kohteisiin. Esimerkiksi, $0 avaa viimeksi katsotun kohteen koodin ja niin edelleen.

8. Luettelo elementtien ominaisuuksista

Ohjaus ($ (’valitsin’))
Se palauttaa objektin, joka sisältää ominaisuuksia, jotka liittyvät annettu elementti DOM. Kuten muissakin vastaavissa tapauksissa, tämän objektin sisältöä voidaan tutkia tarkastelemalla sen puurakennetta.

9. Viimeksi vastaanotetun tuloksen soittaminen

2 + 3 + 4 9 // - Summatulos - 9 $ _ 9 // Viimeksi vastaanotettu tulos näytetään $ _ * $ _ 81 // Koska viimeinen tulos on 9, saamme 81 Math.sqrt ($ _) 9 // Neliöjuuri alkaen viimeinen tulos, joka oli 81 $ _ 9 // Saamme jälleen 9 - edellisen laskelman tuloksen

10. Konsolin ja muistin tyhjentäminen

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

11, 12, 13, 14…

Nykyaikaiset selaimet tarjota sisäänrakennettuja kehittämistyökaluja JavaScriptille ja muille tekniikoille. Näitä työkaluja ovat konsoli, joka on samanlainen kuin kuorirajapinta, sekä työkalut DOM -tarkastukseen, virheenkorjaukseen ja verkon toiminta -analyysiin.

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ä opas opettaa sinulle, miten työskennellä JavaScript -konsoli selaimessa ja esittelee sinulle muita sisäänrakennettuja kehitystyökaluja, joista saatat olla hyötyä.

JavaScript -konsolin käyttö selaimessa

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

Firefox -selain

Näiden työkalujen avulla voit tarkastella ja muokata DOM -elementtejä sekä etsiä niihin liittyviä HTML -objekteja tietty sivu... DOM voi ilmaista, onko tekstiteoksessa tai kuvassa ID -määritteitä, ja määrittää määritteen arvon.

Löydät myös sivupalkista tai DOM -ruudun alta CSS -tyylit käytetty HTML -asiakirja tai tyylitaulukko.

Jos haluat muokata DOM: ää reaaliajassa, kaksoisnapsauta valittua elementtiä. Voit esimerkiksi yrittää kääntää tunnistetta

v

.

Jälleen päivityksen jälkeen sivu palaa aiempaan ulkoasuunsa.

Verkko -välilehti

Verkko -välilehden avulla voit seurata ja tallentaa verkkopyyntöjä. Tämä välilehti näyttää selaimen verkkopyynnöt, mukaan lukien sivun lataamispyynnöt, pyyntöjen näyttämiseen kuluva aika ja tiedot niistä. Näiden tietojen avulla voidaan optimoida sivun latauksen suorituskyky ja virheenkorjauskyselyt.

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

Reagoiva muotoilu

Responsiiviset sivustot mukauttavat nopeasti ulkoasuaan erilaisiin laitteisiin: matkapuhelimiin, tablet -laitteisiin, pöytäkoneisiin ja kannettaviin tietokoneisiin. Näytön koko, pikselitiheys ja kosketusvaste ovat tekijöitä, jotka on otettava huomioon reagoivia verkkosivustoja suunniteltaessa. Myös responsiivisen suunnittelun periaatteet on tärkeää ottaa huomioon, jotta verkkosivusto olisi käytettävissä ja tehokas riippumatta siitä, millä laitteella se avataan.

Nykyaikaiset selaimet (mukaan lukien Firefox ja Chrome) tarjoavat malleja reagoivan suunnittelun periaatteiden noudattamiseksi verkkosivustoja ja sovelluksia kehitettäessä. Nämä mallit jäljittelevät tietyn laitteen käyttäytymistä, minkä avulla voit testata ja analysoida kaikkia sivuston toimintoja.

Voit lukea tästä lisää selainoppaista:

• Responsiivinen suunnittelutila Firefoxissa

Johtopäätös

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