Original subtitles

1 1

Welcome back. 2

2

So, let's now put the debugging process, 3

3

actually into practice. 4

4

And we're gonna start really small, 5

5

and just fix a very simple bug, using the console. 6

6

So let's suppose that in our Smart Thermometer, 7

7

that we were working on before, 8

8

we need to do some measurements in a unit called Kelvin. 9

9

which is the absolute temperature. 10

10

And a conversion to Kelvin is pretty easy. 11

11

So all you have to do is to add 273, 12

12

to the temperature in degrees Celsius. 13

13

So let's very quickly create a function, 14

14

which will perform this measurement, 15

15

and this is of course, all completely fictional, 16

16

and this function will actually take no arguments at all, 17

17

because we will get the measurement from a command prompt. 18

18

So we will basically pretend that the command prompt 19

19

is like the thermometer sensor. 20

20

And now let's actually create an object here. 21

21

So, an object for the measurement. 22

22

So we haven't used object in sometime, 23

23

and so let's remember that. 24

24

And let's just add some arbitrary properties here, 25

25

so the type of measurement is gonna be temperature, 26

26

and the unit will be in Celsius. 27

27

So basically, we will measure temperature in Celsius, 28

28

and then we return a converted, version. 29

29

And in there somewhere will be a bug. 30

30

And now, finally, the value of this measurement will come, 31

31

as I just mentioned, from a prompt. 32

32

So let's just say "degrees Celsius," 33

33

and to that will then trigger a prompt, 34

34

and then let's convert that to Kelvin. 35

35

So as I said, all we need to do, 36

36

is to take the measurement in degrees Celsius, 37

37

and add 273. 38

38

So, that means measurement.value, 39

39

so this property here, 40

40

where that value in degrees Celsius will be stored, 41

41

plus 273. 42

42

And now we can return, converted value. 43

43

And then let's run the function, 44

44

and immediately log the result to the console, 45

45

so that's measure Kelvin. 46

46

And now I will give it a save, 47

47

and it will then ask me for the temperature, 48

48

so let's say, it's 10 degrees Celsius, 49

49

and so now let's wait for the result in Kelvin, 50

50

and we get this number, 10,273. 51

51

And that is not what we expected. 52

52

We wanted 283, but not this number. 53

53

So, there's got to be a bug somewhere, 54

54

and so let's find it. 55

55

and by the way, 56

56

the first stage of the process was already this one. 57

57

So A was to identify the bug. 58

58

Remember, and now we're going to stage B or stage two, 59

59

which is to find the bug. 60

60

And so, since the bug appears in the converted value, 61

61

which is this one, 62

62

and this one is derived from this measurement value 63

63

let's start by inspecting 64

64

that measurement value in the console 65

65

to see if something is wrong there. 66

66

So, console.log measurement.value, 67

67

give it a save, 68

68

and of course now we need to input it again, 69

69

and so it looks okay, actually, right, so it is 10, 70

70

so that's exactly what we input it. 71

71

So it looks kind of normal, 72

72

I just want to show something here now to you, 73

73

which is, that we actually do have things beside console.log 74

74

so we also have console.warn, and console.error. 75

75

And with this, we can basically generate warnings, 76

76

and errors in the console. 77

77

So 10 again, and you see that now, 78

78

this first one looks like a warning, 79

79

and the second one actually looks like an error. 80

80

So that's just a matter of formatting, 81

81

but it's still interesting I think 82

82

but let's take them out, 83

83

and so, yeah, right now it looks like everything is correct, 84

84

so let's dig a little bit deeper, 85

85

and take a look at the entire object. 86

86

And actually if it was myself, 87

87

I would have done that immediately, 88

88

but I want to show you the complete thought process here. 89

89

So anyway, let's say, measurement, 90

90

so that's the entire object, and not just the value. 91

91

Let's turn off this one as well give it a save, 10, 92

92

and let's open up, and now we actually see the problem. 93

93

You see, the value is a string, and that's because, 94

94

as I told you in the last lecture, the prompt function here, 95

95

always returns a string. 96

96

No matter what we input into that prompt window, 97

97

it will always just be a string. 98

98

And so that's why we get this end result here, 99

99

because as you remember, the + operator, 100

100

when it sees a string, 101

101

it will convert both operands to a string, 102

102

and then concatenate the strings. 103

103

Just as another curiosity here, 104

104

there is also another way of showing objects in the console, 105

105

which is really handy sometimes 106

106

so measurement, and so again 10, 107

107

and so console.table, gives us this nicely formatted table. 108

108

And especially for bigger objects, 109

109

that can be quite helpful. 110

110

And let's actually leave that here, so that you can see it. 111

111

So with this, we completed the second phase, 112

112

and that was to find the bug. 113

113

And now all we need to do is to fix the bug. 114

114

So we need to do that right here where it actually occurs. 115

115

Yeah, so up here, so let's see, "cfix." 116

116

And so the solution to this is to convert this string 117

117

that is returned to a number. 118

118

