This is the first post in a new series I’m starting on Debugging in Dynamics 365 CE.
The goal of the series is simple: share practical approaches I use when investigating issues and tracing them back to the real root cause.
Let’s begin with a place where a lot of “mystery” problems start: JavaScript.
When things go wrong in Dynamics 365 CE, our first thought often goes straight to plugins. But in reality, a lot of issues start in the front-end: JavaScript web resources, ribbon commands, or PCF controls.
This post walks through a structured way to debug client-side issues and share a recent real-world example I came across.
Start with Browser DevTools
The first step is always to open the browser’s developer tools. In Chrome or Edge, hit F12 and look at the Console and Network tabs while you reproduce the issue.
Red errors in the Console usually tell you exactly where things broke.
Failed requests in the Network tab (especially those pointing to api/data/v9.?.*) often reveal the payload and the exact server response.
If you’re stuck, turn on Pause on exceptions. This will freeze the execution right where the error happens, which makes tracing much easier.
Use Debugger Statements
Sprinkling a simple debugger; line into your JavaScript code is underrated. It stops execution and opens DevTools right at that point, letting you inspect variables and objects live.
function onFormLoad(executionContext) {
debugger;
const formContext = executionContext.getFormContext();
console.log("Form Type:", formContext.ui.getFormType());
}
Check Your Web Resource Dependencies
It sounds obvious, but missing or misordered libraries can cause endless confusion. If a function suddenly becomes undefined, check if the library is still attached to the form and that dependencies load in the right sequence.
For ribbon buttons, make sure the library is added to every form where the button is used. I’ve seen commands fail simply because the JS file wasn’t referenced in one of the forms.
Debugging Ribbon Commands
Ribbon Workbench is your best friend here.
Inspect the command rules and check the parameters. A common mistake is using FirstSelectedItemId when you actually needed SelectedControlSelectedItemReferences.
Enable/Display rules can silently hide buttons for the wrong users. Temporarily disabling a rule can confirm if the command itself is fine.
Investigating PCF Controls
With PCF controls, I always start by adding lots of console.log() statements inside updateView and notifyOutputChanged.
Be careful about loops. If you call notifyOutputChanged() every time updateView runs, you’ll end up in an infinite cycle. Also, if your control references an external CDN, check whether the browser is blocking it because of content security policies.
Guard Against Nulls
A classic one: Cannot read property ‘getAttribute’ of null.
The safe approach is to always guard before accessing attributes or controls.
const ctrl = formContext.getControl("new_field");
if (ctrl && ctrl.getAttribute()) {
ctrl.setDisabled(true);
}
A Real Example: Encode and Decode Issues
Recently, I hit a bug that only surfaced after data moved between environments. The issue was with encodeURIComponent and decodeURIComponent.
On one form, values were encoded multiple times before being saved. Later, when another script tried to decode them, it was decoding too many layers and throwing errors. It looked random at first, but once I paused the code with a debugger; and inspected the variable, it was obvious: the value had been encoded twice.
It’s a good reminder that sometimes the bug isn’t in the platform at all—it’s in how we handle data transformations on the client side.
Quick Checklist
When you’re chasing a front-end issue, I like to run through this list before blaming the platform:
Does the error reproduce in incognito mode (to rule out caching)?
Does it affect all users or only specific roles?
Did a recent solution import overwrite the library or ribbon command?
Does the problem show up on other forms or record types?
Wrap-Up
Debugging JavaScript in Dynamics CE is less about memorising tricks and more about being systematic. Start with DevTools, use debugger; to pause execution, confirm dependencies, check ribbon rules, and don’t forget the basics like guarding against nulls.
And when you do find the cause, it’s often something simple—like an extra encodeURIComponent.
Top comments (0)