1
00:00:02,480 --> 00:00:04,130
Now what about debugging?

2
00:00:04,130 --> 00:00:06,230
What if I want to debug my code?

3
00:00:06,230 --> 00:00:10,540
Well if we go to the sources tab and you check out assets scripts,

4
00:00:10,610 --> 00:00:16,760
you will find a file which is pretty hard to debug, all the webpack code is in there and is pretty impossible

5
00:00:16,760 --> 00:00:22,490
to debug your code there but you should also have a webpack folder here so to say. There you should

6
00:00:22,490 --> 00:00:30,500
find a .folder and there in source, you find your original code files, at least mostly original

7
00:00:30,610 --> 00:00:34,550
but these are also tweaked by webpack and the app.js file is empty.

8
00:00:34,990 --> 00:00:41,560
So this is better for debugging but still not ideal. To get a good debugging experience,

9
00:00:41,590 --> 00:00:47,920
we need to go back to the webpack.config file and there, add a so-called dev tool.

10
00:00:48,430 --> 00:00:53,830
Add the dev tool entry here and now you need to parse in a string here or provide a string where you

11
00:00:53,830 --> 00:01:00,460
use one of the provided development tools which in the end just means how webpack links your file to the original

12
00:01:00,460 --> 00:01:01,090
code

13
00:01:01,090 --> 00:01:01,970
you could say, so

14
00:01:02,000 --> 00:01:04,890
how well this is from a debugging experience.

15
00:01:04,900 --> 00:01:10,420
There you got different levels of detail and the better the linking, the slower the build process and

16
00:01:10,420 --> 00:01:12,070
so on, the bigger the output.

17
00:01:12,070 --> 00:01:17,050
So for development, you want to have good linking for good debugging, for production you of course want

18
00:01:17,050 --> 00:01:23,080
to minimize this to have as small of an output as possible and to also speed up the build process.

19
00:01:23,290 --> 00:01:25,070
So which options do we have here?

20
00:01:25,270 --> 00:01:27,360
We can find that in the official docs,

21
00:01:27,480 --> 00:01:29,660
there under guides,

22
00:01:29,800 --> 00:01:33,390
if you click on development, you can click on using source maps where

23
00:01:33,390 --> 00:01:34,840
you can learn more about that

24
00:01:34,930 --> 00:01:37,360
and then here, click on different options.

25
00:01:37,360 --> 00:01:42,670
There, you see all the built-in dev tools and you can check out this table to find out which one works

26
00:01:42,670 --> 00:01:44,570
best for you,

27
00:01:44,740 --> 00:01:48,680
here I'll go for cheap-module-eval-source-map,

28
00:01:48,700 --> 00:01:51,490
copy that and enter it here in this string

29
00:01:51,490 --> 00:01:56,650
and now if we save that, we have to restart our build dev process to take the new configuration file

30
00:01:56,680 --> 00:01:59,500
into account and with that done,

31
00:01:59,500 --> 00:02:05,680
if you go back to our project and reload there, you should find that in the webpack folder in the

32
00:02:05,680 --> 00:02:06,520
.folder

33
00:02:06,520 --> 00:02:11,540
now in the source folder, you really find your original code here

34
00:02:11,650 --> 00:02:19,840
if you inspect these files and you can also place breakpoints there, for example if I go to project list

35
00:02:19,840 --> 00:02:26,320
here and there to the drop event listener and we add a breakpoint, then as soon as I do drop, we indeed

36
00:02:26,350 --> 00:02:29,480
pause here and we can do what we can always do here,

37
00:02:29,500 --> 00:02:33,200
we can do everything you learned in the debugging section.

38
00:02:33,290 --> 00:02:39,000
So now we have a great setup for development and we can now also debug our code

39
00:02:39,000 --> 00:02:40,700
and with that, we bundle our code,

40
00:02:40,700 --> 00:02:46,010
we have the development server and we can also debug our code and we have a good development experience.

41
00:02:46,010 --> 00:02:50,900
We also added linting which you can of course also fine tune to your requirements regarding the rules you

42
00:02:50,900 --> 00:02:51,980
used there,

43
00:02:51,980 --> 00:02:57,950
now what's missing is that we also have a finished production workflow, where we optimize our code and

44
00:02:57,950 --> 00:03:01,640
spit out as small of a codebase as possible.

45
00:03:01,640 --> 00:03:02,990
Let's do that next.