React项目调试---WebStorm+Chrome调试

最新推荐文章于 2024-05-28 14:57:36 发布
最新推荐文章于 2024-05-28 14:57:36 发布
阅读量4.2k 收藏 6
点赞数 1
分类专栏： 工具 文章标签： webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45178761/article/details/105095042
版权

React项目其实是可以调试的。并且WebStorm+chrome也可以调试React项目。

1种调试方式

WebStorm + Chrome

WebStorm + Chrome
WebStorm是我最喜欢的前端开发IDE，只是比较重量级，启动速度较慢。

而在调试方面WebStorm + Chrome进行调试时，可以在WebStorm中源代码处加断点，当代码执行到断点处时，系统会让WebStorm显示在最前面，并且显示代码已运行到断点处，可以直接在代码处显示各个变量的值，也可以使用表达式计算值，能看到函数调用堆栈，通过这些操作可以快速定位到问题本质原因

此时如果修改代码，React应用会自动重新构建，但是此时断点和chrome中的代码就对应不上了，必须在Chrome中刷新页面才能对应上，然后可以尝试上次出问题的操作，继续定位问题，直至问题解决

但是在调试时请 注意 :

在WebStorm中启动调试时，WebStorm会根据你设置的url，自动打开新的Chrome浏览器进程访问这个设置的url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到你先前所装的所有插件。这是因为平常我们打开Chrome浏览器进程时，并不会添加–remote-debugging-port选项，而WebStorm无法让已经打开的Chrome实例支持调试，所以必须重新打开一个新的Chrome浏览器进程，而且不能和原来的Chrome浏览器进程使用相同的用户数据文件夹，所以它会使用一个临时的文件夹，因此当它开始调试时看到的Chrome没有任何标签，也没有任何安装的

最低0.47元/天 解锁文章
奘倥城
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebStorm运行React Native项目
小小T的专栏
09-26 3686
WebStorm是一款前端开发工具，也可以用于React Native项目 下载安装WebStorm WebStorm下载地址 安装完不要运行webstrom 下载破解补丁 打开网址（IntelliJ IDEA 注册码），下载补丁 然后将补丁复制到安装目录的bin目录下，例如：D:\Program Files\JetBrains\WebStorm 2018.2.3\bin 修...
谷歌浏览器 webstorm 网页开发调试插件
08-03
通过在Chrome浏览器中集成WebStorm的功能，开发者可以在浏览器环境中直接进行代码编写、调试和测试，实现无缝的前后端开发流程。 WebStorm是JetBrains公司的旗舰级产品，是一款强大的JavaScript IDE，支持包括HTML...
react项目如何调试？
weixin_33753003的博客
09-30 1023
  进入到相应的网页界面，然后查看Sources->Page->top->webpack://->找到react的js代码处，设置断点，进行调试  
