Debugging Odoo (JS Side)
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.
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.
This is the result. It become way more readable.
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.
And when I go to DevTools windows, I can check all 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.
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.
