Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

I believe that many students have started Vue3, it is really sweet to use!

Get out of here. Get out of here and get out of here. Get out of here and get out of here

Today, I will record their own debugging Vue3 source code process, convenient for future reference.

The preparatory work

First you need to download the source code and install the dependencies:

mkdir code
git clone https://github.com/vuejs/vue-next.git
cd ./vue-next
yarn install
Copy the code

After executing the above set, we get the following file structure:

Intimate tip: because the domestic access to Github is really slow, so I generally import the Github project into Gitee, and then clone from Gitee, the speed thief fast!

Basic debugging

In the VUe-next directory, run yarn run dev on a terminal. The following output is displayed:

Using VSCode Live Server plug-ins run packages/vue/examples/composition/grid. The HTML, and then open the console view code, the result is:

All the code is consolidated into vue.global.js, and when debugging the code, it is in this file. What if you want to debug the TypeScript source for Vue3?

Debug TypeScript source code

First, add -s or -sourcemap to the vue-next/package.json script directive:

Then perform the steps in “Development debug” and get the following results:

As you can see, at this point, we can enter the TS source code of Vue3 through the breakpoint, which also means that we are debugging Vue3 source code.

conclusion

As you can see from the above, if we add the -sourcemap parameter when building Vue3, the result will allow us to debug the TS source directly in Chrome.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!