Transcript
00:00 Using a debugger statement isn't the only way to add breakpoints to your code. Since now you have your IDE connected to the debugger instance in the browser, you can add breakpoints in line, straight in your editor. For example, if I want to add a breakpoint after this line, I will go to this gota area, next to the line number, and click on this red circle.
00:18 This will add a breakpoint after this line. It will be equivalent to having a debugger statement coming right after. I really love the built-in debugging tools in my editor, mainly for two things. First, is because they allow me to debug what I want without modifying that code. And second, is because they're much more powerful than a simple debugger statement.
00:38 In this exercise, you will discover that power for yourself, because it just so happened I have another failing test for you. This one is for a new component called MainMenu. It renders a list of menu items, which is basically title and a URL, and it uses a navigation link to render these items. This means that if the browser location matches the URL of menu item,
00:58 that item will be considered active. And I have an automated test just for that. So I render this menu in Memory Router, and I simulate the entries in the browser history. Here I have just one entry, which is slash dashboard slash analytics. So I expect the menu item with the analytics name to be active. To do that, I'm locating all the links on the page,
01:17 then finding the link where its area current attribute equals to page, which means this is a currently active link, and make sure that this page link has accessible name of analytics. But if I try to run this test, I will see that instead of analytics, the current active link is dashboard for some reason. This will be your task to figure out.
01:37 It would be really great if you could add a breakpoint right before this menu component renders the dashboard link. But you don't want to apply that breakpoint to all the links, because it iterates over them. So for that, you will use something called a conditional breakpoint. So as always, follow the instructions, use the new type of breakpoint, and try to figure out what's the root cause for this issue.
01:56 And once you're ready to discuss the solution, come back so we can do just that.