DevTools the third space

It always comes down to coffee and development

I recently thought of a tenuous link between Chrome DevTools and Starbucks. Starbucks set itself an early goal to become the 'third space', the space a person would spend time between work and home.

and now for the tenuous link

In my development Devtools has become my third space. Between the source and the output. You'd write some code, check the output and based of the result, you'd go back and update your code. Back and forth a binary existence of either coding or assessing results.

With Devtools I now have a third space, and for me my most important space as this is where I do my thinking. As it gives me hooks into the three areas that make up a website the DOM

theoretical next step

So the next step would be to start saving the changes I'm making in Devtools. Which is where workspaces come in, the ability to map the files delivered to the browser to it's location on the disk, allowing the source files to be edited.

However the files being delivered to the browser are not always the source files that need editing. Pre-processors for CSS and JavaScript are extremely helpful in development but this adds an extra layer between the source files and the workspace. This is where source maps come into play. To bridge that link between the delivered files and the source files.

and in anger?

Reading Remy Sharp's blog source maps may not be the answer quite yet for JavaScript but I plan on testing workspaces, source maps and browserify together. Its in the 'would be nice' column to add to my workflow. The one that 'would be great' to add is CSS.

So I'll grab a coffee set up source maps and workspaces see how they work, try and blur the lines between spaces and report back.

photo credit: el patojo via photopin cc