Hi, I am Kyle. I am a long time console log debug user.
[all] Hi Kyle.
Are your console statements lacking? Are you consistently adding more details or losing track of them? Does your console look worse than a stack trace? I consistently find myself lost with data overload.
Too much of a good thing can be bad
Captain’s Log is a babel plugin built to improve lackluster console statements and improve the developer experience when debugging.
Inspiration
My use of console statements got to the point that I intuitively started to prepend location data and variable names as I created them. Unfortunately, names change and statements get copied. I could not rely on my ability to tag the statements accurately.
I don’t remember the exact scenario I first heard about babel plugins, but I am going to “blame” Kent C. Dodds. I was quickly amazed by their power, but not sure how I could apply them. I began playing around with astexplorer.net and reading and re-reading the babel-handbook, getting more and more comfortable.
One morning on my dreadful commute, it came clicked that I could use plugins to ease the pain of console debugging.
Instantly, I found a project and my motivation!
What I learned?
Making a plugin is much easier than breaking years of bad console statement habits.
First off I learned how to make a plugin, and it was awesome! I now feel I know JavaScript at a deeper level; not any better just at a deeper level.
I was very surprising that it felt so much like navigating and modifying elements in the DOM tree.
This was such a fun and amazing experience which taught me so much. However, I honestly don’t think I see myself making another babel-plugin as an open sourced project.
I plan to maintain this one, don’t worry.
I see the real power of what I have learned being better used as a codemod. They are single use, but in my opinion are more applicable to a team setting, and I don’t typically have cool ideas that are not already created.
If you haven’t already given babel-plugins a try I urge you to just try something simple. You will be surprised at how much you learn and how it changes how you look at the way you write your code.
To learn more, I highly recommend Kent’s Frontend masters course: https://frontendmasters.com/courses/linting-asts/. Challenge 6 is my favorite 😎!
Getting Started
npm install --save-dev babel-plugin-captains-log
// .babelrc{"plugins": ["captains-log"]}
What Does it Do?
Currently, Captain’s Log has two major features:
Injects helpful data into console statements.
For example
function add(a = 1, b = 2) {// outputs: 1console.log(a);return a + b;}
↓ ↓ ↓ ↓ ↓ ↓
function add(a = 1, b = 2) {// outputs: "simple.js(2:2)" "a" 1console.log("simple.js(2:2)", "a", a);return a + b;}
No longer does your console statement just have the value of a variable. Captain’s log will append File Location Data and Variable Name Labels, to help ease the debugging process. Lets discuss the these a little more.
File Location Data
This works just as you might imagine: it prepends the filename and the line and column numbers based on the location of the console statement.
Variable Name Labels
This is a bit more interesting. As an avid console user, I continually ran into an issue where logging a variable only logs the value. This is difficult to trace when logging multiple variables across multiple files inside of loops. Variable name labels will auto-inject the name of the variable into the console statement during compiling.
Update:
This includes object expressions and methods. This additions mean that statement that includes an expression will be labels with the calling express.
Examples: (file location data has been removed to focus on variable labels.
console.log(a);console.log(obj.prop);console.log(obj.method());console.log(obj.nested.prop);console.log(method());
↓ ↓ ↓ ↓ ↓ ↓
console.log("a", a);console.log("obj.prop", obj.prop);console.log("obj.method()", obj.method());console.log("obj.nested.prop", obj.nested.prop);console.log("method()", method());
Enjoy
While this was written for me and my crazy habits, I figured I cannot be alone in my addiction to the console. With that I hope this helps someone else out there. In any case I know it has made me a more efficient and productive developer.
✌
T️hanks to Rachel and Matt for their reviews!
Kyle Welch is a senior developer with 10+ years of experience building, leading, and consulting on a wide variety of projects. His background includes work in the finance, product, marketing, and government industries. Currently, Kyle leads the front end team at the National Federation of Independent Business where he creates web applications with ReactJS. Outside of work he helps organize a local ReactJS meetup. Find him on twitter, @kylewelch, where he talks about JavaScript, ReactJS, and other programming adventures.