DevTools-terminal

Addy Osmani

DevTools Terminal is een nieuwe Chrome DevTools-extensie die de kracht van de terminal naar uw browser brengt. Als u ooit merkt dat u van context wisselt tussen Chrome en de opdrachtregel voor taken als: middelen ophalen, git, grunt, wget of zelfs vim gebruiken, vindt u deze extensie wellicht een nuttige tijdbesparing.

DevTools Terminal is handig voor snelle aanpassingen aan de opdrachtregel vanuit Chrome terwijl u aan uw webapp werkt.

Nadat ik Kopiëren als cURL in het netwerkpaneel heb gebruikt, kan ik de volledige opdracht eenvoudig in DevTools Terminal plakken en uitvoeren.

Waarom een ​​terminal in de browser gebruiken?

Tijdens de ontwikkeling bent u waarschijnlijk gewend om met een paar verschillende hulpmiddelen te werken: uw teksteditor voor het schrijven, een browser voor testen en debuggen en de terminal voor het bijwerken van pakketten, curling-headers of zelfs een bouwproces met behulp van Grunt.

Bouwtaken uitvoeren met Grunt zonder de browser te verlaten.

Het moeten wisselen van context tussen tools tijdens de ontwikkeling kan afleidend zijn en tot inefficiëntie leiden. We hebben eerder besproken hoe u (voor bepaalde typen projecten) rechtstreeks in Chrome DevTools fouten kunt opsporen en code kunt schrijven met behulp van Workspaces , zonder de browser te verlaten.

Een volledige git-workflow is ook mogelijk. Geweldig voor een git diff na het schrijven in een werkruimte.

DevTools Terminal (door Dmitry Filimonov) maakt dat verhaal compleet en maakt het mogelijk om vanuit hetzelfde venster te coderen, debuggen en bouwen. Je krijgt toegang tot tab-, ctrl- en zelfs Git-kleuren, waardoor het vertrouwd aanvoelt op de terminal die je gewend bent te gebruiken in je dagelijkse workflow.

Werkstroom

Begin nieuwe projecten met een git-kloon , yeoman of een ander hulpmiddel dat toegankelijk is via de terminal.

Mijn persoonlijke workflow voor schrijven in Chrome ziet er nu ongeveer zo uit:

• DevTools Terminal gebruikt het om een ​​GitHub-repository git clone , een nieuw bestand touch of yo (yeoman) uit te voeren om een ​​app te maken. Als ik wil, kan ik een nieuwe server starten om ook een voorbeeld van de app te bekijken
• Werkruimten: bewerk en debug mijn webapp in Chrome. Als ik eerder een server heb gelanceerd, kan ik mijn lokale project aan mijn netwerkbestanden toewijzen. Ik kan Sass of Less gebruiken en mijn CSS-preprocessorwijzigingen terug laten koppelen aan mijn CSS-bestanden.
• DevTools Terminal: Ik kan me nu inzetten voor bronbeheer, een pakketbeheerder (npm, bower) gebruiken om afhankelijkheden op te halen of mijn bouwproces uitvoeren (grunt, make) om een ​​geoptimaliseerde versie van dezelfde app te genereren.
• Hoewel het even kan duren voordat ik aan de vensterindeling gewend ben, is het prettig dat ik het meeste van wat ik nodig heb vanuit de browser kan bereiken.

Geef bestandsnamen in de huidige werkmap weer met behulp van ls . Ideaal voor het visualiseren van mappen buiten uw werkruimte.

Installatie

DevTools Terminal kan worden geïnstalleerd vanuit de Chrome Web Store . Als je een Mac- of Linux-gebruiker bent, kun je, zodra je het aan Chrome hebt toegevoegd, eenvoudigweg "Element inspecteren" of Ctrl + Shift + I om de DevTools te openen en je hebt er toegang toe via de nieuwe " Terminal” tabblad. Windows-gebruikers moeten de extensie verbinden met de systeemterminal met behulp van een Node.js-proxy. Om deze configuratie te krijgen, installeert u de devtools-terminal module van npm: npm install -g devtools-terminal

Open vervolgens een nieuw opdrachtregelvenster en voer devtools-terminal uit. Open vervolgens DevTools en maak op het tabblad "Terminal" verbinding met de server met behulp van de standaardconfiguratieopties. Indien nodig kunt u de poort en het adres verder aanpassen.

Beperkingen

DevTools Terminal heeft een aantal opmerkelijke beperkingen. In tegenstelling tot Terminal.app of iTerm2 op de Mac ondersteunt het nog geen tabbladen, meerdere vensters of het afspelen van geschiedenis. U kunt echter zoveel nieuwe tabbladen van Chrome openen als u wilt, die elk hun eigen DevTools Terminal-instantie kunnen hebben. Dit kunt u doen via het Chrome Apps-scherm:

Momenteel ondersteunt de extensie zowel het standaard lichte thema als een donker thema.

Deze extensie is momenteel afhankelijk van NPAPI , dat het komende jaar wordt uitgefaseerd ten gunste van de Native Messaging API. DevTools Terminal-auteur Dmitry Fillimonov is van plan om in de nabije toekomst af te stappen van NPAPI ten gunste van deze API of de Native Client API.

Conclusies

DevTools Terminal (en soortgelijke extensies, zoals Auxilio ) kunnen u helpen voorkomen dat u tijdens de ontwikkeling heen en weer schakelt tussen uw editor, de browser en de opdrachtregel. Hoewel een in-browser terminal misschien niet ieders ding is, vindt u de extensie wellicht een nuttige aanvulling op uw workflow en we raden u aan om hem uit te proberen en te zien hoe u hem bevalt!