Problem: I just upgraded vue2 to vue3, and the old devtool cannot recognize vue3 data.
reason:
The devtool version is too low. Upgrade to the latest.
solve:
Go to github to download the vuetool project code:
GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.
Download the project and unzip it, cmd in the directory
Execute compilation
-
Because devtools must be downloaded using yarn, we need to download the yarn package management tool.
-
Execute the command to download yarn:
npm install -g yarn -
After installing yarn, install related dependencies through yarn:
yarn install
-
After the dependencies are installed, start packaging and building. It should be noted that the command here needs to include watch. If not, an error will occur.
yarn run build:watch -
After the code is executed for a while, this picture appears, and there is no other response. At this time, Ctrl+C can exit.
-
Next, execute the compile to chrome version script
yarn run dev:chrome
After the following interface appears, you can press Ctrl+C to exit the terminal:
If the compilation is successful, you can see this package using
chrome browser loading
Loading the extension is ok, don’t worry about the error
The page running vue3 can be recognized by devtool.
Finally, I share my successfully compiled shell-chrome package:
Link: https://pan.baidu.com/s/1zKEgGxT5uAvofpD-T1Oa_w?pwd=72m5 Extraction code: 72m5 After copying this content, open the Baidu Netdisk mobile app for more convenient operation.