Webstorm通过脚本快速进行Umi dev前端调试

最新推荐文章于 2025-09-11 05:19:32 发布

原创

最新推荐文章于 2025-09-11 05:19:32 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webstorm

本文展现了在Webstorm中使用Terminal终端开启Umi dev 和脚本快速启动Umi dev两种方式进行前端调试。

一、本文环境配置

本文的操作基于pnpm下载的Umi dev前端开发环境，使用yarn、npm等下载的Umi dev 需要自行调整脚本代码。

二、Terminal终端调试

在终端输入pnpm dev即可进行前端调试
输入pnpm即可打开Umi dev

三、创建脚本快速启动

与Pycharm运行代码类似，Webstorm也可以采用编写脚本后通过右上角的倒三角启动按钮快速开启

Edit Configurations
Add New Configurations
选择Shell Script
配置脚本
在name处修改脚本名字

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LiKEleen

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用 WebStorm 进行现代前端应用的调试

ByteCodN的博客

09-26

641

首先，您需要安装 WebStorm IDE。您可以从 JetBrains 官方网站上下载并安装适用于您的操作系统的版本。安装完成后，打开 WebStorm 并进行初始配置。在 WebStorm 中，您需要创建一个新的项目或打开现有的项目。选择合适的选项来设置您的项目，包括项目类型、名称和存储位置。一旦项目创建或打开完成，您就可以开始进行调试了。

“依”本日记（一）安装配置NodeJs、WebStorm、Umi、Umi-UI

weixin_62081337的博客

03-16

1663

一、进入NodeJs官网地址下载安装包二、安装NodeJs程序配置环境Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客。

参与评论您还未登录，请先登录后发表或查看评论

UMI.CMS调试工具「UMI.CMS Debugging Tool」-crx插件

03-10

工具，以促进UMI.CMS网站的开发和调试有利于UMI.CMS网站开发和调试的扩展。 - 自动检测并显示经常使用的调试资源的链接，例如.xml，ShowStreamsCalls，uobject：//，upage：//，udata：//等 - 在页面右侧的模式窗口中输出XML，避免在UMI.CMS中打开大量带有XML数据的选项卡。 - 从UMI解析XML，将XML节点的属性（如页面，对象标识符，@link）直接转换为链接以进行升级：//，uobject：//等元素链接以蓝色和黑体字体突出显示。在showStreamsCalls中，每个呼叫也被转换成一个链接。 - 能够处理相同的XML输出，打开在新标签中。 - 不是后台进程，因此，直到你点击它的图标才会消耗内存支持语言:русский

webstrom运行shell脚本

bitree1的博客

08-21

1365

一、背景：在webstrom中如何运行shell脚本如下图，选择.sh文件右键即可运行呢，有时候你选中右键并没有run的命令，鼓捣了半天终于找到原因了，步骤记录如下二、步骤： 1.安装git软件https://www.git-scm.com/download/ 新安装请记住安装路径，已经安装过的请找 2.webstrom配置 2.1如下图所示，编辑器右上角打开 Edit Configurations 只需要在这儿页面中设置 Interpreter path即可，剩下的可以都留空。 2.2新.

umi多环境配置：开发、测试、生产环境无缝切换

最新发布

gitblog_01055的博客

09-11

358

在现代前端开发中，项目通常需要在多个环境中运行：开发环境（development）、测试环境（testing）、预发布环境（staging）和生产环境（production）。每个环境都有不同的配置需求： - **开发环境**：需要热重载、详细的错误信息、调试工具 - **测试环境**：需要模拟数据、测试专用的API地址 - **生产环境**：需要代码压缩、性能优化、安全的配置 umi框架提供...

WebStorm--调试

IT利刃出鞘的博客

11-20

2595

环境搭建其他网址 WebStorm强大的调试JavaScript功能_弃天笑的程序世界-CSDN博客简介 Webstorm联合JetBrains IDE Support调试跟其他浏览器的调试相比的好处：方便，不用去切换。他可以直接把一些参数类型、数值结果直接显示在代码上面。安装插件 1.Chrome安装JetBrains IDE Support https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjag..

webstorm调试

s8806479的博客

09-27

844

简易流程，自用下载插件 3 4 运行页面 5 页面内右键insert in webstorm

Web开发基于WebStorm的前端项目开发全栈指南：从环境配置到高级调试与团队协作功能应用

09-03

