đź“Ł Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

Learn Debugging Strategies and Take Next Steps

Learning Objectives

After completing this unit, you’ll be able to:
  • Use two easy techniques for debugging component code.
  • List five different ways you can learn more about Lightning components.

Debugging and Troubleshooting

Software defects happen. When you’re just getting started with any new language or framework, you’re often in a situation where you’re asking “What happened? Did anything happen?”

Sometimes all you need is a log line with some useful details about where you are and what a variable contains. So, here’s a quick example of how to do exactly that in your JavaScript.
// ...
console.log('someVariable: ' + JSON.stringify(someVariable));
// ...

JSON.stringify() gives you a human-readable representation of even complex structured data. The console.log() command outputs a string in your browser’s JavaScript console. The two together work no matter what browser you’re using, what tools you have installed, or how skillful you are with the JavaScript debugger.

Of course, not all problems can be diagnosed with console.log(). In the Lightning Component Skills & Tools module, we helped you get set up with Chrome DevTools and the Lightning Inspector. When the going gets weird, the weird turn pro. That means the Lightning Inspector. You’ll probably turn most often to the Event Log tab when diagnosing interactions between components, and to the Actions tab when diagnosing problems with server requests. You also probably need to learn more about the event handling lifecycle.

Last thing. Be sure to enable Debug Mode. It prevents downloaded JavaScript from being minified, and otherwise makes it easier to get details required for advanced debugging chores. This is essential if your debugging requires tracing through code, which will otherwise be indecipherable.

Next Steps

OK, time to wrap up. We hope this whirlwind tour of some of the essential new and different features of the Lightning Component framework has been interesting, and will be useful to you as you start developing with it. We especially hope it helps you avoid pitfalls that Visualforce developers sometimes fall into.

We can’t pretend, though, that we’ve covered everything you need to know to become an accomplished developer with Lightning components. There is so much still to go. Here are a few suggested next steps.

The most obvious is the Lightning Components Basics module, right here on Trailhead. A number of things we briefly touched on here are covered in depth there, including some especially tricky concepts, like handling server responses in callbacks.

If you’re looking for even more pointers, the last unit of that module is Discover Next Steps. A whole unit’s worth of pointers that direct you to more things to explore!

It’s also a great introduction to the Lightning Components Developer Guide, broken down by theme and topic area. That developer guide is the definitive reference for developing with the framework.

The entire Develop for Lightning Experience trail has useful material, including a few different hands-on projects that use Lightning components.

If you like to learn from videos, there’s a ton of them at Salesforce Live. Search for “lightning components” to narrow down the list to something manageable! We especially recommend the many videos from Dreamforce 2015 and Dreamforce 2016.

Finally, for a dynamic reference to the components you have installed in your org, similar to the Visualforce in-app component reference, check out the reference doc app, located at https://<yourDomain>.lightning.force.com/auradocs/reference.app.

We hope you enjoy your journey into Lightning components!

retargeting