Play by Play: Debugging and Troubleshooting Salesforce Lightning Components

Course Overview
Welcome to this Salesforce Play by Play with Pluralsight. Salesforce Play by Play is an interactive series where we sit down with Salesforce experts, such as MVPs, consultants, developers, and architects to discuss common challenges faced everyday by Salesforce customers. We'll be learning while discussing concepts and debating tradeoffs on various approaches to solving real world problems. We learn by reviewing system configurations or writing code, and then exploring the benefits of any particular solution. In this course, we challenge Mike Topalovich, Salesforce Application Architect, to explain how he would guide a team around development best practices for debugging and troubleshooting Lightning Components. First, Mike walks us through some key concepts and identifies some of the common issues and wide-ranging errors commonly experienced due to the complexity of the technologies that are used together in the Lightning Component Framework. We peek under the hood of the Salesforce single-page application, or SPA, architecture, and he explains how and why the architecture impacts your component development and debugging as he clarifies the impact of and the difference between adaptive and responsive design patterns. Next, he demonstrates the use of some debugging tools, such as the JavaScript console, the debugger statement, the Lightning Inspector, and the Lightning linter, and provides some strategies for isolating and troubleshooting Markup versus JavaScript issues. He takes us on a deep dive into troubleshooting CSS style and class hierarchies, and along the way shares some creative debugging approaches, and then demonstrates monitoring events, actions, and server-side Apex processing with Chrome's built-in Developer Tools. By the time we're done, you'll have gained some valuable perspective and insight that can help you master the craft of quickly resolving common issues and exceptions, increasing your productivity, and allowing you to stay focused on component delivery. So, please join us for Debugging and Troubleshooting Salesforce Lightning Components. We hope you enjoy it.

Troubleshooting HTML and CSS Issues
So Mike, why don't you give me a sense of what kind of CSS issues developers have to deal with. I mean it's really great that you can go into the tool and inspect and actually see the CSS, but what kind of issues are caused by CSS? CSS, again, it's going to be interesting for developers who are coming from more of a back-end framework. Again, Visualforce developers will struggle with this because we didn't really have to know CSS all that much. If you don't have a true web development background, CSS is kind of a foreign language, and a lot of developers struggle with it. It's not scoped per say, it's just a big flat file that contains what are called selectors. So we have something where a selector is going to determine which HTML element I'm going to apply styling to and I'll talk about those in a second. We have inheritance issues. So CSS stands for Cascading Style Sheets, and the Cascading part of that is usually the most difficult piece to grasp for developers because there actually is a flow in which things are applied. I can have styling for let's say what's called a class selector. So I have a custom CSS class that I've created. I could have styling for an HTML element. That styling could be applied inline on the HTML element itself. So you have your inline styling. You can apply your styling through what's called an internal style sheet, which is going to be, I have a style tag and then inside that style tag I have some things that are embedded in my HTML document, and then I have external stylesheets, which are, I could load those from files. Maybe a static resource. Lightning Design System is an example of an external style sheet. So we have this order in which CSS styles are applied, and that's always one of the trickiest things to try and figure out, especially when you're new to CSS; why is this style being applied here, but not here? And to troubleshoot that, it's more hierarchical.