内容概要：本文详细介绍了WebStorm这款由JetBrains开发的专用于Web前端开发的集成开发环境（IDE），涵盖其核心功能与高级特性。内容包括WebStorm的基本介绍、安装与初始设置、基础功能如项目创建、智能代码补全、...

webstorm制作网页模板（仅前端页面显示）

05-24

总结，WebStorm作为前端开发的强大工具，提供了完整的代码编辑、调试和版本控制功能。通过它，我们可以高效地创建一个模拟京东网页的前端模板，包括HTML结构、CSS样式和JavaScript交互。这个过程不仅锻炼了我们的...

前端代码调试：Webstorm调试js

热门推荐

EricaKang 的专栏

11-30

2万+

【前言】目前前端开发JavaScript的debug一般都是用chrome和firefox的开发者工具进行调试，浏览器工具使用不方便，webstorm支持了在代码上打断点，在编辑器里debug js代码。类似Java后台 Eclipse debug效果。接下来就给大家介绍如何安装webstorm和对webstorm进行配置调试代码。【Webstorm下载与安装】 1.官网

WebStorm用Debug模式调试Vue等前端项目

wsx9172的博客

09-05

1908

非常的麻烦，而且浏览器中对变量的追踪功能也有限，同时我也一直好奇WebStorm中Debug启动方式的作用，今天研究了一下，果然WebStorm提供了更简单的方法，记录一下。涉及到稍复杂的逻辑，就需要在代码中侵入增加debugger，或者在浏览器中找到js文件，再手动添加断点。调试前端代码，一直很苦恼调试前端代码的麻烦。在控制台打印变量值，来验证预期结果。命令的作用是关闭浏览器的跨域限制。

Webstrom--chrome debug调试配置教程

liumengwei1的博客

10-18

2534

1.webstrom配置 2.chrome安装插件jetbrains ide support 3.chrome 插件jetbrains idesupport配置修改端口号为webstrom配置的端口号 4.webstrom debug启动项目，搞定博主扣扣：...

在 WebStorm 中打开已有的项目或者创建新的项目，配置调试

allnlei的专栏

11-15

2133

打开项目后，确保项目的依赖项已正确安装。工具窗口中，您可以查看项目的文件和文件夹结构。如果没有自动运行，您可以手动在项目根目录下打开终端，运行相关命令初始化项目。首先，确保您已安装并启动了最新版本的 WebStorm。在弹出的窗口中，设置项目的名称和存储位置，然后点击 Create。确保开发服务器正在运行，并且项目可以在浏览器中访问（通常是。插件可以增强 WebStorm 与浏览器的集成，推荐安装。在调试过程中，您可以使用 WebStorm 提供的。在 WebStorm 中，点击菜单栏的 Run。

WebStorm 如何调试 Vue 项目

独泪了无痕

11-12

3122

关于使用 WebStorm 如何调试 Vue 代码就介绍到这了，相信你已经掌握了使用 WebStorm 调试 Vue 代码的基本方法。WebStorm 作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试 Vue 应用。当然，除了 WebStorm 外，还有很多其他的调试工具和技术可以使用，如Chrome DevTools、Visual Studio Code等。你可以根据自己的需求和喜好选择合适的工具来提高开发效率，希望本文对你有所帮助！

Webstorm创建umi项目

gfrgfhwmdsgfr0的博客

12-30

476

在webstorm中创建umi项目

webstrom 断点调试,小白详细步骤篇

06-21

2917

网上找了很久都是七零八落的,要么就是不够通俗易懂故作此文章记录和分享。

【Umi/Ant Design Pro】调试node_modules

南乡人的博客

04-12

1008

umi 默认情况下会使用msfu，进行预编译，提高加载速度，但是这样会导致在node_modules做的修改，无法通过热更新获得实时的改动。如果使用Ant Design Pro框架，那么就需要在config.ts中把配置项 mfsu: {} 去掉。等待再次编译，即可看到node_modules中的变化 ...

webstorm 如何快速运行命令行命令

gaokaikai1996的博客

01-18

1万+

需求：用webstorm学习ReactNative 需要启动模拟器(Android Studio 中的模拟器) 步骤：1.打开Edit Configurations2.点击+号选择npm3.如下图所示4.点击下边的+号选择External tool5.如下图所示启动命令 C:\Users\Administrator\AppData\Local\Android\Sdk\tools\emulato...