如何本地 Debug React 源码
hawk2014bj的博客
05-28 763
对于React 代码 debug 的两种方式，个人更倾向于第二种方式，编译源代码的方式稍微麻烦一些，但是对原始代码没有任何侵入性。
前端新手如何安装webstorm ，初步搭建react项目
weixin_34250434的博客
09-14 1284
下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了。（存微信收藏、、） 1：在webstorm下配置node环境： 2：完成之后： React官方脚手架地址： https://github.com/facebook/create-react-app 在终端下安装执行npminstall-gcreate-react-app不用每个项目都装。...
webstorm下debug调试react js程序
学亮编程手记
04-08 2215
第一步：添加给你的Chrome添加JetBrains IDE Support的插件，需要翻墙，就是下图的这个。 image 第二步：我们把项目create-react-app创建的app跑起来，也就是运行命令 yarn start 它会自动打开一个页面，我们把它的url地址复制下来。 第三步：打开Webstorm的运行窗口，点击Edite Connfigurations。 到下面这个页面。 image 点选左上角的+号，选择JavaScript Debug，出现下面的界面。我们把复制的URL链接复制到
webstorm react 启动时的调试（跟浏览器调试没关系）
viaco2love的博客
11-04 278
javascript file 大多数是main.js,但这个例子不是 网上教程统统都是npm 的配置。特意写个文章来说说启动时的debug
使用最新WebStorm开发及调试React Native项目
码农甲乙丙
09-13 6725
React Native允许您使用JavaScript和React为iOS和Android开发原生移动应用程序。它是由Facebook创建的，用于Instagram，Airbnb和现在的JetBrains自己的 YouTrack移动应用程序（顺便说一下，它是开源的）等知名应用程序。 使用WebStorm，您现在可以使用React Native开发移动应用程序，从而获得We...
WebStorm-2021.3.2.exe
05-03
4. 调试改进：更新可能包括对Chrome DevTools协议的改进，使得远程调试和性能分析更为精准。 5. 插件更新：WebStorm经常与社区插件保持同步，可能增加了新的或升级了现有的插件，以扩展其功能范围。 安装WebStorm-...
flash-type-react
05-05
10. **开发工具与调试**：在开发过程中，开发者可以利用诸如VSCode、WebStorm等IDE进行代码编写，利用Chrome DevTools进行前端调试，确保文字动画效果按预期工作。 总之，"Flash-Type-React"是一个专注于React应用...
ReactNative环境的配置和webstorm的使用
03-21
WebStorm是一款强大的JavaScript IDE，特别适合React Native开发，因为它提供了丰富的代码补全、调试和版本控制功能。 ### React Native环境配置 #### Windows版本 1. **安装Node.js**: React Native需要Node.js...
webstorm2021.3
最新发布
06-14
9. **调试器**：WebStorm的内置调试器是其一大特色，2021.3可能增强了对Chrome DevTools的兼容性，使得调试JavaScript应用更加精准和高效。 10. **Docker集成**：对于使用Docker进行开发和部署的用户，WebStorm可能...
使用WebStorm创建/运行/调试React Native项目
aaa333qwe的博客
03-20 1223
说在前面 使用的WebStorm版本是2017.1.1. 123 一. 创建React Native项目 1.File->New->Project  2.在New Project窗口中选择React Native, 并根据情况, 修改项目路径和项目名称(我这里将untitled改为我的新项目ReactNativeDemo), 修改完成后, 点击create 随后项目就会被...
【React之文件的运行】用webstorm运行npm，实现网页的刷新
雨下听风声
06-23 295
打开项目后找到package.json show npm Scripts
如何访问webstorm写的html5,在webstorm上如何运行react项目？
weixin_32081079的博客
06-26 838
在webstorm上如何运行react项目？下面本篇文章就来给大家介绍一下在webstorm上创建和运行React项目的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。前提：已经安装好node和webstorm在webstorm上创建和运行React项目的方法：1、运行如下命令安装create-react-app命令npm install -g create-react-ap...
利用WebStorm开发react——本文来自AI创作助手
BILL-博客-LLIB
09-16 1267
15.在WebStorm中右键单击“index.html”文件，并选择“Open in Browser”。”的网页，这表示您的React应用程序已成功运行。8.在项目中创建一个名为“src”的文件夹，并在其中创建一个名为“index.js”的文件。这将是您的React应用程序的主要入口点。3.打开WebStorm，并在欢迎界面中选择“Create New Project”。5.指定项目名称和存储位置，并单击“Create”。4.在弹出窗口中，选择“React”作为项目类型。2.下载和安装WebStorm。
如何利用WebStrom快速开始一个react+d3的前端可视化项目？
xili1342的博客
07-24 547
通过几个简单的例子，快速感受React+D3.js
webstorm 配置浏览器
热门推荐
chenxiaopei_LOVE的博客
06-22 1万+
1、ctrl+alt+s或file->settings->Tools-> Web Browsers 打开浏览器编辑面板 2、点击path下的按钮，选择你的浏览器所在的位置，然后点击确定就可以了。比如我的qq浏览器位置：E:\Program Files (x86)\Tencent\QQBrowser\QQBrowser.exe 3、最后，回到需要运行的文件页面，点击当前页
chrome 调试 react 好用的插件
huofuman960209的博客
03-24 4527
我开始安装react-devtools的时候 百度了一波，都是写的不清不楚，官网又都是英文的 也不是完全理解，经过一番折腾出来以后，写个文档记录一下，也可避免新手首次安装走弯路 我安装react-devtools的前提是本地安装了git 以及node 我相信准备学react的同学，应该都有了解使用 1.首先打开官网：https://github.com/facebook/react-dev...
antd-mobild+react-router-dom实现 tabs
07-13
你可以使用antd-mobile和react-router-dom来实现tabs功能。首先，你需要安装antd-mobile和react-router-dom依赖包。 ```shell npm install antd-mobile react-router-dom ``` 接下来，你可以创建一个Tabs组件，并在其中使用antd-mobile的TabBar组件来实现tabs布局。然后，使用react-router-dom的Route组件来定义每个tab对应的页面。 ```jsx import React from 'react'; import { TabBar } from 'antd-mobile'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; const Tabs = () => { const tabItems = [ { title: 'Tab 1', path: '/tab1', component: Tab1 }, { title: 'Tab 2', path: '/tab2', component: Tab2 }, { title: 'Tab 3', path: '/tab3', component: Tab3 }, ]; const renderTabs = () => { return tabItems.map((item) => ( <TabBar.Item key={item.path} title={item.title} icon={<div />} selectedIcon={<div />} selected={window.location.pathname === item.path} onPress={() => { window.location.href = item.path; }} /> )); }; return ( <Router> <div style={{ position: 'fixed', width: '100%', bottom: 0 }}> <TabBar>{renderTabs()}</TabBar> </div> {/* Define routes */} {tabItems.map((item) => ( <Route key={item.path} path={item.path} component={item.component} /> ))} </Router> ); }; const Tab1 = () => <div>Tab 1 content</div>; const Tab2 = () => <div>Tab 2 content</div>; const Tab3 = () => <div>Tab 3 content</div>; export default Tabs; ``` 在上面的代码中，我们定义了三个tab，分别对应不同的路径和组件。通过点击tab，我们可以切换显示不同的内容。你可以根据自己的需求修改tab的数量、标题、路径和对应的组件。 希望这可以帮助你实现antd-mobile和react-router-dom的tabs功能！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值