Google I/O 2016 zit erop. DevTools was prominent aanwezig op I/O, met onder meer een presentatie van Paul Bakaus, Paul Irish en Seth Thompson over de toekomst van DevTools. Bekijk de video hieronder of lees verder om meer te weten te komen over de toekomst van DevTools in 2016 en daarna.
Auteurschap
DevTools streeft ernaar elke fase van de webontwikkelingscyclus te vereenvoudigen. Je weet waarschijnlijk dat DevTools je kunnen helpen bij het debuggen of profileren van een website, maar je weet misschien niet hoe je het kunt gebruiken bij het schrijven van een site. Met "schrijven" bedoelen we het creëren van een site. Een van de doelen voor de nabije toekomst is om het voor jou gemakkelijker te maken om je site te itereren, te experimenteren en te emuleren op meerdere apparaten.
Apparaatmodus
Het DevTools-team blijft werken aan de Device Mode-ervaring, die zijn eerste grote upgrade kreeg in Chrome 49. Bekijk de post van maart ( Een nieuwe Device Mode voor een mobiele wereld ) voor een overzicht van de updates. Het overkoepelende doel is om een naadloze workflow te bieden voor het bekijken en emuleren van uw site in alle form factors.
Hierbij een kort overzicht van enkele Device Mode-updates die in Canary zijn uitgekomen sinds we het artikel in maart hebben geplaatst.
Wanneer u een pagina bekijkt vanuit het perspectief van een specifiek apparaat, kunt u de ervaring nog beter beleven door de hardware van het apparaat rondom uw pagina weer te geven.
Via het menu Apparaatoriëntatie kunt u uw pagina bekijken wanneer verschillende elementen van de gebruikersinterface van het systeem, zoals de navigatiebalk en het toetsenbord, actief zijn.
Ook het bureaubladverhaal is verbeterd. Dankzij de zoomfunctie van de Apparaatmodus kun je bureaubladschermen emuleren die groter zijn dan het scherm waarop je daadwerkelijk werkt, zoals een 4K-scherm (3840 px x 2160 px).
U kunt het netwerk rechtstreeks vanuit de gebruikersinterface van de apparaatmodus beperken, in plaats van dat u naar het paneel Netwerk moet overschakelen.
Bronverschillen
Wanneer je itereert op de stijl van een site, raak je gemakkelijk het overzicht over je wijzigingen kwijt. Om dit te verhelpen, gebruikt DevTools visuele aanwijzingen in de regelnummerbalk van het Bronnenpaneel om je te helpen je wijzigingen bij te houden. Verwijderde regels worden aangegeven met een rode lijn, gewijzigde regels worden paars gemarkeerd en nieuwe regels worden groen gemarkeerd.
U kunt uw wijzigingen ook bijhouden in het nieuwe tabblad Snelle bron:
Voor het eerst kunt u met het tabblad Snelle broncode tegelijk met uw CSS-regels focussen op uw HTML- of JavaScript-broncode. Bovendien springt het tabblad Snelle broncode automatisch naar de definitie in de broncode en markeert deze.
Schakel het experiment ' Bronnen verschillen' in Chrome Canary in om het vandaag nog uit te proberen.
Live Sass-bewerking
Hier is een voorproefje van enkele aankomende belangrijke verbeteringen aan de Sass-bewerkingsworkflow. Deze functies bevinden zich nog in een zeer vroeg stadium van de experimentele fase. We zullen er in een latere post op terugkomen zodra je ze kunt uitproberen.
Met DevTools kunt u Sass-variabelen bekijken en bewerken zoals u altijd al had gehoopt. Klik op een waarde die is samengesteld op basis van een Sass-variabele en het nieuwe tabblad Snelle bronnen springt naar de definitie van de variabele.
Wanneer u een waarde bewerkt die is gecompileerd op basis van een Sass-variabele, wordt de Sass-variabele bijgewerkt en niet alleen de afzonderlijke eigenschap die u hebt geselecteerd.
Progressieve web-apps
Kijk naar de lijst met web- en Chrome-presentaties op Google I/O 2016 en je ziet een groot thema in de wereld van webontwikkeling: Progressive Web Apps .
Naarmate het Progressive Web App-model zich ontwikkelt, itereert DevTools snel om ontwikkelaars de tools te bieden die ze nodig hebben om fantastische Progressive Web Apps te creëren. We realiseerden ons dat het bouwen en debuggen van deze moderne applicaties vaak unieke vereisten met zich meebrengt, dus heeft DevTools een volledig paneel gewijd aan de ontwikkeling van Progressive Web Applications. Open Chrome Canary en u zult zien dat het paneel Bronnen is vervangen door het paneel Toepassingen. Alle functionaliteit van het paneel Bronnen is nog steeds aanwezig. Er zijn slechts een paar nieuwe panelen die speciaal zijn ontworpen voor de ontwikkeling van Progressive Web Apps:
Het Manifest-paneel geeft je een visuele weergave van het app-manifestbestand. Vanuit hier kun je de workflow 'Toevoegen aan startscherm' handmatig activeren.
Via het deelvenster Service Workers kunt u de service worker die voor de huidige pagina is geregistreerd, bekijken en ermee communiceren.
Met het venster Opslag wissen kunt u allerlei gegevens wissen, zodat u een pagina weer met een schone lei kunt bekijken.
JavaScript
Het overschrijden van de grens tussen frontend en backend is een lastig onderdeel van fullstack webontwikkeling. Als je merkt dat je backend een 500-statuscode retourneert tijdens het debuggen van een webapp, heb je effectief de grens van het nut van DevTools bereikt. Je moet dan de context wijzigen en je backend-ontwikkelomgeving opstarten om het probleem te debuggen.
Met backends geschreven in Node.js beginnen de grenzen tussen frontend en backend echter te vervagen. Omdat Node.js draait op de V8 JavaScript-engine (dezelfde engine die Google Chrome aanstuurt), wilden we het mogelijk maken om Node.js te debuggen vanuit DevTools. Dankzij de V8-, DevTools- en Google Cloud Platform voor Node.js-teams kunt u nu alle krachtige debugfuncties van DevTools gebruiken om een Node.js-app te introspecteren. De functionaliteit is al beschikbaar in de nightly builds van Node.js, hoewel de integratie met DevTools nog steeds wordt verfijnd voordat deze in een grote release wordt opgenomen. Het debuggen van uw Node.js-app vanuit DevTools zal in de toekomst net zo eenvoudig zijn als het doorgeven node --inspect app.js en verbinding maken vanuit DevTools in elk Chrome-venster.
Bestaande tools zoals Node Inspector bieden weliswaar GUI-gebaseerde foutopsporingservaringen, maar de nieuwe Node.js DevTools-integratie blijft up-to-date met de nieuwste foutopsporingsfuncties van DevTools, zoals async stack-foutopsporing, blackboxing en ES6-ondersteuning.