Debugging Odoo (JS Side)

No more console.log()

MORE ducks for debugging!!! Photo by JOSHUA COLEMAN on Unsplash

In my previous story, I’ve shown you the ease of debugging Python code from Odoo project. For three months ago, understanding this knowledge is more than enough for me to master tracking and suspecting bugs from the particular code’s part. But for now? Unfortunately, IT’S NOT. Maybe yeah it’s enough when the next plan of my development is completely not related to Javascript (JS). In the reality, I can’t be sure about that. I have to know how to debug JS too because when you can’t, it means that I’ve set a limit to myself. And I don’t wanna be that. So, is there any way to do that but with different kinds of files???

First Trial

When I give a breakpoint on one of my Python files and I trigger that code, PyCharm will pause the flow. In that state, I can check all of the variables’s value and do some simple operations to make sure that I understand how the codes work. Or is the code works as I wanted if it’s written by me.

Based on that, I start to give some breakpoints to my JS files too, and hopes that PyCharm will do the same thing. And… what‘s the result? Unfortunately, it’s not paused after I trigger it. So, debugging JS is can’t be done by the same method. FAILED.

Second Trial

So I search all of the possible ways to get it done. But I’ve found nothing. I feel hopeless and almost give up to type console.log() every single time I want to know variable’s value. Do you know what happens when I log for the third time? That log is clickable and it refers to the code itself. It turns out that the one that I log is a function. And I just know that ALL OF JS FILES that scattered in different places ARE LOAD INTO ONE SINGLE FILE.

With that case, I just need to find that one file in source files. So I open POS session. Open Browser DevTools by pressing F12 and go to Sources -> web -> content -> open the last folder and open file inside.

JS file inside the last folder of web/content

It will open the file below. You will accept with me for this, it’s not readable, right? Let’s prettify it by clicking Pretty-print.

JS files before prettifying

This is the result. It become way more readable.

JS files after prettifying

Then I just need to find which line I want to debug. For example, because I want to see when I click one of the products, I add one breakpoint inside. And… when I trigger, the flow will be paused as you can see below.

Add breakpoint inside function
Paused mode

And when I go to DevTools windows, I can check all current variables and their values.

Current variables and their values

Same with PyCharm, I can do some quick calculation/operation in that state in case I want to make sure about variables.

Quick checking operation

When I feel done debugging that line, I click Resume.

Note

Well, I hope you find this is helpful after I’ve just shown the way I debug JS in Odoo project. For the note, this way has one limitation. When you make changes to JS file and reload the page, you have to do all the steps from the start again to debug, whether it is in the same line as before or in a different line. But I think this drawback is not comparable to the advantages that I’ve been got. And I hope you feel the same.

And… That’s it for now. See you next time.

Private Odoo Consultant. Reach me on linkedin.com/in/amirulm

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why we decided to rewrite our iOS & Android apps from scratch — in React Native

Linked Lists

Access control strategies with FeathersJS

What I Learned at Work this Week: Polyfills and Native Code

Clean Components with React Hooks

Wix React Native Navigation quick installation guide

More JS, Lets do this!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amirul M.

Amirul M.

Private Odoo Consultant. Reach me on linkedin.com/in/amirulm

More from Medium

What Yoga Therapy Means To Me

Trying to take it all in

The Theme of This Week Is Love

Dear Parents,