vue源码调试

最新推荐文章于 2023-02-12 15:29:25 发布

小兔快跑zZ

最新推荐文章于 2023-02-12 15:29:25 发布

阅读量757

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42630688/article/details/118930813

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用vscode进行调试

去vue仓库下载源码
修改package.json，打包生成sourcemap

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",

npm run dev 生成dist文件
在项目根目录新建index.html，引入vue.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-for="(item, index) in arr" :key="index">{{item.name}}</div>
    <button @click="show=true">显示</button>
    <div v-if="show">aaaa</div>
  </div>
  <script>
  
    let vm = new Vue({
      el:"#app",
      data: {
        name:'zs',
        arr:[
          {id:1,name:'2'},
          {id:2,name:'4'},
          {id:3,name:'6'},
        ],
        show:false
      },
      created() {
        this.init()
      },
      mounted() {
        console.log('mounted')
      },
      computed: {
        calc() {
          return this.name + 'computed'
        }
      },
      watch: {
        name(n,o) {
          console.log(n,o)
        }
      },
      methods: {
        init() {
          console.log('init')
          
        }
      },
    })
  
  </script>
</body>
</html>

点击调试，新建launch.json,把入口文件配置为index.html

6.在想打断点的位置点击

7.点击绿色三角即可开启调试

浏览器调试
使用Chrome打开index.html，在source中打开index.html,在相应位置打上断点即可开启调试

小兔快跑zZ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue源码调试

使用vscode进行调试去vue仓库下载源码修改package.json，打包生成sourcemap"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",npm run dev 生成dist文件在项目根目录新建index.html，引入vue.js<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