Web Development

Google I/O 2017: DevTools - state of the union

closeup picture of tools in toolbox

This morning I learned about some of the upcoming and soon-to-be released features for developing in Chrome Developer Tools. I wanted to share with you a preview of what will be available within the week on Canary.

Debugging Scripts

A few smaller features were announced, such as the ability to preview the child components within an element. This cuts down on time searching for the right object within a large array. Autocomplete functions selected within an array like sampleArray[1]. <list of autocomplete options shown will definitely help speed up development. And if you’re anything like me, you’ll write out test functions in the console. Canary will now have support for writing functions as if you were in an IDE. An open bracket { will start an indentation on next lines without any weird key combinations, making testing in the console smooth and painless.

A larger feature is new asynchronous debugging tools. The call stack is now able to show much more relevant content like “await in process (async)” or “Promise resolved (async)” which will drastically help tracking tricky callbacks and when you arrive at a call frame. Google’s goal is at any point of execution you should be able to view a complete async history of how and why you got there.

Finally, breakpoint and script debuggers were improved. You can continue to another point without having to manually step. You’ll now be able to press “CMD” and click to another section with a function to jump to that location in the run sequence. They also announced inline breakpoints where you can break at multiple points within a line of logic, without having to separate parameter functions on multiple lines for debugging purposes. Finally, you can step into Promise “then” functions using inline but also using “CMD” like before.

Performance

With the focus on performant web applications, it’s no surprise that Chrome Dev Tools will now have a Performance panel. Check out screenshots of the page loading step-by-step alongside profilers and network loading. Use the panel to understand what’s happening as the page loads, re-renders, and paints to the DOM. Turn on 3rd Party badges to see where the code being loaded is coming from just at a glance. The badges will appear in the console, logs, network tab and performance panel. My favorite new tool coming to Canary is the Coverage profiler. You’ll be able to analyze what functions are actually being evaluated, what CSS selectors are matched, and reduce the amount of code you’re downloading.

Authoring

Chrome announced significant improvements in this area. I’m most excited that Canary will allow you to see changes made in dev tools (such as temporary CSS changes) file by file so that you can port your adjustments into your code base. You’ll also be able to take screenshots with dev tools. If you’re on a mobile sized device, you can add a device frame to the screenshot to add that professional touch to your presentations, but more importantly you can take a screenshot including all of the visible content plus the content hidden by scroll. This will be an excellent way to share our progress on our applications in a cohesive experience.

Auditing for Excellence

I mentioned from the Developer Keynote that Lighthouse will now be included in Chrome Dev Tools. This will help audit your application by throttling network and CPU, testing load performance, accessibility, and progressive techniques. Since it’s now embedded in the developer tools, you’ll be able to hover over elements that have failed the audit and the element will be highlighted in the DOM.

Headless and Node.js

Stay tuned for headless chrome tools and keep an eye out Selenium integration. This will drastically improve testing experience with JavaScript. Check out this blog post from Google that explains this concept.

Node debugging also just got a hell of a lot easier. There’s now a dedicated developer tool for Node.js that will allow for the same developer debugging experience you’re used to with front-end DOM testing.

Wrapping Up

There’s a lot coming to Chrome and they’re listening to our pain points and improving. I’m most excited that Accessibility and web page auditing is now easier than ever to improve and these tools will improve my daily development cycle. If any of this interests you, watch the full talk to see live demos of these features: Embedded content: https://youtu.be/PjjlwAvV8Jg

1200x628-banners-Single-Page-Web-App

Single Page Web Apps: Why building a web app means less… and more than it used to

The number of modern web technologies available to software engineers is mind boggling....

Read the article