demos 一个开源的web开发调试工具（Nodejs版）

demos 一个开源的web开发调试工具（Nodejs版）

分享一个好用的web编辑器，写demo超级方便，相对于jsfiddle这种工具，demos更显纯洁，风格独特〜 开源地址：https://github.com/berwin/demos 项目地址：http://demos.berwin.me/ http://demos.so/

最后强调一下，我不打算说服任何人使用 demos，也不打算向任何人证明 demos 和其他工具比 谁好谁坏。做 demos 的原因是自己要用。如果碰巧有人觉得这东西还蛮有趣的，我非常欢迎你们使用我的 demos， 使用当中如果发现不好的地方，也可以随时向我提出建议，让我们一起把它变得更好。


25 回复

确实方便，不过po主博客貌似有点问题(⊙o⊙)哦


demos —— 一个开源的Web开发调试工具（Node.js版）

简介

分享一个非常好用的Web开发调试工具——demos。相较于一些在线IDE如JSFiddle，demos具有独特的风格和简洁的功能，非常适合快速编写和测试前端代码。

开源地址：GitHub

项目地址：demos.berwin.me | demos.so

使用方法

  1. 安装

    首先，确保你已经安装了Node.js环境。然后，通过以下命令克隆仓库并安装依赖：

    git clone https://github.com/berwin/demos.git
cd demos
npm install

  2. 启动服务

    安装完成后，可以通过以下命令启动服务：

    npm start

    默认情况下，服务会在 http://localhost:3000 上运行。

  3. 编写代码

    打开浏览器访问 http://localhost:3000，你会看到一个简单的界面，可以在这里编写HTML、CSS和JavaScript代码。例如，你可以编写如下简单的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            width: 80%;
            margin: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hello, demos!</h1>
        <button onclick="alert('Hello World!')">Click Me</button>
    </div>
    <script>
        // JavaScript code here
        console.log("This is a simple demo.");
    </script>
</body>
</html>

  4. 实时预览

    保存文件后，你可以在同一页面上实时预览你的代码效果。修改任何部分，页面都会自动刷新，让你能够立即看到变化。

功能特点

  • 实时预览：代码更改会立即反映到浏览器中。
  • 简单易用：无需复杂的配置，只需几行代码即可开始编写。
  • 本地开发：所有代码都在本地运行，数据安全有保障。

贡献与反馈

最后，我不会强迫任何人使用 demos，也不会去证明它与其他工具相比的好坏。我创建这个项目的初衷是为了满足自己的需求。如果你觉得这个工具有趣，并且愿意使用它，我很高兴听到你的反馈。如果有任何问题或改进建议，也欢迎随时向我提出。让我们共同让它变得更好！

希望这个工具能帮助你提高Web开发效率！

[@Ricardo-Li](/user/Ricardo-Li) 有什么问题呀？？告诉我我会马上修复〜

[@berwin](/user/berwin) QQ20140919-3@2x.png

[@Ricardo-Li](/user/Ricardo-Li) 这博客还没开发完成。。那个写demo的工具已经完成1.0版本

[@coolfishstudio](/user/coolfishstudio) 呵呵，谢谢支持〜

[@berwin](/user/berwin) 帮你转到官微了，要是有实时预览就好了。。。。

[@Ricardo-Li](/user/Ricardo-Li) 呵呵，谢谢，这项目我会长久维护，如果以后要求的人多了。我会加上实时预览的。。 一开始这项目设计的时候我没加实时预览是因为我觉得这样编辑器更显得纯洁一点，更干净一些。

如果可以分享一下实现过程，大家讨论讨论就更好了。

[@alsotang](/user/alsotang) 好的，有时间我会分享出来的

http://demos.so/ 没备案, 给阿里咔嚓了.

[@johnd](/user/johnd) 恩。。过几天就好了。先访问 http://demos.berwin.me

其中一个网址 没有备案么 ？

[@coolfishstudio](/user/coolfishstudio) 过两天备案就下来了，先访问http://demos.berwin.me

[@berwin](/user/berwin) 哦 好的

不要恶意顶贴

运行不了，./lib/mongo.js
var config = require( ‘…/…/config’ ); 找不到。

[@514366607](/user/514366607) 你在根目录下执行命令 cp config.default.js config.js 然后在运行项目～

[@Ricardo-Li](/user/Ricardo-Li) 已经新增实时预览功能

试了一下，效果不错，赞～

两个地址都访问不了了 。。 求恢复

1、保存时预览会不会更好一些，尤其是在写js的时间 2、还有能加入输入时联想功能就更好了

[@zlparanoia](/user/zlparanoia) 额。。。备案中，，先访问这个ip吧~ http://123.57.9.211:9000

[@enmoon](/user/enmoon) 嗯。其实一开始是保存的时候更新预览的，，，然后后来好多人喜欢实时预览，，就改成实时预览了。我在研究研究有没有什么更好的办法能同时满足两种需求~~

关于 “demos 一个开源的web开发调试工具（Nodejs版）” 这个帖子，我们主要介绍的是一个名为 demos 的开源 web 开发调试工具。这个工具由 berwin 开发，它提供了一个简洁、独特的界面用于编写和调试 Web 应用程序。

功能概述

  • 简洁界面：demos 提供了干净、直观的用户界面，便于快速编写和调试代码。
  • 即时反馈：你可以在左侧编辑代码，并立即看到右侧页面上的效果。
  • 支持多种语言：除了 JavaScript，demos 还支持 HTML 和 CSS，非常适合前端开发。
  • 开源社区：它是完全开源的，你可以查看其源代码并贡献自己的改进。

使用示例

安装

首先，确保你的系统中已安装 Node.js 和 npm。然后，通过以下命令安装 demos：

git clone https://github.com/berwin/demos.git
cd demos
npm install

启动

启动 demos 服务器：

npm start

这将在本地启动一个 Web 服务器，默认情况下，它将监听 http://localhost:3000。你可以在浏览器中访问这个 URL 来开始使用 demos。

编辑代码

一旦进入 demos 界面，你可以直接在左侧编辑区域编写 HTML、CSS 和 JavaScript 代码。右侧会实时显示渲染结果。例如：

<!-- 左侧 HTML 编辑区 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, Demos!</h1>
    <script src="script.js"></script>
</body>
</html>

/* 右侧 CSS 编辑区 */
styles.css
h1 {
    color: blue;
}

// 右侧 JavaScript 编辑区
script.js
document.querySelector('h1').innerText = 'Hello, World!';

总结

demos 是一个非常实用的工具，适合快速编写和调试简单的 Web 页面。如果你正在寻找一个简洁且功能齐全的在线 IDE，那么 demos 绝对值得一试。它不仅提供了即时反馈的功能，而且还可以帮助你更好地理解和学习 Web 开发技术。

回到顶部