So, let's use the number function. 119

119

So we already learned about this one, and the last section, 120

120

and so now, we actually expect this to work. 121

121

And indeed, now we get 283, 122

122

which is exactly what we were looking for. 123

123

Great, so this was a very simple example, 124

124

of just using the console, in order to hunt down a bug, 125

125

and then fix it. 126

126

But now let's take it to the next level, 127

127

and learn how to use a debugger, in Google Chrome. 128

128

And let me quickly show that to you, 129

129

with this current function, and for that, 130

130

we actually need to make this a little bit bigger, 131

131

and now we go here into "Sources," 132

132

so for the first time, we're using the Sources tab, 133

133

and then click here on script.Js, 134

134

which is our current script. 135

135

Okay, then as we move down, we have our code here, 136

136

and now here in the debugger, 137

137

which is basically these two panels here, 138

138

we can set something called breakpoints. 139

139

So let's put a breakpoint here in this line of code, 140

140

so here, and we set a breakpoint 141

141

by clicking here in this left bar, 142

142

and so this will set this red point, 143

143

which means that there is a breakpoint. 144

144

And now when we reload the page, 145

145

then the execution will stop exactly at this point. 146

146

So basically, execution will freeze in time, 147

147

and show us exactly what the execution looks like, 148

148

at that moment in time, and that includes all the values, 149

149

of all the defined variables. 150

150

So let's do that, let's reload, 151

151

and so you see, now we are in this function, 152

152

and now I can click this button here, 153

153

to resume the script execution, 154

154

and it will then start going over all these lines, 155

155

but now it can only continue if I input a value here. 156

156

So that's coming from this prompt, so again, I put 10 here, 157

157

hit Enter, then it does all of these lines here, 158

158

and finally, we reached the line where I set the breakpoint. 159

159

And so that's this one here marked in green now, 160

160

and again, at this point, we can then see all the variables. 161

161

So Kelvin is still undefined, 162

162

because the computation has not yet been done, 163

163

but we can take a look at measurement here. 164

164

So the value is 10, as we just input it, 165

165

and, yeah, this can be very helpful, 166

166

in case if you don't want to mess around 167

167

with a lot of console.logs, or other stuff like that. 168

168

Can also hover these here, 169

169

so here we can see the whole object, 170

170

here we then can see just the property value, 171

171

and now we can execute the rest of the function, 172

172

simply by hitting this "Step" button here. 173

173

So basically, this will then go to the next line of code, 174

174

so now we have Kelvin set at 283, 175

175

because now the previous line, just execute, 176

176

And here we are in the last line, 177

177

and so now we can see here return value will be 283. 178

178

So with this one here, we can execute one line at a time. 179

179

And for now just ignore these three buttons here, 180

180

you can explore them a little bit later. 181

181

Okay, so we're almost done, let's just click one more time, 182

182

and so we're out of the function now, 183

183

and now processing this next line of code, 184

184

let's just continue, and so now, 185

185

we went into some other stuff here, 186

186

and that's actually coming from the live server, 187

187

so nevermind, we can just close this, 188

188

and now click here on "Resume Script Execution," 189

189

and now we're done. 190

190

So this is not all super intuitive, I would say 191

191

so just experiment around a little bit, 192

192

with these different buttons. 193

193

Okay, now, we just need to get rid of this breakpoint here, 194

194

otherwise the execution will always stop here in the future. 195

195

So just click this red dot here again, 196

196

and then it's gone. 197

197

And that's how we launch, 198

198

and use the debugger in Google Chrome. 199

199

Now let's quickly introduce a bigger bug here in our code, 200

200

and then fix it using the debugger. 201

201

And for that, 202

202

I'm simply going to go back, 203

203

to this function that we created before, 204

204

so, this one here, 205

205

and let's call this one here, "bug." 206

206

So I'll replace all the news with bug, 207

207

so we have here "calcTempAplitudeBug," 208

208

and here we code that, 209

209

and then we code the "AmplitudeBug" into here as well, bug. 210

210

Cancel that one, and actually, 211

211

let's come here, and comment out this piece of code, 212

212

so that it doesn't annoy us all the time, 213

213

and we can just set the value here manually, to 10 Wrong. 214

214

Okay, this way we preserve the code that we have, 215

215

and also keep it running, or actually keep it working. 216

216

So here, let's just say, using a debugger. 217

217

Then down here, we are codling this function, 218

218

and here, let's just change this to something else 219

219

let's say four, okay, let's just run this now quickly, 220

220

and so we see that at the output 221

221

at this point is still correct 222

222

'cause we didn't introduce any bug yet. 223

223

So the max is nine, the min is one, 224

224

and therefore the amplitude is eight. 225

225

But now let's say that we did a mistake. 226

226

And we might have thought intuitively, 227

227

that the max and min values, 228

228

would be good to have a starting point of zero. 229

229

I think you can maybe see why that would make sense. 230

230

So for example, we started the sum at zero before, 231

231

so why not start the max and the minimum at zero too, right? 232

