So now that we have a properly configured project.
Let's dive a bit deeper into how you can debug your project or how you can have a great development
flow I showed you my basic idea is that at the beginning of this course re make sure you got the right
extensions installed there for typescript it comes down to is lint which can help you with lending your
typescript code.
So with improving the code quality though you might need additional configuration for is Linda to have
an effect.
It can help you in more advanced projects though but more interesting than that you want to really use
prettier to automatically format your code and have a nicely formatted code and you might want to give
debugger for Chrome a try because data allows you to debug your types good files even from inside the
US code through Chrome but without using the Chrome dev tools of course you can use those as well as
learned if you do enable source maps here but you can of course always do you get these translated files
there as well which is really nice but you can also use V as code you can place breakpoints here.
Let's say the click handler and now to launch your files you're through we as code you need to enable
source maps as well but we still will be able to use TV as code instead of the browser dev tools so
enable source maps.
Place your breakpoint and then go to debug start debugging.
Now the first time you run this ad should ask you for an environment in there with that debugger for
a Chrome extension installed.
You should be able to choose chrome.
It will now go to a launch Jason file where you can figure how it should launch that.
And there you should point that at local host three thousand because that's where our development server
is running.
And of course that process.
So the NPM start process should be up and running so pointed local host three thousand there and as
a web route where you can leave that place holder here which means this project folder is assumed to
be the host of your files which is the case and now compile your code so that the source maps also are
generated after setting the source maps conflict to true.
So then do we now have these in the javascript code then with your breakpoint added here and your lawn
shapes and configured let's run debugging here start debugging now for real and it will open up a new
tab now automatically this tab will be closed whenever you quit the debugging process or if you close
to tab the debugging process will quit.
So now with Dad you entered this debugging view here in view code where you can track variables and
watch certain expressions and see the current calls stack.
If you now click on Click me you should be taken back into the editor and code execution pauses at your
breakpoint in the typescript file and now you can walk from the file here inspect local values for this
keyword or for the message variable for example script wide variables you might have and global variables
you got access to global objects you can watch certain expressions like message plus multiple exclamation
marks and well then you can always track the value which is in there.
Here in this window if you wanted to see the dead would work and you can see the kernel function calls
Take for example that recurrent and click handler and now you can step through your code with these
controls to step to the next step skipping over the next function call stepping into the function call
or stepping out of the current function call and the call stack of course here will adjust according
to that.
And with that you can ignore this browser sync thing here with that you can always resume code execution
by clicking the play button and only pause whenever you reach your breakpoint the next time.
So this is how you can debug code.
You can remove a breakpoint by clicking on it.
This is how you can debug code from inside this code with the help of the built in debugging tools.
The chrome debugger extension to ride configuration and source maps which are setup in your typescript
can think.