Asjad, mida te tõenäoliselt ei teadnud, et saate Chrome'i arendajakonsooliga hakkama saada

Chrome'il on sisseehitatud arendaja tööriistad. Sellel on palju erinevaid funktsioone, näiteks elemendid, võrk ja turvalisus. Täna keskendume 100% selle JavaScripti konsoolile.

Kodeerimise alustamisel kasutasin JavaScripti konsooli ainult selliste väärtuste logimiseks, nagu serverist saadud vastused või muutujate väärtus. Kuid aja jooksul ja õpetuste abil avastasin, et konsool suudab teha palju rohkem, kui ma kunagi ette kujutasin.

Siin on kasulikke asju, mida saate sellega teha. Kui loete seda Chrome'is (või mõnes muus brauseris) töölaual, saate selle arendaja tööriistad isegi avada ja neid kohe proovida.

1. Valige DOM-elemendid

Kui olete jQueryga tuttav, teate, kui tähtsad on valijad $ ('. Class') ja $ ('# id'). Nad valivad DOM-elemendid sõltuvalt nendega seotud klassist või ID-st.

Kuid kui teil pole DOM-is juurdepääsu jQueryle, saate seda siiski teha ka arendajakonsoolis.

$ ('tagName') $ ('. class') $ ('# id') ja $ ('. class #id') on samaväärsed dokumendiga document.querySelector (''). See tagastab DOM-i esimese elemendi, mis sobib valikuga.

DOM-i kõigi elementide valimiseks sõltuvalt konkreetsest valijast võite kasutada dollareid $$ ('tagName') või $$ ('. Class') - märkige topelt dollarimärgid. See paneb nad ka massiivi. Võite uuesti minna ja valida nende seast konkreetse elemendi, määrates selle elemendi asukoha massiivis.

Näiteks $$ ('. ClassName') annab teile kõik elemendid, millel on class className, ja $$ ('. ClassName') [0] ja $$ ('. ClassName') [1] annavad teile vastavalt esimene ja teine ​​element.

2. Teisendage oma brauser redaktoriks

Mitu korda olete mõelnud, kas saaksite mõnda teksti brauseris ise muuta? Vastus on jah, saate oma brauseri teisendada tekstiredaktoriks. DOM-is saate teksti lisada ja teksti kustutada.

Te ei pea enam elementi kontrollima ja HTML-i muutma. Selle asemel minge arendajakonsooli ja tippige järgmine:

document.body.contentEditable=true 

See muudab sisu muudetavaks. Nüüd saate DOMis muuta peaaegu kõike ja kõike.

3. Leidke DOMist elemendiga seotud sündmused

Silumise ajal peate olema huvitatud DOM-i elemendiga seotud sündmuste kuulajate leidmisest. Arendajakonsool muudab nende leidmise lihtsamaks.

getEventListeners ($ ('selector')) tagastab massiivi objektemis sisaldab kõiki selle elemendiga seotud sündmusi. Saate objekti laiendadasündmuste vaatamiseks:

Konkreetse sündmuse kuulaja leidmiseks võite teha midagi sellist:

getEventListeners($(‘selector’)).eventName[0].listener 

See kuvab kuulajakonkreetse sündmusega seotud. Siin eventName [0] on massiiv, mis loetleb konkreetse sündmuse kõik sündmused. Näiteks:

getEventListeners($(‘firstName’)).click[0].listener 

... kuvab kuulaja, mis on seotud elemendi ID 'eesnimi' klõpsuüritusega.

4. Jälgi sündmusi

Kui soovite jälgida DOM-i konkreetse elemendiga seotud sündmusi nende täitmise ajal, saate seda teha ka konsoolis. Mõne või kõigi nende sündmuste jälgimiseks võite kasutada erinevaid käske.

  • monitorEvents ($ ('selector')) jälgib kõiki teie valijaga elemendiga seotud sündmusi ja logib need siis konsooli kohe, kui need vallandatakse. Näiteks logib monitorEvents ($ ('# firstName')) kõik elemendiga seotud sündmused ID-ga 'firstName'.
  • monitorEvents ($ ('selector'), 'eventName') logib kindla elemendiga seotud sündmuse. Funktsioonile saate argumendina edastada sündmuse nime. See logib ainult konkreetse sündmuse, mis on seotud kindla elemendiga. Näiteks logib monitorEvents ($ ('# firstName'), 'click') kõik elemendiga seotud klõpsamissündmused ID-ga 'firstName'.
  • monitorEvents ($ ('selector'), ['eventName1', 'eventName3', ....]) logib mitu sündmust vastavalt teie vajadustele. Selle asemel, et ühe sündmuse nimi argumendina edastada, edastage stringide massiiv, mis sisaldab kõiki sündmusi. Näiteks monitorEvents ($ ('# firstName'), ['click', 'focus']) logib kliki sündmuse ja fookuse sündmused, mis on seotud elemendiga ID-ga 'firstName'.
  • unmonitorEvents ($ ('selector')): see peatab konsoolis toimuvate sündmuste jälgimise ja logimise.

