wenstorm设置谷歌_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),然后才能启动调试器。 平常我们调试Java项目或者安卓项目时都是一键启动的,而调试Web项目是需要两步的,当然我们可以在配置JavaScript Debug时,添加前置步骤来简化操作步骤

WebStorm还支持调试异步代码,Web Workers和 Service Workers

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

准备环境

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

修改source map

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

'use strict'module.exports={

dev: {/**

* Source Maps*/

// https://webpack.js.org/configuration/devtool/#development//devtool: 'cheap-module-eval-source-map',

devtool:'source-map',//...

},

build: {//...

}

}

添加测试代码 修改src/components/HelloWorld.vue

测试222

name:'HelloWorld',//...

methods: {

test(params) {

console.log('hello bbb 222 33 ccc')

}

}

}

//...

在test函数中打好断点

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

调试

编辑调试配置,新建JavaScript调试配置,名字起个vuedebug,并设置要访问的url,以及Remote url配置,如下图所示:

在URL处填写: http://localhost:63342  这里注意:端口号要和设置中调试器自带的端口号63342一直,否则不能调试,如下图:

在src的Remote url处填写: webpack:///src

保存好调试配置

先启动配置的正常server(run),可以使用WebStorm npm scripts中单击工具栏start图标启动server, 也可以在命令行中执行命令npm run start启动server

再启动配置的调试server(vuedebug),单击工具栏debug乌龟图标启动,调试DebugTest,这时候会打开一个新的chrome,如下图所示 ,将要调试页面地址复制到新打开的浏览器中开始调试

当我们在chrome中点击测试按钮,WebStorm就会响应断点状态,可以直接在chrome浏览器中一步步调试,也可以去webstorm左下角的调试窗口中点击一步步调试,浏览器调试和工具窗口调试都会相互同步的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304306.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Coursera吴恩达《卷积神经网络》课程笔记(1)-- 卷积神经网络基础

推荐阅读时间:8min~15min主要内容:卷积神经网络《Convolutional Neural Networks》是Andrw Ng深度学习专项课程中的第四门课。这门课主要介绍卷积神经网络(CNN)的基本概念、模型和具体应用。该门课共有4周课时,所以我将…

反转一个整数

