Play by Play is a series in which top technologists work through a problem in real time, unrehearsed, and unscripted. In this course, Play by Play: Debugging and Troubleshooting Salesforce Lightning Components, Mike Topalovich and Don Robins demonstrate how you would guide a team around development best practices for debugging and troubleshooting Lightning Components. Learn whats under the hood of the Salesforce “Single Page Application” (or SPA) architecture, deep dive into troubleshooting CSS style and class hierarchies, and creative debugging approaches. By the end of this course, 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.
Don Robins is a well known Salesforce MVP, instructor, author, and speaker.
A custom business application developer for more decades than he cares to
admit, he focuses on Salesforce technical instruction and knowledge
Mike has been a Salesforce certified developer since 2009 and a Salesforce certified instructor since 2014. He is a regular presenter at Dreamforce, TrailheaDX, and Salesforce community events. Mike was a co-author of the book, Visualforce in Practice, and publishes curated and original Salesforce content on his blog at Topalovich.com.
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.