Google I/O 2016 is een feit. DevTools was sterk aanwezig op I/O, waaronder een lezing van Paul Bakaus, Paul Irish en Seth Thompson, waarin de toekomst van DevTools werd geschetst. Bekijk de onderstaande video of lees verder voor meer informatie over waar DevTools naartoe gaat in 2016 en daarna.
Auteursrecht
DevTools heeft tot doel elke fase van de levenscyclus van webontwikkeling eenvoudiger te maken. U weet waarschijnlijk dat DevTools u kan helpen bij het debuggen of profileren van een website, maar misschien weet u niet hoe u deze kunt gebruiken bij het schrijven van een site. Met 'schrijven' bedoelen we het creëren van een site. Een van de doelstellingen in de nabije toekomst is om het gemakkelijker voor u te maken om uw site op meerdere apparaten te herhalen, te experimenteren en te emuleren.
Apparaatmodus
Het DevTools-team blijft voortbouwen op de Device Mode-ervaring, die zijn eerste grote upgrade kreeg in Chrome 49. Bekijk het bericht van maart ( Een nieuwe Device Mode voor een mobile-first 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 vormfactoren.
Hier is een korte samenvatting van enkele apparaatmodus-updates die op Canarische Eilanden zijn geland sinds we het artikel in maart plaatsten.
Wanneer u een pagina als een specifiek apparaat bekijkt, kunt u zich meer in de ervaring verdiepen door de hardware van het apparaat op uw pagina te laten zien.
Met het apparaatoriëntatiemenu kunt u uw pagina bekijken wanneer verschillende systeem-UI-elementen, zoals de navigatiebalk en het toetsenbord, actief zijn.
Het desktopverhaal is ook verbeterd. Dankzij de zoomfunctie van de Apparaatmodus kunt u bureaubladschermen emuleren die groter zijn dan het scherm waarop u daadwerkelijk werkt, zoals een 4K-scherm (3840px x 2160px).
U kunt het netwerk rechtstreeks vanuit de gebruikersinterface van de apparaatmodus beperken, in plaats van dat u naar het netwerkpaneel hoeft te schakelen.
Bron verschillen
Wanneer u de stijl van een site herhaalt, kunt u gemakkelijk uw wijzigingen uit het oog verliezen. Om dit op te lossen gaat DevTools visuele aanwijzingen gebruiken in de lijnnummergoot van het paneel Bronnen, zodat u uw wijzigingen kunt bijhouden. 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 op het nieuwe tabblad Snelle bronlade:
Voor het eerst kunt u zich op het tabblad Snelle bron concentreren op uw HTML- of JavaScript-broncode en tegelijkertijd op uw CSS-regels. Wanneer u in het deelvenster Stijlen op een CSS-eigenschap klikt, springt het tabblad Snelle bron automatisch naar de definitie in de bron en markeert deze.
Schakel het bronnendiff- experiment 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 kenmerken bevinden zich nog heel vroeg in de experimentele fase. We laten in een later bericht weten wanneer ze klaar zijn om uit te proberen.
Kortom, met DevTools kun je Sass-variabelen bekijken en bewerken zoals je altijd 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 samengesteld op basis van een Sass-variabele, werkt uw bewerking de Sass-variabele bij, niet alleen de individuele eigenschap die u hebt geselecteerd.
Progressieve webapps
Kijk naar de lijst met web- en Chrome-toespraken op Google I/O 2016 en je zult een groot thema zien opduiken in de wereld van webontwikkeling: Progressive Web Apps .
Terwijl het Progressive Web App-model opduikt, itereert DevTools snel om de tools te bieden die ontwikkelaars nodig hebben om geweldige progressieve web-apps te maken. We realiseerden ons dat het bouwen en debuggen van deze moderne applicaties vaak unieke vereisten met zich meebrengt. Daarom heeft DevTools een heel panel gewijd aan de ontwikkeling van progressieve webapplicaties. Open Chrome Canary en u zult zien dat het paneel Bronnen is vervangen door het paneel Applicaties. Alle eerdere functionaliteit van het Bronnenpaneel is nog steeds aanwezig. Er zijn slechts een paar nieuwe vensters die speciaal zijn ontworpen voor de ontwikkeling van Progressive Web App:
Het manifestvenster geeft u een visuele weergave van het app-manifestbestand. Vanaf hier kunt u handmatig de workflow "Toevoegen aan startscherm" activeren.
In het deelvenster Servicemedewerkers kunt u de servicemedewerker die voor de huidige pagina is geregistreerd, inspecteren en ermee communiceren.
En in het paneel Clear Storage kunt u allerlei soorten gegevens wissen, zodat u een pagina met een schone lei kunt bekijken.
JavaScript
Het overschrijden van de grens tussen frontend en backend is een moeilijk onderdeel van fullstack webontwikkeling. Als u ontdekt dat uw backend een 500-statuscode retourneert tijdens het debuggen van een web-app, heeft u feitelijk de limiet van het nut van DevTools bereikt, waardoor u de context moet wijzigen en uw backend-ontwikkelomgeving moet opstarten om het probleem op te lossen.
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 aandrijft) 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 foutopsporingsfuncties van DevTools gebruiken om een Node.js-app te onderzoeken. De functionaliteit heeft Node.js nightly builds al bereikt, hoewel de DevTools-integratie nog steeds wordt gepolijst voordat deze wordt opgenomen in een grote release. Het debuggen van uw Node.js-app vanuit DevTools zal op een dag net zo eenvoudig zijn als het doorgeven van node --inspect app.js en verbinding maken vanuit DevTools in elk Chrome-venster.
Hoewel bestaande tools zoals Node Inspector GUI-gebaseerde debugging-ervaringen bieden, blijft de nieuwe Node.js DevTools-integratie up-to-date met de nieuwste debugging-functies van DevTools, zoals asynchrone stack-debugging, blackboxing en ES6-ondersteuning.