Troubleshooting and Debugging Lightning Component

Troubleshooting and Debugging Lightning Component

As we all know, debugging javascript code can be challenging, particularly if you are using a framework that uses Single-Page application design and displays data from multiple components based on conditions and rendering device size. In this post, we will explore few tools and techniques to debug and troubleshoot your lightning component. 

 

Lightning framework best works with Google Chrome browser when we talk about performance or rendering. Apart from that Google Chrome uses a fork of Webkit which is the same browser engine used by iOS and Android devices, this can lead to many advantages like:

  • CSS rendering in Chrome Desktop browser can give you an approximation of how your app/component will look on mobile devices.
  • Using Chrome, you can simulate different screen sizes like mobile phone, tablet or desktop browser. Once you change the screen size from developer tools, the browser will automatically start rendering the application based on the device size you have chosen.
  • Chrome provides some very advanced tools for debugging and caching, which can be very helpful when we talk about troubleshooting application code.
  • Chrome allows you to debug and inspect HTML pages that are running on Android mobile device. Android device must be tethered to your system to debug the code.

Although Chrome is the best suitable browser for debugging and running lightning apps/components, you may want to test your app in other browsers as well depending on your business needs.

 

Clearing Browser Cache

Before we start running newly developed Lightning Apps or Components, it’s always a good practice to clear browser cache. This step is necessary to ensure your running component has the latest code from the server. This also ensures that you component performance is not impacted by your browser cache.

You can clear browser cache with below tools:

  • Disabling browser cache from Chrome Developer Tools
    • Open Chrome Developer tools by Right Click on the page and select Inspect.
    • Click on Network Tab.
    • Select Disable Cache

  • Using Cache Clear Chrome Plugin
    • Download Cache Clear Chrome plugin from here.
    • Once downloaded, you will see a plugin button in your browser’s toolbar. Click on this button to clear the cache.

 

Using Debugger in Chrome

You can activate Chrome Debugger by Right Click on the page and select Inspect. The debugger has multiple tabs for the different purpose.

  • Element: Inspect markup of any DOM element just by selecting the element. You can view applied CSS as well.
  • Memory: You can get heap snapshot from this tab.
  • Network: This displays all HTTP communication. Particularly useful for troubleshooting AJAX request.
  • Performance: Display time to download the file from the server. Time is taken for rendering, time taken to execute scripts.
  • Console: Displays error and warning messages. Displays output of console.log(), console.warn() and console.debug() statement.
  • Security: Provide details about website’s TLS certificate.

Setting Debug Point Programmatically

You can set debug point programmatically by using below statement in your controller/helper js files.

debugger;

Run your app/component while keeping developer tools open (Right Click and select Inspect). Once your code will reach debug point, the execution will pause and js source code will be available under “Sources” section of developer tools. Now you can set Watch Expression and also see Call Stack from the right sidebar.

Watch Expression is used to check the current value of the attribute or variable and can provide you invaluable information to do further debugging.

You can continue your execution or jump to next statement by using different button available in developer console tool.

Using Salesforce Lightning Inspector

Salesforce provides Lightning Inspector Chrome plugin for advanced level debugging. You can download the plugin from here. The advantages for using Salesforce Lightning Inspector are:

  • Check Component Tree tab, to Inspect and navigate the structure of your component.

  • Check Performance tab, to identify component creation time, helpful to identify performance bottlenecks.

  • Check Transaction tab, to monitor and modify the responses.
  • Check Event Log tab, to track event firing and handling sequence.
  • Check Actions tab, track all server-side call made to Apex. You can check all pending, running and completed server calls. You can even tweak the server response to check your component performance.

  • Check Storage tab, allows you to persist and cache structured data in HTML5 IndexedDB repository.

 

So if we look at all the tools mentioned above, its not very hard to debug your lightning component/application code. Try it out from your side and let me know if this helps. In further post related to this topic, we will go through a scenario to explore each and every tool and where these can be useful.

 

 

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu