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 is a babel plugin built to improve lackluster console statements and improve the developer experience when debugging. Captain’s Log 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 . I was quickly amazed by their power, but not sure how I could apply them. I began playing around with and reading and re-reading the , getting more and more comfortable. “blame” Kent C. Dodds astexplorer.net babel-handbook 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 at a deeper level; not any better just at a deeper level. JavaScript 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 . 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. codemod 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: . Challenge 6 is my favorite 😎! https://frontendmasters.com/courses/linting-asts/ Getting Started npm install --save-dev babel-plugin-captains-log // .babelrc{"plugins": ["captains-log"]} What Does it Do? Currently, has two major features: Captain’s Log 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 will append and , to help ease the debugging process. Lets discuss the these a little more. log File Location Data Variable Name Labels 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. will auto-inject the name of the variable into the console statement during compiling. Variable name labels 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, , where he talks about JavaScript, ReactJS, and other programming adventures. @kylewelch

Instantly

Trace

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Introducing Captain’s Log (☠)️

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Kyle Welch

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Introducing Captain’s Log (☠)️

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Kyle Welch

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES