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ä opas opettaa sinua työskentelemään JavaScript-konsoli selaimessasi ja esitellä sinulle muita sisäänrakennettuja kehitystyökaluja, jotka saattavat olla hyödyllisiä.
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 kuorimainen käyttöliittymä. Tässä osiossa opit käyttämään konsolia Firefoxissa ja Chromessa.
Firefox selain
Näiden työkalujen avulla voit tarkistaa ja muokata DOM-elementtejä ja etsiä myös HTML-objekteja, jotka liittyvät kohteeseen 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 käyttöoppaista:
- Responsiivinen suunnittelutila Firefoxissa
Johtopäätös
Tämä opas esittelee lyhyt yleiskatsaus työskentelee JavaScript-konsolin kanssa nykyaikaiset verkkoselaimet. Täältä löydät myös tietoa muista hyödyllisistä kehitystyökaluista.
Mozilla-selain tarjoaa monia erilaisia soittimia työhön ja toimintansa parantamiseen. Yksi näistä parannuksista mahdollistaa työskentelyn koko selaimen konsolin kanssa.
Mikä on konsoli selaimessa
Tämä elementti on sama kuin tavallinen verkkokonsoli, mutta sen avulla voit työskennellä ei yksittäisten välilehtien kanssa, vaan koko hakukoneen kanssa. Eli tiedot virheistä, pyynnöistä ja muista toimista kirjataan sinne.
Työkalu tallentaa tiedot erillisen välilehden lisäksi myös lisäosista sekä itse hakukoneen koodin. Käyttääksesi muita saatavilla olevia parannuksia vakiosarjat Web-kehityksessä sinun tulee turvautua työkalupalkin käyttöön. Konsolia käytetään myös erilaisten JavaScript-lausekkeiden suorittamiseen.
On syytä harkita, että 30 alkaen tästä Firefox-merkkijono pois käytöstä. Jotta konsoli käynnistyy Mozillassa, sinun on määritettävä koodi true riville about:config – devtools.chrome.enabled. Voit myös käyttää toista tapaa aktivoida parannus.
Sinun on valittava "Ota käyttöön selaimen Chrome ja lisäosien virheenkorjaustyökalut" -valintaruutu Firefox 40:ssä edellinen versio Tämän sarakkeen nimi voi vaihdella hieman.
Kun olet avannut kehittäjäikkunan, näet, että käyttöliittymä on jaettu kolmeen osaan:
Web-kehittäjätilassa työskentelyn ominaisuudet
Jotta saisit kaiken irti kaikista parannuksista, sinun on tiedettävä konsolin avaamisen lisäksi joitakin sen kanssa työskentelyn salaisuuksia.
Yksi niistä erittäin hyödyllisiä työkaluja- console.log. Sitä käytetään virheenkorjaukseen, mutta kokeneet käyttäjät turvautuvat myös useisiin muihin menetelmiin tietojen käsittelyssä. Esimerkiksi console.login toimintaperiaate on melko samanlainen kuin printf.
Firefox antaa sinun käyttää myös "%c" -mallia toisen argumentin käyttämiseen tyyliä muotoiltaessa. Mozilla näyttää pienen kuvakkeen harmaa tietojen, kuten varoitusten tai virheilmoitusten, vieressä. Tämä tarkoittaa, että nämä ilmoitukset vaativat huomiota. Virheenkorjausviestejä ei näytetä tässä hakukoneessa, koska kehittäjien mukaan ne ovat vanhentuneita ja sen sijaan tulisi käyttää console.log():ta.
On syytä huomata, että tässä hakukoneessa voit käyttää useita arvoja kerralla. Tätä varten sinun on erotettava ne pilkuilla, mikä on erittäin kätevää, kun ne sisältyvät yhdelle riville.
Ajastimen ja tallennustilan käyttö
Kehittäjätila käytössä tarkoittaa, että voit käyttää ajastinta. Se voidaan käynnistää kautta console.time. Ajastin pysäytetään käyttämällä console.timeEnd-komentoa. Aika näytetään millisekunteina.
Lähtölaskenta alkaa ajastimen aktivoinnista. Lisäksi voit luoda aikaleimoja. Niitä käytetään yhdessä ajoituksen kanssa HTTP-liikenne, määrittääksesi ajan, jonka aikana koodinpala suoritettiin.
Melko usein tiedot on tallennettava viitettä tai seurantalokia varten. Sinun ei tarvitse tehdä mitään tallentaaksesi sivun avausten välissä näkyvän tilan tai datan. Firefox tallentaa nämä tiedot automaattisesti. Voit jopa poistaa viestin aktivoimalla oikealla olevan painikkeen yläkulma tai avaamalla paneelin uudelleen.
Konsolin avaaminen Mozilla Firefoxissa on melko yksinkertaista. Tätä varten sinulla on oltava perustaidot, joiden avulla voit hallita selaimen toimintaa ja jopa parantaa sitä tarvittaessa.
Sivustomme on jo julkaissut monia erilaisia Java-skriptejä sosiaaliset verkostot. Ja kunkin käsikirjoituksen kuvauksessa kuvataan yksityiskohtaiset ohjeet lanseerauksessaan... Tästä ei ole mitään hyötyä. Päätimme kirjoittaa täysimittaisen käsikirjan, joka kuvaa komentosarjojen asentamista kaikkiin selaimiin, ja otamme myös huomioon useiden asennusmenetelmien olemassaolon yhdessä tietyssä selaimessa ja kuvailemme ne kaikki.
Java-skriptien suorittaminen selainkonsolin kautta:
Nyt, kuten tiedät, komentosarjojen käynnistäminen konsolin kautta on suosituin ja yksinkertaisin, ja mikä tärkeintä, toimiva tapa käyttää niitä. Siksi aloitamme tästä - tavoista päästä kunkin selaimen konsoliin.Konsoli sisään Mozilla Firefox:
Helpoin tapa päästä verkkokonsoliin Mozilla Firefox -selaimella on käyttää pikanäppäintä Ctrl + Siirtää + K. Napsauta ja konsoli tulee näkyviin.Konsoli sisään Google Chrome ja muut Chromiumiin perustuvat selaimet:
Google Chrome, Opera 15+, Amigo, Orbitum ja muut Chromium-pohjaiset selaimet voivat myös käynnistää verkkokonsolin pikanäppäimillä. Tätä varten sinun on painettava samanaikaisesti Ctrl + Siirtää + J.
Konsoli Opera 12:ssa:
Verkkokonsolin käynnistäminen sisään Opera selain vanha sukupolvi (ei vanhempi kuin versio 12), sinun on käytettävä pikanäppäintä Ctrl + Siirtää + minä. Tämä käynnistää Opera Dragonflyn, kehittäjien työkalupalkin. Kun olet avannut sen, siirry välilehteen Konsoli.
Konsoli sisään Internet Explorer:
Konsolin avaaminen sisään Internet-selain Explorer, sinun on ensin napsautettava painiketta F12 ja paina sitten yhdistelmää Ctrl + 2 (kaksi ovat keskipaneelissa, eivät Num-osiossa).
Safari-konsoli:
Safarissa ennen konsolin avaamista sinun on annettava selaimen asetukset ( vaihde oikeassa yläkulmassa" Asetukset… » Lisäosat) ja ota vaihtoehto käyttöön Näytä Kehitä-valikko valikkorivillä. Tämän jälkeen konsolia voidaan kutsua pikanäppäimellä Ctrl + Alt + C.
Kaikki skriptit syötetään konsoliin nuolikuvakkeen vieressä olevaan kenttään (katso kuvakaappauksia, skriptien syöttämisalueet on korostettu punaisella kehyksellä). Skriptit käynnistetään painamalla painiketta Enter. Kun olet syöttänyt ja suorittanut minkä tahansa komentosarjan, näet kaikki kommentit tai virheet niiden suorituksen aikana.
Java-skriptien suorittaminen selaimen osoitepalkista:
Tapa käynnistää komentosarjat selaimen osoitepalkista on vanhempi menetelmä ja melko perinteinenkin. Aluksi kaikki skriptit käynnistettiin tällä tavalla. Mutta trendit muuttuvat, maailma kehittyy. Useimmissa selaimissa komentosarjakoodin liittämisen jälkeen osoitepalkki sinun on lisättävä koodi manuaalisesti sen suorittamiseksi, ja joissakin selaimissa osoitepalkki ei käsittele Java-skriptejä ollenkaan.Osoitepalkki Mozilla Firefoxissa:
Se on surullista, mutta ei mikään niistä uusimmat versiot Mozilla selain Firefox ei tue komentosarjojen käsittelyä osoitepalkin kautta. Vaikka enemmän aikaisemmat versiot vastaava vaihtoehto oli olemassa moderni Firefox kehittäjät päättivät luopua tästä.Osoitepalkki Google Chromessa ja muissa Chromium-pohjaisissa selaimissa:
IN Google-selain Chrome ja mikä tahansa muu siihen rakennettu selain lähdekoodeja, kuten Opera 15+, Amigo, Orbitum ja muut, voit suorittaa skriptejä osoitepalkissa. Mutta! Kun olet lisännyt skriptin, sinun on lisättävä sana sen eteen javascript:(yhdessä kaksoispisteen kanssa), muuten (sellaisen ilmiön kuten omniboxin ansiosta) komentosarjan suorittamisen sijaan uudelleenohjaus hakukone.Osoitepalkki Opera 12:ssa:
Opera 12 -selaimessa kaikki on paljon paremmin. Suorita komentosarja liittämällä se osoitepalkkiin ja suorittamalla se. Tässä ei pitäisi olla ongelmia.Internet Explorerin osoitepalkki:
IN tämä selain, kuten Google Chromessa ja vastaavissa, kun olet lisännyt komentosarjan osoitepalkkiin, sinun on heti alussa lisättävä javascript:(yhdessä kaksoispisteen kanssa), muuten skripti ei toimi.Safarin osoitepalkki:
No, Safarissa asiat ovat yhtä hyvin kuin Opera 12:ssa. Liitä vain olemassa oleva skripti osoitepalkkiin ja suorita se.Selainlaajennusten käyttäminen komentosarjojen tallentamiseen ja suorittamiseen:
Jos komentosarjoja on käytettävä jatkuvasti, sinun on käsiteltävä niitä, kopioitava ne sivustolta tai tekstitiedosto, liitä osoitepalkkiin tai konsoliin joka kerta. Samaa mieltä, tämä ei ole kätevää. Tästä syystä selaimille keksittiin erityisiä laajennuksia (plugins), jotka on suunniteltu tallentamaan ja suorittamaan komentosarjoja. Puhumme kahdesta laajennuksesta: Greasemonkey Mozilla Firefoxille ja Tampermonkey Google Chromelle.Greasemonkey-laajennus Mozilla Firefoxille:
Mozilla Firefoxin Greasemonkey-laajennuksen avulla voit luoda, tallentaa ja suorittaa käyttäjien lisäämiä komentosarjoja. Olla varovainen! Kun käytät komentosarjoja jonkin poistamiseen tai muuttamiseen, ne käynnistetään automaattisesti heti niiden lisäyksen jälkeen laajennukseen. Emme suosittele skriptien lisäämistä laajennukseen esimerkiksi viestien poistamiseksi VKontakten seinältä, kun avaa sivu VKontakte (et koskaan tiedä).Käyttöohjeet: 
Tampermonkey-laajennus Google Chromelle:
Tampermonkey-laajennus on analoginen Firefoxin Greasemonkey-laajennuksesta, ja samalla tavalla voit luoda, tallentaa ja suorittaa mukautettuja skriptejä. Olla varovainen! Kun käytät komentosarjoja jonkin poistamiseen tai muuttamiseen, ne käynnistetään automaattisesti heti niiden lisäyksen jälkeen laajennukseen. Emme suosittele skriptien lisäämistä laajennukseen esimerkiksi viestien poistamiseksi VKontakte-seinältä, kun VKontakte-sivu on auki (et koskaan tiedä).Käyttöohjeet: 
Näin Greasemonkey- ja Tampermonkey-laajennukset toimivat. Kaikki on nopeaa ja yksinkertaista. Lisätyt skriptit eivät katoa mihinkään, ne voidaan myös kytkeä päälle ja pois päältä milloin tahansa. sopiva aika.
