Vue项目调试总结(2)-VSCode+Chrome调试

2018/05/16

本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接

上一篇文章介绍了如何使用WebStorm+Chrome调试Vue应用,本篇介绍如何使用VSCode+Chrome调试Vue应用

Vue项目调试总结

如何使用VSCode + Chrome调试Vue应用

准备环境

  1. 在VSCode中安装插件Debugger for Chrome

  2. 创建demo项目vue init webpack vuejs-webpack-project

  3. 修改source map

    打开config/index.js文件, 修改source map属性,从cheap-module-eval-source-map改为source-map

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    'use strict'
    module.exports = {
      dev: {
        /**
        * Source Maps
        */
        // https://webpack.js.org/configuration/devtool/#development
        // devtool: 'cheap-module-eval-source-map',
        devtool: 'source-map',
        // ...
      },
    
      build: {
        //...
      }
    }
    
  4. 添加测试代码 修改src/components/HelloWorld.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    <template>
    <div class="hello">
      <!-- .... -->
    <br/>
    <button @click="test">测试222</button>
    </div>
    </template>
    <script>
    export default {
    name: 'HelloWorld',
    //... 
    methods: {
    test(params) {
      console.log('hello bbb 222 33 ccc')
    }
    }
    }
    </script>
    // ...   
    
  5. 在test函数中打好断点

  6. 使用npm install安装好所有依赖的组件

调试

  1. 打开调试视图,编辑调试配置,如下图所示:

    vscode_vue_debug_setting

    配置如下所示:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    {
        //...
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "vuejs: chrome",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}/src",
                "breakOnLoad": false,
                "sourceMapPathOverrides": {
                    "webpack:///src/*": "${webRoot}/*"
                }
            }
        ]
    }        
    
  2. 启动server,可以使用WebStorm npm scripts中双击start启动server, 也可以在命令行中执行命令npm run start启动server

  3. 点击debug,调试vuejs: chrome,这时候会打开chrome,当我们点击测试按钮VS Code, VS Code就会响应断点状态,如下图所示 :

    vscode_vue_debug

总结

目前我最喜欢的Vue项目调试方式还是: WebStorm+Chrome,因为WebStorm的代码编辑,重构等功能本来就很强大,调试时的的变量显示也是最友好的。只是WebStorm会比较重,启动较慢,但是功能最强大

VSCode+Chrome调试功能会稍微逊色一些,但是也基本可用,比较轻量级,启动速度较快。如果经常切换项目,可以考虑使用VSCode+Chrome的调试方式

参考链接

  1. https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html

  2. https://vuejs.org/v2/cookbook/debugging-in-vscode.html

¥打赏5毛

取消

感谢您的支持,我会继续努力的!

扫码支持
赏个5毛,支持我把

打开支付宝扫一扫,即可进行扫码打赏哦

本篇目录