​

Debugging JavaScript in VSCode for Odoo 17 Development with OWL Framework

Odoo 17, the latest version of the popular open-source ERP platform, relies heavily on JavaScript for frontend development. Debugging JavaScript efficiently is crucial for Odoo developers to ensure smooth functioning of custom modules and frontend interfaces. Visual Studio Code (VSCode) offers robust debugging capabilities tailored for JavaScript development, making it an ideal choice for Odoo 17 developers. Here's how you can leverage VSCode to debug JavaScript effectively in your Odoo projects. 

VSCode comes with bundled debugger which encompasses all the essential functionalities required for debugging JavaScript code across various environments, including Node.js, Chrome, Edge, WebView2 and more. With this developers can debug without the need of additional extension

Configure the debugger

To configure the debugger, you need to modify the launch.json file along with the Odoo configuration as shown below:

{  
	​// Use IntelliSense to learn about possible attributes.  
	​// Hover to view descriptions of existing attributes.  
	​// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387  
	​"version": "0.2.0",  
	​"configurations": [    
	​	​{      
	​	​	​"name": "Odoo17",      
	​	​	​"type": "debugpy",      
	​	​	​"request": "launch",      
	​	​	​"program": "${workspaceFolder}/server-code/odoo-bin",      
	​	​	​"args": ["--config=${workspaceFolder}/server-code/odoo17.conf"],      
	​	​	​"cwd": "${workspaceRoot}",      
	​	​	​"console": "internalConsole"    
	​	​},    

	​	​{      
	​	​	​"name": "Javascript Debugger",      
	​	​	​"request": "launch",      
	​	​	​"type": "chrome",
	​	​	​"url": "http://localhost:8017/web?debug=assets",      
	​	​	​"webRoot": "${workspaceFolder}",      
	​	​	​"sourceMaps": true,      
	​	​	​"sourceMapPathOverrides": {        
	​	​	​"*": "${workspaceFolder}/*"      
	​	​	​}    
	​	​},  
	​]
}

Replace http://localhost:8069 with the URL of your Odoo instance. The key elements in this configuration are:

  • "name":  Name of the configuration visible in the debugging dropdown menu.
  • "request":  Specifies launching a new instance of the target environment.
  • "type": Debugger type; here, it's Chrome for web debugging.
  • "url": URL the browser navigates to when debugging initiates. 
  • "webRoot":  Root directory for web content.
  • "sourceMaps": true: Enables source maps for mapping code back to its original source. 
  • "sourceMapPathOverrides":  Mapping of source paths from source map to filesystem.
Initiating Debugging

Press F5 or click the green arrow in the Debug view to start debugging. This will launch a new Chrome window. Navigate to the page with your JavaScript code. 

Odoo debug asset

Debugging a Sample: Partner Autocomplete Widget

Let's use Odoo 17's partner autocomplete widget as an example of debugging. Through the smart placement of breakpoints and exploration of the widget's features, developers may effectively troubleshoot and debug any problems that arise.

Odoo javascript debug

For instance, if you want to debug the partner autocomplete widget, open the code you want to debug and put a breakpoint from the LOADED SCRIPTS

Odoo widget debugging

When you search for a name, the breakpoint triggers, and you can see the value from the VARIABLES

VSCode Breaking Point

You can see the breaking point triggered and we see can see the suggestions value from the VARIABLES. You can continue, step into, or step over the code from here.

In conclusion, mastering JavaScript debugging in VSCode empowers Odoo 17 developers to streamline development processes, enhance code quality, and deliver robust solutions. By following the outlined guidelines and leveraging VSCode's robust debugging features, developers can navigate complex JavaScript environments with confidence, ensuring the smooth operation of Odoo projects.  

Mohammed Shahil 17 March, 2024
Our blogs
Sign in to leave a comment