How to use VSCode GUI to debug LVGL project on i.MX93 EVK board

[#1]

The Gui-guilder doesn't provide remote debug function in IDE and we still need use Yocto to build project or copy binary to board rootfs.

This knowledge base will provide a solution about how to use VSCode to remote debug LVGL project on i.MX93 EVK board. 

Yocto toolchain: L6.6.x

GUI GUILDER: v1.8.0

Need to open GUI GUILDER project in VSCode.

1.Scripts in VScode

1.1 build.sh

Modify build.sh in <LVGL project>/ports/linux

#!/bin/sh
 
toolchain=$1
if [ -z "$toolchain" ];then
    toolchain=/opt/fsl-imx-xwayland/6.1-mickledore/sysroots/x86_64-pokysdk-linux/usr/share/cmake/armv8a-poky-linux-toolchain.cmake
    if [ ! -r $toolchain ];then
        toolchain=/opt/fsl-imx-xwayland/6.1-langdale/sysroots/x86_64-pokysdk-linux/usr/share/cmake/armv8a-poky-linux-toolchain.cmake
    fi
fi
toolchain_path=$(echo $toolchain |sed -E 's,^(.*)/sysroots/.*,\1,')
toolchain_arch=armv8a-poky-linux
 
if [ ! -r $toolchain -o ! -r "$toolchain_path/environment-setup-$toolchain_arch" ];then
    echo "ERROR: Yocto Toolchain not installed?"
    exit 1
fi
 
if [ -n "$BASH_SOURCE" ]; then
    ROOTDIR="`readlink -f $BASH_SOURCE | xargs dirname`"
elif [ -n "$ZSH_NAME" ]; then
    ROOTDIR="`readlink -f $0 | xargs dirname`"
else
    ROOTDIR="`readlink -f $PWD | xargs dirname`"
fi
 
BUILDDIR=$ROOTDIR/../build
rm -fr $BUILDDIR
mkdir $BUILDDIR
. "$toolchain_path/environment-setup-$toolchain_arch"
echo "start build..."
cd $ROOTDIR/linux/lv_drivers/wayland/
cmake .
make
cd $BUILDDIR
toolchain_path=/opt/fsl-imx-wayland/6.6-scarthgap/sysroots/x86_64-pokysdk-linux/usr/share/cmake/armv8a-poky-linux-toolchain.cmake
cmake -G 'Ninja' .. -DCMAKE_TOOLCHAIN_FILE=$toolchain_path -Wno-dev -DLV_CONF_BUILD_DISABLE_EXAMPLES=1 -DLV_CONF_BUILD_DISABLE_DEMOS=1 -DCMAKE_CXX_FLAGS="-ggd3 -O0" -DCMAKE_BUILD_TYPE=Debug
ninja
if [ -e gui_guider ];then
    echo "Binary locates at $(readlink -f gui_guider)"
    ls -lh gui_guider
fi

# Copy binary to board
scp $BUILDDIR/gui_guider root@192.168.31.243:/opt

1.2 tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build",
            "type": "shell",  
            "command": "./build.sh /opt/fsl-imx-wayland/6.6-scarthgap", 
			"options": {
				"cwd": "${workspaceFolder}/ports/linux"
                
			},
            "problemMatcher": [
                "$gcc" 
            ],
        }
    ]
}

1.3 launch.json

miDebuggerServerAddress is board ip address.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(gdb) Launch",
            "preLaunchTask": "Build",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/build/gui_guider",
            "args": [],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}/",
            "environment": [],
            "externalConsole": false,
            "MIMode": "gdb",
            "logging": {
                "engineLogging": true,
                "trace": true, 
                "traceResponse": true 
            },
            "debugStdLib":true,
            "miDebuggerPath":"/usr/bin/gdb-multiarch", //DO NOT USE GDB IN SDK!!!!
            "miDebuggerServerAddress": "192.168.31.243:12345",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true,
                    "text": "set remotetimeout 100",
                }
            ]
            
        }]
}

2. Launch gdbserver on board

export SHELL=/opt/gui_guider
gdbserver 192.168.31.243:12345 /opt/gui_guider

3. Debug in VSCode

Click (gdb)launch, the source code will be compiled.

Then you will see the breakpoint in program.

Enjoy your debug~