Name: 現代の探偵のための必須JavaScriptデバッグツール レベッカ・ヒル著｜JSConf Budapest 2019 (Essential JavaScript debugging tools for the modern detective by Rebecca Hill | JSConf Budapest 2019)
Uploaded: 2021-01-14T10:27:22.000Z
Duration: 29 min 19 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

分詞構句

so yes, this is me at my day job, detecting bugs.

So I work every transfer as a friend and engineer and team leader.

And for me, that means that I write mostly react.

I smell see, assists a little bit of Ruby again.

And I'm responsible for the day to day delivery for that team.

And this is also made about six years ago, I was helping run a workshop for young girls in New Zealand, which does?

And, yes, I'm a very long way away from home.

But the idea was that we would get these young women into the company to sort of show them what it was actually like to be a software engineer.

There were about 14 years old and they were all in the same tip class at school.

And honestly, I think we kind of blew their minds on How cool is this shit actually is compared to what they were learning on, but yeah, I really want to encourage people thio to do as many of these kinds of programs is as you can because it's incredibly rewarding and also inspirational because this was one of the inspirations for this talk.

Having worked with Junior Debs quite a lot.

It's one of these things that I've noticed is is they really struggle with debugging, and I think that's kind of because we don't really teach it as a skill.

It's one of those that you sort of expect developers to just pick up naturally.

And there's so much there to learn if you really focus on it.

And that's why I decided to write this talk.

Hopefully they'll be something useful in here, no matter how deep down this hole you've been before.

Better yeah, the quick look of the process itself.

How often have you actually spent time thinking about how you debug?

It's easy to forget that it's a difficult skill that it's It's something that you need to master in order to become a really experience developer, and it's learned over time and improve with experience.

And it's not just about the tools you use, but it's the mindset in the process and how you actually work through your debugging tasks.

And it becomes particularly clear when we compare those new developers with more experience ones.

Often new developers will jump straight into.

The coach will go and change a whole bunch of things.

They won't remember what they've changed in what they heaven and what actually might have fixed the problem and what was maybe just some extra bit of code that they stuck in there?

But it's something we do pretty much every single day.

And so in the talk, I won't go into the detail of how important it is to reproduce the bug.

Be methodical, only changed one thing at a time had a narrow down where the buggers.

But it's surprising how often this stuff is not talk.

So if you're a junior developer or you're teaching junior developers, I hope you're one of either that these two things.

Um, yeah, I do spend the time really looking into this stuff with them.

So there is one step that I do wanna cover really quickly because even the most senior developers I've worked with and including myself, sometimes I forget to write tests like this is the first thing that you do, right.

If you've discovered a bug, right, Otis, that reproduces it because it not only will keep your focus on just that one bug.

It'll also speed you up because you no longer need to launch you out and click about to get to the states of where your bug actually is.

And, of course, it'll help your bug never return.

So let's move on to the tools, starting with the consul Will the polls.

As you can see, we've got 56% of developers on the left hand side.

Look on 67 on the right hand side, and it's It's not surprising, right, because we've been conditioned to use it alongside simple text editors like sublime text, Adam Note Pad, etcetera and a large portion of Web developers have also just simply missed the exposure to, ah form or or street or structured debugging process like myself.

And the browser console is a pretty nice way to inspect the results of your logs so it works and it's easy.

Well, why change it well, because there is so much more so even if we just take a closer look at console that look, you'll see that there are lots of different ways to optimize it.

We have the normal concert log usage for logging out these two variables.

Pin one and pen to, and here they are here but on the bottom.

If you just add to extricate characters to 10 this log into an object.

Here, you know only get the results of the lab but off the value of the variable.

But you also get the variable context, so it's much easier to see at a glance what you're lugging.

It could be really useful, especially when you're logging a lot of different things in your application, and you can also really add easily.

Add styling to your locks by including this percentage Cyan C at the beginning and then passing through some styling as the second parameter, you can get really pretty callous, so sticking to the consul for now.

