webstorm下debug调试react js程序
第一步：添加给你的Chrome添加JetBrains IDE Support的插件，需要翻墙，就是下图的这个。
image
第二步：我们把项目create-react-app创建的app跑起来，也就是运行命令
yarn start
它会自动打开一个页面，我们把它的url地址复制下来。
第三步：打开Webstorm的运行窗口，点击Edite Connfigurations。
到下面这个页面。
image
点选左上角的+号，选择JavaScript Debug，出现下面的界面。我们把复制的URL链接复制到下面的方框里。
image
然后在File/Directory中找到你的项目的地址，定位到src位置，在它的右边Remote URL部分设置webpack:///src，以让webstorm可以定位你的项目，建立映射关系。
第四步：运行，不过我们这里的运行需要你点运行右边的那个虫子按钮，入下图：
image
它会谈出下图的框，点击右下角DEBUG按钮。
image
第五步：如果你已经打了断点了，那么相比已经过来了吧。
F4CDA2EC-7553-4D93-9B04-09D5E2C3CA22.png
需要注意的是，我们在第三步设置
URL的时候，不要在下面的Before launch:Show this page,Activate tool window这一栏里添加这个项目npm start或者yarn start的启动脚本，一定要先启动项目，然后在点虫子按钮。
91214BB4-5473-4D5F-A7E6-3425A64D1C24.png
参考链接：https://www.jianshu.com/p/87a5609c5f44
webstorm下debug调试react js程序相关推荐
- Node Inspector 调试 Node.js 程序
Node Inspector 是一款提供界面化调试 nodejs 程序的调试器,使用它可以在浏览器中像调试前端页面一样调试 nodejs 程序. 环境 [dongshaoshuai~/js] ]$no ...
- “ create-react-app”和创建React应用程序的未来
Over the past few years, I've been heavily involved with teaching people how to build applications w ...
- （转）淘淘商城系列——maven工程debug调试
http://blog.csdn.net/yerenyuan_pku/article/details/72784074 上文我们已经实现了商品列表展示的功能,在实际开发中我们肯定是要经常对maven工 ...
- 如何调试Node.js应用程序？
如何调试Node.js服务器应用程序? 现在,我主要使用带有以下打印语句的警报调试 : sys.puts(sys.inspect(someVariable)); 必须有更好的调试方法. 我知道Goog ...
- 利用Console来调试JS程序、Console用法总结
利用Console来调试JS程序.Console用法总结(1) 一 .什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console ...
- react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
- parcel react_如何使用Parcel捆绑React.js应用程序
parcel react by Michael Ozoemena 迈克尔·奥索埃梅纳(Michael Ozoemena) 如何使用Parcel捆绑React.js应用程序 (How to use Pa ...
- idea调试怎么跳出循环_使用IDEA的Debug调试功能，查看程序的运行过程
Debug追踪,使用IDEA的断点调试功能,查看程序的运行过程 知乎视频www.zhihu.com 1. 在有效代码行,点击行号右边的空白区域,设置断点,程序执行到断点将停止,我们可以手动来运行程序 ...
- react.js app_如何创建Next.js入门程序以轻松引导新的React App
react.js app Getting started with a new React app is easier than ever with frameworks like Next.js. ...
最新文章
- andorid 全部对话框
- 【Git】git使用 - 各种常用场景命令解决
- C++类的使用（六）—— 判断继承
- 在CentOS6.2下安装DNS服务软件Bind并快速配置简单实例
- c语言删除尾部空格函数,新人提问：如何将输出时每行最后一个空格删除
- linux下使用ThinkPHP注意大小写问题
- java 双线程交替,Java 创建两个线程，和主线程交替运行。
- argo 现水下永动机器人_水下永动机器人现身
- Spring Boot 2.4发布了，但Spring Cloud用户不推荐着急升级
- 18.企业应用架构模式 --- 基本模式
- 中文分词项目(开源/API接口)总结
- Navicat for MySql管理工具 中文破解版
- Java之—hutool工具类二维码生成跟背景图合并输出
- 偏最小二乘(Partial Least Squares，PLS)原理及模型建立
- 13个常用的Word快捷键，一看就会，你值得拥有！
- 解决异常 more than one ‘primary‘ bean found among candidates: [jacksonObjectMapper, objectMapper]
- 阿里云服务器租用价格表最新发布，持续更新
- 微信小程序vant 输入框问题
- 解决winrar压缩文件或文件夹时，文件拒绝访问问题
- GitHub 牛逼项目：用东北话来编程，就问你怕不怕！