Hoe u de JavaScript-ontwikkelaarsconsole gebruikt

Introductie

Moderne browsers hebben ingebouwde ontwikkelingstools om te werken met JavaScript en andere webtechnologieën. Deze tools omvatten de Console, die vergelijkbaar is met een shell-interface, samen met tools om de DOM te inspecteren, te debuggen en netwerkactiviteit te analyseren.

De Console kan worden gebruikt om informatie te loggen als onderdeel van het JavaScript-ontwikkelingsproces, evenals om interactie te hebben met een webpagina door JavaScript-uitdrukkingen uit te voeren binnen de context van de pagina. In essentie biedt de Console u de mogelijkheid om JavaScript on demand te schrijven, te beheren en te bewaken.

Deze tutorial zal uitleggen hoe je kunt werken met de Console en JavaScript binnen de context van een browser, en een overzicht bieden van andere ingebouwde ontwikkelingstools die je kunt gebruiken als onderdeel van je webontwikkelingsproces.

Werken met de Console in een Browser

De meeste moderne webbrowsers die standaardgebaseerd HTML en XHTML ondersteunen, bieden toegang tot een ontwikkelaarsconsole waarin je kunt werken met JavaScript in een interface vergelijkbaar met een terminalshell. In dit gedeelte wordt beschreven hoe je toegang krijgt tot de console in Firefox en Chrome.

Firefox

Om de Webconsole te openen in Firefox, ga naar het ☰ menu in de rechterbovenhoek naast de adresbalk.

Selecteer Meer hulpprogramma’s. Als dat geopend is, klik dan op het item Webontwikkelaarshulpmiddelen.

Zodra je dat hebt gedaan, zal een lade onderaan het browservenster opengaan:

Je kunt ook de Webconsole openen met de toetsenbordcombinatie CTRL + SHIFT + K op Linux en Windows, of COMMAND + OPTION + K op macOS.

Nu je toegang hebt tot de Console, kun je beginnen met werken binnen JavaScript.

Chrome

Om de JavaScript-console in Chrome te openen, kunt u navigeren naar het menu rechtsboven in uw browser-venster, aangegeven door drie verticale stippen. Van daaruit kunt u Meer Tools selecteren en vervolgens Ontwikkelaarshulpmiddelen.

Dit opent een paneel waar u op Console kunt klikken op de menubalk bovenaan om de JavaScript-console te openen als deze nog niet is gemarkeerd:

U kunt ook de JavaScript-console openen door de sneltoets CTRL + SHIFT + J te gebruiken op Linux of Windows, of COMMAND + OPTION + J op macOS, wat de focus direct naar de Console brengt.

Nu u toegang heeft tot de Console, kunt u erin gaan werken met JavaScript.

Werken in de Console

In de Console kunt u JavaScript-code typen en uitvoeren.

Begin met een waarschuwing die de string Hello, World! afdrukt:

alert("Hello, World!");

Zodra u op de ENTER-toets drukt na uw regel JavaScript, verschijnt er een waarschuwingspop-up in uw browser:

Let op dat de Console ook het resultaat van het evalueren van een expressie zal afdrukken, wat wordt weergegeven als undefined wanneer de expressie niet expliciet iets teruggeeft.

In plaats van pop-upmeldingen waar je uit moet klikken, kun je werken met JavaScript door het te loggen naar de Console met console.log.

Om de string Hallo, wereld! af te drukken, typ je het volgende in de Console:

console.log("Hello, World!");

In de console ontvang je dan de volgende output:

Output
Hello, World!

Je kunt ook wiskunde uitvoeren in de Console:

console.log(2 + 6);

Output
8

Je kunt ook wat ingewikkelder wiskunde proberen:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

Bovendien kun je werken op meerdere regels met variabelen:

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Als je een opdracht die je via de Console hebt doorgegeven wilt wijzigen, kun je de pijl omhoog (↑) op je toetsenbord typen om de vorige opdracht op te halen. Dit stelt je in staat om de opdracht te bewerken en opnieuw te verzenden.

De JavaScript Console biedt je een ruimte om JavaScript-code in realtime uit te proberen door je een omgeving te bieden die lijkt op een terminal shell-interface.

Werken met een HTML-bestand

Je kunt werken binnen de context van een HTML-bestand of een dynamisch gegenereerde pagina in de Console. Dit geeft je de mogelijkheid om te experimenteren met JavaScript-code binnen de context van bestaande HTML, CSS en JavaScript.

Houd er rekening mee dat zodra je een pagina opnieuw laadt nadat je deze in de Console hebt gewijzigd, deze terugkeert naar de staat voordat je het document hebt gewijzigd. Zorg ervoor dat je eventuele wijzigingen die je wilt behouden ergens anders opslaat.

Neem een HTML-document, zoals het volgende index.html bestand, om te begrijpen hoe je de Console kunt gebruiken om het te wijzigen. Maak in je favoriete teksteditor een index.html bestand aan en voeg de volgende regels HTML toe:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

Als je het bovenstaande HTML-bestand opslaat en in de browser van je keuze laadt, wordt een lege pagina met de titel Vandaag's Datum weergegeven in de browser.

Open de Console en begin te werken met JavaScript om de pagina te wijzigen. Begin met het gebruik van JavaScript om een kop in de HTML in te voegen.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

Je krijgt de volgende uitvoer in de Console:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

Je pagina zou er nu ongeveer zo uit moeten zien:

Je kunt de stijl van de pagina aanpassen, zoals de achtergrondkleur:

document.body.style.backgroundColor = "lightblue";

Output
"lightblue"

Evenals de kleur van de tekst op de pagina:

document.body.style.color = "white";

Output
"white"

Nu zou je pagina iets vergelijkbaars moeten onthullen als dit:

Vanaf hier kun je een <p> paragrafelement maken:

let p = document.createElement("P");

Met dit element gemaakt, kun je vervolgens doorgaan met het maken van een tekstknooppunt dat aan de paragraaf kan worden toegevoegd:

let t = document.createTextNode("Paragraph text.");

Voeg het tekstknooppunt toe door het aan de variabele p toe te voegen:

p.appendChild(t);

En voeg ten slotte p samen met zijn paragraaf <p> element en toegevoegd tekstknooppunt aan het document toe:

document.body.appendChild(p);

Zodra je deze stappen hebt voltooid, zal je HTML-pagina index.html de volgende elementen bevatten:

De Console biedt je een ruimte om te experimenteren met het aanpassen van HTML-pagina’s, maar het is belangrijk om in gedachten te houden dat je de HTML-document zelf niet verandert wanneer je dingen in de Console doet. Zodra je de pagina opnieuw laadt, keert deze terug naar een leeg document.

Het begrijpen van Andere Ontwikkelingstools

Afhankelijk van welke ontwikkelingstools van de browser je gebruikt, kun je andere tools gebruiken om je webontwikkelingsworkflow te ondersteunen.

DOM – Document Object Model

Elke keer dat een webpagina wordt geladen, maakt de browser waarin deze zich bevindt een Document Object Model, of DOM, van de pagina.

De DOM is een boom van objecten en toont de HTML-elementen in een hiërarchische weergave. De DOM-boom is beschikbaar om te bekijken binnen het Inspector-paneel in Firefox of het Elements-paneel in Chrome.

Deze tools stellen je in staat om DOM-elementen te inspecteren en bewerken, en laten je ook de HTML identificeren die verband houdt met een aspect van een bepaalde pagina. De DOM kan je vertellen of een tekstfragment of afbeelding een ID-attribuut heeft en kan je helpen bepalen wat de waarde van dat attribuut is.

De pagina die je hierboven hebt aangepast, zou een DOM-weergave hebben die er voor het herladen van de pagina ongeveer zo uitziet:

Bovendien zie je CSS-stijlen in een zijpaneel of onder het DOM-paneel, waardoor je kunt zien welke stijlen worden toegepast binnen het HTML-document of via een CSS-stijlblad. Let bijvoorbeeld op welke stijlen het body-element van je voorbeeldpagina heeft in de Firefox Inspector:

Om een DOM-node live te bewerken, dubbelklik je op een geselecteerd element en maak je wijzigingen. Je kunt bijvoorbeeld een <h1>-tag wijzigen en er een <h2>-tag van maken.

Net als bij de Console keer je bij het herladen van de pagina terug naar de oorspronkelijke opgeslagen staat van het HTML-document.

Netwerk

De Netwerk-tab van de ingebouwde ontwikkeltools van je browser kan netwerkverzoeken monitoren en vastleggen. Deze tabblad onthult de netwerkverzoeken die de browser maakt, inclusief wanneer het een pagina laadt, hoe lang elk verzoek duurt, en geeft de details van elk van deze verzoeken. Dit kan worden gebruikt om de prestaties van paginalading te optimaliseren en verzoekproblemen te debuggen.

U kunt het tabblad Netwerk samen met de JavaScript-console gebruiken. Dat wil zeggen, u kunt het debuggen van een pagina starten met de console en vervolgens overschakelen naar het tabblad Netwerk om netwerkactiviteit te zien zonder de pagina opnieuw te laden.

Om meer te weten te komen over hoe u het tabblad Netwerk kunt gebruiken, kunt u meer lezen over het werken met Firefox’s Network Monitor of aan de slag gaan met het analyseren van netwerkprestaties met Chrome’s DevTools.

Responsief ontwerp

Wanneer websites responsief zijn, zijn ze ontworpen en ontwikkeld om er zowel goed uit te zien als goed te functioneren op verschillende apparaten: mobiele telefoons, tablets, desktops en laptops. Schermgrootte, pixeldichtheid en ondersteuning voor aanraking zijn factoren om rekening mee te houden bij het ontwikkelen voor verschillende apparaten. Als webontwikkelaar is het belangrijk om responsieve ontwerpprincipes in gedachten te houden, zodat uw websites volledig beschikbaar zijn voor mensen, ongeacht het apparaat dat ze gebruiken.

Zowel Firefox als Chrome bieden modi waarmee u ervoor kunt zorgen dat responsieve ontwerpprincipes aandacht krijgen terwijl u sites en apps voor het web maakt en ontwikkelt. Deze modi bootsen verschillende apparaten na die u kunt onderzoeken en analyseren als onderdeel van uw ontwikkelingsproces.

Lees meer over de Responsive Design Mode van Firefox of de Device Mode van Chrome om meer te weten te komen over hoe je deze tools kunt gebruiken om een meer gelijke toegang tot webtechnologieën te waarborgen.

Conclusie

Deze tutorial gaf een overzicht van het werken met een JavaScript Console binnen moderne webbrowsers, evenals enkele informatie over andere ontwikkelingstools die je kunt gebruiken in je workflow.

Om meer te leren over JavaScript, kun je lezen over datatypen, of de jQuery of D3-bibliotheken.