科学之家

开发工具 · 入门指南

StackBlitz 使用教程

在浏览器中编辑和运行 Web 项目的开发环境,适合快速试验与共享代码示例。

软件介绍

在浏览器中编辑和运行 Web 项目的开发环境,适合快速试验与共享代码示例。

  • 在线编程
  • 前端试验
  • 示例分享

使用前了解

支持设备:桌面浏览器;WebContainers 对浏览器能力有要求。

中文支持:可以输入或编辑中文内容;完整中文界面支持尚未确认,可先通过免费功能或试用检查语言设置。

注册要求:可直接查看和编辑部分示例;保存和团队协作通常需要关联账号。

免费范围:Personal 提供公开项目等基础能力。

付费区别:付费档扩展私有项目或团队场景;Bolt 等相关产品的额度需单独核对。

功能与套餐会随地区、账号和版本变化,开通前请核对下方官方资料中的当前说明。

官方图文介绍

在浏览器里直接运行 Web 项目,链接就能分享可操作示例,适合教学、快速原型和复现问题。

根据 StackBlitz 官方资料(新窗口) 整理

StackBlitz · 官网 / 官方文档介绍配图
StackBlitz · 官网 / 官方文档介绍配图查看官方图文来源(新窗口) · 核对 2026-09-26

图片为官方发布素材或标明的官网页面实拍;中文介绍由本站根据官方资料整理。平台与版本不同,界面可能有所差异。

能用来做什么

  • 快速体验前端框架

    从现成模板开始修改代码,在浏览器中观察一个小项目如何运行。

  • 制作可复现问题的示例

    提取导致问题的最小代码片段,分享给协作者协助排查。

  • 教学和演示代码

    把代码与实时预览放在一起,方便讲解界面和逻辑的对应关系。

快速上手

在浏览器中运行一个示例项目

  1. 选择项目模板

    打开 StackBlitz,从适合的语言或框架模板创建练习项目。

  2. 查看项目文件

    阅读入口文件和项目配置,了解示例的基本结构。

  3. 修改并预览

    编辑文字、样式或逻辑,在预览区域观察页面变化。

  4. 保存并分享

    登录后保存项目,通过分享入口提供示例链接供他人查看。

使用提示

浏览器运行环境与本机环境并不完全相同,遇到限制时查阅项目及平台说明。

常见问题

  1. 安装了工具,为什么示例或项目仍然运行不了?

    开发工具不一定自带所有语言环境与依赖。按照项目说明核对运行时、SDK、依赖版本、环境变量和工作目录,再从第一条报错定位;不要一次升级所有组件。

  2. 工具免费,为什么仍出现费用或额度提示?

    区分本地工具、云端构建、托管资源、插件和调用的 API。它们可能由不同服务商计费;先查当前账号的账单与资源用量,再决定是否需要升级。

官方资料

界面名称可能随版本或语言有所不同,可通过官方资料继续了解。