Learn how to use the Inspect Elements panel in Chrome DevTools and how it differs from viewing the source of the HTML you're looking at.
[00:00] Anyone who remembers poking around in HTML in the '90s or even in the early '00s might be remember that the was this amazing thing that you could do that made Web development different from other software. You could ask the browser to show you the source of the HTML that you're looking at. What that does is spit out everything that is in the HTML file that the server sent your browser, and it's going to show you the content of that file without rendering it.
[01:07] At the other end of the spectrum, if you go to something like a React application, here's a very simple React application. When you click the kitten, the counter increments. When you hover of this, whatever, it's a simple React application. But, if we go to view the page source, you're going to see that this isn't very useful either, but for the opposite reason. We have here an empty DIV and a script ta, and that's it, this is all that the server rendered. What happens here is that React is actually mutating the DOM for us.
[01:42] What gets served down by the server is actually very different from what is actually in the DOM by the time we're viewing it. So instead of viewing source, what we all do now is, you know this trick, right? You can inspect element. This brings up the dev tools panel with the elements tab selected. Now instead of showing us only the empty root DIV, we actually have all of the content that React has put into the DOM.
[02:41] It allows you to explore it in a structured way and collapse what you're not looking it. So inspecting elements is now what view source was to us back in the day, and it's a really useful tool to get familiar with.