5. Leidke koodiploki täitmise aeg

JavaScripti konsoolil on oluline funktsioon nimega console.time ('labelName'), mis võtab argumendiks sildi nime ja käivitab seejärel taimeri. On veel üks oluline funktsioon nimega console.timeEnd ('labelName'), mis võtab ka sildi nime ja lõpetab selle konkreetse sildiga seotud taimeri.

Näiteks:

console.time('myTime'); //Starts the timer with label - myTimeconsole.timeEnd('myTime'); //Ends the timer with Label - myTime//Output: myTime:123.00 ms

Kaks ülaltoodud koodirida annavad meile aja, mis kulub taimeri käivitamisest kuni taimeri lõpetamiseni.

Koodiploki käivitamiseks kuluva aja arvutamiseks saame seda täiustada.

Oletame näiteks, et tahan leida aasa täitmiseks kulunud aja. Ma saan teha nii:

console.time('myTime'); //Starts the timer with label - myTimefor(var i=0; i < 100000; i++){ 2+4+5;}console.timeEnd('mytime'); //Ends the timer with Label - myTime//Output - myTime:12345.00 ms

6. Järjestage muutuja väärtused tabelisse

Oletame, et meil on massiiv objekte, mis näevad välja järgmised:

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}]

Kui sisestame muutuja nime konsooli, annab see meile väärtused objektide massiivi kujul. See on väga kasulik. Saate objekte laiendada ja väärtusi näha.

Kuid seda on raske mõista, kui omadused suurenevad. Seetõttu võime muutuja selge kujutise saamiseks kuvada need tabelis.

console.table (muutujaNimi) tähistab muutujat ja kõiki selle omadusi tabelstruktuuris. See näeb välja järgmine:

7. Inspect an Element in the DOM

You can directly inspect an element from the console:

  • inspect($(‘selector’)) will inspect the element that matches the selector and take you to the Elements tab in the Chrome Developer Tools. For example inspect($(‘#firstName’)) will inspect the element with the ID ‘firstName’ and inspect($(‘a’)[3]) will inspect the 4th anchor element you have in your DOM.
  • $0, $1, $2, etc. can help you grab the recently inspected elements. For example $0 gives you the last-inspected DOM element, whereas $1 gives you the second last inspected DOM Element.

8. List the Properties of an Element

If you want to list all the properties of an element, you can do that directly from the Console.

dir($(‘selector’)) returns an object with all of the properties associated with its DOM element. You can expand these to view them in more detail.

9. Leidke oma viimase tulemuse väärtus

Konsooli saate kasutada kalkulaatorina. Ja kui te seda teete, peate võib-olla järgima ühte arvutust teisega. Nii saate eelmise arvutuse tulemuse mälust hankida järgmiselt.

$_ 

See näeb välja järgmine:

2+3+49 //- The Answer of the SUM is 9$_9 // Gives the last Result$_ * $_81 // As the last Result was 9Math.sqrt($_)9 // As the last Result was 81$_9 // As the Last Result is 9

10. Tühjendage konsool ja mälu

Kui soovite konsooli ja selle mälu kustutada, tippige lihtsalt:

clear()

Seejärel vajutage sisestusklahvi. See on kõik, mis seal on.

Need on vaid mõned näited selle kohta, mida saate teha Chrome'i JavaScripti konsooliga. Loodan, et need näpunäited muudavad teie elu veidi lihtsamaks.

Täname lugemast. Kui teile see postitus meeldis, soovitage seda julgelt teistele inimestele siin Mediumis, vajutades allolevat südamenuppu. Minu kohta leiate rohkem teavet või jälgige mind Twitteris ja siin Mediumis.