推奨: Web 開発者向けの 6 つのコード デバッグ プラットフォーム_html/css_WEB-ITnose

コード デバッグ プラットフォームは、Web 開発者が開発、テスト、共有、共同作業、通信するためのネットワーク アプリケーションであり、HTML、CSS、JavaScript のクライアント側コードのリアルタイム編集とプレビューをサポートします。これらのコード デバッグ プラットフォームの最も優れた点は、そのほとんどが無料であり、プログラムの学習やデバッグを目的として自分の作業を他の人と簡単に共有できることです。

個人的には、これらの Web アプリケーションは日々の仕事にとても役立っています。 JavaScript または CSS プログラミングでボトルネックが発生したときは、コード デバッグ プラットフォームでコードを共有し、他の開発者の友人を招待して解決することができます。このモードの楽しくてインタラクティブな性質は、初心者の学習に非常に役立ちます。著者が推奨するコード デバッグ プラットフォームは次の 6 つです。

Codepen

Codepen は、世界で最も人気のあるコード デバッグ プラットフォームであるはずです。 CSS ヒントの元の著者である Chris Coyier は、Codepen の共同作成者の 1 人であり、この Web アプリケーションがなぜこれほど人気が​​あるのか​​を説明しています。さらに、Codepen の視覚効果も非常に重要で、そのエディターはコードの変更のプレビュー表示を迅速かつ鮮明に表示し、変更を見つけやすくします。 共通コード デバッグ プラットフォーム Codepen

Codepen の CSS 用プリプロセッサには SCSS、SASS、LESS、Stylus が含まれ、JS 用プリプロセッサには CoffeeScript と LiveScript が含まれ、HTML 用プリプロセッサには Haml、Markdown、Slim、Jade が含まれます。さらに、利用可能な 8 つの組み込み JS ライブラリも含まれています。 Codepen では、プライベート セクションと共同セクションが有料で利用可能です

JSFiddle

JSFiddle は、一般的なコードのための信頼できるデバッグ プラットフォームであり、この分野で最初で最もよく知られています。 JSFiddle には、すぐに使用できる JavaScript ライブラリが 30 以上あり、外部ファイルを簡単に追加できます。前処理に関しては、CSS には SCSS、JS には CoffeeScript、HTML にはシンプルな Vanilla があります。 共通コード デバッグ プラットフォーム JSFiddle

他のプログラマーと共同プログラミングを行う場合は、JSFiddle を使用することを強くお勧めします。 JSFiddle のコラボレーション機能はその種の中で最高のものであり、Codepen とは異なり、この機能は使いやすく、無料です。

JSFiddle の欠点は、プレビューが柔軟であることです。ページを手動で更新するには、再生ボタンをクリックする必要があります。他の同様のアプリケーションと比較すると、JSFiddle は最も遅いアプリケーションの 1 つです。さらに、JSFiddle のもう 1 つの欠点は、その実行ボタンが敏感ではなく、コードを実行するのに数回クリックする必要があることです (この問題は複数のブラウザーに存在します)。

JS Bin

JS Bin は、JavaScript 開発の第一人者である Remy Sharp によって作成されました。彼は、JavaScript と HTML5 の開発に重点を置いた Web 開発会社を経営しています。 JS Bin の JS プリプロセッサには、CoffeeScript、TypeScript、Traceur、JSX、および使用可能な 40 以上の JS ライブラリが含まれています。外部ファイルを追加できますが、手動で編集する必要があります。 CSS のプリプロセッサに関しては、LESS が提供されています。 共通のコード デバッグ プラットフォーム JS Bin

JS Bin が従来のコード デバッグ プラットフォームと異なるのは、ファイルをコンピューターにダウンロードできることです。これは、開発者、特にコードをオフラインでデバッグすることが多いプログラマーにとっては優れた機能です。プライベートの Bin スペースを作成することもできます。もちろん、これは有料機能です。また、JS Binはコラボレーション機能をサポートしていません。

CSSDeck

CSSDeck は数年前から存在していますが、大きな影響力はありませんが、そのシンプルさのために今でも多くの人を魅了しています。コーディング以外の複雑な機能が好きではない場合は、CSSDeck を選択するのが良いでしょう。 共通コード デバッグ プラットフォーム CSSDeck

CSSDeck のプリプロセッサには、HTML 用の HAML、Markdown、Slim および Jade、CSS 用の LESS、Stylus、SASS および SCSS、JS 用の CoffeeScript が含まれます。また、いくつかの CSS および JavaScript ライブラリも用意されており、ライブラリ リストに手動で追加するだけで使用できます。

CSSDeck の優れた機能の 1 つは、ユーザーによるフォント サイズの変更をサポートしていることです。これは非常にシンプルですが便利な機能です。一般に、CSDeck は多くの優れた機能を必要とするユーザーには適していません。多くの不要な機能を放棄し、最も重要な機能に焦点を当てています。

Dabblet

その昔、私がまだ 16 進数のカラーコードを使用していたとき、Dabblet の機能がコードの横に実際に表示されることに初めて驚きました。これが便利な機能かどうかはわかりませんが、とてもきちんとした機能であることに感銘を受けました。 共通コード デバッグ プラットフォーム Dabblet

さて、Dabblet のさらに驚くべき点は、CSS エディターとビュー、HTML エディターとビュー、CSS と HTML エディターとビュー、JavaScript と実行結果、の 5 つの異なる観点からユーザーがプレビューできることです。すべての包括的なビュー。すべてを語るつもりはありませんが、少なくとも、ほとんどのデバッグ プラットフォームにはない機能があります。

欠点についてもう一度話しましょう。まず、Dabblet には HTML と CSS のプリプロセッサがないため、混乱を招きます。次に、JavaScript ライブラリが組み込まれていないため、JavaScript ライブラリを手動で挿入することで解決できます。第三に、各セクションのサイズは固定されており、調整することはできません。これは、以前の従来のデバッグ プラットフォームと同じです。第 4 に、他のユーザーの作業をデモンストレーションするセクションがありません。

Liveweave

Liveweave は、リアルタイム プレビューをオフにする機能など、多くの機能を備えたコード デバッグ プラットフォームです。暗視モードをオンにして、すべてのインターフェイスを暗くして視力を保護することもできます。 Liveweave は 20 を超える JavaScript ライブラリを提供し、SVG もサポートします。内蔵の定規により、測定がより正確になり、見た目も美しくなります。 共通コードデバッグプラットフォーム Liveweave

目に留まったのは、そのシンプルなコラボレーション機能です。これまでに Teamviewer を使用したことがある場合は、どちらも同じように機能することがわかるでしょう。コラボレーション リンクをクリックするだけで、Weave からリンクを共有できます。私のコンピューターのせいなのかインターネットのせいなのかはわかりませんが、若干のラグはありますが、重要な機能としては Liveweave が素晴らしい仕事をしてくれます。

Weave ファイルをダウンロードして単一の HTML 形式として保存することもできます (JS、CSS、HTML をすべて同じファイルに保存するのはあまり美しくありません!)、または個別の HTML 、CSS、および JS ファイルとして保存することもできます (これはわかりました。) ところで、言い忘れていたことの 1 つは、Liveweave には Lorem Ipsum (ランダム テキスト) ジェネレーターも組み込まれているということです。

添付の学習教材

http://www.36zhen.com/my?id=2549

http://www.36zhen.com/my?id=470

http://www.36zhen. /my?id=2997

QR コードをスキャンして w3ctech WeChat 公式アカウントをフォローしてください