Odoo Javascript Debugging

When it comes to programming, we can all agree that out code is rarely work on a first try. Because of the sheer virtue of fact that, even if you can conceptualize a problem and reduce it to it’s base states, to fully envision it into it’s most granular detail in terms of hundreds of lines of code - Is just not realistic.

Thats why i can say that debugging is crucial part of programming. Here few tips to do javascript debugging in odoo using google chrome developer tools. some points also applicable on debugging general website not just odoo.

Odoo Developer Mode (with assets)

When it comes to javascript debugging in odoo, we should enable ‘asset debugging’. Trust me it will saves your ass a lot of time.

Odoo internally use assets like CSS and JavaScript. In normal mode this asset will combined to a file. So debug with assets will prevent asset to be merged to one file and display actual CSS and JavaScript files on chrome dev tools. Of course this mode will reduce performance but it will give you proper error message in console if you are doing some JavaScript changes in odoo.

Normal Debug Mode

Assets Debug Mode

Bonus

Chrome extension odoo debugging switch

Debugging : Breakpoint

By using chrome developer tools we can add debugging syntax on js file without coding it in the actual file. So the actual file will remain clean from your console.log

1. Go to source code in chrome developer tool and add breakpoint by right click → edit breakpoint

2. Code the syntax debugging(console.log) in that breakpoint. Then reload page and check from browser console as usual

Track js method : Record Interface Process

There is a tool in chrome dev tool called “performance” (used to called timeline) to record user interaction with the web page. By doing this we can check what method triggered when we interact with the web page. For example when we click certain button in the web page, we can check what methods is triggered. The tricky part is we need to filter all the processes that recorded by “guessing” the method name.

For example i want to track what method triggered when i click odoo calendar cell

1. Go to performance google dev tool

2. Do interface interaction in this case i click the calendar cell in odoo

3. Go to event log and filter the events to locate the right event. In this case we can filter it using keyword “create” since when we click calendar cell it will trigger wizard to create “meeting”

Track js method : Networking

The other chrome dev tool that really useful in this case is “Network”. By using this tool we can record all user interaction and view related record triggered specifically the methods that interact with backend such as database manipulation (CRUD)

The way to use it is no different than “performance tool”. User need to open this tool and then hit record button and do desired user interaction to web page. We can also view js methods flow by clicking the file in “initiator” tab.