image.png

安装插件

Microsoft Edge Tools for VS Code

启动

  1. 点击 VS Code 左侧边栏的 Edge 图标，在出现的侧边栏中选择 Launch Instance，此时 Windows 桌面会出现一个新的 Edge 窗口，VS Code 会在右侧分屏出现一个调试窗口。

image.png

  1. VS Code 上的 DevTools 和浏览器的 DevTools 功能一样，但目前仅有 Element 和 Network 两个调试选项。第一个图标是选择页面上的元素，而第二个图标会出现和浏览器一样的页面，显示的像素与浏览器像素相同。因此我们想模拟什么设备，只需要利用浏览器 DevTools 的「切换设备仿真」，选择对应设备，VS Code 就能得到同样的页面。

image.png

Vue 调试

  1. 配置 vue.config.js：

    1. module.exports = {
    2. configureWebpack: {
    3.  devtool: 'source-map'
    4. }
    5. }

    或者

    module.exports = {
 configureWebpack: config => {
     config.devtool='source-map',
 }
}

  2. 启动项目

    yarn  serve

  3. 打开浏览器的开发者工具，查看源代码。如果webpack下没有src目录说明有误，请重新配置vue.config.js

image.png

  1. 打开VS Code侧边栏的调试图标，选择 Run -> Add Configuration，配置如下：

    {
"version": "0.2.0",
"configurations": [
 {
   "type": "pwa-msedge",
   "request": "launch",
   "name": "Launch Edge Devtool",
   "url": "http://localhost:8080",
   "webRoot": "${workspaceFolder}/src",
   "breakOnLoad": true,
   "sourceMapPathOverrides": {
     "webpack:///src/*": "${webRoot}/*"
   }
 }
]
}

  2. 点击侧边栏的调试图标或者按快捷键F5启动调试。现在就可以在VS Code中随意断点，调试网页了。