WebStorm+Chrome调试Vue步骤
在调试时请注意 :
在WebStorm中启动调试时，WebStorm会根据你设置的url，⾃动打开新的Chrome浏览器进程访问这个设置的url，⽽且这个浏览器页⾯和你平常看到的浏览器差异会⽐较⼤，看不到书签栏，也看不到你先前所装的所有插件。这是因为平常我们打开Chrome浏览器进程时，并不会添加–remote-debugging-port选项，⽽WebStorm⽆法让已经打开的Chrome实例⽀持调试，所以必须重新打开⼀个新的Chrome浏览器进程，⽽且不能和原来的Chrome浏览器进程使⽤相同的⽤户数据⽂件夹，所以它会使⽤⼀个临时的⽂件夹，因此当它开始调试时看到的Chrome没有任何标签，也没有任何安装的插件。我们可以在这个浏览器上登录我们的google账号，然后将所有数据同步过来，这样下次调试时所有的书签和安装的应⽤也就都会存在了。我们也就可以将原来浏览器的数据导出到新的⽂件夹，然后在WebStorm中设置Chrome的⽤户数据⽂件夹为这个新的⽂件夹，这样也能将所有的书签和安装的应⽤导过来
另外⼀个注意点 :
Web项⽬的调试和我们平常调试Java项⽬，安卓项⽬并不同，因为我们开发Vue项⽬时，使⽤webpack-dev-server，也就是说不是WebStorm⾃带的Server，此时需要先启动Server(可以使⽤命令⾏ npm run dev ，也可以通过在ide的Npm Script管理器中双击启动Server)，然后才能启动调试器。平常我们调试Jav
a项⽬或者安卓项⽬时都是⼀键启动的，⽽调试Web项⽬是需要两步的，当然我们可以在配置JavaScript Debug时，添加前置步骤来简化操作步骤
WebStorm还⽀持调试异步代码，Web Workers和 Service Workers
如何使⽤WebStorm + Chrome调试Vue应⽤
准备环境
1. 在chrome中安装插件
2. 创建demo项⽬ vue init webpack vuejs-webpack-project
3. 修改source map
进⼊项⽬打开config/index.js⽂件, 修改source map属性，从cheap-module-eval-source-map改为source-map
'use strict'
dev: {
/**
* Source Maps
*/
// /configuration/devtool/#development
// devtool: 'cheap-module-eval-source-map',
devtool: 'source-map',
// ...
},
build: {
//...
}
}
添加测试代码修改src/components/HelloWorld.vue
<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>
// ...
在test函数中打好断点
使⽤npm install安装好所有依赖的组件
调试
1. 编辑调试配置，新建JavaScript调试配置，名字起个vuedebug，并设置要访问的url，以及Remote url配置，如下图所⽰:
在src的Remote url处填写: webpack:///src
保存好调试配置
1. 先启动配置的正常server（run），可以使⽤WebStorm npm scripts中单击⼯具栏start图标启动server，也可以在命令⾏中执⾏命令
webstorm插件推荐npm run start启动server
2. 再启动配置的调试server（vuedebug），单击⼯具栏debug乌龟图标启动，调试DebugTest，这时候会打开⼀个新的chrome，如下图
所⽰，将要调试页⾯地址复制到新打开的浏览器中开始调试
当我们在chrome中点击测试按钮，WebStorm就会响应断点状态，可以直接在chrome浏览器中⼀步步调试，也可以去webstorm左下⾓的调试窗⼝中点击⼀步步调试，浏览器调试和⼯具窗⼝调试都会相互同步的。