How to debug Syncfusion Blazor source code using the Source Code add-on?
Syncfusion source license is required to download and install the Source Code Add-on installer. If you have a source license, you can download the source add-on installer here.
Refer to the following documentation link to know more about the Source Code Add-on installer.
https://help.syncfusion.com/common/essential-studio/source-code
After installation, the Syncfusion Blazor source code will be available in the following location.
Location: {ProgramFilesFolder}\Syncfusion\Essential Studio\Source Code Add On\{version}\Syncfusion.Blazor\
We have two options for debugging the Syncfusion Blazor source code:
- Debugging with single Syncfusion.Blazor package source (Combined package)
- Debugging with individual package source
Debugging with single Syncfusion.Blazor package source (Combined package)
The Syncfusion Blazor single-source package contains all the components in a single-source file and allows you to debug them with a single project (Syncfusion.Blazor.csproj) file.
Please follow these steps to debug the single-source package,
- Create a Syncfusion Blazor application in Visual Studio IDE using the Syncfusion Blazor getting started documentation
- While creating a Syncfusion Blazor Server application using the documentation, do not install any Syncfusion Blazor-related packages to the application since you are debugging using the source code. So, installing Syncfusion Blazor packages is not needed.
- Ensure the following theme and script reference from the “~/Pages/_Host.cshtml” file for .NET 5 and .NET 3.X. or “~/Pages/_Layout.cshtml” for .NET-6.
<head> ..... <link href="_content/Syncfusion.Blazor/styles.bootstrap5.css” rel=”stylesheet” /> <script src=”_content/Syncfusion.Blazor/scripts/Syncfusion blazor.min.js” type=”text/javascript”></script> @* IgnoreScriptIsolation enabled *@ </head>
- Now, add the Syncfusion.Blazor.csproj project reference to your created Blazor application for debugging.Note:
Refer to this documentation for adding a project reference to the application.
- Then, compile and debug the source code and sample.Note:
Before compiling the source code, ensure to delete the “bin and obj” folders under all the subfolders in the following given source code location.
If you are not deleting the bin and obj folders while compiling, it will throw an ambiguous error.
The easiest way to delete bin and obj in all the subfolders:
- Navigate to the below location and open the command prompt.
- {ProgramFilesFolder}\Syncfusion\Essential Studio\Source Code Add On\{version}\Blazor\Syncfusion.Blazor\Syncfusion.Blazor\
- Run the “npm install&&gulp clean-projects” command in the command prompt.
- It will delete all the bin and obj files in subfolders.
(Refer to this documentation for debugging using the Visual Studio IDE.)
Debugging with individual package source
Syncfusion Blazor individual source package contains only the specified package source in the package name. For example, If you are using Syncfusion.Blazor.Calendars individual source package, it contains only the Calendar component and its dependent components source code.
Refer to this documentation for the individual package benefits and uses.
Please follow these steps to debug the individual source package:
- Create a Syncfusion Blazor application in Visual Studio IDE using the Syncfusion Blazor getting started documentation.
- While creating a Syncfusion Blazor Server application using the documentation, do not install any Syncfusion Blazor-related packages to the application since you are debugging using the source code. So, installing Syncfusion Blazor packages is not needed.Create a Syncfusion Blazor Server application using the documentation in Visual Studio IDE using the Syncfusion Blazor getting started documentation.
- While creating a Syncfusion Blazor Server application using the documentation, do not install any Syncfusion Blazor-related packages to the application since you are debugging using the source code. So, installing Syncfusion Blazor packages is not needed.
- Ensure the following theme and script reference from the “~/Pages/_Host.cshtml” file for .NET 5 and .NET 3.X. or “~/Pages/_Layout.cshtml” for .NET-6.
<head> ….. <link href=”_content/Syncfusion.Blazor.Themes/bootstrap5.css” rel=”stylesheet” /> <script src=”_content/Syncfusion.Blazor/Core/scripts/Syncfusion-blazor.min.js” type=”text/javascript”></script> @* IgnoreScriptIsolation *@ </head>
- You need to add the Syncfusion.Blazor.Themes package project reference, which is located in the “Syncfusion.Blazor/Themes” folder to your application for style sheet reference
- Now, add the individual package source reference to your created Blazor application for debugging. The “{ProgramFilesFolder}\Syncfusion\Essential Studio\Source Code Add On\{version}\Blazor\Syncfusion.Blazor\Syncfusion.Blazor\” folder contains the individual source code folders. Every folder with the component name contains the component project file inside.
- The “Syncfusion.Blazor” folder structure is shown in the following image.
- For example, if you need to use the Calendars component source code, add the Syncfusion.Blazor.Calendars.csproj project reference to the created Blazor application location.
- If you also need to debug the Calendars component dependent source code, add the dependent package source code project reference into the Calendars component project file.
- For example, Syncfusion.Blazor.Buttons package is dependent on Syncfusion.Blazor.Calendars package.
- If you also need to debug the Syncfusion.Blazor.Buttons package, go to the “Syncfusion.Blazor/Buttons/” folder and add the “Sycnfusion.Blazor.Calendars.csproj” project file reference to the Calendars component project file.Note:
Refer to this documentation for adding a project reference to the application.
- Then, compile and debug the source code and sample.Note:
Before compiling the source code, ensure to delete the ‘’bin and obj” folders under all the subfolders in the following given source code location.
If you are not deleting the bin and obj folders while compiling, it will throw an ambiguous error.
The easiest way to delete bin and obj in all the sub folders:
- Navigate to the below location and open the command prompt.
- {ProgramFilesFolder}\Syncfusion\Essential Studio\Source Code Add On\{version}\Blazor\Syncfusion.Blazor\Syncfusion.Blazor\
- Run the “npm install&&gulp clean-projects” command in the command prompt.
- It will delete all the bin and obj files in subfolders.
(Refer to this documentation for debugging using the Visual Studio IDE.)
Debugging the JavaScript in Syncfusion Blazor source code add on
The JavaScript files are present under the “{ProgramFilesFolder}\Syncfusion\Essential Studio\Source Code Add On\{version}\Blazor\Syncfusion.Blazor\Scripts\modules” folder with the component_name.js files.
Follow these steps to generate and debug the JavaScript files in Syncfusion Blazor source code add-on.
- Navigate to the following location and open the command prompt.
- {ProgramFilesFolder}\Syncfusion\Essential Studio\Source Code Add On\{version}\Blazor\Syncfusion.Blazor\
- Run the “npm install” command in the command prompt.
- Run the “set NODE_ENV=development” command in the command prompt.Note:
By default, the “NODE_ENV” value is production, and it generates the script file as minified.
- For debugging the script, you need the script file with un-minified changes. So, running the “set NODE_ENV=development” command in the command prompt will set the NODE_ENV value as development and generates the un-minified file, if you generate the script by following these steps.
- After setting the environment variable, run the “gulp bundle && gulp bundle-single-script” command in the command prompt. It will generate the single script file and individual script files under the Syncfusion.Blazor/wwwroot folder.Note:
If you are using the individual package source and not connecting the Syncfusion.Blazor.Core project reference in Source code add-on to your sample, then run the “gulp individual-bundle” command in the command prompt. It will generate the component-wise script under the Syncfusion.Blazor/{component_name}/wwwroot folder.
Refer to this documentation for JavaScript debugging.
Once the script debugging and all of your script code changes are completed, move the modified script changes to the Syncfusion.Blazor/Scripts/modules folder before the NuGet generation.
Generating NuGet packages using Blazor Build Manager
After all your changes are included in the source code, you can generate the Syncfusion Blazor NuGet packages using Blazor Build Manager utility from the Source code add-on.
Refer to this documentation for more details.
Refer to the following video for compile the Syncfusion Blazor source code manually and debug your project using Syncfusion Blazor source code.
