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!