運(yùn)行JavaScript代碼片段的工具有哪些

這篇文章主要介紹“運(yùn)行JavaScript代碼片段的工具有哪些”，在日常操作中，相信很多人在運(yùn)行JavaScript代碼片段的工具有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”運(yùn)行JavaScript代碼片段的工具有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1、使用 iTerm2

在終端工具中安裝 node 環(huán)境，使用 node 運(yùn)行環(huán)境來執(zhí)行 JS 代碼是我們學(xué)習(xí) node 時(shí)候必知必會的一件事。

2、使用 Sublime Text 3

在 Sublime Text 3 中，我們可以使用 build system 來創(chuàng)建構(gòu)建命令，使用構(gòu)建命令來快速執(zhí)行 JS 代碼。

快捷鍵：CMD + B

配置文件

首先安裝依賴 babel-cli

npm i -g babel-cli

新建 build system

{ "path": "/usr/local/bin", "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, "windows": { "cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"] }, "osx": { "cmd": ["killall node >/dev/null 2>&1; node $file"] }, "linux": { "cmd": ["killall node >/dev/null 2>&1; node $file"] } }

效果圖

3、使用 VSCode

在 VSCode 中，我們可以建立一個(gè) task 來運(yùn)行 JS，實(shí)際上是借助內(nèi)置終端來執(zhí)行 node 命令運(yùn)行JS。

快捷鍵：CMD + Shift + B

配置文件

/.vscode/tasks.json

{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "Run ES6", "type": "shell", "command": "node ${file}", "group": { "kind": "build", "isDefault": true } } ] }

效果圖

4、使用瀏覽器控制臺

我們經(jīng)常使用瀏覽器的 Console 功能來調(diào)試 JS 代碼，比如 Chrome 的 DevTools，火狐的 Web 控制臺，這些我們已經(jīng)不陌生了。

5、使用 Firefox 代碼草稿紙

在 Firefox 瀏覽器中，有一個(gè)特別好用的功能叫 代碼草稿紙，你可以在這里面輸入一些 JS 代碼執(zhí)行查看結(jié)果。

快捷鍵：在火狐瀏覽器下 Shift + F4

6、使用 Chrome Sources 面板

Chrome 提供了強(qiáng)大的 DevTools，其中 Sources 面板允許你建立一些 Snippets方便執(zhí)行 JS 代碼。

快捷鍵：CMD + Enter 執(zhí)行代碼

7、使用 JS Bin

JS Bin 是一個(gè)開源的用于 debug web 應(yīng)用的工具，工具面板具有 Console，可以用于執(zhí)行 JS 代碼。

8、使用 JS Fiddle

JS Fiddle 是一個(gè)前端同學(xué)經(jīng)常寫 demo 例子的好地方，這里可以以 CDN 的方式使用一些第三方類庫，很方便搭建頁面demo。

因?yàn)?JS Fiddle 工具本身并沒有提供 console 面板，所以可以配合瀏覽器開發(fā)者工具來打印輸出 JS 代碼結(jié)果。

9、使用 CodePen

CodePen 是一個(gè)非常棒的在線代碼編輯器，幾乎可以編寫所有的前端Web應(yīng)用。在這里使用它來執(zhí)行一段 JS 代碼真的是大才小用了。

10、使用 MDN 的 “JavaScript Demo”

經(jīng)常查閱 MDN 的小伙伴一定能記得，在一些 JavaScript 文檔中會有一個(gè) JavaScript Demo小工具，比如說 JavaScript 標(biāo)準(zhǔn)內(nèi)置對象 Function，在這里可以執(zhí)行一些 JS 代碼。

11、使用 PLAYCODE

PLAYCODE 提供了在線快速運(yùn)行 Web 程序的環(huán)境。

12、使用 Flems

Flems 提供了一個(gè) Web 開發(fā)環(huán)境，可以分享一些前端小demo。

13、使用 JSitor

JSitor 是一個(gè)不錯(cuò)的在線執(zhí)行 JS 代碼工具，我比較喜歡它的代碼截圖功能，能生存很漂亮的代碼截圖圖片，不過目前功能還不是特別完善，比如代碼的高亮?xí)簳r(shí)是個(gè)問題。

14、使用 Code Sandbox

Code Sandbox 是一個(gè)在線的可以創(chuàng)建Web應(yīng)用，特點(diǎn)是可以使用一些類庫模版，比如 React/Vue/Angular 是創(chuàng)作原型的好地方，我經(jīng)常使用它來編寫一些 Vue 小 Demo。

15、使用 Web Maker

Web Maker 是一個(gè)可以快速在瀏覽器創(chuàng)建離線Web應(yīng)用，Web Maker 還提供了 Chrome 插件，可以離線使用。

16、使用 LeetCode Playground

LeetCode 提供了優(yōu)秀的 Playground 工具，支持各種語言版本切換，其中也支持 JavaScript，還能沒事兒刷刷題不是。

17、使用 Repl.it

Repl.it 是一個(gè)一站式可在線構(gòu)建、協(xié)作的IDE，同時(shí)也提供了 Node 運(yùn)行環(huán)境，還可以連接 github 使用 gist 同步代碼片段。

18、使用 RunKit + npm

RunKit + npm 在 npm 上我們能發(fā)現(xiàn)很多優(yōu)秀的庫，npm 提供了一個(gè)功能，可以使用 RunKit取運(yùn)行測試你的 package，當(dāng)然也能測試一段代碼。

19、使用 StackBlitz

StackBlitz 有在線 VSCode 之稱，編輯器使用的是微軟開源的 Monaco Editor，和 Code Sandbox 類似，提供了一些類庫模版，但是目前還沒有 Vue 的。

20、使用 Plunker Next

Plunker Next 新版的 Plunker 提供了在線創(chuàng)建小 demo 的能力，同時(shí)也便于分享。

到此，關(guān)于“運(yùn)行JavaScript代碼片段的工具有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！