👀Trouble Shooting Lightning Web Component (LWC) 👀. 

Lightning Web Component is Compiled and Minified. This means the javascript code in minified format. Mininfcation leads to faster rendering of components on the web page. Since the code is minified it will be very difficult for the developer to debug the code on browser tools in case of any error. When minified code renders on the browser javascript codes will not be in a  beautified format and there will be a replacement of the variable we defined on the original JS file. This makes the developer job tedious on debugging. 

So what is the Solution?

Enabling Debug Mode 

Enabling debug mode makes the developer's job easy on troubleshooting the error. 

Once the Debug mode is enabled in Org for a specific user JS code won't render in Minified format. So the variable names will remain unchanged and the code will render in a beautiful format. This makes it easy for a developer to debug the issue. 

Note: I would recommend not enabling the Debug mode on Production. If you enable in Production or UAT environment, will result in performance issue. So it is wise to enable debug mode in the Development environment.

How to enable Debug Mode?

Goto Set up --> Search For Debug Mode-->Select the User --> Click on Enable button.













LWC JS code before enabling Debug Mode













In the above screenshot, you can see Control LWC component has a control.js file. 

It has handleAdd() method and it is minified. 

Now I am going to enable the debug mode and let's see the difference. 












Now you can see the beautified code 😁

Happy Coding. 

Thank you 😀



Comments

Post a Comment

Popular posts from this blog

Vlocity Learning..

Image
 Vlocity Learning Continues ................  How to sign up for Developer Org  ? (FREE) In the Previous Article, we earned the basic architecture of OmniStudio.  In the article, I would like to share how to sign up for the developer edition.  We need to access  the signup page using the below link  https://trailhead.salesforce.com/en/promo/orgs/omnistudiotrails We need to fill in the basic information and it will help you create the developer account.  Confirmation Screen after clicking on Sign me up>  You will receive a link on your registered email address for resetting your password.  Once after successful registration check your inbox  This will help you to create the Developer Edition.  In the next Blog Post, we will start with Hands-on exercises :)   Happy learning ....... 
Read more

LWC Publish Subscriber

Image
Publish Subscriber model in LWC  The publisher-subscriber model or Pub/Sub model will help us establish a communication between the components which are not in the same DOM hierarchy.  Is it too technical?  I will try to explain simply. If the components are not related to one another in any way with each other using parent-child relationship then we can use the Pub / Sub model to establish a connection between two-components  What is Pub - Sub Model? We are seeing pub sub-model in our daily life. Nowadays everyone using Whatsapp. In one or another way you will be part of at least one of whats app group. If you are broadcasting any message in Whatsapp to a group you will be the publisher and people who listen to your messages are subscribers.  The pub sub-model is similar to the application event in Aura.    In the above diagram, the publisher publishes messages via Pub/Sub Channels and is consumed by the various subscribers. How to user Pub- Submodel ...
Read more