Pdf downloaden
Een eenvoudige handleiding voor het inspecteren van webelementen in iOS
Pdf downloaden
Wil je een website debuggen op je iPhone maar kun je de functie ‘Element inspecteren’ niet vinden? Safari op je iPhone heeft deze bekende browserfunctie niet, maar er zijn nog steeds manieren waarop je webelementen kunt inspecteren zonder te hoeven betalen voor een app. De officiële manier is om hulpmiddelen voor ontwikkelaars in Safari te gebruiken, waarvoor je je iPhone aan moet sluiten op een Mac. Als je geen toegang hebt tot een computer, dan kun je een gratis app met de naam Web Inspector installeren of een JavaScript-bladwijzer maken (wat ook werkt in Chrome). Als je niet aan het debuggen bent maar gewoon het uiterlijk van een website wilt veranderen, dan kun je de taak ‘Bewerk pagina’ in de Opdrachten-app op je iPhone gebruiken.
Wat je moet weten
- Gebruik de hulpmiddelen voor ontwikkelaars in Safari om elementen te inspecteren door je iPhone aan te sluiten op je Mac.
- Om een element te inspecteren zonder een computer kun je de Web Inspector-app installeren of een JavaScript-bladwijzer gebruiken.
- Gebruik de taak ‘Bewerk webpagina’ in de Opdrachten-app om tekst van een website te bewerken of afbeeldingen te verwijderen.
Stappen
-
Sluit je iPhone met een USB-kabel aan op je iPhone. Als je de functie ‘Element inspecteren’ wilt gebruiken in Safari op je iPhone zonder een extern hulpmiddel te gebruiken, dan kun je de hulpmiddelen voor ontwikkelaars gebruiken in Safari. Het enige nadeel is dat de hulpmiddelen voor ontwikkelaars alleen beschikbaar zijn in macOS, en je dus in de buurt van je computer moet zijn om deze methode te kunnen gebruiken.
- Je hebt een USB-kabel nodig om je telefoon aan te sluiten , want door je telefoon te verbinden met wifi kun je geen elementen inspecteren.
-
Schakel Webinfovenster in op je iPhone. Dit doe je als volgt:
- Open de Instellingen op je iPhone.
- Scrol naar beneden en tik op Safari .
- Scrol naar beneden en tik op Geavanceerd .
- Tik op het schuifje bij Webinfovenster om de functie in te schakelen (het schuifje wordt dan groen).
-
Geef het Ontwikkel-menu weer in Safari op je Mac. Als je al een menu met de naam Ontwikkel ziet wanneer je Safari opent op je Mac, dan kun je deze stap overslaan. Als dat niet zo is, dan kun je dit menu op de volgende manier weergeven:
- Klik op het Safari -menu.
- Klik op Instellingen .
- Klik op Geavanceerd .
- Schakel ‘Toon functies voor webontwikkelaars’ in. [1] X Bron
-
Ga op je iPhone naar de website die je wilt inspecteren. Ga in Safari op je iPhone naar de site waarvan je een element wilt inspecteren.
-
Klik op je Mac op het Ontwikkel -menu. Hier zie je je iPhone.
-
Ga met je muis op je iPhone staan en selecteer de website. Het paneel ‘Element inspecteren’ wordt nu geopend op je Mac voor de site die je geopend hebt op je iPhone.
- Wanneer je een item selecteert in het tabblad Elementen op je Mac wordt dit selecteerde item gemarkeerd op je iPhone. [2] X Bron
- Als je de functie ‘Element inspecteren’ wilt kunnen blijven gebruiken zonder je iPhone aan te sluiten op je Mac, klik dan weer op het Ontwikkel -menu en selecteer Verbind via netwerk .
Advertentie
-
Download Web Inspector in de App Store. Met deze gratis Safari-extensie voor iPhone en iPad kun je elementen inspecteren zonder een computer. Zoek in de App Store naar ‘Web Inspector’ van ‘And a Dinosaur’, of download de app op https://apps.apple.com/nl/app/web-inspector/id1584825745 .
- Web Inspector is nuttig om elementen te inspecteren in Safari omdat je je iPhone niet aan hoeft te sluiten op een Mac. Als je wilt debuggen in Chrome, dan moet je een JavaScript-bladwijzer gebruiken .
- Deze extensie is geen officieel hulpmiddel van Apple.
-
Schakel de Web Inspector-extensie in in Safari. Dat doe je als volgt:
- Open Safari en ga naar een willekeurige website.
- Tik op Aa in de adresbalk.
- Tik op Beheer extensies . [3] X Bron
- Tik op het schuifje naast ‘Web Inspector’ om de extensie in te schakelen.
- Tik op Gereed .
-
Ga naar de webpagina die je wilt inspecteren. Nu je de extensie ingeschakeld hebt kun je elementen in Safari zelf inspecteren.
-
Geef Web Inspector toegang tot de website. Tik om dit te doen weer op Aa en selecteer Web Inspector .
- Om Web Inspector slechts een dag toe te staan om elementen op deze website te inspecteren selecteer je Toestaan voor een dag .
- Als je de extensie langer dan een dag of voor meerdere website wilt gebruiken, selecteer dan Altijd toestaan
. Je kunt dan kiezen voor Altijd toestaan voor deze website
of Altijd toestaan voor iedere website
.
- Als je voor de laatste optie kiest, dan hoef je de extensie niet opnieuw toegang te geven tot de website.
-
Tik weer op ‘Aa’ en selecteer Web Inspector . De functie ‘Element inspecteren’ wordt nu uitgevouwen onderaan Safari.
- Tik wanneer je klaar bent twee keer op Aa om Web Inspector te sluiten.
Advertentie
-
1Ga naar de website die je wilt inspecteren. Bij deze truc maak je een bladwijzer die JavaScript-code bevat om de functie ‘Element inspecteren’ te kunnen gebruiken in iedere webbrowser op je iPhone. Deze truc werkt zowel in Safari als in Chrome, maar het proces van het maken van de bladwijzer is iets anders.
-
Maak een bladwijzer of bookmark .
- Chrome: tik op het menu met de drie stippen en selecteer Toevoegen aan Bookmarks .
- Safari: tik op het Deelicoon onderaan en kies dan voor Toevoegen aan Favorieten .
-
Bewerk de bladwijzer om de URL te vervangen. Nu je een bladwijzer hebt moet je hem bewerken.
-
Open de bladwijzer om hem te kunnen bewerken.
- Chrome: tik op het menu met de drie stippen en selecteer Bookmarks bovenaan. Houd je vinger op de nieuwe bladwijzer en tik vervolgens op Bookmark bewerken .
- Safari: tik op het icoon van een open boek onderaan en tik op Favorieten . Houd je vinger op de bladwijzer die je net gemaakt hebt en kies voor Bewerken .
-
Vervang de inhoud van de bladwijzer door code. Geef de bladwijzer de naam ‘Inspecteren’ en plak de volgende code in het vak voor de URL of link. Sla de bladwijzer vervolgens op.
javascript : ( function () { var script = document . createElement ( 'script' ); script . src = "//cdn.jsdelivr.net/npm/eruda" ; document . body . appendChild ( script ); script . onload = function () { eruda . init () } })();
-
Ververs de website en open de bladwijzer. Tik om de bladwijzer te openen in Chrome op de drie stippen, kies voor Bookmarks en tik op Inspecteren . In Safari kun je de bladwijzer met de naam Inspecteren vinden in je Favorieten. Je zult na een moment het icoon van een tandwiel zien verschijnen op de pagina die je wilt inspecteren.
-
Tik op het tandwiel om de functie ‘Element inspecteren’ te openen. Je kunt nu het tabblad Elementen bovenaan het paneel gebruiken om elementen te inspecteren op de geopende webpagina.Advertentie
-
Open de Opdrachten-app op je iPhone. Als je doel is om het uiterlijk van een website aan te passen met de functie ‘Element inspecteren’, dan kun je hetzelfde effect bereiken met de taak ‘Bewerk pagina’ in de Opdrachten-app. Deze opdracht geeft niet het traditionele scherm van ‘Element inspecteren’ weer, maar je zult een website live kunnen aanpassen om te zien hoe het eruitziet.
- De Opdrachten-app kun je vinden in je Appbibliotheek.
- Dit is nuttig als je tekst wilt bewerken of afbeeldingen en andere objecten wilt verwijderen van een website die je bekijkt.
-
Tik op Galerij . Dit kun je in de rechteronderhoek van de pagina vinden.
-
Zoek naar de taak ‘Bewerk webpagina’. Tik bewerk webpagina in de zoekbalk en tik dan op Bewerk webpagina bovenaan de zoekresultaten.
-
Tik op Voeg opdracht toe . Dit is de blauwe knop onderaan de pagina.
-
Sta scripts toe in de Opdrachten-app. Je zult de instellingen voor de Opdrachten-app aan moeten passen om webpagina’s te kunnen bewerken:
- Open de Instellingen op je iPhone.
- Scrol naar beneden en tik op Opdrachten .
- Tik op Geavanceerd .
- Zet het schuifje bij ‘Sta het uitvoeren van scripts toe’ in de Aan-positie.
-
Open de website die je wilt inspecteren in de Safari-app. Dit kan elke website zijn die je wilt aanpassen.
-
Tik op het Deelicoon en selecteer Bewerk webpagina . Het Deelicoon is het blauwe vierkant met een omhoog wijzende pijl onderaan het scherm.
-
Tik op Sta toe . De opdracht krijgt nu de toestemming om de site te ‘bewerken’ in het browservenster.
-
Tik op X om het menu te sluiten. Je ziet nu de website weer, die je op een visuele manier kunt bewerken.
- Tik op een element om het te bewerken. Je kunt nu tekst en afbeeldingen bewerken op de website, ook al heeft Safari de functie ‘Element inspecteren’ niet.
Advertentie
Tips
- Er zijn verschillende betaalde apps waarmee je webelementen kunt inspecteren op je iPhone, waaronder Achoo HTML Viewer & Inspector en Inspect Browser.
- Adobe Edge Inspect was een populair hulpmiddel voor het inspecteren van elementen op websites, maar wordt niet langer verder ontwikkeld en niet meer bijgewerkt. [4] X Bron
Advertentie
Bronnen
- ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
- ↑ https://support.apple.com/guide/safari-developer/inspecting-overview-dev1a8227029/mac
- ↑ https://support.apple.com/guide/iphone/get-extensions-iphab0432bf6/ios
- ↑ https://helpx.adobe.com/edge-inspect/system-requirements.html
Over dit artikel
Deze pagina is 1.599 keer bekeken.
Advertentie
Meld je aan voor de gratis nieuwsbrief van wikiHow!
Je vindt dan elke week handige handleidingen in je inbox.
Meld me aan!
