IT评测·应用市场-qidao123.com
标题:
在 WebStorm 中打开已有的项目或者创建新的项目，设置调试
[打印本页]
作者:
拉不拉稀肚拉稀
时间:
2025-1-10 02:09
标题:
在 WebStorm 中打开已有的项目或者创建新的项目，设置调试
一、在 WebStorm 中打开已有项目
1. 启动 WebStorm
起首，确保您已安装并启动了最新版本的 WebStorm。假如尚未安装，可以从 JetBrains 官方网站 下载并安装。
2. 打开已有项目
假如已经打开了一个项目，可以通过菜单栏来打开另一个项目。
点击
File
>
Open...
。
在文件浏览器中选择目标项目文件夹，点击
OK
。
WebStorm 会扣问您是否要在当前窗口打开项目或者新窗口打开，选择适合的选项。
3. 设置项目依赖
打开项目后，确保项目标依赖项已准确安装。通常，您必要在项目根目次下打开终端，并运行以下命令：
npm install
复制代码
或者
yarn install
复制代码
这将根据 package.json 文件安装全部必要的依赖。
4. 查看项目结构
在 WebStorm 左侧的
Project
工具窗口中，您可以查看项目标文件和文件夹结构。确保全部必需的文件和设置文件（如 package.json、webpack.config.js 等）都存在。
二、在 WebStorm 中创建新项目
1. 启动 WebStorm
启动 WebStorm 后，在欢迎界面选择
Create New Project
。
2. 选择项目范例
在
New Project
窗口中，您可以选择差别的项目模板，常见的有：
Empty Project（空项目）
：适用于自定义设置。
React
、
Angular
、
Vue.js
等框架模板：预设了相干设置，便于快速开始。
选择合适的模板后，点击
Create
。
3. 设置项目名称和位置
在弹出的窗口中，设置项目标名称和存储位置，然后点击
Create
。
4. 初始化项目
根据选择的模板，WebStorm 大概会自动运行初始化脚本（如 npm init 或 create-react-app）。假如没有自动运行，您可以手动在项目根目次下打开终端，运行相干命令初始化项目。
例如，创建一个新的 React 项目：
npx create-react-app my-app
复制代码
然后在 WebStorm 中打开该项目。
三、设置调试环境
设置调试环境可以帮助您在开发过程中及时调试代码，以下是具体步骤：
1. 启动开发服务器
对于大多数前端项目，您必要启动开发服务器。例如，对于 React 项目，运行：
npm start
复制代码
或者
yarn start
复制代码
确保开发服务器正在运行，并且项目可以在浏览器中访问（通常是 http://localhost:3000）。
2. 安装必要的浏览器插件（可选）
JetBrains IDE Support
插件可以增强 WebStorm 与浏览器的集成，推荐安装。
打开 Chrome 浏览器，访问 [Chrome 网上应用店](https://chrome.google.com/webstore/detail/jetbrains-ide-support）。
搜索并安装
JetBrains IDE Support
插件。
3. 设置 WebStorm 调试器
a. 创建调试设置
在 WebStorm 中，点击菜单栏的
Run
>
Edit Configurations...
。
在弹出的
Run/Debug Configurations
窗口中，点击左上角的
+
按钮，选择
JavaScript Debug
。
设置如下：
Name
：为调试设置定名，例如 Debug in Chrome。
URL
：输入开发服务器的 URL，例如 http://localhost:3000。
Browser
：选择
Google Chrome
。
点击
OK
保存设置。
b. 启动调试会话
选择刚创建的调试设置（如 Debug in Chrome）。
点击工具栏中的
绿色虫子图标
启动调试器。
这将自动打开 Chrome 浏览器，并加载指定的 URL，同时 WebStorm 会连接到调试器。
4. 设置断点
在 WebStorm 中，打开必要调试的 JavaScript 或 TypeScript 文件。
在代码行号区域点击，设置断点（会显示为赤色圆点）。
您还可以右键点击断点，设置条件断点或日志断点。
5. 调试代码
在浏览器中实行会触发断点的操作（如点击按钮、导航到特定页面等）。
WebStorm 会在断点处停息实行，您可以查看变量的值、调用堆栈、监视表达式等。
使用调试工具栏的按钮举行单步实行、跳入函数、跳出函数等操作。
6. 使用调试控制台
在调试过程中，您可以使用 WebStorm 提供的
Console
面板来实行 JavaScript 代码、查看变量值或修改变量。
打开
Debug
工具窗口（默认在底部）。
切换到
Console
选项卡。
输入表达式并按 Enter 实行。
7. 调试 React 或 Vue 项目
React 项目
使用
React Developer Tools
插件增强调试体验。
在 WebStorm 中设置断点，您可以在 JSX 代码或 JavaScript 代码中添加断点。
Vue 项目
确保已安装
Vetur
插件（WebStorm 通常已内置）。
在 .vue 文件中的 <script> 部门设置断点，与调试普通 JavaScript 文件类似。
8. 高级调试技巧
条件断点
右键点击已有的断点，选择
Edit Breakpoint
。
设置条件表达式，只有当条件为真时才会触发断点。
日志断点
在断点设置中，可以选择忽略停息，而是在控制台输出日志信息。
监视变量
在
Variables
面板中查看当前作用域的变量值。
添加
Watch
表达式，及时监控特定变量或表达式的值变化。
9. 设置 Source Maps（可选）
为了更好地调试编译后的代码，建议生成 Source Maps。在构建设置中启用 Source Maps，例如在 webpack 设置中：
module.exports = {
// ...
devtool: 'source-map',
// ...
};
复制代码
确保 Source Maps 文件准确生成，并能被浏览器访问。
四、常见问题及办理方法
1. 调试器无法连接到浏览器
办理方法：
确保开发服务器正在运行，并且可以通过浏览器访问。
检查防火墙设置，确保相干端口（如 3000）未被制止。
确保 WebStorm 和浏览器版本兼容，必要时更新到最新版本。
2. 断点不起作用
办理方法：
确保代码已重新编译，更新到最新版本。
检查是否启用了 Source Maps，并且路径设置准确。
尝试重新启动开发服务器和 WebStorm。
3. 浏览器不自动打开
办理方法：
在调试设置中确认选择了准确的浏览器。
确保浏览器路径设置准确（特别是在自定义安装路径的情况下）。
手动打开浏览器并访问指定的 URL。
五、参考资料
WebStorm 官方文档 - 调试 JavaScript 代码
JetBrains WebStorm 教程与视频
React 官方文档
Vue.js 官方文档
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)
Powered by Discuz! X3.4