Did you know that there are actually a whole bunch of different, well methods on that object?

I'm gonna show you my favorites, but Googling will reveal a hell of a lot more.

For instance, console table is super useful if you want to log out an array of objects, so here you can see it's much easier to kind of compare at a glance the different values and next we have console group, which is when I don't know about you.

But have you ever at if it ended up adding so many logs in your application that you can't tell which was the one that you just added well group and group collapse A really useful for structuring your logs into collapsible groups, creating less noise in the console for you to analyze, which is really the kind of game.

Another useful function you can use in the Consul is the dollar selector.

So it works similarly similarly to the J.

If you include a zero after it is done here, you can get the most recently inspected HTML element, or JavaScript object.

No one gets you a sick and most recently selected Exeter Exeter up to full super useful.

If you want to quickly see what properties what attributes on the domino door.

JavaScript objects that you're looking at, and if you use dollar dollar, it's the equivalent of document dot query selectable.

Even better, it returns you a proper array rather than a node list so you can manipulate its right away.

Consul, don't trace has been a lifesaver for me, especially when you're working in a new cold baths.

And you can't actually, you don't have that, you know, inherent knowledge of what is calling What?

Um and so in here, I added a consul trace on this handle filter click function to figure out what was calling it, and you can see that it's now telling me that it was cool by Handel Clock in filtered Out Gaius and Console Doctor is great when you want to inspect a dom note as a JavaScript object rather than as its markup, which is what concert log returns you.

You can see all the properties on that Don owed much more easily.

As you can see, Consul Logs blitz spits out the objects in black and white, and it only displays to levels Deep Consulate there, on the other hand, allows you to add some really handy configuration.

So here we've just added this extra object where we've said colors true of dip null, and it means that we get our logs or pretty with lots of different colors, and you can now access the LAT and long properties on that geo object.

So let's say we've been working with console functions for a while and want to step it up.

So I'm gonna focus on chrome because it's what I'm most familiar with.

But the Firefox Dave Tools also really great and have a lot of the same functionality.

Browser details have some really handy features for debugging.

So the devil's debug A Is that the best one off them?

One of the simplest ways to activate this is by using a debug, a keyword in your code.

Would I touch this in into my editor and opened up in crime?

And when I refreshed it hit the debug Ricky with their that break point?

And so now you can see Sorry, I'm having video issues as well, but hopefully you'll be able to see that we can log out the of the variables in scope at the moment.

We can also inspect the entire scope at this point of execution, and we can also step through the code.

And speaking of stepping just in case you've never used a debunker before.

They're pretty much the same, no matter what kind of language you're writing or what kind of tool you're using.

First, we have resumed, which is when you're on a break point on you.

Press this and you'll be able to resume the script until the next break point.

If you hold this button down, you also have the option to play through without hitting any more break points, which could be useful when you just want to get the code running.

The next is step over, which executes the next function after a break point and stops afterwards.

And then we have the step into and out of functions and note that these air functions that were stepping over into and out off, not lines of coach that can take a little bit.

Thio kind of get that, um and yes, So what we've been doing here is adding a line of code break point with the debug.

A key would in our idea, but if you set things, break points in the diff tools or in your head, Issa, you'll see why this could be much more efficient than using Consul Log.

It's almost as if you've pippins your whole code base with consul locks without actually having to do so and having to clean anything up.

So here I've clicked on 14 21 and 26 and then run your code as usual.

現代の探偵のための必須JavaScriptデバッグツール レベッカ・ヒル著｜JSConf Budapest 2019 (Essential JavaScript debugging tools for the modern detective by Rebecca Hill | JSConf Budapest 2019)

字幕リスト動画再生

現代の探偵のための必須JavaScriptデバッグツールレベッカ・ヒル著｜JSConf Budapest 2019 (Essential JavaScript debugging tools for the modern detective by Rebecca Hill | JSConf Budapest 2019)

specific

entire

process

access