November 30, 2019

How to check JavaScript code’s compatibility with Lightning Locker Console?


Hello Trailblazers!
We use third party libraries in VF Page, Lightning Component, Lightning Web Component. But it is not always a case the third party library that we use in vf page will work seamlessly in Lightning Component also. As we know it's better in lightning & we are migrating page centric project to App Centric. How do we come to know whether these libraries will work in Lightning component or not? Are you thinking of writing code and using it in component to check & test. Ohh! Wait. Didn't you hear about Locker Console?

  • Locker Console is used to check JavaScript code’s compatibility with Lightning Locker.
  • Locker Console enables you to quickly evaluate JavaScript code for issues or benchmark code, without requiring you to create an app to test your component. 
  • You can evaluate only JavaScript code in Locker Console. You can't evaluate a complete component bundle or component markup.
Locker Console Tab is present in Component Library

Locker Console looks like this:


Code Console (1)
  • Paste or type your JavaScript code here to evaluate or benchmark it.

Toggles (2)
  • Enable or disable Locker.
  • Enable or disable Strict CSP.

Actions (3)
  • Click Evaluate to run the code that’s displayed in the code console.
  • Click Benchmark to run your code with and without Lightning Locker and view relative performance metrics.
  • Click Clear Results to clear all the displayed results.
Example: 


As we can see there is an error for getAttribute property so we can not use google chart js in lightning component.

This way we got to know how to check javaScript's compatibility in Lightning Component without testing it into app. It enhances Security.

References:

No comments:

Post a Comment