新しいタブにHTML/CSS/JavaScriptの実行環境ができるChrome拡張機能 『HTML New Tab』

HTMLやJavascriptの実行環境を新しいタブで

出来るようになるChrome拡張機能。

HTMLを勉強している方、Web制作で

ちょっと試してみたい時などに便利です。

htmlnewtab6

Chrome拡張機能 HTML New Tab

インストール

htmlnewtab1

上記リンク先ページをChromeで開き

「Chromeに追加」をクリックします。

htmlnewtab2

拡張機能を追加をクリックすると

インストール完了です。

レビュー

htmlnewtab3

新しいタブを開くと左側がエディタ、

右側が実行プレビュー画面になります。

エディタ部分はHTML、CSS、JavaScriptに

タブで分かれていてそれぞれに記述できます。

htmlnewtab4

実行は右上のSaveをクリックすると

実行結果が表示されます。

昔はFTPでアップロードして実行結果を見て

という開発をしていましたが、今は便利に

なりました。

htmlnewtab5

JavaScriptも実行出来るようでこれから

勉強したいという方には便利な拡張機能です。

  • コメント: 0

テキストをリアルな音声で話してくれるWebサービス 『Text to Voice Converter』前のページ

Web上で作曲ができるMidファイルの読込保存も可能なWebサービス 『signal』次のページ

関連記事

  1. 言語・開発

    Chromeをスマホ環境にしてくれるChrome拡張機能 『Ripple Emulator』

    モバイル端末の選択や各種情報、GPS情報などを設定してChro…

  2. 言語・開発

    WebページのSEOやPWA対応状況をChromeでチェックできるChrome拡張機能 『Light…

    サイトの表示速度などのパフォーマンスやPWA対応状況などを確認…

  3. 言語・開発

    WebのPCやスマホのレスポンシブデザインの確認ができるChrome拡張機能 『Responsive…

    Web画面の開発に必要な様々な解像度での画面確認がありますが、それ…

  4. 言語・開発

    Webページ上にルーラーやグリッド線を表示できるWeb制作に便利な拡張機能 『Grid Ruler』…

    Webページ上に定規ルーラーを表示、グリッド線を自由に配置できるW…

  5. 言語・開発

    Webページ全体の見出し、アウトラインを一覧マップするChrome拡張機能 『HeadingsMap…

    Webページ全体の見出し、アウトライン構造を一覧マップにしてくれる…

  6. 言語・開発

    iPhone・スマートフォン対応のWebページを表示してくれるChrome拡張機能 IPhone E…

    IPhone・スマートフォン対応のWebページをサクっと表示してくれる…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP