JavaScript Console.log () Példa - Hogyan lehet nyomtatni a JS konzoljára

Az üzenetek naplózása a konzolra nagyon egyszerű módszer a kód kisebb problémáinak diagnosztizálására és elhárítására.

De tudtad, hogy nem consolecsak valamiben van log? Ebben a cikkben megmutatom, hogyan lehet nyomtatni a JS konzoljára, valamint azokat a dolgokat, amelyekről nem tudtál console.

Firefox többsoros szerkesztő konzol

Ha még soha nem használta a többsoros szerkesztő módot a Firefoxban, akkor most próbálja ki!

Csak nyissa meg a Ctrl+Shift+Kvagy a konzolt, vagy F12a jobb felső sarokban megjelenik egy gomb, amely azt mondja: "Váltás többsoros szerkesztő módra". Alternatív megoldásként megnyomhatja Ctrl+B.

Ez egy többsoros kódszerkesztőt biztosít a Firefox belsejében.

konzol.log

Kezdjük egy nagyon egyszerű napló példával.

let x = 1 console.log(x)

Írja be a Firefox konzolba, és futtassa a kódot. Kattintson a "Futtatás" gombra vagy megnyomhatja Ctrl+Enter.

Ebben a példában "1" -et kell látnunk a konzolon. Elég egyértelmű, igaz?

Több érték

Tudta, hogy több értéket is felvehet? Adjon hozzá egy karaktersorozatot az elejéhez, hogy könnyen azonosítsa, hogy mit jelent.

let x = 1 console.log("x:", x)

De mi van, ha több olyan értékünk van, amelyeket naplózni akarunk?

let x = 1 let y = 2 let z = 3

console.log()Háromszoros gépelés helyett mindet belefoglalhatjuk. Ha szeretnénk, mindegyik elé felvehetünk egy karakterláncot is.

let x = 1 let y = 2 let z = 3 console.log("x:", x, "y:", y, "z:", z)

De ez túl sok munka. Csak tekerje őket göndör nadrágtartóval! Most kap egy objektumot a megnevezett értékekkel.

let x = 1 let y = 2 let z = 3 console.log( {x, y, z} )

Ugyanezt megteheti egy objektummal is.

let user = { name: 'Jesse', contact: { email: '[email protected]' } } console.log(user) console.log({user})

Az első napló kinyomtatja a felhasználói objektum tulajdonságait. A második az objektumot "felhasználóként" azonosítja, és kinyomtatja a benne lévő tulajdonságokat.

Ha sok dolgot naplóz a konzolon, ez segíthet az egyes naplók azonosításában.

Változók a naplóban

Tudta, hogy a napló egyes részeit használhatja változóként?

console.log("%s is %d years old.", "John", 29)

Ebben a példában %segy string opcióra utal, amely a kezdeti érték után szerepel. Ez a "John" -ra vonatkozna.

A %dkezdeti érték után szereplő számjegy opcióra utal. Ez a 29-re vonatkozna.

Ennek az állításnak a kimenete a következő lenne: "John 29 éves."

A rönkök variációi

Néhány naplóváltozat létezik. Van a legszélesebb körben használt console.log(). De van még:

console.log('Console Log') console.info('Console Info') console.debug('Console Debug') console.warn('Console Warn') console.error('Console Error') 

Ezek a variációk stílusot adnak a konzol naplóinak. Például a warnvégződés sárga színű errorlesz, a vége pedig piros.

Megjegyzés: A stílusok böngészőnként eltérőek.

Opcionális naplók

Az üzeneteket feltételesen kinyomtathatjuk a konzolra console.assert().

let isItWorking = false console.assert(isItWorking, "this is the reason why")

Ha az első argumentum hamis, akkor az üzenet naplózásra kerül.

Ha volt, hogy változtatni isItWorkingkell true, akkor az üzenet nem lesz rögzítve.

Számolás

Tudta, hogy számíthat konzollal?

for(i=0; i<10; i++){ console.count() }

Ennek a ciklusnak minden egyes iterációja számot nyomtat a konzolra. Ekkor megjelenik az "alapértelmezett: 1, alapértelmezett: 2" stb., Amíg el nem éri a 10-et.

Ha újra futtatja ugyanazt a kört, látni fogja, hogy a gróf ott folytatja, ahol abbahagyta; 11 - 20.

A számláló visszaállításához használhatjuk console.countReset().

And, if you want to name the counter to something other than "default", you can!

for(i=0; i<10; i++){ console.count('Counter 1') } console.countReset('Counter 1')

Now that we have added a label, you will see "Counter 1, Counter 2", and so on.

And to reset this counter, we have to pass the name into countReset. This way you can have several counters running at the same time and only reset specific ones.

Track Time

Besides counting, you can also time something like a stopwatch.

To start a timer we can use console.time(). This will not do anything by itself. So, in this example, we will use setTimeout() to emulate code running. Then, within the timeout, we will stop our timer using console.timeEnd().

console.time() setTimeout(() => { console.timeEnd() }, 5000)

As you would expect, after 5 seconds, we will have a timer end log of 5 seconds.

We can also log the current time of our timer while it's running, without stopping it. We do this by using console.timeLog().

console.time() setTimeout(() => { console.timeEnd() }, 5000) setTimeout(() => { console.timeLog() }, 2000)

In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.

Just the same as the counter, we can label timers and have multiple running at the same time.

Groups

Another thing that you can do with log is group them. ?

We start a group by using console.group(). And we end a group with console.groupEnd().

console.log('I am not in a group') console.group() console.log('I am in a group') console.log('I am also in a group') console.groupEnd() console.log('I am not in a group')

This group of logs will be collapsible. This makes it easy to identify sets of logs.

By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().

Labels can also be passed into the group() to better identify them.

Stack Trace

You can also do a stack trace with console. Just add it into a function.

function one() { two() } function two() { three() } function three() { console.trace() } one() 

In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().

Tables

Here's one of the most mind-blowing uses for console: console.table().

So let's set up some data to log:

let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]

Now we'll log this data using console.table(devices).

But wait – it gets better!

If we only want the brands, just console.table(devices, ['brand'])!

How about a more complex example? In this example, we'll use jsonplaceholder.

async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()

Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.

Style ?

Did you know that you can use CSS properties to style your logs?

Ehhez %cmegadjuk, hogy van-e hozzáadandó stílusunk. A stílusok átkerülnek a log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Ezt használhatja a naplók kiemelésére.

Egyértelmű

Ha napló használatával próbál egy problémát elhárítani, akkor sokat frissíthet, és a konzol rendetlenséget okozhat.

Csak töltse console.clear()fel a kód tetejére, és minden frissítéskor friss konzolt kap. ?

Csak ne add hozzá a kódod aljához, lol.

Köszönöm, hogy elolvasta!

Ha videón keresztül szeretné megismételni a cikkben szereplő fogalmakat, megnézheti ezt a videó-verziót, amelyet itt készítettem.

Jesse vagyok Texasból. Nézze meg a többi tartalmat, és tudassa velem, hogyan segíthetek Önnek abban, hogy webfejlesztővé váljon.

• Feliratkozás a YouTube-ra
• Köszönj! Instagram | Twitter
• Iratkozzon fel a hírlevelemre