精华内容
下载资源
问答
  • Vue使用debugger

    千次阅读 2020-02-19 18:35:44
    vue开发时会遇到需要调试代码的情况,使用debugger可以很方便的进行debug. 1.build/webpack.dev.conf.js 将devtool: '#cheap-module-eval-source-map',改为devtool: '#eval-source-map ', 2.在需要debug的地方...

    vue开发时会遇到需要调试代码的情况,使用debugger可以很方便的进行debug.

    1.build/webpack.dev.conf.js 

    将devtool: '#cheap-module-eval-source-map',改为devtool: '#eval-source-map ',

    2.在需要debug的地方加上“debugger”

    login({ commit }, data) {
        debugger
        const { username, password } = data
    })

     3.重启Vue项目,打开浏览器开发者工具后自动定位到debugger处.(不行就刷新一下)

    4.然后就可以调试了。

     

    展开全文
  • 如果来chrome控制台debugger调试Vue

    千次阅读 2019-08-08 08:27:20
    如果是单页面,const vm = new Vue({})的话,那么可以用在控制台里用vm 如果是SFC单文件组件,那么可以在控制台里使用__VUE_DEVTOOLS_GLOBAL_HOOK__

    如果是单页面,const vm = new Vue({})的话,那么可以用在控制台里用vm
    如果是SFC单文件组件,那么可以在控制台里使用__VUE_DEVTOOLS_GLOBAL_HOOK__

    发现一个问题,当使用__VUE_DEVTOOLS_GLOBAL_HOOK__时,如果使用模块,发现状态可以用,如__VUE_DEVTOOLS_GLOBAL_HOOK__.store.state.pay.payCoin,而getters获得者,或者commit都不能用,即__VUE_DEVTOOLS_GLOBAL_HOOK__.store.getters['pay/doublePayCoin'],或__VUE_DEVTOOLS_GLOBAL_HOOK__.store.commit('pay/incrementPayCoin')

    原来,之所以这样访问不行,是因为正确的访问时这样__VUE_DEVTOOLS_GLOBAL_HOOK__.store.getters.doublePayCoin或者是__VUE_DEVTOOLS_GLOBAL_HOOK__.store.getters.[‘doublePayCoin’]。如果需要像上面的案列访问,那么需要namespaced

    展开全文
  • npm i vue-dev-debugger -g npm i vue-dev-debugger --save-dev 使用 vder [-p < port> [-r < roorDir> ]] 非通用安装时使用node_modules/.bin/vder vder ; port,设置监听端口,默认8087 ; roorDir,设置代理的...
  • vuedebugger无法调试

    2021-03-11 19:24:52
    在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试...

    在浏览器中展示源代码
    在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

    打开 config/index.js 并找到 devtool property。将其更新为:

    如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool property:

    devtool: ‘source-map’,
    如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool property:

    module.exports = {
    configureWebpack: {
    devtool: ‘source-map’
    }
    }

    展开全文
  • 在项目根目录 config/index.js 中修改 将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map' 修改这项是为了vscode中的断点能够正确定位到行 在.vscode文件下创建lauch.json内容如下(ps:这个...

    在项目根目录 config/index.js 中修改

    将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'

    修改这项是为了vscode中的断点能够正确定位到行

    .vscode文件下创建lauch.json内容如下(ps:这个文件一般会自动创建)

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "timeout": 60000,
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
          }
        }
      ]
    }
    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "timeout": 60000,
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
          }
        },
        {
          "type": "firefox",
          "request": "launch",
          "name": "vuejs: firefox",
          "timeout": 60000,
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
      ]
    }
    复制代码

    官方文档连接

    转载于:https://juejin.im/post/5cf8acca6fb9a07ef90c8993

    展开全文
  • 问题描述:项目中使用debugger/console报错 error Unexpected ‘debugger’ statement no-debugger error Unexpected ‘debugger’ statement no-debugger 解决办法: 1. 找到项目中的 package.json 文件 2. 找到 ...
  • vuedebugger需要配置一下,怕将来忘记又要去查,索性随手记一笔。 devtools安装 1.github下载:git clone https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools工程 执行 npm install npm run build...
  • vue debugger 定位不准确 解决

    千次阅读 2020-05-13 15:47:16
    vue.config.js中添加下面代码 module.exports = { configureWebpack: { // webpack 配置 devtool: 'source-map', } }
  • 可能刚开始这样的命名并没有什么问题,但是当index.vue文件多起来之后,当你debugger的时候可能就会发现,找不到你要定位的文件了,但是我们这样的文件命名确实是符合规范的,所以我们就需要找到一个解决的办法 ...
  • 一、vue生产环境去掉debugger和console npm install terser-webpack-plugin -D 二、在vue.config.js文件里添加插件的配置 configureWebpack: config => { if (process.env.NODE_ENV === 'production') { ...
  • VS Code 如何调试 vue 使用Debugger for Chrome 安装Debugger for Chrome插件 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个launch.json的文件。 添加配置: { // Use IntelliSense to ...
  • vue3.0+ debugger不能使用

    2021-04-07 19:19:38
    "no-debugger": "off", "no-console": "off", "generator-star-spacing": "off", "no-tabs": "off", "no-unused-vars": "off", "no-irregular-whitespace": "off" } 切记 切记 把rules这...
  • vue - nuxt.js debugger报错

    千次阅读 2019-10-31 21:52:59
    前言    ...Unexpected 'debugger' statement.eslint(no-debugger) 解决方法     在.eslintrc.js中添加 rules: { 'no-console': process.env.NODE_ENV === ...
  • vue-cli debugger-for-chrom断点配置 安装完debugger-for-chrome 插件之后按照截图点击 在生产的launch.json文件下添加如下语句,注意端口号是自己的配置的。 "configurations": [ { "type": "chrome", "request...
  • 在尝试使用debugger for chrome时,出现问题 connect econnrefused 127.0.0.1:9222 网上有的教程说使用前先关闭chrome的进程,再调试 但觉得这样好麻烦,那要怎么办呢 首先,按文档准备好环境 vue.js调试准备 { ...
  • new UglifyJsPlugin({ uglifyOptions: { ... drop_debugger: true,//移除debugger // drop_console: false,//移除console } }, sourceMap: config.build.productionSourceMap, parallel: true })
  • <div><ul><li>Add a webpack build step, so templates are compiled during build. Although this is a slight performance improvement, the main win is maintainability.</li><li>Start using VueX for state ...
  • vue官网: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html vs code官网: https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md 刚开始我用的vue官网的,一直找不到哪里配错...
  • vue 线上环境不打印console 在vue.config.js文件里 configureWebpack: config => { if (process.env.NODE_ENV === ‘production’) { // 为生产环境修改配置… const terserWebpackPlugin = config.optimization....
  • vue打包后过滤console.log和debugger

    千次阅读 2018-09-17 14:00:09
    vue-cli搭建的项目 在build下的webpack.prod.conf.js下添加如下代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, drop_debugger:true }, ...
  • https://github.com/KingComedy/vue-source-debugger Vue的初始化 在引入的Vue的时候,定义了Vue的构造函数,以及初始化了Vue的实例方法和静态方法,总结了有以下一些比较重要的方法: 初始化实例方法,主要在src\...
  • 解决方案: 1. 在项目根目录下添加.eslintrc.js文件并配置其中的rules, 2. 重启项目即可; .eslintrc.js文件的rules中的内容如下: module.... 'error' : 'off' */ 'no-console': 'off', 'no-debugger': 'off' } }
  • 最近在学习 vue.js 的源码,主要是通过 Vue.js 技术揭秘 官方文档,但是都是文字描述和代码片段,很难和我们实际项目中的步骤和操作联系起来,所以尝试 debugger 源码,配合文档描述,进而学习 new Vue、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 644
精华内容 257
关键字:

debuggervue

vue 订阅