Hoe de Chrome DevTools-app te activeren voor Remote Debugging
De Chrome DevTools-app is gemaakt door Kenneth Auchenberg in een poging om devtools uit de browser te halen, in dit geval uit de Chrome-browser. Deze applicatie is gebouwd op basis van NW.js en kan zowel op Mac OS X als op Linux en Windows worden uitgevoerd.
Er zijn veel redenen waarom de maker dit heeft gecreëerd, maar zijn visie bestaat erin ontwikkelaars het gemak te geven debuggen op afstand via meerdere browsers, allemaal vanaf hetzelfde geünificeerde platform (app). Het idee zal enige tijd nodig hebben om aan te slaan en te materialiseren vanwege een verscheidenheid aan redenen (en weerstand, die je kunt lezen op zijn blog).
We zullen de Chrome DevTools-app kort bekijken en zien wat Google ontwikkelaars te bieden heeft.
Meer over Hongkiat:
- Aan de slag met Chrome-ontwikkelaarstools
- 5 (Meer) Nuttige Chrome DevTools Tips voor ontwikkelaars
- Het Google Chrome DevTools-thema aanpassen
Installatie
Download de Chrome-Devtools.app.zip en pak het uit. Dubbelklik om te draaien. Start uw Chrome-browser en schakel externe foutopsporing in.
Om dit op de Mac te doen, open je de terminal en voer je de onderstaande opdracht uit:
sudo / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome -remote-debugging-port = 9222
Als u vensters opent, opent u de opdrachtprompt en gebruikt u deze opdracht:
start chrome.exe -remote-debugging-port = 9222
Hoe te gebruiken
Wanneer uw Chrome al is geopend en u de functie voor foutopsporing op afstand hebt ingeschakeld, kunt u nu naar elke site bladeren. We hebben bijvoorbeeld Hongkiat.com voor deze oefening geopend. Vervolgens gaan we naar het app-venster van Chrome DevTools en vernieuw deze lijst (de knop bevindt zich rechtsonder).
Nu ziet u de link Hongkiat.com (zoals hieronder weergegeven).
Nu klik op de knop 'Start'. U wordt naar een nieuw venster gebracht. Dat is het. U heeft de Chrome DevTools-app al actief. Wat u hier ziet, is hetzelfde als wanneer u "element inspecteert" in de Chrome-browser.
En vanaf hier kunt u de Chrome DevTools-app gebruiken, net zoals u native DevTools op Chrome gebruikt: u kunt het DOM-element inspecteren, JavaScript debuggen, werken met Console en nog veel meer.
Wat is het volgende?
Deze app is nog steeds erg experimenteel. Maar voor nu biedt het idee om de DevTool uit Chrome te halen ontwikkelaars de gelegenheid de app te beschouwen als een functionele editor en te werken met andere runtimes zoals node.js en iOS. Voor meer mogelijkheden, kun je hier de gedachtegang van Auchenberg bekijken.
