视化的查看代码运行原理的网站

以下是几个常见的可视化查看代码运行原理的网站：

1. Python Tutor（http://www.pythontutor.com）：Python Tutor 是一个在线的代码可视化工具，可以帮助用户逐行运行 Python 代码并展示代码在内存中的变化过程。
2. JS Bin（https://jsbin.com）：JS Bin 是一个用于共享和调试前端代码的在线平台，通过实时预览和调试功能，可以查看 JavaScript 和 HTML 代码的执行结果和变化。
3. Visual Studio Code Online（https://github1s.com）：Visual Studio Code Online 提供了一个在线版的 Visual Studio Code 编辑器，可以直接在浏览器中编写和调试代码，实时查看代码执行的过程。
4. Observable（https://observablehq.com）：Observable 是一个基于 JavaScript 的互动笔记本平台，可以创建可视化的数据分析和代码展示。用户可以通过代码和图表等形式实时查看代码的运行和结果。
5. OnlineGDB（https://www.onlinegdb.com）：OnlineGDB 是一个在线调试器和编程环境，支持多种编程语言，包括 C、C++、Java、Python 等。它提供了可视化的调试界面和变量监视功能，可以帮助用户更直观地了解代码的执行过程。
6. CodeSandbox（https://codesandbox.io）：CodeSandbox 是一个在线的前端开发环境，可以在浏览器中实时编辑和查看 HTML、CSS 和 JavaScript 代码的执行结果。它提供了一个可视化的编辑器和实时预览功能，方便用户查看代码的运行原理。
7. repl.it（https://repl.it）：repl.it 是一个在线的编程环境，支持多种编程语言，包括 Python、JavaScript、C++、Java 等。它提供了一个可视化的编辑器和交互式的运行环境，用户可以即时运行代码并查看执行结果。
8. GoJS（https://gojs.net/latest/samples/index.html）：GoJS 是一个 JavaScript 库，用于创建交互式的图形和图表。它可以帮助用户可视化代码的结构、流程和数据流，使代码的执行过程更加直观可见。

这些网站和工具提供了丰富的功能，可以帮助用户更好地理解和分析代码的运行原理。无论是调试代码、可视化算法、还是展示代码结构，都可以通过这些工具获得更直观和交互式的体验。

于一些前端的样式和js效果，我们非常希望可以将这些代码片段保存起来，然后分享给那些想要使用这些样式特效的人，庆幸的是，网络上已经有很多这样的网站了，今天我们就来盘点一下这些非常好用的网站。

jsfiddle

诞生比较早的一个代码片段网站，它集成了主流的js框架，你可以轻松地在需要使用的时候引入它们，同时它也支持引入外部css链接，通过将html，css,js代码片段分离，让用户有了非常清楚的代码结构，非常方便代码地调试。

它支持登录功能，登录以后，你可以将自己的代码片段进行保存和分享。

JSRUN

一个支持多种编程语言的代码运行网站，你可以保存自己的代码，你可以运行各个常用的编程语言代码，缺点是有时候需要输入验证码，有些功能需要升级vip才能使用。

codepen

和jsfiddle很类似，也是专业的网页编辑器，可以引入js,css,对于html,js,css分为三个窗口进行管理，登录之后可以保存代码片段和分享代码片段。即使不登录，也可以使用它进行临时的代码编辑和测试。

jsbin

也是一款在线代码编辑网站，也是可以编辑html和css，js代码片段，可以引入第三方库，可以引入第三方css，可以查看控制台的输出。

它可以保存截图，可以生成模板，同样也支持代码打包下载。

cssdeck

它提供了很多优秀的代码案例，如果你没有思路或者仅仅只是想欣赏下他人的优秀代码，你可以来这里找到你想要的，类似于jsfiddle,它也是支持html，js，css代码编辑的，它的展示页面看起来很大，非常方便查看。

它的html支持markdown和slime进行处理，它的js支持coffeescript,它的css支持sass,scss,less等。

dabblet

它主要支持的是css代码块的测试，它目前不支持js，它的代码编辑块字体可以非常方便地进行调整。

总结

网上有很多类似的代码编辑网站，如果你感兴趣的话，你也可以去github上查看Plunker等项目开源代码进行分析研究，自行搭建属于自己的代码片段编辑网站。