Debugging the Component SDK
How-to Guide
Author:
Holger Lierse
Changed on:
8 July 2024
Key Points
- Using Chrome developer tools and IDEA Webstorm to debug Fluent component SDK
- This article will only work for Chrome desktop browser
Steps
Setup webpack file
In order to be able to debug the UI code the following line needs to be added to the
`webpack.config.js``devtool: 'source-map'`1...
2 resolve: {
3 extensions: ['.ts', '.tsx', '.js']
4 },
5 devtool: 'source-map',
6 module: {
7 rules: [
8 // we use babel-loader to load our jsx and tsx files
9 {
10 test: /\.(ts|js)x?$/,
11 exclude: /node_modules/,
12...Language: java
Name: Code for the webpack.config file
Description:
[Warning: empty required content area]Chrome Developer Tools Debugging
- Open the developer tools.
- Open the file you want to debug
- Set the breakpoints and reload the page. The processing will stop at the corresponding breakpoint allowing you to debug the code.
IDEA Webstorm
- Create a new “JavaScript Debug” configuration and set the URL to the corresponding account URL.
- Set the breakpoints in your code.
- Run the Debug which will open a new Chrome window.
