Using webstrom to debug Vue. js single page program method tutorial, webstromvue. js

Using webstrom to debug Vue. js single page program method tutorial, webstromvue. js

Preface

Debugging Vue. js single-page programs using webstrom should theoretically support all applications built with webpack

Webstrom version: 2017.1

Code: Basic single page application built using vue-cli

Modify webpack configurations

Because webpack packs all files together, we need webpack to provide us with a source map.

Change devtool to source-map. This is my Development Configuration File webpack. dev. conf. js.

module.exports = merge(baseWebpackConfig, {  module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development devtool: 'source-map', plugins: [ new webpack.DefinePlugin({  'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({  filename: 'index.html',  template: 'index.html',  inject: true }), new FriendlyErrorsPlugin() ]})

Install the browser extension

Install a chrome extension. Click the link to install it.

Https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/related

Create a debug

Run-> Edit Configurations

Select Javscript Debug

After the URL is filled in, the following directory ing will be displayed.

Run debug

Set the breakpoint and click the bug in the upper-right corner.

The browser will be opened later. When running to the breakpoint location you set, webstrom will be triggered

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.