可以看得見(jiàn)的代碼運(yùn)行：編程教學(xué)網(wǎng)站

視化的查看代碼運(yùn)行原理的網(wǎng)站

以下是幾個(gè)常見(jiàn)的可視化查看代碼運(yùn)行原理的網(wǎng)站：

Python Tutor（http://www.pythontutor.com）：Python Tutor 是一個(gè)在線的代碼可視化工具，可以幫助用戶逐行運(yùn)行 Python 代碼并展示代碼在內(nèi)存中的變化過(guò)程。
JS Bin（https://jsbin.com）：JS Bin 是一個(gè)用于共享和調(diào)試前端代碼的在線平臺(tái)，通過(guò)實(shí)時(shí)預(yù)覽和調(diào)試功能，可以查看 JavaScript 和 HTML 代碼的執(zhí)行結(jié)果和變化。
Visual Studio Code Online（https://github1s.com）：Visual Studio Code Online 提供了一個(gè)在線版的 Visual Studio Code 編輯器，可以直接在瀏覽器中編寫和調(diào)試代碼，實(shí)時(shí)查看代碼執(zhí)行的過(guò)程。
Observable（https://observablehq.com）：Observable 是一個(gè)基于 JavaScript 的互動(dòng)筆記本平臺(tái)，可以創(chuàng)建可視化的數(shù)據(jù)分析和代碼展示。用戶可以通過(guò)代碼和圖表等形式實(shí)時(shí)查看代碼的運(yùn)行和結(jié)果。
OnlineGDB（https://www.onlinegdb.com）：OnlineGDB 是一個(gè)在線調(diào)試器和編程環(huán)境，支持多種編程語(yǔ)言，包括 C、C++、Java、Python 等。它提供了可視化的調(diào)試界面和變量監(jiān)視功能，可以幫助用戶更直觀地了解代碼的執(zhí)行過(guò)程。
CodeSandbox（https://codesandbox.io）：CodeSandbox 是一個(gè)在線的前端開(kāi)發(fā)環(huán)境，可以在瀏覽器中實(shí)時(shí)編輯和查看 HTML、CSS 和 JavaScript 代碼的執(zhí)行結(jié)果。它提供了一個(gè)可視化的編輯器和實(shí)時(shí)預(yù)覽功能，方便用戶查看代碼的運(yùn)行原理。
repl.it（https://repl.it）：repl.it 是一個(gè)在線的編程環(huán)境，支持多種編程語(yǔ)言，包括 Python、JavaScript、C++、Java 等。它提供了一個(gè)可視化的編輯器和交互式的運(yùn)行環(huán)境，用戶可以即時(shí)運(yùn)行代碼并查看執(zhí)行結(jié)果。
GoJS（https://gojs.net/latest/samples/index.html）：GoJS 是一個(gè) JavaScript 庫(kù)，用于創(chuàng)建交互式的圖形和圖表。它可以幫助用戶可視化代碼的結(jié)構(gòu)、流程和數(shù)據(jù)流，使代碼的執(zhí)行過(guò)程更加直觀可見(jiàn)。

這些網(wǎng)站和工具提供了豐富的功能，可以幫助用戶更好地理解和分析代碼的運(yùn)行原理。無(wú)論是調(diào)試代碼、可視化算法、還是展示代碼結(jié)構(gòu)，都可以通過(guò)這些工具獲得更直觀和交互式的體驗(yàn)。

要代碼:

Dim doc, objhtml As Object

Dim i As Integer

Dim strhtml As String

If Not Me.WebBrowser1.Busy Then

Set doc = WebBrowser1.Document

i = 0

Set objhtml = doc.body.createtextrange()

If Not IsNull(objhtml) Then

Text1 = objhtml.htmltext

End If

示例下載：（在“了解更多”里下載）

圖示:

于一些前端的樣式和js效果，我們非常希望可以將這些代碼片段保存起來(lái)，然后分享給那些想要使用這些樣式特效的人，慶幸的是，網(wǎng)絡(luò)上已經(jīng)有很多這樣的網(wǎng)站了，今天我們就來(lái)盤點(diǎn)一下這些非常好用的網(wǎng)站。

jsfiddle

誕生比較早的一個(gè)代碼片段網(wǎng)站，它集成了主流的js框架，你可以輕松地在需要使用的時(shí)候引入它們，同時(shí)它也支持引入外部css鏈接，通過(guò)將html，css,js代碼片段分離，讓用戶有了非常清楚的代碼結(jié)構(gòu)，非常方便代碼地調(diào)試。

它支持登錄功能，登錄以后，你可以將自己的代碼片段進(jìn)行保存和分享。

JSRUN

一個(gè)支持多種編程語(yǔ)言的代碼運(yùn)行網(wǎng)站，你可以保存自己的代碼，你可以運(yùn)行各個(gè)常用的編程語(yǔ)言代碼，缺點(diǎn)是有時(shí)候需要輸入驗(yàn)證碼，有些功能需要升級(jí)vip才能使用。

codepen

和jsfiddle很類似，也是專業(yè)的網(wǎng)頁(yè)編輯器，可以引入js,css,對(duì)于html,js,css分為三個(gè)窗口進(jìn)行管理，登錄之后可以保存代碼片段和分享代碼片段。即使不登錄，也可以使用它進(jìn)行臨時(shí)的代碼編輯和測(cè)試。

jsbin

也是一款在線代碼編輯網(wǎng)站，也是可以編輯html和css，js代碼片段，可以引入第三方庫(kù)，可以引入第三方css，可以查看控制臺(tái)的輸出。

它可以保存截圖，可以生成模板，同樣也支持代碼打包下載。

cssdeck

它提供了很多優(yōu)秀的代碼案例，如果你沒(méi)有思路或者僅僅只是想欣賞下他人的優(yōu)秀代碼，你可以來(lái)這里找到你想要的，類似于jsfiddle,它也是支持html，js，css代碼編輯的，它的展示頁(yè)面看起來(lái)很大，非常方便查看。

它的html支持markdown和slime進(jìn)行處理，它的js支持coffeescript,它的css支持sass,scss,less等。

dabblet

它主要支持的是css代碼塊的測(cè)試，它目前不支持js，它的代碼編輯塊字體可以非常方便地進(jìn)行調(diào)整。

總結(jié)

網(wǎng)上有很多類似的代碼編輯網(wǎng)站，如果你感興趣的話，你也可以去github上查看Plunker等項(xiàng)目開(kāi)源代碼進(jìn)行分析研究，自行搭建屬于自己的代碼片段編輯網(wǎng)站。

在線咨詢

上一篇：如何用HTML5建企業(yè)網(wǎng)站？（附教程）
下一篇：HTML基礎(chǔ)操作：圖片顯示

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商