VSCode

Tasks

对于调试 页面 前需要启动某个进程是否有用，可以不必在 launch 中配置或手动执行
https://vcfvct.wordpress.com/2019/01/11/debug-browser-code-in-vscode/
配置与 launch 稍有不同，可直接调用 npm
参考此处：https://github.com/microsoft/vscode-recipes/blob/master/vuejs-cli/README.md#serve—debug-at-once
problemMatcher 相当于提取 shell log 的信息来在 vscode 中输出警报，beginsPattern 则为该任务的开始 log，endsPattern 则为该任务的 终止/暂停log，匹配 endsPattern 则表示当前 task 执行完成

  1. {
  2.   "version": "2.0.0",
  3.   "tasks": [
  4.     {
  5.       "label": "@formily/react: start",
  6.       "type": "npm",
  7.       "script": "start",
  8.       "isBackground": true,
  9.       "options": {
  10.         "cwd": "${workspaceFolder}/packages/react",
  11.       },
  12.       "problemMatcher": {
  13.         "base": "$tsc-watch",
  14.         "background": {
  15.           "activeOnStart": true,
  16.           "beginsPattern": "Starting development server",
  17.           "endsPattern": "Compiled successfully"
  18.         },
  19.       }, 
  20.     }
  21.   ]
  22. }

配套 launch

  1. {
  2.   // https://go.microsoft.com/fwlink/?linkid=830387
  3.   "version": "0.2.0",
  4.   "configurations": [
  5.     {
  6.       "type": "chrome",
  7.       "name": "server @formily/react",
  8.       "request": "launch",
  9.       "port": 9001,
  10.       "url": "http://localhost:8000",
  11.       "webRoot": "${workspaceFolder}/packages/react",
  12.       "breakOnLoad": true, // !需要为 true，不然页面 load 期间的 debugger 会被直接跳过
  13.       "skipFiles": [
  14.         "${workspaceFolder}/node_modules/umi/**/*.js",
  15.         "<node_internals>/**"
  16.       ],
  17.       "preLaunchTask": "@formily/react: start",
  18.     },
  19.   ],
  20. }

关注：
chrome debugger 依旧步进入 ignore list 文件
https://stackoverflow.com/questions/68424845/why-is-chrome-stepping-into-ignored-files