Single-step Debugging Configuration
With the cross-platform code single-step debugging capability provided by
VSCode
, we can greatly improve the speed of application development based on theTaro
development framework, and focus on reducing the complexity of configuration for Windows platform as more mature tools are already available for other platforms.
一、Development Environment Setup
First, prepare the basic development environment for Taro
on Windows, as follows (existing development environments can be skipped).
1. Install Node.js
It is recommended to install 10.15
or above, download Node.js
2. Install VSCode
After installing the latest VSCode
, it is recommended to install the following plugins:
ESlint
- Code SpecificationTSlint
- syntax checking
3. Taro Source Code Download
Download: Taro, Default is 2.x branch, if you want to debug Taro Next, please switch to next branch first.
4. Source code Dependency Installation
1.Use VSCode
to open the Taro
source directory, and execute pnpm i
in the root directory to install the dependencies required for the project (the first installation will take a long time, please be patient)
2.Run pnpm build
to compile all modules
二、CLI Debugging
1. Configure VSCode Debugging Parameters
Open the .vscode folder in the root of the Taro source code in VSCode and edit launch.json.
The launch.json has the following preset configuration.
{
// ...
"configurations": [
//...
{
"type": "node",
"request": "launch",
"name": "CLI debug",
"program": "${workspaceFolder}/packages/taro-cli/bin/taro",
// "cwd": "${project absolute path}",
// "args": [
// "build",
// "--type",
// "weapp",
// "--watch"
// ],
"skipFiles": [
"<node_internals>/**"
]
}
]
}
Modification steps:
- modify cwd option to be the target working directory to be debugged
- modify args to be the parameter of the command to be debugged
The detailed configuration of launch.json can be found in VSCode Documentation
Example:
taro-build Debugging
Suppose you need to debug the taro build --weapp --watch
command for the test project.
You can configure launch.json like this.
{
// ...
"configurations": [
//...
{
// ...
"cwd": "/Users/User/Desktop/test",
"args": [
"build",
"--type",
"weapp",
"--watch"
]
}
]
}
taro-init Debugging
Suppose you need to debug the taro init projectName
command for the test project.
You can configure launch.json like this:
{
// ...
"configurations": [
//...
{
// ...
"cwd": "/Users/User/Desktop",
"args": [
"init",
"projectName"
]
}
]
}
2. Compiling Subpackages
When debugging a subpackage, if you want to debug the modified code, go to the root of the corresponding subpackage and turn on watch mode compilation.
For example, to debug @tarojs/mini-runner
, first go to packages/mini-runner/
, and then run npm run dev
in this directory (the compile command may vary by subpackage, see the package.json of each subpackage for details). This will allow us to debug the code after each change.
3.Links to unpublished libraries
If the currently developed subpackage depends on other subpackages, you can link the other subpackages to use them.
If you need to add other subpackages as dependencies for the current subpackage, you can execute pnpm --filter=[target] add [package] [--save-dev]
in the Taro source root, after which pnpm will automatically create the soft chain.
example: @tarojs/cli
add @tarojs/webpack-runner
as devdependencies:
pnpm --filter=@tarojs/cli add "@tarojs/webpack-runner@workspace:*" --save-dev
4.Start up debugging
You can start single-step debugging by following the diagram below, please refer to VSCode documentation for detailed debugging operation.
Currently, subpackages of the Taro project are generally compiled with
source-map
, so it is usually possible to use breakpoints directly in the source code location. If some packages are not compiled withsource-map
enabled, you can enable it manually and submitPull Requests
.