Today, each major browser ships with fantastic built-in tools for web developers. But can you imagine (or remember) if there were no tools like this? If there was no easy way to inspect the DOM, monitor the network or even console.log things? It is believed that modern DevTools came with Firebug creation in 2006. Nevertheless, it’s still in use, constantly forked and adapted to work with other platforms. Syndicode would like to share with you some thoughts on the future of DevTools.
Recently we have found Konrad Dzwinel’s article Prototyping the Future of DevTools which inspired us for this material. Here we’d like to show you a couple of prototypes showing some alternative paths that our tooling could follow in the future. To be exact, there are 5 ideas, developed by Konrad Dzwinel, could be brought to browser DevTools:
The idea of flexibility appeared from the popular applications (for example Sketch or Unity) that have much more flexible layouts than the modern DevTools. Each panel, tab, and the window can be moved around, closed and resized. With this feature, you can personalize the tool and fit it to your needs. Unity even allows you to save and manage multiple layouts with ease. Today it’s impossible to have Performance and Sources panels side by side on DevTools.
To show how a flexible layout would look like in Chrome DevTools Konrad built a prototype based on the golden-layout:
— Konrad Dzwinel (@kdzwinel) July 6, 2017
- Building from blocks
Coming back to Sketch, pay some attention how you can build bigger blocks out of smaller ones. Or create a library of symbols (e.g. buttons, labels, inputs) from which you can then build a complete design of a webpage. If you decide you want to change how a button looks, you can quickly go from a “webpage” view to editing a specific “symbol”. And when you are done, all buttons on your design are updated accordingly. Magic! With many new apps built with web/react/etc. components we could greatly improve our DevTools by making them understand these concepts better.
To show what a better integration with components could look like, Konrad created a prototype that allows the developer to seamlessly switch between working on a particular page/screen and a single component:
- Context-aware inspector
Unity has neat inspector tool that presents you with different options depending on the element being inspected: 3d model, sound file, scene etc. You don’t have to change tools whenever you switch from modifying a 3d model to modifying a sound file — inspector just adapts itself based on the context.
In our DevTools, we get the same “Styles” panel no matter what node in the DOM tree we are currently inspecting. For some things, like a META tag, SVG path, script tag etc. “Styles” panel is not that useful, so in Konrad’s next prototype he tried to address that:
When editing a video, you operate on a timeline that allows you to easily jump between various parts of your project. This ease of going back and forth could be incredibly useful in our tooling. If the animation finished before you managed to inspect it, or you clicked “Next” in the debugger too many times and missed the code that you wanted to debug, you can just use the timeline tool. No need for reload and the second attempt. Great, isn’t it?
- Infinite canvas
The idea is to give you a space on which you can freely arrange your drawings, designs, components, etc. And if you want to focus on any of those things everything is just a scroll and zoom away. Obviously, the developer working on a website is not interacting with it in the same way as a regular user does. Maybe it’s time to rethink how the main browser window could be improved to better accommodate needs of developers. And the idea of “infinite canvas” might fit here perfectly. What if you could keep multiple devices, browsers and screen sizes all on the same canvas? How nice it would be to be able to quickly preview all pages of your application? What about dumping browser tabs all together and switching completely to the scroll and zoom navigation?
We hope all these ideas will soon be evolved. For more inspiration, you can check Chrome DevTools.
What do you think about the future of DevTools?
To read more interesting things, subscribe to our weekly newsletter!