原型:unsigned Reverse(unsigned int n) ; 我的代码:用了浮点函数log10, pow不仅效率低,还会损失精度。 1 unsigned Reverse(unsigned n)2 {3 intdigits (int)log10((double)n) ;4 5 intr 0;6 while(n)7 {8 intt n %10;9 r t *pow((double)10…

如何友好的处理 WebApi 中抛出的错误

微软的 ASP.NET Web API 是一个轻量级的web框架,可用来构建基于 http 无状态的rest服务,异常是一种运行时错误,异常处理是一种处理运行时错误的技术,每一个开发者都应该知道如何处理 Web API 中的异常,并且在 Action 中…

纯c语言实现的改进暗通道去雾算法测试程序(附赠大量测试图像),基于改进暗通道先验算法的图像去雾...

邱清辉摘要:针对普通暗通道先验算法去雾能力的不足,本文提出了一种改进算法,通过采用高斯平滑将原图像分为基础子图和细节子图,基础子图采用暗通道先验算法,细节子图采用gamma变换方法,再采用图像融合进行融…

第jiu届蓝桥杯单片机省赛真题_第九届蓝桥杯单片机组省赛试题.pdf

第九届蓝桥杯单片机组省赛试题“彩灯控制器”的程序设计与调试 (70 分)一、基本要求1.1 使用CT107D 单片机竞赛板,完成“彩灯控制器”功能的程序设计与调试;1.2 设计与调试过程中,可参考组委会提供的“资源数据包”;1.3 Keil 工程…

为什么离开学校后,学习能力直线下降?

最近几年,人工智能浪潮层层推进,对各大科技公司产生巨大影响。百度推出Apollo无人车计划,阿里建立达摩院,腾讯成立的AI Lab虽布局较晚却也不甘人后。ChinaAI已是大势所趋,吸引的不仅是大公司,更有许多人工智…

android6.0重力工具箱,重力工具箱 GravityBox For Android8.0/8.1(Oreo)稳定版发布!

作为功能最强大的Xposed框架模块之一,重力工具箱 GravityBox的更新适配一直也是最积极的,本次发布的8.x专用版本也算是比较及时,每一个大的Android版本,重力工具箱基本都会有一个专门的版本来适配,当然基础功能也会略有…

如何在 ASP.Net Core 中使用 MediatR

MediatR 是一个 中介者模式 的.NET开源实现, 中介者模式 管控了一组对象之间的相互通讯并有效的减少了对象之间错综复杂的相互依赖,在 中介者模式 中,一个对象不需要直接和另一个对象进行通讯,而是通过 中介者 进行转达&#xff0…

pythonjson数据提取_python爬虫学习笔记(十)-数据提取之JsonPath的使用

1. JSON与JsonPATHJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。适用于进行数据交互的场景,比如网站前台与后台之间的数据交互。JSON和XML的比较可谓不相上下。Pyt…

全球100款大数据工具汇总(前50款)

01 Talend Open Studio是第一家针对的数据集成工具市场的ETL(数据的提取Extract、传输Transform、载入Load)开源软件供应商。Talend的下载量已超过200万人次,其开源软件提供了数据整合功能。其用户包括美国国际集团(AIG)、康卡斯特、电子港湾…

NLP快速入门:手把手教你用HanLP做中文分词

导读:随着自然语言处理(Natural Language Processing, NLP)技术日趋成熟,实现中文分词的工具也越来越多。中文分词技术作为中文自然语言处理的第一项核心技术,是众多上层任务的首要基础工作,同时在日常的工作中起着基础性的作用。…

微信小程序android错误,app安卓端 跳转到微信小程序失败

详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)[内容] app安卓端跳转到微信小程序失败重现步骤 一直失败[步骤] 微信小程序关联了…

动态内存(Dynamic Memory),微软的内存过量分配技术?

Hyper-V不支持Memory Overcommitment,一直为VMware和其他虚拟化厂商所诟病。当然,微软一直不承认这是他们的软肋,认为为了保证生产环境VM的性能,过量分配内存是不合时宜的。但是,微软的态度似乎突然转变,3月…

openlayers地图旋转_OpenLayers的使用---- 一个完全免费开源的地图JS库

OpenLayers很容易的在网站里放置动态地图。它能显示展开图及从资源中加载地图标记及矢量数据。它被开发出尽可能的使用所有的地图信息。并且它是完全免费及开源的.详细了解可去它的官网:http://openlayers.org/简单使用,如展示一个块地图.mymap {height:…

程序员上帝视角解读“旅行青蛙”,你的呱真的在旅行嘛?

来源:知乎作者:黄小秋原文链接:https://www.zhihu.com/question/68733553/answer/305463907导语:知乎有位程序员大佬,为了让老母亲老父亲们理解自己的呱究竟在干什么,于是花了五个晚上逆向游戏程序逻辑&…

android.mk 翻译,翻译ANDROID-MK.TXT

Android.mk编译文件是用来向Android NDK描述你的C,C源代码文件的,这篇文档描述了它的语法。在阅读下面的内容之前,假定你已经阅读了docs/OVERVIEW.TXT文件,了解了它们的脚色和用途。概述:一个Android.mk file用来向编译系统描述你的源代码。具…

我为什么对TypeScript由黑转粉?

喜欢就关注我们吧!一名曾仅使用 JavaScript 的开发者解释自己为何从反对 TypeScript 到转变为 TypeScript 粉丝。Chirag Swadia 自称曾是 Anti-TypeScript 的 JavaScript 开发者。谈及反对的原因,他以前一直认为给函数/变量添加类型以满足 TypeScript 编…

谈谈关于MVP模式中V-P交互问题

在差不多两年的时间内,我们项目组几十来号人都扑在一个项目上面。这是一个基于微软SCSF(Smart Client Software Factory)的项目,客户端是墨尔本一家事业单位。前两周,我奉命负责对某个模块进行Code Review工作&#xf…

ofdm解调算法_OFDM系统中固定频偏算法

加入固定频偏:function berMatrix freqOffsetOFDM(BPS,NS,M,SNR,ifftsize,carriers,N,ep)%标准OFDM系统input_bit_stream sign(randn(1,BPS*NS));input_bit_stream(input_bit_stream -1)0;parallel_data StoP(input_bit_stream ,M);% 串并转换%QAM调制modulated_d…

重磅!阿里开源AI核心技术,95%算法工程师受用

你是否曾有过这样的疑虑:人工智能大热,作为一名传统程序员,该如何转型或学习?网上AI教程、书籍,质量参差不齐,如何找到真正专业的资源?AI理论遍地皆是,但几乎都在纸上谈兵。我们该从…