{"id":39386,"date":"2021-07-29T11:36:49","date_gmt":"2021-07-29T09:36:49","guid":{"rendered":"https:\/\/kinsta.com\/?p=97002"},"modified":"2023-06-08T15:38:16","modified_gmt":"2023-06-08T13:38:16","slug":"inspect-element","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/","title":{"rendered":"Zo gebruik je de Inspect Element tool van je browser om webpagina&#8217;s te bewerken"},"content":{"rendered":"<p>Er zijn verschillende waardevolle <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdevelopment-tools\/\">webdevelopment resources<\/a> te vinden, van boeken, video&#8217;s tot <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesigncursussen\/\">online cursussen<\/a> en meer. Leren hoe je de Inspect Element tool van je browser kan gebruiken is ook zo&#8217;n waardevol instrument. Je kan hiermee een hoop leren, en je hebt er altijd toegang toe.<\/p>\n<p>Met de Inspect Element feature kan je zien hoe een website gebouwd is. Alhoewel je alleen de code van de frontend kan zien, zoals HTML, CSS en soms JavaScript, biedt het wel een hoop inzicht in hoe de developers een bepaalde website hebben gebouwd.<\/p>\n<p>In dit artikel laten we je zien hoe je de Inspect Element kan gebruiken, naast een aantal gerelateerde technologie\u00ebn, features en functionaliteiten. Laten we eerst even bekijken hoe je de Inspect Element tool zelf precies kan gebruiken.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/span><\/p>\n<p><strong>Bekijk onze <a href=\"https:\/\/www.youtube.com\/watch?v=TYYB8s4uUI4\">videogids over hoe je een website bewerkt met Inspect Element<\/a><\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=TYYB8s4uUI4\"><\/kinsta-video>\n<h2>De Inspect Element tool<\/h2>\n<p>In de begindagen van het internet was er maar \u00e9\u00e9n manier om de code van een website te bekijken, namelijk de <strong>View source<\/strong> feature.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Kinsta View Source page\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/kinsta-view-source.png\" alt=\"Kinsta.com\u2019s \u201cView Source\u201d pagina.\" width=\"1000\" height=\"637\"><figcaption class=\"wp-caption-text\">Kinsta.com\u2019s \u201cView Source\u201d pagina.<\/figcaption><\/figure>\n<p>Dit was de standaard voordat we overal <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">Cascading Style Sheets (CSS)<\/a>\u00a0en <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">JavaScript<\/a> gebruikten. Webdevelopers gebruikten HTML voor alle elementen van een website, inclusief content, design, functies\u2026 eigenlijk alles dus.<\/p>\n<p>Naarmate het internet zich verder ontwikkelde, en de onderliggende technologie krachtiger werd, werd het ook tijd om betere tools te maken. <a href=\"http:\/\/firebug.com\/\">Firebug van Firefox<\/a> was \u00e9\u00e9n van de eerste oplossingen en werkte als tool om onder de motorkap te kijken:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Firefox and Firebug logos.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firebug.png\" alt=\"De logo's van Firefox en Firebug.\" width=\"1000\" height=\"230\"><figcaption class=\"wp-caption-text\">De logo&#8217;s van Firefox en Firebug.<\/figcaption><\/figure>\n<p>Na verloop van tijd werd deze functionaliteit ingevoerd bij bijna alle browsers. Vandaag de dag kennen we die feature als de Inspect Element tool:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element tool used on the Kinsta website.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/kinsta-inspect-element.png\" alt=\"De Inspect Element tool op de Kinsta website.\" width=\"1000\" height=\"580\"><figcaption class=\"wp-caption-text\">De Inspect Element tool op de Kinsta website.<\/figcaption><\/figure>\n<p>Het is een krachtige en handige manier om de onderliggende technologie en code van een website te bekijken. Je kan het dan ook op verschillende plekken openen, bijvoorbeeld via een toolbarmenu, door te rechtsklikken op een pagina, of via een sneltoets.<\/p>\n<p>Alhoewel de HTML en CSS van een pagina het belangrijkste doel is van de Inspect Element tool, zijn er nog meer mogelijkheden.<\/p>\n\n<h3>Het Inspect Element scherm<\/h3>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" title=\"Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/brave-devtools-1.png\" alt=\"Brave's DevTools.\" width=\"1000\" height=\"629\"><figcaption class=\"wp-caption-text\">Brave&#8217;s DevTools.<\/figcaption><\/figure>\n<p>De Inspect Element tool is veel meer dan een manier om code te tonen. Er zijn verschillende panelen die je kan gebruiken:<\/p>\n<ul>\n<li><strong>Inspector \u2014\u00a0<\/strong>Dit wordt\u00a0<strong>Elements <\/strong>genoemd in sommige browsers. Dit is het belangrijkste scherm in de Inspect Element tool en toont alle code, samen met element-specifieke CSS. Je ziet ook meer informatie over het &#8220;grid system&#8221; van een website, naast nog enkele andere zaken.<\/li>\n<li><strong>Console \u2014\u00a0<\/strong>Dit is een frontend logboek met meldingen voor een website, en ook een plek waar je snel kleine stukjes code kan invoeren om idee\u00ebn te testen.<\/li>\n<li><strong>Network \u2014\u00a0<\/strong>Hier zie je de verzoeken die door en aan de server zijn gedaan, zoals alle POST en GET requests.<\/li>\n<li><strong>Performance \u2014<\/strong>Uiteraard moeten de <a href=\"https:\/\/kinsta.com\/nl\/leren\/wordpress-sneller-maken\/\">prestaties van een website goed zijn<\/a>. Daarom is er een speciale tool om de belangrijkste indicatoren van een website te tonen. Hierbij zie je grote verschillen tussen browsers.<\/li>\n<li><strong>Memory \u2014<\/strong>In dit scherm zie je hoe de website gebruik maakt van geheugen, en ook hier bieden sommige browsers erg uitgebreide informatie, en anderen niet.<\/li>\n<li><strong>Application \u2014<\/strong>In dit scherm kan je allerlei informatie over een website zien, met name over de cache, achtergrond diensten en meer.<\/li>\n<\/ul>\n<p>Daarnaast kan je zelf nog schermen toevoegen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A list of further panels within Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/brave-more-devtools.png\" alt=\"Een lijst met andere panelen in de DevTools van Brave.\" width=\"1000\" height=\"643\"><figcaption class=\"wp-caption-text\">Een lijst met andere panelen in de DevTools van Brave.<\/figcaption><\/figure>\n<p>Er zijn eenvoudige panelen, zoals <strong>Media<\/strong>, en complexere opties, zoals <strong>JavaScript Profiler<\/strong> en de <strong>Performance monitor<\/strong>. We kunnen dus wel concluderen dat de naam van de Inspect Element tool alle onderliggende functies weinig eer aan doet. Er zit een hoop kracht in en zou centraal moeten staan in de workflow van elke webdeveloper.<\/p>\n<h2>Waarom zou je Inspect Element willen gebruiken?<\/h2>\n<p>De Inspect Element tool zou eigenlijk je vaste oplossing moeten zijn die je constant open hebt tijdens de ontwikkeling. We zullen alle technische details bespreken gedurende dit artikel. Maar allereerst is het de moeite waard om na te denken waarom je Inspect Element zou willen gebruiken.<\/p>\n<p>Daar zijn namelijk een hoop redenen voor:<\/p>\n<ul>\n<li>Je kan andere websites bekijken voor inspiratie voor je eigen website.<\/li>\n<li>Je kan leren hoe websites of developers bepaalde technieken toepassen.<\/li>\n<li>Je kan hiermee experimenten in je eigen website zonder enige consequentie.<\/li>\n<li>In de meeste Inspect Element tools krijg je de mogelijkheid om website te debuggen.<\/li>\n<li>Het is handig om meer informatie over de betreffende website mee te krijgen.<\/li>\n<\/ul>\n<p>Kort gezegd gaat het leren over webdevelopment over het kijken naar goede voorbeelden van andere websites, en erachter komen hoe ze in elkaar steken.<\/p>\n<p>De Inspect Element tool geeft je de precieze HTML en CSS die op een website gebruikt is, waardoor je een unieke mogelijkheid hebt die aspecten en technieken in je eigen werk te gebruiken.<\/p>\n<h2>Hoe vind je de Inspect Element tool van je browser?<\/h2>\n<p>Het goede nieuws is dat de Inspect Element tool eenvoudig te vinden is. In de meeste browsers kan je gewoon rechts-klikken op een pagina en\u00a0<strong>Inspect<\/strong>\u00a0of\u00a0<strong>Inspect Element<\/strong> selecteren.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Choosing the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/select-inspect-element.png\" alt=\"De Inspect Element tool.\" width=\"1000\" height=\"516\"><figcaption class=\"wp-caption-text\">De Inspect Element tool.<\/figcaption><\/figure>\n<p>Standaard zal de tool geopend worden in een gesplitst venster. Dit opent meestal aan de rechterkant. Maar je kan dit eventueel aanpassen en de tool ook uit het venster halen.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element tool in its own window.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/own-window.png\" alt=\"De Inspect Element tool in een eigen venster.\" width=\"1000\" height=\"606\"><figcaption class=\"wp-caption-text\">De Inspect Element tool in een eigen venster.<\/figcaption><\/figure>\n<p>Natuurlijk kan je de Inspect Element tool ook openen via een toolbar of sneltoets. De precieze locatie hangt af van de browser. Bijvoorbeeld\u00a0<a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/index.html\">in Firefox<\/a> kan je de\u00a0<strong>Web Developer Tools<\/strong>\u00a0vinden in het menu <strong>Tools &gt; Browser Tools<\/strong>. Daarentegen hebben\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/brave-browser-review\/\">Brave<\/a>\u00a0(en andere Chromium-based browsers) de <strong>Developer Tools<\/strong>\u00a0optie in het <strong>View &gt; Developer<\/strong> menu.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Brave's toolbar menu, showing its developer tools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/developer-option.png\" alt=\"Toolbar menu van Brave met developer tools.\" width=\"1000\" height=\"607\"><figcaption class=\"wp-caption-text\">Toolbar menu van Brave met developer tools.<\/figcaption><\/figure>\n<p>De sneltoets is wel meestal hetzelfde voor verschillende browsers:\u00a0<strong>Command + Shift + C<\/strong>\u00a0(<strong>Control + Shift + C<\/strong>\u00a0voor Windows). Deze sneltoets maakt het makkelijk om meteen de gewenste tools te openen.<\/p>\n<p>Als je nog nooit eerder de Inspect Element tool hebt geopend, wordt het aan de rechterkant weergegeven. Om dit te veranderen klik je op het <a href=\"https:\/\/kinsta.com\/nl\/blog\/meer-website-verkeer\/\">stoplicht<\/a> menu in de toolbar van Inspect Element. Hier kan je bepalen aan welke kant de tool wordt getoond.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Dock side option in the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/dock-side.png\" alt=\"De \u201cDock side\u201d opties in de Inspect Element tool.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">De \u201cDock side\u201d opties in de Inspect Element tool.<\/figcaption><\/figure>\n<p>Firefox gebruikt standaard een &#8220;triple pane&#8221; view, waarmee je zoveel mogelijk informatie in de Inspect Element tool tegelijkertijd kan bekijken:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Firefox's triple pane view.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-triple-panes.png\" alt=\"Firefox\u2019s \u201ctriple pane\u201d view.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Firefox\u2019s \u201ctriple pane\u201d view.<\/figcaption><\/figure>\n<p>Nu je de tool open hebt, is het hoog tijd om te zien wat je er allemaal mee kan. Daar gaan we nu mee bezig.<\/p>\n<h2>3 momenten om de Inspect Element tool te gebruiken<\/h2>\n<p>We hebben al enkele manieren aangestipt waarop je de Inspect Element tool kan gebruiken, maar we zullen enkele specifieke use cases bespreken om dit verder uit te diepen. We kijken kort naar verschillende scenario&#8217;s.<\/p>\n<h3>1. Zoeken naar specifieke elementen binnen een webpagina<\/h3>\n<p>Het belangrijkste doel van de Inspect Element tool zit al in de naam, namelijk het inspecteren van elementen. Om dit te doen ga je naar de gewenste webpagina en kies je een manier om de <a href=\"https:\/\/kinsta.com\/nl\/blog\/code-review-tools\/\">development tools<\/a> te openen.<\/p>\n<p>Zodra het venster open is, klik je op de pijl die werkt als een selector voor het gewenste element:<\/p>\n<figure style=\"width: 946px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspector Arrow icon.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/inspector-arrow.png\" alt=\"Het Inspector Arrow icoon.\" width=\"946\" height=\"304\"><figcaption class=\"wp-caption-text\">Het Inspector Arrow icoon.<\/figcaption><\/figure>\n<p>Vanuit hier kan je hoveren over een gewenst element op de pagina, waarna je het gemarkeerd ziet worden in het venster <strong>Inspector\/Elements<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Highlighting an element in the development tools panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/highlight-element.png\" alt=\"Markeren van een element in de development tools.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Markeren van een element in de development tools.<\/figcaption><\/figure>\n<p>Het is erg eenvoudig: \u00e9\u00e9n van de redenen waarom de Inspect Element tool zo populair en belangrijk is voor webdevelopers.<\/p>\n<h3>2. Nabootsen van een apparaat, display of browser<\/h3>\n<p>Inspect Element kan ook gebruikt worden om apparaten te emuleren, als een soort device emulator. Je kan dus zien hoe de website eruit ziet op verschillende apparaten. De mogelijkheden zijn eindeloos:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A list of emulated devices within Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/emulated-devices.png\" alt=\"Een lijst van emuleerbare apparaten in Brave.\" width=\"1000\" height=\"655\"><figcaption class=\"wp-caption-text\">Een lijst van emuleerbare apparaten in Brave.<\/figcaption><\/figure>\n<p>Deze emulator is erg handig of je mobile-first strategie of <a href=\"https:\/\/kinsta.com\/nl\/blog\/responsive-webdesign\/\">responsive design<\/a> goed werkt. Dit is erg belangrijk, en natuurlijk ook veel kosteneffectiever dan een stuk of 200 apparaten in je bureaula bewaren.<\/p>\n<p>Je kan de emulator meestal openen via een klein icoon binnen het Inspect Element scherm:<\/p>\n<figure style=\"width: 942px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Emulating a device with the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/device-icon.png\" alt=\"Emuleren van een apparaat met de Inspect Element tool.\" width=\"942\" height=\"224\"><figcaption class=\"wp-caption-text\">Emuleren van een apparaat met de Inspect Element tool.<\/figcaption><\/figure>\n<p>Door op dit icoon te klikken ziet je website eruit zoals op het gekozen apparaat:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Choosing a device to emulate from the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/device-emulation.png\" alt=\"Kiezen van een apparaat dat je wil emuleren in de Inspect Element tool.\" width=\"1000\" height=\"681\"><figcaption class=\"wp-caption-text\">Kiezen van een apparaat dat je wil emuleren in de Inspect Element tool.<\/figcaption><\/figure>\n<p>We zullen hier zometeen nog verder op ingaan, maar het is een erg handige en effectieve manier om je ontwerp op verschillende apparaten te controleren.<\/p>\n<h3>3. De prestaties van een webpagina controleren<\/h3>\n<p>De Inspect Element tool kan je ook helpen bij het beoordelen van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelheidstest-website\/\">snelheid en prestaties<\/a> van een website via het scherm <strong>Performance<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element Performance panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/performance-tab.png\" alt=\"Het Inspect Element Performance panel.\" width=\"1000\" height=\"767\"><figcaption class=\"wp-caption-text\">Het Inspect Element Performance panel.<\/figcaption><\/figure>\n<p>Deze feature werkt door het bijhouden van laadtijden van specifieke elementen en scripts. Chromium-based browsers bieden deze informatie op een bijzonder handige manier aan. De pagina wordt gemeten tijdens het laden, en je kan vervolgens de resultaten zien op volgorde van tijd.<\/p>\n<p>Dit is een uitstekende manier om te controleren of een pagina goede prestaties biedt. Vervolgens kun je met een gespecialiseerde tool zoals\u00a0<a href=\"https:\/\/kinsta.com\/nl\/blog\/google-pagespeed-insights\/\">Google PageSpeed Insights<\/a>\u00a0of\u00a0<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\">Lighthouse<\/a>\u00a0werken om de prestaties nog verder te optimaliseren. Chromium-based browsers hebben een ingebouwde Lighthouse report generator:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A built-in Google Lighthouse report.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/lighthouse.png\" alt=\"Een ingebouwd Google Lighthouse rapport.\" width=\"1000\" height=\"663\"><figcaption class=\"wp-caption-text\">Een ingebouwd Google Lighthouse rapport.<\/figcaption><\/figure>\n<p>Je kan ook een overzicht van de prestaties zien in enkele andere tabblad. Zo kan je bijvoorbeeld een <strong>Call Tree<\/strong> openen, een algemeen overzicht, en een <strong>Event Log<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Inspect Element's Event Log.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/event-log.png\" alt=\"Het Inspect Element\u2019s Event Log.\" width=\"1000\" height=\"663\"><figcaption class=\"wp-caption-text\">Het Inspect Element\u2019s Event Log.<\/figcaption><\/figure>\n<p>Er zijn dan ook genoeg opties dat je wellicht geen andere tools nodig hebt om de prestaties en functies van je website te controleren. Tijd om te bekijken hoe de tool in de praktijk werkt.<\/p>\n<h2>Tips voor het gebruik van de Inspect Element tool<\/h2>\n<p>We hebben het net gehad over het feit dat de Inspect Element tool veel meer mogelijkheden biedt dan je op het eerste oog zou denken. We kijken nu naar enkele tips om het maximale uit alle features te halen, te beginnen met de basis.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Het veranderen van elementen, waarden en states<\/h3>\n<p>Tot nu toe hebben we het alleen kort gehad over de mogelijkheden van de Inspect Element tool om tijdelijke wijzigingen te maken. Laten we dit eens nader bekijken.<\/p>\n<p>De stappen zijn vrij eenvoudig. Allereerst gebruik je het pijltje om het gewenste element te selecteren. Je ziet een overlay met de verschillende componenten.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Selecting elements in the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/selecting-element.png\" alt=\"Selecteren van elementen in de Inspect Element tool.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Selecteren van elementen in de Inspect Element tool.<\/figcaption><\/figure>\n<p>Nadat je het gewenste element gevonden hebt, kan je overal dubbelklikken waar je een tag ziet in het <strong>Elements<\/strong> paneel, en een wijziging intypen. Stel dat we de originele hero-tekst op de Kinsta homepage willen wijzigen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing text on the Kinsta home page.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/changing-text.png\" alt=\"Veranderen van de tekst op de homepage van Kinsta.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Veranderen van de tekst op de homepage van Kinsta.<\/figcaption><\/figure>\n<p>Je kan ook op dezelfde manier <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-css\/\">met CSS werken<\/a> als met HTML. Neem bijvoorbeeld de Call To Action (CTA) knoppen op de website van Kinsta:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Selecting a button on the Kinsta home page.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/original-text.png\" alt=\"Selecteren van een knop op de Kinsta homepage.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Selecteren van een knop op de Kinsta homepage.<\/figcaption><\/figure>\n<p>Als je de knop selecteert met de pointer, zie je de bijbehorende CSS in het <strong>Styles<\/strong> paneel aan de rechterkant:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Style panel within the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/button-color.png\" alt=\"Het Styles paneel in de Inspect Element tool.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Het Styles paneel in de Inspect Element tool.<\/figcaption><\/figure>\n<p>Net als bij de HTML elementen, kan je ook de waarden van CSS veranderen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing the button color in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/button-color-change.png\" alt=\"Veranderen van de kleur van de knop via Styles.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Veranderen van de kleur van de knop via Styles.<\/figcaption><\/figure>\n<p>Bij elementen zoals knoppen, wil je natuurlijk met verschillende states kunnen werken. In dit geval is de <strong>:hover<\/strong> state de moeite waard om te veranderen. Dit doe je door op de <strong>:hov<\/strong> link in het Styles paneel te klikken. Hiermee krijg je een lijst te zien met verschillende states van het element, en je kan dan de gewenste hover-state kiezen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Bringing up the states options in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/hover-options.png\" alt=\"Bekijken van de opties voor \"States\" in het paneel Styles.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Bekijken van de opties voor &#8220;States&#8221; in het paneel Styles.<\/figcaption><\/figure>\n<p>De webpagina laat je vervolgens zien hoe de state eruitziet, zonder dat je iets hoeft te doen. Hier hebben we de hover-kleuren veranderd om het verschil met de normale knop te laten zien:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing hover state colors in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/hover-color-change.png\" alt=\"Veranderen van de hover-state kleur van de knop via Styles.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Veranderen van de hover-state kleur van de knop via Styles.<\/figcaption><\/figure>\n<p>Je kan zelfs de URL&#8217;s van afbeeldingen veranderen. Op de homepage van Kinsta laten we een screenshot zien van het\u00a0<a href=\"https:\/\/my.kinsta.com\/login?lang=nl\">MyKinsta dashboard<\/a>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The MyKinsta dashboard on the Kinsta home page.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/original-image-dashboard.png\" alt=\"Het MyKinsta dashboard op de Kinsta homepage.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Het MyKinsta dashboard op de Kinsta homepage.<\/figcaption><\/figure>\n<p>Door het element te vinden en de bron URL van de afbeelding te wijzigen, kun je verschillende andere afbeeldingen uitproberen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Changing an image on the Kinsta home page\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/cat-dashboard.png\" alt=\"In dit geval ging de verandering binnen enkele minuten live \" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">In dit geval ging de verandering binnen enkele minuten live (Afbeelding: <a href=\"https:\/\/pixabay.com\/photos\/cat-red-cat-kitten-cute-fur-dream-4037008\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pixabay<\/a>).<\/figcaption><\/figure>\n<p>Zoals je mag verwachten, zijn deze wijzigingen niet permanent en is alles weer terug naar het oude zodra je de pagina opnieuw laadt. Je zou er ook voor kunnen kiezen om alle HTML en CSS te kopi\u00ebren naar een <a href=\"https:\/\/kinsta.com\/nl\/blog\/gratis-html-editors\/\">editor<\/a> en in je code te gaan gebruiken om de veranderingen wel permanent te maken.<\/p>\n<h3>2. Zoeken naar elementen<\/h3>\n<p>Om een element te kunnen wijzigen, moet je het natuurlijk wel kunnen vinden. De Inspect Element tool heeft een eenvoudige zoekfunctie waarmee je elk aspect binnen een webpagina kan vinden.<\/p>\n<p>Maar het kan soms een beetje moeilijk te vinden zijn, als je niet weet waar het zit. De &#8220;offici\u00eble&#8221; manier in Chromium based browsers is door naar het verkeerslicht menu aan de rechterkant te gaan en de optie <strong>Search<\/strong> te openen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Search option in Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/search-elements.png\" alt=\"De \u201cSearch\u201d optie in Brave\u2019s DevTools.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">De \u201cSearch\u201d optie in Brave\u2019s DevTools.<\/figcaption><\/figure>\n<p>Hiermee open je de <strong>Console<\/strong>, en een tabblad <strong>Search<\/strong>. Hierin kan je de gewenste tag intypen, en krijg je alle bijbehorende elementen op de pagina te zien:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Searching for elements in Brave's DevTools.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/search-panel-results.png\" alt=\"Zoeken op elementen in Brave\u2019s DevTools.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Zoeken op elementen in Brave\u2019s DevTools.<\/figcaption><\/figure>\n<p>In andere browsers kan je deze functie ergens anders vinden. Zo biedt Firefox bijvoorbeeld een <a href=\"https:\/\/kinsta.com\/nl\/blog\/alternatieve-zoekmachines\/\">search<\/a> veld bovenaan de <strong>Inspector<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Searching for elements in the Firefox Inspector panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-search-html.png\" alt=\"Zoeken op elementen in Firefox Inspector.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Zoeken op elementen in Firefox Inspector.<\/figcaption><\/figure>\n<p>Nog een andere snelle tip: je kan herhalend uitklappen van verschillende nodes en elementen door te rechtsklikken op het <strong>Elements<\/strong> paneel en <strong>Expand recursively<\/strong> te kiezen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Expand recursively option in the Elements panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/recursive-expansion.png\" alt=\"De optie Expand recursively in het Elements paneel.\" width=\"1000\" height=\"606\"><figcaption class=\"wp-caption-text\">De optie Expand recursively in het Elements paneel.<\/figcaption><\/figure>\n<p>Als je kijkt naar het\u00a0<strong>Styles<\/strong>\u00a0paneel, zie je ook een <strong>Filter<\/strong>\u00a0tekstveld. Hiermee kan je filteren op CSS eigenschappen, wat het een handige extra optie maakt bij het zoeken:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Filtering by properties in the Styles panel.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/filter-properties.png\" alt=\"Filteren op eigenschappen in Styles.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Filteren op eigenschappen in Styles.<\/figcaption><\/figure>\n<p>Met deze combinatie zou het niet heel lastig moeten zijn om te vinden wat je zoekt, met de combinatie van deze twee.<\/p>\n<h3>3. Een korte introductie over het Box Model<\/h3>\n<p>E\u00e9n van de beste manieren waarop de Inspect Element tool je kan helpen om meer te leren over hoe CSS met verschillende elementen omgaat, is het visuele &#8220;box model&#8221; venster.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" title=\"The Box Model.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/box-model.png\" alt=\"The Box Model.\" width=\"1000\" height=\"359\"><figcaption class=\"wp-caption-text\">The Box Model.<\/figcaption><\/figure>\n<p>Dit overzicht laat je zien hoe een bepaalde box, zoals een element of &#8220;div&#8221;, te zien is op het scherm. Oftewel, je krijgt een overzicht van de marges, witruimte, randen en content, en hoe die gecombineerd worden tot wat je te zien krijgt op je scherm.<\/p>\n<p>Het uitleggen van de hele CSS box model en de interactie met de <a href=\"https:\/\/kinsta.com\/nl\/blog\/html-vs-html5\/\">HTML van een webpagina<\/a> gaat nu een beetje te ver voor dit artikel, maar <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/The_box_model\">Mozilla heeft een geweldige uitleg<\/a> over alle aspecten van dit concept.<\/p>\n<p>Je ziet het <strong>Box Model<\/strong> meestal in de <strong>Layout<\/strong> of <strong>Computer<\/strong> onderdelen in de Inspect Element tool:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Box Model panel within the Inspect Element tool.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/box-model-panel.png\" alt=\"Het \"Box Model\" paneel in de Inspect Element tool.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">Het &#8220;Box Model&#8221; paneel in de Inspect Element tool.<\/figcaption><\/figure>\n<p>Net als bij de elementen en eigenschappen, kan je ook de waarden en instellingen van een bepaalde box veranderen. Er is een lijst met eigenschappen om de positie van de box te bepalen, een a-z index te bepalen, instellingen voor weergave en nog veel meer.<\/p>\n<p>Wanneer je met het Box model werkt, kan het handig zijn om het grid system op de pagina te zien. Dit doe je door in het <strong>Layout<\/strong> venster te kijken, waar je de opties kan vinden in het menu <strong>Grid<\/strong>:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Grid settings menu.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/grid-settings.png\" alt=\"Instellingen voor Grid.\" width=\"1000\" height=\"741\"><figcaption class=\"wp-caption-text\">Instellingen voor Grid.<\/figcaption><\/figure>\n<p>Door op de gewenste weergave te klikken en een relevante overlay te kiezen, zie je de grid op het scherm, waardoor je makkelijker beslissingen kan maken over het box model om de elementen te verplaatsen.<\/p>\n<h3>4. Emuleren van apparaten via Inspect Element<\/h3>\n<p>Ze zijn van buzzwords naar standaard vaktermen gegaan: &#8220;responsive&#8221; en &#8220;mobile-friendly&#8221; zijn inmiddels belangrijke factoren binnen webdevelopment. Daarom biedt de Inspect Element tool hier ook enkele functies voor.<\/p>\n<p>In de meeste browsers toont de Inspect Element tool een icoontje van een mobiel apparaat in de toolbar bovenaan:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Toggling mobile responsive viewing within Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/mobile-device-icon.png\" alt=\"Schakelen van weergave van mobile responsive in Brave.\" width=\"1000\" height=\"378\"><figcaption class=\"wp-caption-text\">Schakelen van weergave van mobile responsive in Brave.<\/figcaption><\/figure>\n<p>Bij Safari is dat echter wat anders. Daarbij vind je een schakelaar\u00a0<strong>Enter\/Exit Responsive Design Mode<\/strong>\u00a0in het <strong>Develop<\/strong>\u00a0menu:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Exit Responsive Design Mode option in Safari.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/safari-responsive-mode.png\" alt=\"De \u201cExit Responsive Design Mode\u201d optie in Safari.\" width=\"1000\" height=\"402\"><figcaption class=\"wp-caption-text\">De \u201cExit Responsive Design Mode\u201d optie in Safari.<\/figcaption><\/figure>\n<p>Hoe je er ook komt, wanneer je deze optie gebruikt, zal de webpagina weergegeven worden zoals op een kleiner, mobiel apparaat naar keuze:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"A mobile device layout view in Firefox.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/mobile-layout.png\" alt=\"De layout op een mobiel apparaat in Firefox.\" width=\"1000\" height=\"653\"><figcaption class=\"wp-caption-text\">De layout op een mobiel apparaat in Firefox.<\/figcaption><\/figure>\n<p>Alhoewel Safari alleen enkele Apple apparaten te bieden heeft, kan je bij andere browsers alle tools krijgen die je nodig hebt om te ontwerpen met een mobile-first principe. Zo kan je bijvoorbeeld de ori\u00ebntatie veranderen, en kiezen welk apparaat je wil emuleren:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The Device Emulation list in Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/emulate-device.png\" alt=\"De \u201cDevice Emulation\u201d lijst in Brave.\" width=\"1000\" height=\"604\"><figcaption class=\"wp-caption-text\">De \u201cDevice Emulation\u201d lijst in Brave.<\/figcaption><\/figure>\n<p>Er zijn nog twee andere interessante features te vinden. Allereerst kan je de ge\u00ebmuleerde netwerksnelheid bepalen. Safari biedt ook hier geen opties voor, maar Chromium based browsers hebben enkele keuzes voor het beperken van de netwerksnelheid:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The throttling options in Brave.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/brave-throttling.png\" alt=\"De netwerkopties in Brave.\" width=\"1000\" height=\"335\"><figcaption class=\"wp-caption-text\">De netwerkopties in Brave.<\/figcaption><\/figure>\n<p>Firefox doet het hier veruit het beste, met een mooie selectie aan netwerkmogelijkheden:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Firefox's throttling options.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-throttling.png\" alt=\"De opties in Firefox.\" width=\"1000\" height=\"366\"><figcaption class=\"wp-caption-text\">De opties in Firefox.<\/figcaption><\/figure>\n<p>Om alles af te ronden kan je ook haptic feedback en sensoren gebruiken. Dit is standaard bij Chromium-based browsers, en in Firefox kan je het inschakelen:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"The haptic feedback option in Firefox.\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/05\/firefox-haptic.png\" alt=\"De optie voor haptic feedback in Firefox.\" width=\"1000\" height=\"312\"><figcaption class=\"wp-caption-text\">De optie voor haptic feedback in Firefox.<\/figcaption><\/figure>\n<p>Firefox loopt hier enigszins achter, aangezien Chrome, Brave en anderen je cursor meteen in een soort vingertop omzetten. De functionaliteit is verre van perfect, maar geeft een <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelheidstest-website\/\">goede indruk hoe je website werkt op andere apparaten<\/a>.<\/p>\n<p>Dit soort tests valt vaak weg bij veel webdevelopers. Maar aangezien browsers hier zulke eenvoudige en toch volledige oplossingen voor bieden, is er eigenlijk geen excuus meer voor.<\/p>\n<h3>5. Sneltoetsen bij het gebruiken van de Inspect Element tool<\/h3>\n<p>De meeste sneltoetsen zijn hetzelfde bij de verschillende browsers. Dat is erg fijn als je verschillende tools moet gebruiken om je websites te testen.<\/p>\n<p>Een korte lijst van de belangrijke sneltoetsen:<\/p>\n<table>\n<tbody>\n<tr>\n<td>Openen van de Inspect Element tool<\/td>\n<td><strong>Command + Shift + C<\/strong>\u00a0voor Mac,\u00a0<strong>Control + Shift + C<\/strong>\u00a0voor Windows<\/td>\n<\/tr>\n<tr>\n<td>Wisselen tussen nodes<\/td>\n<td><strong>Up<\/strong>\u00a0en <strong>Down<\/strong>\u00a0pijlen<\/td>\n<\/tr>\n<tr>\n<td>Uitklappen van geselecteerde node<\/td>\n<td><strong>Right<\/strong>\u00a0pijl<\/td>\n<\/tr>\n<tr>\n<td>Inklappen van geselecteerde node<\/td>\n<td><strong>Left<\/strong>\u00a0pijl<\/td>\n<\/tr>\n<tr>\n<td>Herhalende inklappen en uitklappen van nodes<\/td>\n<td><strong>Option + Click<\/strong>\u00a0voor Mac,\u00a0<strong>Alt + Click<\/strong>\u00a0voor Windows<\/td>\n<\/tr>\n<tr>\n<td>Een node openen om de attributen te bewerken<\/td>\n<td><strong>Enter<\/strong>\u00a0of <strong>Return<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Vooruitgaan in de attributen van een node<\/td>\n<td><strong>Tab<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Terug gaan in de attributen van een node<\/td>\n<td><strong>Shift + Tab<\/strong><\/td>\n<\/tr>\n<tr>\n<td>De geselecteerde node tonen of verbergen<\/td>\n<td><strong>H<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Een node als HTML bewerken of stoppen met bewerken<\/td>\n<td><strong>F2<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Wanneer een CSS eigenschap is geselecteerd kan je de waarde met \u00e9\u00e9n verhogen<\/td>\n<td><strong>Up<\/strong>\u00a0pijl<\/td>\n<\/tr>\n<tr>\n<td>Wanneer een CSS eigenschap is geselecteerd kan je de waarde met tien verlagen<\/td>\n<td><strong>Down<\/strong>\u00a0pijl<\/td>\n<\/tr>\n<tr>\n<td>Wanneer een CSS eigenschap is geselecteerd kan je de waarde met tien verhogen<\/td>\n<td><strong>Shift + Up<\/strong>\u00a0pijl<\/td>\n<\/tr>\n<tr>\n<td>Wanneer een CSS property is geselecteerd, verlaag je de waarde met tien<\/td>\n<td><strong>Shift + Down<\/strong>\u00a0pijl<\/td>\n<\/tr>\n<tr>\n<td>Wanneer een CSS eigenschap is geselecteerd kan je de waarde met 0,1 verhogen<\/td>\n<td><strong>Option + Up<\/strong>\u00a0pijl voor for Mac,\u00a0<strong>Alt + Up<\/strong>\u00a0pijl voor Windows<\/td>\n<\/tr>\n<tr>\n<td>Wanneer een CSS eigenschap is geselecteerd kan je de waarde met 0,1 verlagen<\/td>\n<td><strong>Option + Down<\/strong>\u00a0pijl voor Mac,\u00a0<strong>Alt + Down<\/strong>\u00a0pijl voor Windows<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Er zijn natuurlijk nog meer sneltoetsen te vinden. Mozilla heeft <a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/keyboard_shortcuts\/index.html#page_inspector\">uitstekende documentatie<\/a> voor Firefox, terwijl Chrome, Brave, Edge en anderen <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/shortcuts\/\">sneltoetsen delen<\/a>. Apple is minder nuttig met de sneltoetsen voor Safari developers, aangezien er geen duidelijke lijst te vinden is op hun helppagina&#8217;s. Daarom raden we daarvoor aan om de <a href=\"https:\/\/support.apple.com\/en-us\/guide\/safari-developer\/welcome\/mac\">offici\u00eble documentatie<\/a> voor de developer tools van Safari door te lezen.<\/p>\n\n<h2>Samenvatting<\/h2>\n<p>Webdevelopment gaat niet meer alleen over HTML. Er zitten allerlei andere technologie\u00ebn in. Zelfs als je bij de heilige drie-eenheid van HTML, CSS en JavaScript blijft, kan je een hoop zien door te kijken hoe een website deze onderdelen samenvoegt.<\/p>\n<p>De Inspect Element tool van de browser is daarmee een van de beste manieren om onder de motorkap van je website te kijken, en precies te zien hoe het werkt. Het is een erg handig hulpmiddel om mee te leren, maar je kan er ook gewoon allerlei veranderingen mee testen en zien hoe je website eruitziet op verschillende apparaten en bij verschillende internetsnelheden.<\/p>\n<p><em>Gebruik jij Inspect Element al vaak? Zo ja, wat zijn dan je favoriete features? Deel het in de reacties hieronder!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Er zijn verschillende waardevolle webdevelopment resources te vinden, van boeken, video&#8217;s tot online cursussen en meer. Leren hoe je de Inspect Element tool van je browser &#8230;<\/p>\n","protected":false},"author":117,"featured_media":39392,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[467,28],"topic":[861,884],"class_list":["post-39386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-troubleshooting","tag-wordpress","topic-online-marketingtips","topic-webdevelopment-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo gebruik je de Inspect Element tool van je browser om webpagina&#039;s te bewerken<\/title>\n<meta name=\"description\" content=\"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina&#039;s in je browser.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo gebruik je de Inspect Element tool van je browser om webpagina&#039;s te bewerken\" \/>\n<meta property=\"og:description\" content=\"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina&#039;s in je browser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-29T09:36:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-08T13:38:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina&#039;s in je browser.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Zo gebruik je de Inspect Element tool van je browser om webpagina&#8217;s te bewerken\",\"datePublished\":\"2021-07-29T09:36:49+00:00\",\"dateModified\":\"2023-06-08T13:38:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\"},\"wordCount\":3665,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg\",\"keywords\":[\"Troubleshooting\",\"WordPress\"],\"articleSection\":[\"Webdevelopment\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\",\"name\":\"Zo gebruik je de Inspect Element tool van je browser om webpagina's te bewerken\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg\",\"datePublished\":\"2021-07-29T09:36:49+00:00\",\"dateModified\":\"2023-06-08T13:38:16+00:00\",\"description\":\"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina's in je browser.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Zo gebruik je de Inspect Element tool van je browser om webpagina's te bewerken\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdevelopment tools\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/webdevelopment-tools\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo gebruik je de Inspect Element tool van je browser om webpagina&#8217;s te bewerken\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo gebruik je de Inspect Element tool van je browser om webpagina's te bewerken","description":"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina's in je browser.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo gebruik je de Inspect Element tool van je browser om webpagina's te bewerken","og_description":"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina's in je browser.","og_url":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2021-07-29T09:36:49+00:00","article_modified_time":"2023-06-08T13:38:16+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina's in je browser.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Salman Ravoof","Geschatte leestijd":"24 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Zo gebruik je de Inspect Element tool van je browser om webpagina&#8217;s te bewerken","datePublished":"2021-07-29T09:36:49+00:00","dateModified":"2023-06-08T13:38:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/"},"wordCount":3665,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg","keywords":["Troubleshooting","WordPress"],"articleSection":["Webdevelopment"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/","url":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/","name":"Zo gebruik je de Inspect Element tool van je browser om webpagina's te bewerken","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg","datePublished":"2021-07-29T09:36:49+00:00","dateModified":"2023-06-08T13:38:16+00:00","description":"Leer hoe je de Inspect Element tool van je browser gebruikt om de HTML-code van een webpagina te controleren. Bewerk en test hiermee ook webpagina's in je browser.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/inspect-element\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2021\/07\/inspect-element.jpeg","width":1460,"height":730,"caption":"Zo gebruik je de Inspect Element tool van je browser om webpagina's te bewerken"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/inspect-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Webdevelopment tools","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/webdevelopment-tools\/"},{"@type":"ListItem","position":3,"name":"Zo gebruik je de Inspect Element tool van je browser om webpagina&#8217;s te bewerken"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/39386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=39386"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/39386\/revisions"}],"predecessor-version":[{"id":51385,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/39386\/revisions\/51385"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/se"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/translations\/jp"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/39386\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/39392"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=39386"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=39386"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=39386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}