Full Stack Conf – dev tools deep-dive

At the end of October, I spent 3 days at Full Stack Conference at Skillsmatter in London. It was a good 3 days with some interesting talks. ES6, React and Microservices were common themes.

The talks can all be found here (please note you need to sign up for an account with skillsmatter to view the videos): https://skillsmatter.com/conferences/6612-fullstack#skillscasts

Highlights

Here are some of the talks I found particularly interesting:

React and Three.js

Using 3D library Three.js with React to create interactive 3D animation.

react-three

Building applications in ES6

Build applications using ES6 syntax and jspm.io as a package manager.

Wrangling the Internet of Things using Node.js

Using FitBit and various apps and APIs to create a personalised health-tracking system.

Chrome DevTools deep-dive

The talk that really grabbed my interest, was the morning keynote session on the second day, from Addy Osmani on Chrome DevTools. DevTools is something I use every day, and essentially take for granted. There are features that I use all the time, and other areas that I don't touch. I'm ashamed to say that I haven't looked at the docs in a very long time, and am very behind on what new features there are to use.

This talk highlighted some really useful tools that I'm excited to start using. Some have been around for a few months, others are so new that you can only access them by turning on the DevTools experiments. The whole video is definitely worth a watch, entertaining as well as useful. Unfortunately I can't link to specific parts of the video, but I've done a summary of the features covered, and where you can see them in action on the video.

Chrome DevTools Deep-dive

Security Panel - 4:23 - New - check for valid certificate, secure origins and list the domains it's relying on.

Service Worker Panel - 5:14 - New - Can visualise the entire lifecycle of events around your service worker.

Filmstrip - 10:19 Allows you to grab screenshots of the page rendering, and see at exactly what time the elements of the page loads.

Throttling - 11:41

Custom Network Throttling - 13:25

Block requests - 15:35 - New Allows you to test what is actually slowing your page down.

Timeline - 24:25 Record timeline and check for jank.

Filmstrip screenshots - 26:27 Film interactions with the page, after the initial load. Can see each screen, and identify aspects responsible for jank, or slow-down. Really helpful for analysing animation.

Aggregated details - 27:47 Breaks down exactly where time is being spent. Able to easily see what is causing the slowdown, and will attribute it to a script or a domain.

Paint profiler - 33:05 Allows you to record interactions and see how the browser builds up the page. Can look at why something is taking a long time. You can see the exact browser draw calls to see how the pixels are painted.

paint-profiler-tool

Animation inspection - 36:05 - New Access to timeline of all animations. Can control playback speeds, and play round with timings without having to edit your actual code.

Cubic Bezier Editor - 37:30 Cubic bezier editor, directly inside of devtools to allow you to tweak animation. Comes with a preview, so you can see how the changes will affect the animation.

DOM animation changes - 38:46 Elements on the page that change with an animation are highlighted, so it's easy for you to see what's going on.

Colour palettes - 39:40 Eye-dropper tool. Colour palettes tool picks out the colours used on a page, and allows you to play around and tweak them and see the effects. Also able to save your own colour palettes.

Search selectors - 41:05 Allows you to search for elements without knowing the exact classnames

Event Listeners - 41:50 Allows you to see exactly which events are bound to a particular node.

Framework Event Listeners - 43:08 View event listeners registered on DOM nodes even if they're using a js framework. If you're trying to debug, it's not helpful to jump into the library code, you want to see what's happening in the code you wrote.

Edit HTML in the console - 44:10

Inline variables - 45:56 Can check a setting to display variable values inline while debugging. Does away with the need to console.log everywhere - you can just see your variables inline.

Proactive Compilation - 47:32 If you want to run your code directly inside the VM, it will give you instant feedback on errors.

Blackboxing JS libraries - 48:13 This allows you to right-click and black box a library that you're using. So when you add a breakpoint and step through, you can step through your actual code, instead of the source code for the library. You can actually set patterns that you want blackboxed, in settings, so that you don't have to right-click and blackbox certain libraries each time.

ES2015 Promises inspector - 50:24 - new Shows you where your promises were defined, and when they get resolved, or if they are rejected.

I'm looking forward to incorporating some of these new tools into my workflow. Being able to see exactly how the page is rendering, and at what point is really useful for identifying what is causing lag. The less you have to change context and switch between code and browser the better, so I think things like the animation bezier editor, and inline variables are going to be massive timesavers. The DevTools docs are definitely something I'll be visiting on a regular basis in future to keep up to date on all the new additions.

Red Badger offers an annual £2,000 training budget to go to conferences like this. Sound good? Then come and join us.