Quick Edits: HTML Breakpoints, Themes, & Accessibility

[00:00:00]
>> HTML breakpoints, these are another really, cool thing. So this is like an anecdote, but I had this job once where I was working on a tool. And the tool was essentially this giant table that was populated with data in real time. So like little cells of the table table would always change and I was really new on this team.

[00:00:20]
And we had a bug where when one would change, sometimes it would go blank, it would like update and it would go white and the bug was to figure out why that was happening. And so this is like back to the very first slide of like dev tools can kind of help you level up If I was not good with dev tools, I would have done what everyone else would have done.

[00:00:40]
I would have either asked around, or open the code and start trying to find what code populates the table, stuff like that. But knowing Dev tools, you can do these really cool things. So, just like we'll learn how to set break points in our JavaScript code in the next section, you can set break points on your HTML code.

[00:00:58]
So, if I go to like the HTML element way up here, and I right click it, I'll get this break on drop down. And so, what this is doing is it says when one of these three things next happens, I want you to pause JavaScript execution. And I want you to show me what JavaScript caused the HTML to change, which is really very powerful.

[00:01:21]
So you have three options, which is whenever the subtree is modified, and if you think about the DOM being a tree, so elements have children, elements of children elements all the way down, right? And so if you go to the HTML, which is the top element, and you say when the subtree is modified, that will mean anything on the app.

[00:01:38]
But if you had a table like in my anecdote, you'd go to the table and do it there. You could also do when attributes are modified. So that would be if we did it, let's say on this h1. It wouldn't change if the text changed, but it would change if the ID changed like an attribute.

[00:01:52]
And then the third option is break when a node is removed. Again, this can be really helpful, so as a little contrived example, I'll do break on for the HTML subtree modification, so anything changes in the subtree break? I think I have an old one clicking around here, which I'll get rid of.

[00:02:09]
Okay, so now you can see this little blue breakpoint on the HTML. So then I can go into console, and I can do like document, get element by ID. Let me find one that exists ID main, so go back here. Grab this main, and I'll do main dot inner text equals hi, something like that.

[00:02:31]
So I changed the articles inner text to be hi and before it even processed, I get this. I get this breakpoint here and my DOM where everything is, is paused. And if I click on the call stack, again, we'll get into debugging later. I just want people to be aware that they can do this cool thing it'll actually, show me the line that changed that bit of HTML.

[00:02:52]
So I think this is one of those things that is really powerful for ultra specific situations. Like you'll be in a situation where the website is behaving strangely. And you have no real idea what's doing it in the JavaScript. Being able to figure out exactly what line of JavaScript is altering the HTML can be really useful.

[00:03:09]
So I'll go ahead and play through here and go back to elements. As you can see the whole site turned into the word Hi.
>> I followed along with the debugger example and mine is just stuck on when I updated the inner text to Hi,
>> Do you see up at the top of the screen a little I think it's like a yellow bar with a play button on it.

[00:03:30]
>> Yeah,
>> You can hit that to play through. And I think it'll, get you there one more time and you hit play again and then it should go through.
>> Okay.
>> Yep, and then the other way to do it. Yeah, that button should always be there.

[00:03:42]
I think there's me we do this again, so you should have this play button up here. I think there's also a way to just like deactivate back here on the sources tab, you can deactivate all break points, and then if you hit play, it just won't stop again, which can be nice.

[00:03:58]
So you can kind of leave them on, you can also then at any time go back to elements and right click breakout and then remove the thing and then the blue circle should go away. So then we have a finding event listeners to this is like very much in common with the HTML break points where we can see something going on with our app, but we're not exactly sure where it's coming from.

[00:04:21]
So, like for example, you click on a button and it does something and you want to know where that JavaScript comes from. So that's what this third tab over here event listeners is for. And so you can see this is a static HTML site. So there is not really any event listeners except for this one that my code highlighter uses.

[00:04:40]
But if you were to do some code like make a button and then add event listener, click to it or something like that or if you're in react and you did an unclick event or anything like that, those will all show up here. When you click on the items you could like click on different items and see if they have any event listeners this way.

[00:04:57]
Color formats is another cool one, this one was added a few years ago, but I really like it. So you can see over here we've got border top and then it's like this reddish color. So we can pretty easily edit the hex codes, right, but another thing you can do is you can click on the color itself and it opens this like really nice color palette.

[00:05:16]
You can drag it all around, so let's do something like, let me close this and let's take like the body and we'll do background color and we'll click on that. So now you can kind of drag it all around and really find the exact color that you're looking for.

[00:05:32]
You can change all the kind of hue and saturation and transparency and all that stuff, and it'll give you the hex code. Another really cool thing is this section down here as the lower half which populates like colors themes. So for example is material UI, you can again, you can click on an element click on the actual square of the color, click on these this little toggle here, and then click on material UI.

[00:06:05]
And now it'll populate this nice little section here. So as we're doing stuff, like we can choose the body background from material UI colors, which is Google's color theme, but the thing I use it for more than that, and let me refresh real quick, so I get rid of that yellow is I'll go to here.

[00:06:20]
Click on this and then I'll click on page colors. And what this does is it's dynamically reading the colors on the current page and then generating a color scheme out of those. So this is like the actual blue that I use up here. You can also see that when you scroll off of this modal, it turns into one of those really cool like zoom things.

[00:06:39]
And so you can like hover over if you wanted to get the hex for this blue, or this white or this red or anything like that. So these are all really cool, so it's got like an eyedropper. It's got all the kinda Hue Saturation stuff, it has multiple different formats RGBA, HSLA, hex and then it's got this really cool theme picker here.

[00:06:58]
So there's like a lot here for when you're designing stuff. There's also a cool little Dev tools trick, which is you can go back to body and hover, you can shift click on any color box, and it'll instantly convert it between the color format. So I know some people at their jobs like we all use HSLA or we all use RGB or something like that.

[00:07:18]
So you could just like Set it to a thing that you know like a hex, and then you can shift click on it to turn it into RGB other stuff that does it has this accessibility panel. The accessibility panel is really nice for when you're doing stuff like, we do a lot of stuff at work with making our sites keyboard accessible.

[00:07:34]
So everything that you can do with a mouse you should be able to do by tabbing around with the keyboard. And so this can be really nice where it shows this accessibility tree. And you can see like what items have tab indexes or which ones have any kind of ARIA.

[00:07:47]
Attributes on anything like that will be in here. And it can be really helpful when you're just trying to look at like, is this getting tap index or does this have my Aria label that I put on or anything like that will be in this tree.