Introduction to the

Without saying a word, let’s get right to the process

Setp1

Install vscode Debugger for Chrome

Setp2

Click “Launch debug”, select Chrome environment, it will automatically generate launch.json, note that “preLaunchTask”: “debug”

{/ / launch. Json "version" : "0.2.0," "configurations: [{" type" : "pwa - chrome", "request" : "launch", "name" : "Launch Chrome against localhost", "url": "http://localhost:3000", "${workspaceFolder}", "preLaunchTask": "debug", // configure task}]}Copy the code

Click debug again, and the message “Debug” cannot be found.

Select the configuration task and select the command you want to debug. For example, NPM start

Tasks. json is then automatically generated, noting that label needs to be configured with the same value as preLaunchTask

{/ / tasks. Json "version" : "2.0.0", "tasks" : [{" type ":" NPM ", "script" : "start", "problemMatcher" : [], "label" : "Debug ", // here is the same value as launch.json preLaunchTask "detail": "node start.js"}]}Copy the code

Setp3

Enable Webpack debug mode to start debugging at the interrupt point

module.exports = {
  devtool: "eval-source-map",
  module: {},
  plugins: [],
}
Copy the code

Devtool also supports several other modes, as detailed here

Select the debug mode run script start to go to debug