232

It would have been quite reasonable to think that. 233

233

And so let's pretend that we did think that, 234

234

but this will actually introduce a bug 235

235

because with this, this will not work. 236

236

So as you see, now, 237

237

here it says that the minimum value is zero, right? 238

238

So that's coming from from this console.log here, 239

239

which says now that minimum is zero, 240

240

entered aptitude therefore, is nine minus zero, 241

241

which is nine. 242

242

So, we identified debug here, okay, 243

243

let's again write that, "IDENTIFY" 244

244

and so, let's now go back here to Chrome, 245

245

and to the debugger to try to find that bug. 246

246

And the debugger is actually especially useful 247

247

inside of a loop. 248

248

And so that situation that we have right now, 249

249

so we are in a loop. 250

250

And so let's see here, now, 251

251

why the maximum and minimum values, 252

252

are not being correctly set. 253

253

Or actually, it's just the minimum. 254

254

The maximum is fine, 255

255

but still we need to analyze both of them. 256

256

So, what I'm gonna do here, 257

257

is to set a breakpoint right here. 258

258

Because that's where the maximum and the minimum, 259

259

are being computed, okay? 260

260

So let's reload, and right away, 261

261

we get to this point in the execution. 262

262

So at this point, 263

263

the temps variable has already been computed, 264

264

so it's already this complete array, 265

265

max and min are at zero, and so now we are doing this. 266

266

So we see that the current temperature is three, 267

267

that the maximum is zero, and so next step will end up here, 268

268

or let's actually continue, and indeed, 269

269

now we see that max is three, and that makes sense, right? 270

270

According to the rules that we described earlier. 271

271

Okay, moving on here, and we already moved on right 272

272

to the next loop iteration, 273

273

and that's because we don't have a breakpoint here. 274

274

So let's just put another one, 275

275

and so now we're in the second iteration. 276

276

And so now I is one as you can see here. 277

277

Okay, so the current temperature is five, 278

278

max is three, and so now the new max should become five, 279

279

and again, we jumped over this one, 280

280

but let's just keep going, 281

281

all right, so now the current temperature is one, 282

282

max is five, and so this one will now not get executed, 283

283

so now we can see this one, current temperature is one, 284

284

which is less than zero, and so, 285

285

nothing is going to happen, right? 286

286

Now, so here, we actually have the bug itself. 287

287

So we know intuitively, 288

288

that one here is supposed to be our lowest number. 289

289

But the problem is that zero is even lower. 290

290

And so it's impossible for any of these numbers here, 291

291

to be set as the minimum. 292

292

Again, because the initial value that we set, 293

293

is already lower, 294

294

than any of the values that we have in the array, 295

295

and so now, by analyzing this one by one in the debugger, 296

296

we can really understand that is what happens. 297

297

So again, in this situation, 298

298

is where we would like for this one to be set at a minimum. 299

299

But it's not gonna happen, 300

300

because one is not less than zero here. 301

301

And so now, there's not even a point to keep going, 302

302

well, we can still do that 303

303

so now the current temperature is four, which is this one 304

304

and just one more, so I is five, 305

305

so we're in the last iteration, 306

306

and we see that the maximum is already correct, 307

307

and now here, we can actually also see the loop finishing, 308

308

because we see that temps.length is six, 309

309

and I right now is also six. 310

310

So six is not less than six, of course, 311

311

and so the loop will now finish. 312

312

So you see, now we jumped over the loop, 313

313

and we are finally here in this next line of code, 314

314

let's go to the next one, and the value to return is nine, 315

315

as we already know, because of our bug in the min. 316

316

Okay, and that's it. 317

317

Now, we stepped over this entire function logic, 318

318

and saw exactly what happened line by line. 319

319

And again, we're in the in the live server here, 320

320

let's just remove this, 321

321

and resume the script execution. 322

322

Okay, great, so I hope that got you an idea 323

323

of how we can use the debugger, 324

324

just wanted to tell you that instead of going through 325

325

the Sources tab here, 326

326

we can actually also call the debugger right from our code. 327

327

And all we have to do for that 328

328

is to write debugger right here. 329

329

So JavaScript has this debugger statement, 330

330

and then when the browser sees this debugger, 331

331

it will automatically open up the debugger tool. 332

332

So when I give it a save now, 333

333

you see, that we are right at this point. 334

334

So it's like it put a breakpoint here in this point, 335

335

and then we can do everything, as we just saw before. 336

336

So let's click here on Continue, 337

337

or actually, let's just get rid of this here, 338

338

give it a save, 339

339

or stop this and reload, and yeah, 340

340

then we exited that debugger. 341

341

Now, this was, of course, just a small example, 342

342

but again, this is an extremely powerful tool, 343

343

that you can now use whenever you run into a problem, 344

344

in the future. 345

345

So take a moment now to go through the steps again maybe, 346

346

by yourself, and that will then help you, 347

347

make you a better developer. 348

348

because debugging really is an intrinsic part 349

349

of the development process.